/* ---------- Tokens ---------- */
:root{
  --primary:#006EB9;
  --primary-dark:#00588F;
  --primary-tint:#E7F2FA;
  --accent-yellow:#D4CB1F;
  --accent-red:#E4372E;

  --bg:#F3F6F9;
  --surface:#FFFFFF;
  --surface-2:#EEF3F8;
  --text:#101820;
  --text-muted:#54677A;
  --border:#DCE5EC;
  --shadow: 0 18px 40px -18px rgba(16,24,32,.16);

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --font-display:'Sora', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}

html[data-theme="dark"]{
  --bg:#0A1420;
  --surface:#101D2B;
  --surface-2:#152435;
  --text:#EAF1F7;
  --text-muted:#8FA3B5;
  --border:#223547;
  --primary-tint:#122B3E;
  --shadow: 0 18px 44px -18px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  transition:background .25s ease, color .25s ease;
  position:relative;
  overflow-x:hidden;
}

.bg-shape{
  position:fixed;
  top:-30%;
  right:-18%;
  width:60vw;
  height:60vw;
  max-width:820px;
  max-height:820px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--primary-tint), transparent 70%);
  z-index:0;
  pointer-events:none;
}

/* ---------- Topbar ---------- */
.topbar{
  position:relative;
  z-index:2;
  padding:22px 24px 0;
}
.topbar-inner{
  max-width:960px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand-logo{
  height:34px;
  display:block;
}
html[data-theme="dark"] .brand-logo{
  filter:brightness(0) invert(1);
}
.topbar-controls{
  display:flex;
  align-items:center;
  gap:10px;
}
.pill-btn{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  letter-spacing:.02em;
  transition:border-color .2s ease, transform .15s ease;
}
.pill-btn:hover{border-color:var(--primary);}
.pill-btn:active{transform:scale(.96);}

.icon-btn{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:50%;
  cursor:pointer;
  transition:border-color .2s ease, transform .15s ease;
}
.icon-btn:hover{border-color:var(--primary);}
.icon-btn:active{transform:scale(.94);}
.icon-btn .icon-moon{display:none;}
html[data-theme="dark"] .icon-btn .icon-sun{display:none;}
html[data-theme="dark"] .icon-btn .icon-moon{display:block;}

:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* ---------- Layout ---------- */
.wrap{
  position:relative;
  z-index:1;
  max-width:960px;
  margin:0 auto;
  padding:64px 24px 40px;
}

.hero{
  max-width:620px;
  margin-bottom:52px;
}
.eyebrow-badge{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  color:var(--primary);
  background:var(--primary-tint);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(32px, 5vw, 46px);
  line-height:1.12;
  font-weight:700;
  margin:0 0 16px;
  color:var(--text);
}
.hero-sub{
  font-size:16px;
  line-height:1.6;
  color:var(--text-muted);
  margin:0;
  max-width:520px;
}

/* ---------- Contact cards ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:44px;
}
.contact-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, border-color .2s ease;
}
.contact-card:hover{
  transform:translateY(-3px);
  border-color:var(--primary);
}
.card-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  color:#fff;
}
.contact-card--whatsapp .card-icon{background:#25D366;}
.contact-card--email .card-icon{background:var(--primary);}

.contact-card h2{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  margin:0 0 8px;
}
.contact-card p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-muted);
  margin:0 0 24px;
  flex-grow:1;
}

.cta-btn{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-start;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  padding:13px 18px;
  border-radius:var(--radius-md);
  transition:background .2s ease, transform .15s ease;
}
.contact-card--whatsapp .cta-btn{background:#25D366;}
.cta-btn:hover{filter:brightness(1.06);}
.cta-btn:active{transform:scale(.98);}
.cta-btn--outline{
  background:transparent;
  border:1.5px solid var(--primary);
  color:var(--primary);
}
.cta-value{
  font-size:13px;
  font-weight:500;
  opacity:.85;
}

/* ---------- Hours ---------- */
.hours{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface-2);
  border-radius:var(--radius-md);
  padding:14px 20px;
  font-size:14px;
  color:var(--text-muted);
}
.hours-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-yellow);
  flex-shrink:0;
}
.hours strong{color:var(--text);}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;
  z-index:1;
  text-align:center;
  padding:32px 24px 40px;
  color:var(--text-muted);
  font-size:13px;
}
.site-footer p{margin:4px 0;}
.footer-copy{opacity:.75;}

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .contact-grid{grid-template-columns:1fr;}
  .wrap{padding-top:44px;}
}
@media (max-width: 480px){
  .topbar-inner{flex-wrap:wrap;}
  .hero h1{font-size:30px;}
}

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