/* ==========================================================
   AI Ad-finity — Space-Gray Metal + Subtle Blue Glow Theme
   Complete, production-ready stylesheet (mobile-first).
   NOTE: This version bumps typography slightly for clarity.
   ========================================================== */

/* ---------------- Root Design Tokens ---------------- */
:root{
  /* Space gray plate tones */
  --bg:#0a0d12;              /* page base */
  --bg-2:#0c1017;            /* deeper vignette */
  --panel:#101621;           /* card base */
  --panel-2:#121a28;         /* card floor */

  /* Text colors (slightly brighter for clarity) */
  --text:#f3f9ff;            /* main (was #eef5ff) */
  --muted:#bacadd;           /* secondary (was #aebcd1) */
  --dim:#9eb1c6;             /* tertiary notes (was #8fa0b6) */

  /* Accent (subtle neon blue derived from logo) */
  --brand:#2ec5ff;
  --brand-2:#6fe6ff;
  --brand-3:#10a9e4;

  /* Borders / rims */
  --edge: rgba(255,255,255,.09);
  --edge-2: rgba(255,255,255,.14);

  /* Radii / elevation */
  --radius:18px;
  --radius-sm:12px;
  --shadow-1:0 8px 22px rgba(0,0,0,.45);
  --shadow-2:0 16px 38px rgba(0,0,0,.55);
  --shadow-3:0 22px 60px rgba(0,0,0,.6);

  /* Spacing scale (maintains vertical rhythm) */
  --sp-1:.5rem;   /* 8   */
  --sp-2:.75rem;  /* 12  */
  --sp-3:1rem;    /* 16  */
  --sp-4:1.5rem;  /* 24  */
  --sp-5:2rem;    /* 32  */
  --sp-6:3rem;    /* 48  */

  /* Typography scale — bumped slightly for better legibility */
  --fs-0:.98rem;    /* was .94rem  */
  --fs-1:1.06rem;   /* was 1rem    */
  --fs-2:1.18rem;   /* was 1.125   */
  --fs-3:1.32rem;   /* was 1.25    */
  --fs-4:1.56rem;   /* was 1.5     */
  --fs-5:2.0rem;    /* was 1.9     */
  --fs-6:2.52rem;   /* was 2.4     */
  --fs-7:3.30rem;   /* was 3.2     */
}

/* ---------------- Global Resets ---------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: var(--fs-1);
  line-height:1.65;

  /* Metal + aurora background */
  background:
    radial-gradient(1100px 620px at 85% -10%, rgba(46,197,255,.14), transparent 55%),
    radial-gradient(900px 520px at -10% 110%, rgba(46,197,255,.08), transparent 55%),
    linear-gradient(180deg, #0a0d12 0%, #0a0e13 40%, #080b10 100%);
}

/* Smooth type rendering */
body, button, input, textarea{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Media defaults */
img, picture, video, canvas{ display:block; max-width:100%; height:auto; }

/* Links */
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:none; }

/* Focus ring (accessible neon) */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  box-shadow:0 0 0 2px rgba(46,197,255,.75), 0 0 22px rgba(46,197,255,.45);
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Layout & Containers ---------------- */
.container{ width:min(1200px, 92vw); margin-inline:auto; }

/* Sections */
.section{ padding-block: var(--sp-5); }
.section-tight{ padding-block: var(--sp-4); }

/* Page hero / standard hero */
.page-hero{
  padding: clamp(44px, 9dvh, 78px) 0 var(--sp-2);
  background:
    radial-gradient(900px 420px at 60% -20%, rgba(46,197,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(16,22,30,.6), rgba(16,22,30,0) 70%);
}
.page-hero h1{ margin:0; font-size: clamp(var(--fs-5), 3.6vw, var(--fs-6)); letter-spacing:.2px; }

.hero{
  padding: clamp(54px, 10dvh, 96px) 0 var(--sp-4);
  background:
    radial-gradient(800px 420px at 50% -10%, rgba(46,197,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(16,22,30,.5), rgba(16,22,30,0) 70%);
}
.hero-tight{ padding: clamp(28px, 7dvh, 56px) 0 var(--sp-2); }
.hero-inner{ text-align:center; }
.hero h1{
  margin:0 0 8px;
  font-size: clamp(var(--fs-6), 5vw, var(--fs-7));
  letter-spacing:.3px;
  text-shadow:0 1px 0 rgba(255,255,255,.05);
}
.lead{
  color:var(--muted);
  max-width:74ch;
  margin:0 auto 14px;
  font-size: clamp(var(--fs-1), 1.1vw, var(--fs-2));
  line-height:1.75;
}

/* Eyebrow & titles */
.section-head{ text-align:center; margin-bottom: var(--sp-3); }
.eyebrow{
  display:inline-block; letter-spacing:.16em; text-transform:uppercase;
  font-size:.86rem; /* a touch larger for clarity */
  color:var(--brand); margin-bottom:6px;
  text-shadow:0 0 16px rgba(46,197,255,.45);
}
.section-title{
  margin:0 0 8px;
  font-size: clamp(var(--fs-4), 3.2vw, var(--fs-6));
  text-shadow:0 1px 0 rgba(255,255,255,.05);
}

/* Quick muted text helpers */
.muted{ color:var(--muted); }
.small{ font-size:var(--fs-0); }

/* ---------------- Header / Navigation ---------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background: linear-gradient(180deg, rgba(14,19,27,.92), rgba(14,19,27,.68));
  border-bottom:1px solid var(--edge);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  padding-top: env(safe-area-inset-top);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block: var(--sp-2);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900; letter-spacing:.2px; }
.logo{ width:30px; height:30px; filter: drop-shadow(0 0 18px rgba(46,197,255,.45)); }
.brand-text{ font-size: clamp(1.06rem, 1.2vw, 1.14rem); } /* bump */

.nav-right{ display:flex; align-items:center; gap:12px; }

/* Desktop nav (optional — shown when present in HTML) */
.nav-links{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.nav-links a{
  position:relative; padding:6px 10px; border-radius:10px;
  color:var(--text); opacity:.92; text-decoration:none;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.nav-links a::after{
  content:""; position:absolute; inset:auto 8px -2px 8px; height:2px;
  background: linear-gradient(90deg, transparent, rgba(46,197,255,.85), transparent);
  opacity:0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease;
}
.nav-links a:hover{
  opacity:1; color:#f2fbff;
  background: linear-gradient(180deg, rgba(46,197,255,.12), rgba(46,197,255,.06));
  box-shadow: inset 0 0 0 1px rgba(135,230,255,.28), inset 0 12px 34px rgba(46,197,255,.12);
}
.nav-links a:hover::after{ opacity:1; transform: translateY(0); }

/* Desktop visibility helpers */
.nav-links-desktop{ display:none; }
@media (min-width:1025px){
  .nav-links-desktop{ display:flex; }
}

/* Mobile nav trigger (burger) */
.nav-toggle{ display:none; }
.burger{ display:none; cursor:pointer; padding:10px; }
.burger span, .burger span:before, .burger span:after{
  display:block; background:#d4f3ff; height:2px; width:22px; position:relative; border-radius:2px;
  box-shadow:0 0 12px rgba(46,197,255,.35);
}
.burger span:before, .burger span:after{ content:""; position:absolute; left:0; }
.burger span:before{ top:-6px; }
.burger span:after{ top:6px; }

/* Show burger on tablet/phone when desktop links are hidden */
@media (max-width:1024px){
  .burger{ display:block; }
}

/* ---------------- MOBILE DRAWER (Right slide-in) ---------------- */

/* Drawer panel */
#mobile-drawer{
  position: fixed; top:0; right:0; bottom:0;
  width:min(92vw, 380px);
  background: linear-gradient(180deg, #0c121b, #0b1119);
  border-left:1px solid var(--edge);
  box-shadow: -20px 0 46px rgba(0,0,0,.6);
  transform: translateX(102%);
  transition: transform .26s cubic-bezier(.2,.7,.2,1);
  z-index: 99;
  display: flex; flex-direction: column; gap:8px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Drawer header bar */
#mobile-drawer .drawer-bar,
#mobile-drawer .drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 14px;
  border-bottom:1px solid var(--edge);
  position:sticky; top:0; background:#0e1622; 
}
#mobile-drawer .drawer-brand{ display:flex; align-items:center; gap:10px; font-weight:900; }
#mobile-drawer .drawer-brand img{ width:28px; height:28px; }
#mobile-drawer .drawer-close,
#mobile-drawer .nav-close{
  appearance:none; background:transparent; border:0; color:var(--text); font-size:22px; line-height:1; cursor:pointer;
}

/* Drawer links */
#mobile-drawer a{
  display:block; padding:12px 16px; color:var(--text); text-decoration:none; border-radius:10px; margin:2px 8px;
}
#mobile-drawer a:hover{
  background: rgba(255,255,255,.06);
  color:#f6fdff;
}
#mobile-drawer .btn{ margin:8px; }

/* Open states (support either body class or element class/attr) */
body.drawer-open .nav-backdrop,
#mobile-drawer.is-open ~ .nav-backdrop,
#mobile-drawer[aria-hidden="false"] ~ .nav-backdrop{
  opacity:1; pointer-events:auto; background: rgba(2,6,12,.70);
}
body.drawer-open #mobile-drawer,
#mobile-drawer.is-open,
#mobile-drawer[aria-hidden="false"]{
  transform: translateX(0%);
}

/* Prevent background scroll when drawer is open (class added in JS) */
body.drawer-open{ overflow:hidden; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:12px 18px; border-radius:999px;
  background: linear-gradient(180deg, #eefaff, #d8f2ff);
  color:#08202a; text-decoration:none; font-weight:900; letter-spacing:.25px;
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
  font-size: clamp(1rem, 1.1vw, 1.12rem); /* tiny bump */
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255,255,255,.22); }
.btn:active{ transform: translateY(0); }

.btn-primary{
  background: linear-gradient(180deg, #6fe6ff 0%, #36d0ff 38%, #17b6f0 72%, #0aa1e0 100%);
  color:#00141b;
  box-shadow:
    var(--shadow-2),
    0 0 26px rgba(46,197,255,.5),
    inset 0 0 0 1px rgba(170,245,255,.45);
  position:relative; overflow:hidden;
}
.btn-primary::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(120% 120% at -10% 0%, rgba(255,255,255,.28), transparent 40%);
  mix-blend-mode: screen; transform: translateX(-20%);
  animation: btn-shine 3.2s linear infinite;
}
@keyframes btn-shine{
  0% { transform: translateX(-20%); opacity:.0; }
  15%{ opacity:.45; }
  50% { transform: translateX(120%); opacity:.0; }
  100%{ transform: translateX(120%); opacity:.0; }
}
.btn-lg{ padding:14px 22px; font-size: clamp(var(--fs-1), 1.35vw, var(--fs-2)); }

/* CTA rows */
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-row.left{ justify-content:flex-start; }

/* ---------------- Grids ---------------- */
.grid-4{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }

/* ---------------- Cards (metal plates with glow) ---------------- */
.card{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(22,28,40,.92), rgba(18,23,34,.9)),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding: var(--sp-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.35),
    var(--shadow-2);
}
.card::before{
  /* light sweep on hover */
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(46,197,255,.15) 35%, transparent 70%);
  transform: translateX(-40%); opacity:0;
}
.card::after{
  /* inner rim */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 14px 48px rgba(46,197,255,.08);
}
@media (hover:hover){
  .card:hover::before{ animation: sweep 1.15s ease; }
}
@keyframes sweep{
  0%{ opacity:0; transform: translateX(-40%); }
  20%{ opacity:.9; }
  100%{ opacity:0; transform: translateX(40%); }
}

/* Titles/paragraphs inside cards */
.card-title{
  margin:0 0 6px;
  font-size: clamp(var(--fs-2), 1.6vw, var(--fs-3));
  text-shadow: 0 1px 0 rgba(255,255,255,.04); /* tiny clarity */
}
.card-text{
  margin:0; color:var(--muted);
  font-size: clamp(var(--fs-1), 1.05vw, var(--fs-2));
  line-height:1.68; /* slightly looser for clarity */
}

/* Compact variant used on home/workflow previews */
.cards-compact .card{ padding:12px; }
.cards-compact .card-title{ margin:0 0 2px; font-size:1.02rem; } /* +0.02 */
.cards-compact .card-text{ margin:0; color:var(--muted); }

/* ---------------- Pills / badges ---------------- */
.kickers{ display:flex; flex-wrap:wrap; gap:10px; margin: var(--sp-2) 0 var(--sp-3); }
.pill-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.badge{
  display:inline-flex; align-items:center; white-space:nowrap; line-height:1;
  padding:7px 12px; border-radius:999px; font-size:clamp(.92rem,.9rem,1rem);
  background: linear-gradient(180deg, rgba(46,197,255,.18), rgba(46,197,255,.08));
  border:1px solid rgba(135,230,255,.4);
  color:#e8fbff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 12px rgba(46,197,255,.18);
}

/* ---------------- Quick Info Strip ---------------- */
.quickbar{
  background: linear-gradient(180deg, rgba(18,23,33,.85), rgba(18,23,33,.6));
  border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);
  margin-top:-12px;
  position:relative; z-index:2;
}
.quickbar-row{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; padding:10px 0; }
.quick-item{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--edge);
  border-radius:var(--radius-sm); padding:12px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.35), var(--shadow-1);
}
.qi-dot{
  width:10px; height:10px; border-radius:999px; background: var(--brand);
  box-shadow:0 0 14px rgba(46,197,255,.6), 0 0 2px rgba(46,197,255,.9) inset; margin-top:6px;
}
.qi-title{ font-weight: 800; margin-bottom:2px; letter-spacing:.2px; }
.qi-text{ color:var(--muted); font-size:1rem; line-height:1.6; }

/* ---------------- FAQ ---------------- */
.faq .faq-item{
  background: linear-gradient(180deg, rgba(18,23,34,.92), rgba(16,20,30,.9));
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.35), var(--shadow-1);
}
.faq summary{ cursor:pointer; font-weight:900; padding-block: var(--sp-1); display:flex; align-items:center; gap:10px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"▾"; margin-left:auto; opacity:.85; transition: transform .18s ease; text-shadow:0 0 10px rgba(46,197,255,.45);
}
.faq details[open] summary::after{ transform: rotate(-180deg); }
.faq-answer{ color:var(--muted); padding-bottom: var(--sp-1); }

/* ---------------- Contact ---------------- */
.contact .contact-card{
  background: linear-gradient(180deg, rgba(24,30,44,.92), rgba(20,26,38,.9)), linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding: var(--sp-4);
  max-width:740px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.45), var(--shadow-2);
}
.qr-block{ margin: var(--sp-3) 0; display:flex; gap: var(--sp-3); align-items:center; flex-wrap:wrap; }
.qr-wrap img{ border-radius:10px; border:1px solid var(--edge); box-shadow:0 10px 26px rgba(0,0,0,.55); }

/* ---------------- Media Frames / Galleries ---------------- */
.samples.section{ padding-top: var(--sp-4); }
.media-trio{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(8px, 1.5vw, 16px); }
.media-card{ margin:0; padding:0; border:0; background:none; }

.media-frame{
  position:relative; overflow:hidden; border-radius: var(--radius);
  aspect-ratio: 2 / 3;  /* portrait (1024x1536) */
  background: linear-gradient(180deg, rgba(18,23,34,.96), rgba(14,19,28,.95));
  border:1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.4), var(--shadow-3), 0 0 46px rgba(46,197,255,.10);
}
.media-frame::after{
  /* faint animated grid glow */
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 70% at 80% -10%, rgba(46,197,255,.16), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(46,197,255,.06) 30%, transparent 70%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen; animation: grid-sheen 6s linear infinite; opacity:.85;
}
@keyframes grid-sheen{ 0%{ transform: translateY(-8px); } 50%{ transform: translateY(8px); } 100%{ transform: translateY(-8px); } }

.media-frame img,
.media-frame video{ width:100%; height:100%; object-fit: cover; display:block; }
.media-video{ background:#000; }
.media-caption{ text-align:center; font-size:1rem; color:var(--muted); margin-top:6px; }

@media (hover:hover){
  .media-frame:hover{ transform: translateY(-2px); transition: transform .16s ease, box-shadow .16s ease; box-shadow: var(--shadow-3), 0 0 60px rgba(46,197,255,.16); }
}

/* ---------------- Workflow (How page) ---------------- */
.outputs-samples{ margin-top:18px; }

/* 2x2 compact portrait grid for step images */
.media-grid-2{ display:grid; gap: clamp(8px, 1.5vw, 14px); justify-content:center; }
.media-grid-2.compact{ grid-template-columns: repeat(2, minmax(240px, 340px)); }
.step-card .step-title{ margin:0 0 4px; font-size:1.02rem; } /* +0.02 */
.step-card .step-blurb{ margin:0 0 8px; font-size:1rem; }  /* +0.05 */
.media-grid-2.compact + .cta-row{ margin-top:22px; }

/* ---------------- CTA Strip ---------------- */
.cta-strip{
  background: linear-gradient(180deg, rgba(16,21,31,.9), rgba(16,21,31,.65));
  border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
}
.cta-inline{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; }

/* ---------------- Footer ---------------- */
.site-footer{
  border-top:1px solid var(--edge);
  background: linear-gradient(180deg, #0a0e14, #090d12);
  padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));
  box-shadow:
    inset 0 8px 24px rgba(46,197,255,.06),
    0 -12px 36px rgba(0,0,0,.45);
}
.footer-grid{ display:grid; gap:18px; align-items:center; grid-template-columns: 1.2fr 1fr auto; }
.f-brand{ display:flex; align-items:center; gap:12px; }
.f-links{ display:flex; flex-wrap:wrap; gap:12px; }
.f-links a{ color:var(--muted); text-decoration:none; }
.f-links a:hover{ color:#f0fdff; text-shadow:0 0 12px rgba(46,197,255,.35); }
.footer-cta{ display:flex; align-items:center; gap:14px; }
.micro{ color:var(--muted); grid-column:1/-1; }

/* Floating WhatsApp FAB (single, consolidated) */
.wa-fab{
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; display: grid; place-items: center;
  border-radius:50%;
  background: linear-gradient(180deg, #6fe6ff, #10a9e4);
  color:#021318; text-decoration:none; font-size:24px; font-weight:900;
  box-shadow: 0 16px 34px rgba(0,0,0,.6), 0 0 32px rgba(46,197,255,.6);
  z-index: 12000;
}
.wa-fab:hover{ transform: translateY(-1px); }

/* ---------------- Responsive Breakpoints ---------------- */
@media (max-width: 1200px){
  .container{ width:min(1100px, 94vw); }
}
@media (max-width: 1024px){
  .grid-4{ grid-template-columns: 1fr 1fr; }
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .media-trio{ grid-template-columns: 1fr 1fr; }
  .quickbar-row{ grid-template-columns: 1fr 1fr; }
  .hero h1{ font-size: clamp(var(--fs-5), 4.2vw, var(--fs-6)); }
}
@media (max-width: 920px){
  .cta-inline{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 768px){
  .footer-grid{ grid-template-columns:1fr; }

  /* legacy dropdown (if used anywhere) */
  .nav-links{
    position:fixed; inset:58px 0 auto 0; background:rgba(11,15,22,.98);
    padding:16px; gap:8px; display:none; flex-direction:column; border-top:1px solid var(--edge);
    box-shadow:0 12px 24px rgba(0,0,0,.55);
  }
  .nav-toggle:checked ~ .burger + .nav-links{ display:flex; }
  .page-hero{ padding: clamp(38px, 8dvh, 64px) 0 var(--sp-2); }
}
@media (max-width: 640px){
  .media-trio{ grid-template-columns: 1fr; }
  .quickbar-row{ grid-template-columns: 1fr; }
  .media-grid-2.compact{ grid-template-columns: minmax(220px, 1fr); }
  .cta-row{ gap:10px; }
}
@media (max-width: 480px){
  .grid-4, .grid-3{ grid-template-columns:1fr; }
  .hero{ padding-top: clamp(32px, 9dvh, 52px); }
  .badge{ font-size:.9rem; }
}

/* ---------------- Fine-tuning Spacing for CTAs ---------------- */
/* Keep “Chat on WhatsApp” buttons from hugging preceding blocks */
section .grid-3 + .cta-row,
.cards-compact + .cta-row,
.media-grid-2.compact + .cta-row,
section .grid-3 + .cta-row{
  margin-top:26px;
}
@media (max-width:640px){
  section .grid-3 + .cta-row,
  .cards-compact + .cta-row,
  .media-grid-2.compact + .cta-row{
    margin-top:18px;
  }
}

/* ---------------- Accessibility helpers ---------------- */
.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ==========================================================
   CREATIVE ADD-ONS PACK — premium sci-fi finishes
   (unchanged; respects reduced motion)
   ========================================================== */
.hero::after,
.page-hero::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:38%;
  pointer-events:none; z-index:0;
  background:
    conic-gradient(from 210deg at 75% -20%, rgba(110,230,255,.10), transparent 20%),
    linear-gradient(180deg, rgba(46,197,255,.10), transparent 70%);
  filter: blur(10px) saturate(1.05);
  opacity:.55;
  mix-blend-mode: screen;
  animation: hero-beam 16s linear infinite;
}
@keyframes hero-beam{
  0%   { transform: translateY(0); opacity:.55; }
  50%  { transform: translateY(6px); opacity:.65; }
  100% { transform: translateY(0); opacity:.55; }
}
@media (prefers-reduced-motion: reduce){
  .hero::after,
  .page-hero::after{ animation:none; }
}

.section-head{ position:relative; }
.section-head::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:min(220px, 50%); height:2px; border-radius:2px;
  background:
    linear-gradient(90deg, transparent, rgba(46,197,255,.9), transparent);
  box-shadow: 0 0 12px rgba(46,197,255,.45);
  opacity:.8;
}

.card::after{
  background-image:
    radial-gradient(8px 8px at 12px 12px, rgba(170,243,255,.9), rgba(46,197,255,.55) 55%, transparent 70%),
    radial-gradient(8px 8px at calc(100% - 12px) 12px, rgba(170,243,255,.9), rgba(46,197,255,.55) 55%, transparent 70%),
    radial-gradient(8px 8px at 12px calc(100% - 12px), rgba(170,243,255,.9), rgba(46,197,255,.55) 55%, transparent 70%),
    radial-gradient(8px 8px at calc(100% - 12px) calc(100% - 12px), rgba(170,243,255,.9), rgba(46,197,255,.55) 55%, transparent 70%),
    conic-gradient(from 0deg, rgba(46,197,255,.16), rgba(46,197,255,.04), rgba(46,197,255,.16));
  background-origin:border-box;
  background-repeat:no-repeat;
  animation: card-holo 7s ease-in-out infinite;
}
@keyframes card-holo{
  0%  { box-shadow: inset 0 14px 48px rgba(46,197,255,.08); }
  50% { box-shadow: inset 0 18px 58px rgba(46,197,255,.11); }
  100%{ box-shadow: inset 0 14px 48px rgba(46,197,255,.08); }
}
@media (prefers-reduced-motion: reduce){
  .card::after{ animation:none; }
}

@media (hover:hover){
  .media-frame img,
  .media-frame video{
    transition: transform .8s cubic-bezier(.2,.6,.2,1);
  }
  .media-frame:hover img,
  .media-frame:hover video{
    transform: scale(1.03);
  }
}

.cta-row .btn{ transition: transform .14s ease, box-shadow .14s ease; }
@media (hover:hover){
  .cta-row .btn:hover{ transform: translateY(-2px) scale(1.02); }
}

/* ==========================================================
   GLOBAL TYPOGRAPHY & CONTRAST OVERRIDE (site-wide)
   ========================================================== */

/* 1) Bump the base type scale + brighten text tokens */
:root{
  /* brighter, crisper text on dark */
  --text: #ffffff;           /* main text everywhere */
  --muted: #e2eefb;          /* secondary text (still bright) */

  /* slightly larger site-wide sizes (keeps your rem/variables) */
  --fs-1: clamp(1.06rem, 1.15vw, 1.16rem);  /* base body */
  --fs-2: clamp(1.20rem, 1.35vw, 1.28rem);
  --fs-3: clamp(1.34rem, 1.55vw, 1.42rem);
}

/* 2) Global body copy rhythm */
body{
  font-size: var(--fs-1);
  line-height: 1.82;
  color: var(--text);
  text-rendering: optimizeLegibility;
}

/* 3) Make all standard text regular weight (no accidental bold) */
p, li, dd, dt,
blockquote, figcaption,
.card-text, .step-blurb, .qi-text, .media-caption,
.faq .faq-answer, .quickbar .qi-text,
.section-head .muted, .lead,
table, th, td {
  font-weight: 400;
  letter-spacing: 0.1px;
}

/* keep “muted” readable but clearly secondary */
.muted{ color: var(--muted); }

/* 4) Summaries and other clickable text: readable, not heavy */
summary{
  font-weight: 500;
  color: var(--text);
  line-height: 1.8;
}

/* 5) Inputs/buttons inherit the improved base size without blowing up */
button, .btn, input, select, textarea{
  font-size: clamp(1.02rem, 1.08vw, 1.14rem);
  font-weight: 700; /* keep buttons strong for affordance */
}

/* 6) Fine-tune card & FAQ blocks for crispness */
.card-title{
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.card-text{
  color: var(--muted);
  line-height: 1.78;
}
.faq .faq-item{ padding: 16px 18px; }
.faq summary{
  font-size: clamp(1.06rem, 1.2vw, 1.22rem);
  font-weight: 500;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.faq .faq-answer{
  font-size: clamp(1.04rem, 1.1vw, 1.16rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.85;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* 7) Mobile: keep things comfy but not oversized */
@media (max-width: 640px){
  :root{
    --fs-1: 1.08rem;   /* base */
    --fs-2: 1.22rem;
    --fs-3: 1.36rem;
  }
  .faq .faq-item{ padding: 16px; }
  .faq summary{ font-size: 1.12rem; }
  .faq .faq-answer{ font-size: 1.08rem; }
}

/* ==========================================================
   HEADER LOGO — force larger size (robust selectors)
   ========================================================== */
.site-header .logo,
.site-header img.logo,
.nav .brand .logo,
.nav .brand img,
.brand .logo,
.brand > img,
.brand img[alt*="logo" i],
.brand img[alt*="ad-finity" i]{
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(46,197,255,.55));
}

/* bump word-mark size next to the icon if you use a text span */
.brand-text{
  font-size: clamp(1.12rem, 1.6vw, 1.28rem) !important;
  font-weight: 900;
  letter-spacing: .2px;
}

@media (max-width: 768px){
  .site-header .logo,
  .site-header img.logo,
  .nav .brand .logo,
  .nav .brand img,
  .brand .logo,
  .brand > img{
    width: 38px !important;
    height: 38px !important;
  }
  .brand-text{ font-size: 1.06rem !important; }
}

/* ==========================================================
   SITE-WIDE WATERMARK — big logo behind all content
   ========================================================== */
html{ position: relative; }
body{ position: relative; z-index: 1; }

html::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* content gets z:1 below */
  background:
    radial-gradient(520px 420px at 50% 35%, rgba(46,197,255,.10), transparent 20%),
    url("/static/img/logo-watermark.png") center 18vh / clamp(420px, 46vw, 820px) no-repeat;
  opacity:.25;
  filter: saturate(1.05) drop-shadow(0 0 26px rgba(46,197,255,.28));
  mix-blend-mode: normal;
}
@supports (background-image: image-set(url("") 1x)){
  html::before{
    background-image:
      radial-gradient(520px 420px at 50% 35%, rgba(46,197,255,.10), transparent 20%),
      image-set(
        url("/static/img/logo-watermark.png") 1x,
        url("/static/img/logo-watermark@2x.png") 2x
      );
  }
}

.site-header, main, .site-footer, section{
  position: relative;
  z-index: 1;
}

/* Mobile tweaks for watermark scale/position */
@media (max-width: 1024px){
  html::before{
    background-position: center 22vh;
    background-size: clamp(360px, 58vw, 640px);
    opacity: 1;
  }
}
@media (max-width: 640px){
  html::before{
    background-position: center 24vh;
    background-size: clamp(300px, 72vw, 520px);
    opacity: .06;
  }
}

/* =========================
   BRAND LOGO SIZING — GLOBAL
   ========================= */
:root{
  --brand-logo-size: 90px;     /* header logo target size */
  --footer-logo-size:150px;    /* footer logo target size */
}
.site-header .nav{
  min-height: 70px !important;
  align-items: center !important;
}
.site-header .brand,
.site-header .nav .brand{ display:flex !important; align-items:center !important; gap:12px !important; }
.site-header .brand :is(img, picture img, svg, .logo){
  inline-size: var(--brand-logo-size) !important;
  block-size: var(--brand-logo-size) !important;
  width: var(--brand-logo-size) !important;
  height: var(--brand-logo-size) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: inline-block !important;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 0 18px rgba(46,197,255,.55));
}
.site-header .brand svg[width],
.site-header .brand svg[height]{
  width: var(--brand-logo-size) !important;
  height: var(--brand-logo-size) !important;
}
.site-footer .f-brand{ display:flex !important; align-items:center !important; gap:12px !important; }
.site-footer .f-brand :is(img, picture img, svg, .logo){
  inline-size: var(--footer-logo-size) !important;
  block-size: var(--footer-logo-size) !important;
  width: var(--footer-logo-size) !important;
  height: var(--footer-logo-size) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: inline-block !important;
  filter: drop-shadow(0 0 14px rgba(46,197,255,.45));
}
.brand-text{
  font-size: clamp(1.16rem, 1.7vw, 1.34rem) !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  line-height: 1.1 !important;
}
@media (max-width: 768px){
  :root{ --brand-logo-size: 46px; --footer-logo-size: 36px; }
}

/* =========================
   HOME samples: taller tiles
   ========================= */
:root{
  --home-sample-height: 640px; /* 600–720px looks great */
}
.samples .media-frame{
  aspect-ratio: auto !important;
  height: var(--home-sample-height);
}
@media (max-width: 1200px){
  .samples .media-frame{ height: 580px; }
}
@media (max-width: 992px){
  .samples .media-frame{ height: 520px; }
}
@media (max-width: 768px){
  .samples .media-frame{
    height: auto;
    aspect-ratio: 2 / 3 !important;
  }
}

/* ==========================================================
   HOW page → make 4 step images taller
   ========================================================== */
:root{
  --how-step-height: 660px;   /* 600–720px works well */
}
.media-grid-2.compact .media-frame{
  aspect-ratio: auto !important;
  height: var(--how-step-height) !important;
}
@media (max-width: 1200px){
  .media-grid-2.compact .media-frame{ height: 580px !important; }
}
@media (max-width: 992px){
  .media-grid-2.compact .media-frame{ height: 520px !important; }
}
@media (max-width: 768px){
  .media-grid-2.compact .media-frame{
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
  }
}

/* =========================
   SIMPLE LIST DROPDOWN (legacy)
   ========================= */
@media (max-width:1024px){
  .nav-links.nav-dropdown{
    width: min(94vw, 420px);
    max-height: min(90vh, 720px);
    overflow: auto;
    padding: 14px 16px 16px;
    background: #0c121b;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 46px rgba(0,0,0,.6), 0 0 0 1px rgba(8,12,18,.85) inset;
  }
  .nav-cta{ position: sticky; top: -14px; width:100%; margin-bottom: 8px; z-index: 2; }
  .nav-section{ background: transparent; border: 0; padding: 0; display: block; }
  .nav-label{
    margin: 10px 2px 6px; padding: 0;
    font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--dim);
  }
  .nav-section a{
    display: block;
    padding: 12px 2px;
    margin: 0;
    line-height: 1.28;
    font-size: 1.06rem;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
  }
  .nav-section a + a{ border-top: 1px solid rgba(255,255,255,.07); }
  .nav-section a:hover{ background: rgba(255,255,255,.06); color: #f6fdff; }
  .nav-links a[aria-current="page"]{
    background: rgba(110,230,255,.10);
    outline: 1px solid rgba(110,230,255,.35);
    outline-offset: 1px;
  }
  .nav-backdrop{ background: rgba(2,6,12,.70); }
}
/* ===== Desktop vs Mobile header visibility ===== */
.nav-links{display:flex; gap:12px; align-items:center;}
@media (max-width:1024px){
  .nav-links{display:none;}
  .burger{display:block;}
}

/* ===== Drawer (single source of truth) ===== */
#mobile-drawer{
  position: fixed;
  top: 0;
  right: 0;
  translate: 100% 0;                 /* off-screen by default */
  width: min(88vw, 390px);
  height: 100dvh;
  padding: 14px 14px 18px;
  display: grid;
  align-content: start;
  gap: 10px;
  background: #0c121b;               /* solid panel */
  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: -28px 0 60px rgba(0,0,0,.55);
  transition: translate .28s cubic-bezier(.22,.67,.25,1);
  z-index: 11000;
}
.drawer-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding: 2px 0 8px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.drawer-brand{display:flex; align-items:center; gap:8px; font-weight:900;}
.drawer-brand img{width:28px; height:28px;}
.drawer-close{
  appearance:none; background:transparent; border:0; color:#fff;
  font-size:24px; line-height:1; padding:6px; cursor:pointer;
}

/* Drawer links: plain list, no boxes */
#mobile-drawer > a{
  display:block; padding:12px 6px; border-radius:8px; color:var(--text); text-decoration:none;
}
#mobile-drawer > a + a{ border-top:1px solid rgba(255,255,255,.07); }
#mobile-drawer > a:hover{ background:rgba(255,255,255,.06); color:#f6fdff; }

/* Backdrop */
.nav-backdrop{
  position: fixed; inset: 0; background: rgba(2,6,12,.72);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  z-index: 10000;
}

/* Open state (toggled by JS) */
body.nav-open .nav-backdrop{ opacity: 1; pointer-events: auto; }
body.nav-open #mobile-drawer{ translate: 0 0; }

/* Prevent body scroll when drawer open */
body.nav-open{ overflow: hidden; touch-action: none; overscroll-behavior: contain; }
/* ===== Mobile Drawer Overlay (slide-in from right) ===== */
html, body { overflow-x: hidden; }                 /* kill sideways scroll */

#mobile-drawer{
  position: fixed;               /* take out of document flow */
  top: 0;
  right: 0;
  width: min(92vw, 420px);       /* drawer width */
  height: 100dvh;                /* full viewport height incl. iOS UI */
  background: #0c121b;           /* same palette as site */
  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: -24px 0 60px rgba(0,0,0,.55);
  transform: translateX(100%);   /* start offscreen */
  transition: transform .28s ease;
  will-change: transform;
  z-index: 1100;                 /* above page, below FAB */
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* drawer contents */
#mobile-drawer .drawer-bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
}
#mobile-drawer .drawer-content,
#mobile-drawer :is(a, button){
  display: block;
}
#mobile-drawer a{
  color: var(--text);
  padding: 14px 16px;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.06);
}
#mobile-drawer a:hover{ background: rgba(255,255,255,.06); }

/* backdrop that darkens the page */
.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,12,.70);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1000;
}

/* open state */
body.nav-open { overflow: hidden; }                /* freeze page scroll */
body.nav-open #mobile-drawer{ transform: translateX(0); }
body.nav-open .nav-backdrop{ opacity: 1; pointer-events: auto; }

/* hide the drawer above tablet/desktop */
@media (min-width:1025px){
  #mobile-drawer, .nav-backdrop{ display:none !important; }
}
/* ==== FIX: Drawer must sit above backdrop and be opaque/clickable ==== */
html, body { overflow-x: hidden; }

/* Backdrop always below the drawer */
.scrim.nav-backdrop,
.nav-backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(2,6,12,.70) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 14000 !important;   /* BELOW drawer */
}

/* Drawer panel */
#mobile-drawer{
  position: fixed !important;
  top: 0; right: 0;
  width: min(92vw, 420px);
  height: 100dvh;
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: 15000 !important;   /* ABOVE everything */
  display: flex; flex-direction: column;
  overflow: auto; -webkit-overflow-scrolling: touch;
  pointer-events: auto !important;
  isolation: isolate;          /* own stacking context */
  /* make it solid (no transparency) */
  background: linear-gradient(180deg, #0c121b, #0c121b) !important;
  box-shadow: -28px 0 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Open state */
body.nav-open { overflow: hidden; }
body.nav-open #mobile-drawer{ transform: translateX(0); }
body.nav-open .nav-backdrop{ opacity: 1; pointer-events: auto; }

/* Drawer header + close button (still clickable) */
#mobile-drawer .drawer-bar{
  position: sticky; top: 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; background:#0e1622; z-index: 1;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#mobile-drawer .drawer-close{
  width:40px; height:40px; border:0; border-radius:10px; cursor:pointer;
  display:grid; place-items:center; color:#e7fbff;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
#mobile-drawer .drawer-close:hover{ background: rgba(255,255,255,.12); }

/* Drawer links */
#mobile-drawer a{
  display:block; padding:14px 16px; color:var(--text) !important; text-decoration:none;
  border-top:1px solid rgba(255,255,255,.06);
  pointer-events: auto !important;      /* belt-and-suspenders */
}
#mobile-drawer a:hover{ background: rgba(255,255,255,.06); }

/* Keep floating WhatsApp button under the drawer */
.wa-fab{ z-index: 13000 !important; }

/* Safety: any hero/section glow layers must never block clicks */
.hero::after, .page-hero::after{ pointer-events: none !important; }
/* ===== Drawer layering & interaction ===== */
html, body { overflow-x: hidden; }

#mobile-drawer{
  position: fixed;
  top: 0; right: 0;
  width: min(92vw, 420px);
  height: 100dvh;
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: 14001;                    /* above everything */
  display: flex; flex-direction: column;
  pointer-events: auto;
}
.nav-backdrop{
  position: fixed; inset: 0;
  background: rgba(2,6,12,.70);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 14000;                    /* just under drawer */
}
body.nav-open { overflow: hidden; }
body.nav-open #mobile-drawer{ transform: translateX(0); }
body.nav-open .nav-backdrop{ opacity: 1; pointer-events: auto; }

/* Keep FAB below the drawer */
.wa-fab{ z-index: 13000; }

/* Drawer header & close button */
#mobile-drawer .drawer-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#mobile-drawer .drawer-close{
  width:40px; height:40px; border:0; border-radius:10px;
  display:grid; place-items:center; cursor:pointer;
  background: rgba(255,255,255,.06);
  color:#e7fbff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
#mobile-drawer .drawer-close:hover{ background: rgba(255,255,255,.10); }

/* Drawer links */
#mobile-drawer a{
  display:block; padding:14px 16px; color:var(--text);
  text-decoration:none; border-top:1px solid rgba(255,255,255,.06);
}
#mobile-drawer a:hover{ background: rgba(255,255,255,.06); }

/* ===== Burger button – neon + animate to X ===== */
.burger{
  --w: 44px; --h: 44px;
  width: var(--w); height: var(--h);
  border: 0; border-radius: 12px;
  background: linear-gradient(180deg, rgba(46,197,255,.18), rgba(46,197,255,.08));
  box-shadow: inset 0 0 0 1px rgba(135,230,255,.35), 0 8px 24px rgba(0,0,0,.35);
  display: grid; place-items: center; cursor: pointer;
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:22px; height:2px; border-radius:2px;
  background:#d4f3ff; box-shadow:0 0 12px rgba(46,197,255,.35);
  position:relative; transition: transform .22s ease, opacity .22s ease;
}
.burger span::before{ position:absolute; top:-6px; left:0; }
.burger span::after { position:absolute; top: 6px; left:0; }

/* Animate to X when open */
body.nav-open .burger span{ background: transparent; box-shadow:none; }
body.nav-open .burger span::before{ transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }
/* ——— Kill the header “glass” when the drawer is open ——— */
body.nav-open .site-header{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #0c121b !important;          /* solid, no alpha */
  box-shadow: 0 8px 22px rgba(0,0,0,.45);   /* keep depth */
}

/* Drawer stays opaque and above everything */
#mobile-drawer{
  position: fixed !important;
  inset: 0 0 0 auto !important;            /* right side */
  width: min(92vw, 420px) !important;
  height: 100dvh !important;
  transform: translateX(100%);
  transition: transform .28s ease;
  background: #0c121b !important;          /* solid */
  z-index: 15000 !important;
  isolation: isolate;                       /* stop blending */
  overflow: auto;
}

#mobile-drawer::before{
  content:""; position:absolute; inset:0;
  background:#0c121b; z-index:-1;          /* hard paint layer */
}

/* Backdrop beneath drawer */
.nav-backdrop{
  position: fixed !important; inset:0 !important;
  background: rgba(2,6,12,.70) !important;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
  z-index: 14000 !important;
}

/* Open state */
body.nav-open { overflow:hidden; }
body.nav-open #mobile-drawer{ transform: translateX(0); }
body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }

/* Make sure nothing above the page intercepts taps */
.hero::after, .page-hero::after{ pointer-events:none !important; }

/* Keep FAB under the drawer */
.wa-fab{ z-index: 13000 !important; }

/* ======== FIX: force burger hidden on desktop ======== */
@media (min-width:1025px){
  .burger{ display: none !important; }
}
/* === FIX: Solid mobile header + correct stacking so links are clickable === */
@media (max-width:1024px){
  .site-header{
    background: #0c121b !important;      /* opaque, no see-through */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 6px 22px rgba(0,0,0,.45);
    z-index: 14000 !important;            /* BELOW the drawer */
  }
}

/* Drawer always above header; backdrop just under drawer */
#mobile-drawer{ z-index: 16000 !important; background:#0c121b !important; }
.nav-backdrop{  z-index: 15000 !important; }

/* While drawer is open, don't let the header intercept taps */
body.nav-open .site-header{ pointer-events: none !important; }

/* Optional: ensure content doesn’t sit under the sticky header on phones */
@media (max-width:1024px){
  main{ padding-top: 70px; } /* adjust if your header is taller */
}