/* Core design tokens */
:root{
  --accent:#00B3B3;
  --dark:#0F172A;
  --light:#F1F5F9;
  --text:#111827;
  --radius:16px;
  --container:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--text);
  background:#fff;
  margin:0;
  line-height:1.5;
}

.container{max-width:var(--container); margin:0 auto; padding:1.2rem;}

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem; border-bottom:1px solid var(--light); background:#fff; position:sticky; top:0; z-index:10;
}
.nav a{margin:0 .6rem; text-decoration:none; color:var(--text); font-weight:500}
.nav a:hover{color:var(--accent)}
.brand img{display:block}

.btn{
  display:inline-block; background:var(--accent); color:#fff; padding:.7rem 1rem;
  border-radius:999px; text-decoration:none; font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.btn:hover{filter:brightness(0.95)}
.btn.secondary{background:var(--dark)}

.hero{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:2rem; align-items:center; padding:2rem 0;
}
.hero .card{
  background:var(--light); padding:1.2rem; border-radius:var(--radius);
}
.hero h1{font-size:clamp(1.8rem,4vw,2.6rem); margin:.2rem 0;}
.hero p{font-size:1.05rem; color:#334155}

.gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; margin:2rem 0;
}
.card{
  border:1px solid var(--light); border-radius:var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column;
}
.card img{width:100%; height:220px; object-fit:cover; display:block}
.card .content{padding:1rem}
.card h3{margin:.4rem 0; font-size:1.1rem}
.card p{margin:.2rem 0; color:#475569}

.contact{
  background:var(--light); padding:1.6rem; border-radius:var(--radius);
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem;
}
.contact .email{font-size:1.1rem; word-break:break-all}
.contact .actions{display:flex; gap:.6rem; align-items:center}

.site-footer{
  display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem; border-top:1px solid var(--light); color:#334155; margin-top:2rem;
}
.site-footer a{color:#334155; text-decoration:none}
.site-footer a:hover{color:var(--accent)}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; padding:1rem;
}
.modal{max-width:min(900px, 95vw); max-height:90vh; overflow:auto; background:#fff; border-radius:var(--radius); padding:1rem;}
.modal img{width:100%; height:auto; display:block; border-radius:12px}
.modal h2{margin:.6rem 0}
.modal-close{position:absolute; top:10px; right:10px; background:var(--dark); color:#fff; border:none; border-radius:10px; padding:.5rem .7rem; cursor:pointer}

.admin-layout{max-width:980px}
.table{width:100%; border-collapse:collapse}
.table th, .table td{border-bottom:1px solid var(--light); padding:.6rem; text-align:left}
.badge{display:inline-block; padding:.2rem .5rem; border-radius:8px; background:var(--light); font-size:.8rem}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}