/* =========================================================================
   21G storefront — components. Nav, preloader, cursor, hero, pricing,
   proof grid, FAQ, payment-slot, disclaimer, steps, features, forms, footer.
   ========================================================================= */

/* --------------------------------------------------------------------- NAV */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-6);padding:var(--s-4) var(--gutter);background:transparent;
  transition:background var(--d) var(--ease-p),backdrop-filter var(--d),border-color var(--d);
  border-bottom:1px solid transparent;
}
.nav--scrolled{background:rgba(11,14,20,0.7);backdrop-filter:blur(18px) saturate(1.1);border-bottom-color:var(--hair);}
.nav__logo img{height:26px;width:auto;filter:invert(1);}
.nav__links{display:none;gap:var(--s-8);}
.nav__links a{font-family:var(--font-mono);font-size:0.8rem;letter-spacing:0.04em;color:var(--steel-light);transition:color var(--d-fast);}
.nav__links a:hover{color:var(--ivory);}
.nav__right{display:flex;align-items:center;gap:var(--s-6);}
.nav__cta{display:none;}
.lang{display:inline-flex;gap:var(--s-2);font-family:var(--font-mono);font-size:var(--t-kicker);letter-spacing:0.1em;align-items:center;}
.lang button{color:var(--steel-mid);transition:color var(--d-fast);}
.lang button[aria-pressed="true"]{color:var(--ivory);}
.lang span{color:var(--steel-mid);}
.nav__burger{display:inline-flex;flex-direction:column;gap:5px;width:26px;}
.nav__burger span{height:1.5px;width:100%;background:var(--ivory);transition:transform var(--d-fast) var(--ease-p),opacity var(--d-fast);}
.nav__burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav__burger.open span:nth-child(2){opacity:0;}
.nav__burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mobile-menu{
  position:fixed;inset:0;z-index:55;background:var(--ink-deep);display:flex;flex-direction:column;
  justify-content:center;gap:var(--s-6);padding:var(--gutter);transform:translateY(-100%);
  transition:transform var(--d) var(--ease);visibility:hidden;
}
.mobile-menu.open{transform:none;visibility:visible;}
.mobile-menu a{font-family:var(--font-display);font-size:clamp(2rem,11vw,3.4rem);font-weight:600;letter-spacing:-0.03em;color:var(--ivory);}
.mobile-menu a:active{color:var(--steel-light);}

/* ----------------------------------------------------------------- BUTTONS */
.btn{display:inline-flex;align-items:center;gap:var(--s-3);font-family:var(--font-body);font-weight:500;font-size:0.95rem;color:var(--ivory);transition:opacity var(--d-fast);}
.btn:hover{opacity:0.7;}
.btn:focus-visible{outline:none;text-decoration:underline;text-underline-offset:4px;}
.btn .arrow{transition:transform var(--d-fast) var(--ease-p);}
.btn:hover .arrow{transform:translateX(4px);}
.btn--sm{font-size:0.85rem;}
.btn--solid,.btn--ghost{
  border-radius:var(--radius-sm);padding:14px 28px;font-weight:600;font-size:0.82rem;
  letter-spacing:0.06em;text-transform:uppercase;
}
.btn--solid{background:var(--white);color:var(--ink-deep);border:1px solid var(--white);}
.btn--solid:hover{opacity:1;background:rgba(255,255,255,0.86);border-color:var(--white);}
.btn--ghost{border:1px solid var(--hair-strong);}
.btn--ghost:hover{opacity:1;border-color:var(--ivory);}

.cta-bar{
  position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--s-4);z-index:50;display:flex;justify-content:center;
  transform:translateY(180%);transition:transform var(--d) var(--ease);pointer-events:none;
}
.cta-bar.show{transform:none;}
.cta-bar .btn{pointer-events:auto;width:100%;justify-content:center;background:var(--white);border:1px solid var(--white);color:var(--ink-deep);padding:var(--s-4);border-radius:var(--radius-sm);text-transform:uppercase;font-size:0.82rem;letter-spacing:0.06em;}
.cta-bar .btn:hover{opacity:1;}

/* --------------------------------------------------------------- PRELOADER */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--ink-deep);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:var(--s-8);width:80%;max-width:380px;}
.preloader-logo-wrap{position:relative;display:inline-block;overflow:hidden;}
.preloader-logo{width:88px;height:auto;filter:invert(1);}
.preloader-mask{position:absolute;inset:0;background:var(--ink-deep);transform-origin:bottom;transform:scaleY(1);will-change:transform;}
.preloader-meta{display:flex;justify-content:space-between;width:100%;font-family:var(--font-mono);font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--steel-mid);}
.preloader-percent{font-variant-numeric:tabular-nums;color:var(--ivory);}
.preloader-bar{width:100%;height:1px;background:var(--hair);overflow:hidden;}
.preloader-bar-fill{height:100%;width:0%;background:var(--ivory);}

/* ------------------------------------------------------------------ CURSOR */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference;will-change:transform,width,height;}
.cursor-dot{width:6px;height:6px;background:#fff;transition:width .25s,height .25s,opacity .25s;}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,0.7);transition:width .35s var(--ease),height .35s var(--ease),border-color .3s,opacity .3s;}
.cursor-ring.cursor-hover{width:64px;height:64px;border-color:#fff;}
.cursor-dot.cursor-hover{opacity:0.4;}
[data-magnetic]{display:inline-flex;will-change:transform;}

/* --------------------------------------------------------------------- HERO */
.hero{position:relative;min-height:92svh;width:100%;overflow:hidden;display:flex;}
.hero--static{background:radial-gradient(125% 90% at 72% 8%, #1b1b1f 0%, #0a0a0b 42%, #000 72%);}
.hero__inner{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-6);
  padding:var(--gutter);padding-bottom:clamp(3.5rem,9vh,6rem);
}
.hero__eyebrow{color:var(--gasoline-blue-2);}
.hero--static .hero__eyebrow,.hero--static .hero__line,.hero--static .hero__sub{color:var(--ivory);}
.hero__line{font-family:var(--font-display);font-size:clamp(2rem,5.6vw,4.4rem);font-weight:700;line-height:1.02;letter-spacing:-0.025em;max-width:18ch;}
.hero__foot{display:flex;flex-direction:column;gap:var(--s-6);}
.hero__sub{font-size:var(--t-sub);color:var(--ivory);max-width:38rem;opacity:0.92;}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;margin-top:var(--s-2);}
.status{display:inline-flex;align-items:center;gap:var(--s-3);font-family:var(--font-mono);font-size:var(--t-kicker);letter-spacing:0.16em;text-transform:uppercase;color:var(--ivory);}
.status__dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.scroll-cue{position:absolute;bottom:var(--s-6);right:var(--gutter);z-index:2;font-family:var(--font-mono);font-size:var(--t-kicker);letter-spacing:0.16em;text-transform:uppercase;color:var(--steel-light);}

/* ------------------------------------------------------------- FEATURES / MOAT cards */
.features{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.feature{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-8);background:var(--ink-graphite);border:1px solid var(--hair);border-radius:var(--radius);}
.section--alt .feature{background:var(--ink-deep);}
.feature__k{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--gasoline-blue-2);}
.feature h3{font-size:1.1rem;}
.feature p{color:var(--steel-light);font-size:0.95rem;line-height:1.55;}

/* --------------------------------------------------------------- STEPS (process) */
.steps{display:flex;flex-direction:column;gap:var(--s-12);}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s-6);align-items:start;}
.step__num{font-family:var(--font-mono);font-size:0.8rem;color:var(--gasoline-blue-2);border:1px solid var(--hair-strong);border-radius:50%;width:2.6rem;height:2.6rem;display:grid;place-items:center;flex:none;}
.step__body{display:flex;flex-direction:column;gap:var(--s-2);}
.step__body h3{font-size:1.15rem;}
.step__body p{color:var(--steel-light);max-width:44rem;}

/* ----------------------------------------------------------- PROOF / PORTFOLIO */
.proof-grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(248px,1fr));}
.proof{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-sm);background:var(--ink-graphite);border:1px solid var(--hair);}
.proof img{width:100%;height:100%;object-fit:cover;opacity:0.92;transition:transform var(--d) var(--ease),opacity var(--d-fast);}
.proof:hover img{transform:scale(1.04);opacity:1;}
.proof__meta{position:absolute;inset:auto 0 0 0;padding:var(--s-6) var(--s-4) var(--s-4);background:linear-gradient(to top,rgba(11,14,20,0.9) 0%,rgba(11,14,20,0.5) 55%,transparent 100%);}
.proof__title{font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.2;}
.proof__tag{display:block;margin-top:2px;font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--steel-light);}
/* placeholder tile when no image yet — gradient + label, never a flat grey box */
.proof--ph{background:var(--grad-signature);}
.proof--ph .proof__title{position:absolute;inset:auto var(--s-4) var(--s-8);}

/* --------------------------------------------------------------------- PRICING */
.pricing{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(248px,1fr));align-items:stretch;}
.tier{display:flex;flex-direction:column;gap:var(--s-6);padding:var(--s-8);background:var(--ink-graphite);border:1px solid var(--hair);border-radius:var(--radius);position:relative;}
.section--alt .tier{background:var(--ink-deep);}
.tier--featured{border-color:var(--silver);box-shadow:var(--shadow);}
.tier--featured[data-badge]::before{
  content:attr(data-badge);position:absolute;top:0;right:var(--s-6);transform:translateY(-50%);
  background:var(--ivory);color:var(--ink-deep);font-family:var(--font-mono);font-size:0.6rem;
  letter-spacing:0.18em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--ivory);
}
.tier__head{display:flex;flex-direction:column;gap:var(--s-2);}
.tier__name{font-family:var(--font-display);font-size:1.15rem;font-weight:600;}
.tier__tagline{font-size:0.7rem;letter-spacing:0.08em;color:var(--steel-light);text-transform:uppercase;}
.tier__pricing{display:flex;align-items:baseline;gap:var(--s-3);}
.tier__price{font-family:var(--font-display);font-size:2.1rem;font-weight:700;letter-spacing:-0.02em;line-height:1;}
.tier__period{font-size:0.85rem;color:var(--steel-light);}
.tier__features{display:flex;flex-direction:column;gap:var(--s-3);}
.tier__feat{display:flex;gap:var(--s-3);font-size:0.92rem;color:var(--silver);line-height:1.45;}
.tier__feat::before{content:'→';color:var(--gasoline-blue-2);flex:none;}
.tier .pay-slot{margin-top:auto;}

/* ------------------------------------------------------------- PAYMENT SLOT */
.pay-slot{display:flex;flex-direction:column;gap:var(--s-3);}
.pay-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);text-align:center;
  background:var(--white);border:1px solid var(--white);color:var(--ink-deep);font-family:var(--font-body);
  font-weight:600;font-size:0.82rem;letter-spacing:0.06em;text-transform:uppercase;padding:14px 26px;border-radius:var(--radius-sm);
  transition:border-color var(--d-fast),opacity var(--d-fast),transform var(--d-fast),background var(--d-fast);
}
.pay-btn:hover{background:rgba(255,255,255,0.86);border-color:var(--white);transform:translateY(-1px);}
.pay-btn--ghost{background:none;border-color:var(--hair-strong);}
.pay-btn.pay-disabled{opacity:0.5;cursor:not-allowed;}
.pay-btn.pay-disabled:hover{transform:none;border-color:var(--silver);}
.pay-btn--ghost.pay-disabled:hover{border-color:var(--hair-strong);}
.pay-note{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.03em;color:var(--steel-mid);}

/* ------------------------------------------------------------- DISCLAIMER BAND */
.disclaimer{
  background:var(--ink-graphite);border:1px solid var(--hair);border-left:2px solid var(--gasoline-blue-2);
  border-radius:var(--radius-sm);padding:var(--s-6) var(--s-8);display:flex;flex-direction:column;gap:var(--s-3);
}
.section--alt .disclaimer{background:var(--ink-deep);}
.disclaimer__eyebrow{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gasoline-blue-2);}
.disclaimer p{color:var(--steel-light);font-size:0.95rem;line-height:1.62;max-width:64rem;}

/* --------------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--hair);max-width:62rem;}
.faq details{border-bottom:1px solid var(--hair);}
.faq summary{display:flex;justify-content:space-between;gap:var(--s-6);align-items:center;padding:var(--s-6) 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:500;font-size:1.05rem;color:var(--ivory);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';color:var(--gasoline-blue-2);font-size:1.4rem;line-height:1;transition:transform var(--d-fast);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq__a{padding:0 0 var(--s-6);color:var(--steel-light);max-width:52rem;line-height:1.62;}

/* --------------------------------------------------------------------- FORMS */
.form{display:grid;gap:var(--s-8);max-width:34rem;}
.field-wrap{position:relative;}
.lbl{display:block;margin-bottom:var(--s-3);font-size:var(--t-kicker);letter-spacing:0.14em;text-transform:uppercase;color:var(--steel-light);}
.field{width:100%;border:none;border-bottom:1px solid var(--hair-strong);background:transparent;padding:var(--s-3) 0;color:var(--ivory);font-family:var(--font-body);font-size:var(--t-sub);transition:border-color var(--d-fast);}
.field::placeholder{color:var(--steel-mid);}
.field:focus{outline:none;border-bottom-color:var(--ivory);}
.form__status{font-family:var(--font-mono);font-size:0.8rem;letter-spacing:0.02em;min-height:1.2em;color:var(--steel-light);}

/* --------------------------------------------------------------------- FOOTER */
.footer{background:var(--ink-deep);border-top:1px solid var(--hair);padding:var(--s-20) var(--gutter) var(--s-12);}
.footer .container{display:block;}
.footer__slug{font-family:var(--font-mono);font-size:var(--t-kicker);letter-spacing:0.28em;text-transform:uppercase;color:var(--steel-light);}
.footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-6);margin-top:clamp(3rem,8vw,6rem);padding-top:var(--s-8);border-top:1px solid var(--hair);font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.04em;color:var(--steel-mid);}
.footer__row a{transition:color var(--d-fast);}
.footer__row a:hover{color:var(--ivory);}

/* ============================================================ RESPONSIVE ≥ md */
@media (min-width:768px){
  .nav__links{display:flex;}
  .nav__burger{display:none;}
  .nav__cta{display:inline-flex;}
  .mobile-menu{display:none;}
  .cta-bar{display:none;}
  .step{grid-template-columns:auto 1fr;}
}
@media (min-width:1024px){
  .nav{padding:var(--s-6) var(--gutter);}
  .nav__logo img{height:32px;}
}
@media (hover:none),(pointer:coarse){
  .cursor-dot,.cursor-ring{display:none !important;}
}