/* =====================================================================
   Responsive + glass header / footer — loaded after every theme
   ===================================================================== */

/* Theme-aware glass colours (dark themes by default) */
:root{
  --glass:rgba(10,14,28,.62);
  --glass-strong:rgba(10,14,28,.86);
  --glass-line:rgba(255,255,255,.10);
  --glass-ink:#fff;
  --glass-muted:rgba(255,255,255,.72);
  --glass-hover:rgba(255,255,255,.08);
  --foot-glass:rgba(255,255,255,.04);
  --foot-line:rgba(255,255,255,.09);
}
body.theme-bigz,body.theme-bigz-red{
  --glass:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.90);
  --glass-line:rgba(15,23,42,.08);
  --glass-ink:#0f172a;
  --glass-muted:#4b5563;
  --glass-hover:rgba(15,23,42,.05);
}
body.theme-bigz{--foot-glass:rgba(255,255,255,.7);--foot-line:rgba(15,23,42,.08)}

/* No sideways scrolling, ever */
html,body{overflow-x:clip}
img,svg,video,iframe{max-width:100%}
.prose table{display:block;overflow-x:auto}
.legal{flex-wrap:wrap;gap:6px 16px}

/* ---------------- Glass header ---------------- */
/* The blur lives on ::before so the fixed mobile menu is not trapped inside the header */
body .nav,body .nav.scrolled,body .nav.open{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border-bottom:0!important}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--glass-line);transition:background .3s,box-shadow .3s,opacity .3s}
.nav.scrolled::before{background:var(--glass-strong);box-shadow:0 10px 30px rgba(2,6,23,.12)}
/* Dark themes: fully clear over the home hero until the page scrolls */
body.is-home:not(.theme-bigz):not(.theme-bigz-red) .nav:not(.scrolled):not(.open)::before{opacity:0}
.nav-in{transition:height .3s}
.nav.scrolled .nav-in{height:64px}
.brand img{transition:height .3s}
.nav.scrolled .brand img{height:38px}
.menu a:not(.btn){color:var(--glass-muted)}
.menu a:not(.btn):hover,.menu a.active{color:var(--glass-ink);background:var(--glass-hover)}
.menu a.active{box-shadow:inset 0 -2px 0 var(--blue)}
.brand{color:var(--glass-ink)}
.burger span{background:var(--glass-ink)}
.dd-menu{background:var(--glass-strong);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border:1px solid var(--glass-line)}
.menu .dd-menu a{color:var(--glass-ink)!important}
.menu .dd-menu a:hover{background:var(--glass-hover)!important;color:var(--blue)!important}

/* Burger → X */
.burger{position:relative;z-index:70;width:44px;height:44px;border-radius:12px;display:none;place-items:center}
.burger span{position:absolute;left:11px;width:22px;margin:0;transition:transform .3s,opacity .2s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-overlay{position:fixed;inset:0;z-index:49;background:rgba(2,6,23,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
html.menu-open .menu-overlay{opacity:1;visibility:visible}
html.menu-open{overflow:hidden}

/* ---------------- Mobile drawer ---------------- */
@media (max-width:820px){
  .burger{display:grid}
  .menu{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;inset:0 0 0 auto!important;
    width:min(86vw,360px);height:100dvh;max-height:none!important;z-index:60;
    flex-direction:column;align-items:stretch;gap:2px;padding:84px 18px 28px!important;overflow-y:auto;
    background:var(--glass-strong)!important;backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
    border-left:1px solid var(--glass-line);box-shadow:-20px 0 50px rgba(2,6,23,.25);
    transform:translateX(105%)!important;visibility:hidden;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility .35s}
  .menu.open{transform:none!important;visibility:visible}
  .menu > a:not(.btn),.dd > a{padding:14px 14px!important;border-radius:12px!important;font-size:1rem;font-weight:600}
  .menu > a.active,.dd > a.active{box-shadow:none;background:var(--glass-hover)}
  .dd-menu,.dd.mega .dd-menu{background:var(--glass-hover)!important;border:0;backdrop-filter:none;border-radius:12px;padding:6px}
  .menu .dd-menu a{color:var(--glass-muted)!important;font-weight:500}
  .chev{margin-left:auto}
  .dd.open .chev{transform:rotate(180deg)}
  .nav-cta{margin:16px 0 0!important;justify-content:center;padding:14px!important;font-size:1rem}
}

/* ---------------- Glass footer ---------------- */
.foot{position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-220px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 30%,transparent),transparent);pointer-events:none}
.foot .container{position:relative}
.foot-grid{background:var(--foot-glass);border:1px solid var(--foot-line);border-radius:24px;padding:36px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.foot h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;opacity:.9;margin-bottom:12px}
.foot-grid > div > a:not(.brand){padding:7px 10px;margin:0 -10px;border-radius:10px;transition:background .2s,color .2s}
.foot-grid > div > a:not(.brand):hover{background:var(--foot-glass)}
.copy{margin-top:22px;border-top:0;border-radius:16px;background:var(--foot-glass);border:1px solid var(--foot-line);padding:16px 20px;align-items:center}
.legal a{padding:4px 0}

/* ---------------- Mobile layout polish ---------------- */
@media (max-width:820px){
  .hero{padding:118px 0 48px}
  .page-hero{padding:116px 0 44px}
  .badge{font-size:.78rem;padding:6px 12px;line-height:1.4;text-align:left}
  .hero h1{font-size:clamp(1.9rem,8.4vw,2.6rem);margin:16px auto 12px}
  .lead{font-size:1rem}
  .hero-cta{gap:10px;margin-top:24px}
  .stats{margin-top:36px;gap:10px}
  .stat{padding:16px 10px}
  .stat strong{font-size:1.6rem}
  .sec{padding:60px 0}
  .sec-head{margin-bottom:34px}
  .price-tabs{position:static;width:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;border-radius:14px;scrollbar-width:none}
  .price-tabs::-webkit-scrollbar{display:none}
  .price-tabs a{white-space:nowrap}
  .partner-strip{justify-content:flex-start}
  .ps-item{flex:1 1 100%}
  .cta-in{flex-direction:column;align-items:flex-start}
  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
  .to-top{right:20px;bottom:80px}
}
@media (max-width:600px){
  .container{width:min(1200px,100% - 32px)}
  .hero-cta .btn,.cta-in .btn{width:100%;justify-content:center}
  .foot-grid{grid-template-columns:1fr 1fr;padding:24px 20px;gap:22px 16px;border-radius:20px}
  .foot-about{grid-column:1/-1}
  .foot-grid > div:last-child{grid-column:1/-1}
  .copy{flex-direction:column;text-align:center;justify-content:center}
  .legal{justify-content:center}
  .contact-cards{grid-template-columns:1fr}
  .c-form{padding:20px}
  .plans{grid-template-columns:1fr}
  .detail-side{position:static}
}
@media (prefers-reduced-motion:reduce){.menu,.burger span,.nav::before{transition:none!important}}