/* ============================================================
   Saktify - Design System "Console / Studio Arcade"
   Hub layanan digital. Brutalist terukur (border tebal, offset
   shadow, kapital) dengan bahasa visual retro-konsol yang dipakai
   seperlunya: HUD, layar CRT, status LED, cartridge launcher.
   Warna dari logo: teal + navy. Motion kalem dan disengaja.
   ============================================================ */

:root{
  --ink:#0C1A1B;
  --navy:#1B2A4A;
  --navy-2:#0E1626;      /* layar / screen gelap */
  --teal:#12A39B;
  --teal-deep:#0C6C77;
  --paper:#EAF4F1;
  --card:#FFFFFF;
  --paper-2:#D7EDE9;
  --muted:#4A5A5E;

  /* alias lama supaya inline style Blade tetap jalan */
  --navy-700:#0C1A1B;
  --blue:#1B2A4A;
  --orange:#12A39B;
  --orange-600:#0C6C77;
  --line:#0C1A1B;
  --ok:#0C6C77;

  --shadow-hard:6px 6px 0 0 var(--ink);
  --shadow-hard-sm:4px 4px 0 0 var(--ink);
  --shadow-teal:6px 6px 0 0 var(--teal);
  --shadow-soft:0 18px 40px -22px rgba(12,26,27,.5);

  --r:0px; --r-sm:0px; --maxw:1180px;

  --font-body:'Archivo',system-ui,sans-serif;
  --font-display:'Archivo',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --font-px:'Press Start 2P',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(12,26,27,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(12,26,27,.04) 1px,transparent 1px);
  background-size:28px 28px;
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1;margin:0 0 .4em;letter-spacing:-.02em;font-weight:900;text-transform:uppercase}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{position:relative}

/* ---------- global: scanline + HUD ---------- */
.crt{position:fixed;inset:0;pointer-events:none;z-index:80;
  background:repeating-linear-gradient(0deg,rgba(12,26,27,.035) 0 2px,transparent 2px 4px);
  mix-blend-mode:multiply}

.hud{background:var(--ink);color:var(--paper);border-bottom:3px solid var(--ink)}
.hud__in{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:34px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden}
.hud .px{font-family:var(--font-px);font-size:.54rem;line-height:1;white-space:nowrap;letter-spacing:.02em}
.hud .grp{display:flex;align-items:center;gap:.5rem}
.hud .sc{color:var(--teal)}
@media (max-width:640px){.hud .mid{display:none}}

/* status LED yang berkedip pelan (dipakai HUD, screen, cart) */
.led{width:8px;height:8px;background:var(--teal);display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;animation:led 1.6s steps(1) infinite}
@keyframes led{50%{opacity:.28}}

/* ---------- Typography helpers ---------- */
.display{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:900;text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-px);
  font-size:.58rem;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-deep)}
.eyebrow::before{content:"";width:14px;height:14px;background:var(--teal);flex:none}
.eyebrow--light{color:#8fe3dc}
.eyebrow--light::before{background:var(--teal)}
.lead{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--muted);max-width:60ch;line-height:1.6}
.lead--light{color:#aebfd6}
.accent{background:var(--teal);color:#fff;padding:.02em .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mark{background:linear-gradient(180deg,transparent 58%,var(--teal) 58%);padding:0 .06em}
.text-orange{color:var(--teal-deep)}
.text-center{text-align:center}
.squiggle{position:relative;display:inline-block}
.squiggle::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.18em;background:var(--teal)}

/* ---------- Buttons ---------- */
.btn{--bg:var(--ink);--fg:#fff;--sh:var(--ink);
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);
  font-weight:800;font-size:.95rem;text-transform:uppercase;letter-spacing:.02em;
  padding:.85rem 1.4rem;border-radius:0;background:var(--bg);color:var(--fg);
  border:3px solid var(--ink);box-shadow:5px 5px 0 0 var(--sh);
  cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;will-change:transform}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 0 var(--sh)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 0 var(--sh)}
.btn--wa{--bg:var(--teal);--fg:#fff;--sh:var(--ink)}
.btn--ghost{--bg:#fff;--fg:var(--ink);--sh:var(--ink)}
.btn--lg{padding:1rem 1.7rem;font-size:1.02rem}
.btn svg{width:1.15em;height:1.15em}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(234,244,241,.92);backdrop-filter:blur(8px);border-bottom:3px solid var(--ink)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:30px;width:auto;object-fit:contain}
.nav__links{display:flex;align-items:center;gap:1.7rem;list-style:none;margin:0;padding:0}
.nav__links a{font-family:var(--font-mono);font-weight:700;font-size:.8rem;text-transform:uppercase;color:var(--ink);position:relative;padding:.2rem 0}
.nav__links a::before{content:"";position:absolute;left:-11px;top:50%;width:6px;height:6px;background:var(--teal);transform:translateY(-50%) scale(0);transition:transform .12s}
.nav__links a:hover::before,.nav__links a.is-active::before{transform:translateY(-50%) scale(1)}
.nav__links a:hover,.nav__links a.is-active{color:var(--teal-deep)}
.nav__cta{display:flex;align-items:center;gap:.8rem}
.nav__toggle{display:none;background:#fff;border:3px solid var(--ink);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--shadow-hard-sm)}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:"";display:block;width:20px;height:3px;background:var(--ink);position:relative;transition:.2s}
.nav__toggle span::before{position:absolute;top:-6px}
.nav__toggle span::after{position:absolute;top:6px}

/* ---------- Hero ---------- */
.hero{padding:clamp(2.8rem,6vw,5rem) 0 clamp(2.4rem,5vw,4rem);position:relative}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero__badge{margin-bottom:1.4rem}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);margin-bottom:1.1rem;line-height:.96}
.hero .lead{margin-bottom:1.9rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero__proof{display:flex;gap:0;margin-top:2.2rem;flex-wrap:wrap;border:3px solid var(--ink);box-shadow:var(--shadow-hard-sm);background:#fff;width:fit-content;max-width:100%}
.hero__proof div{display:flex;flex-direction:column;padding:.85rem 1.25rem;border-right:3px solid var(--ink)}
.hero__proof div:last-child{border-right:0}
.hero__proof b{font-family:var(--font-px);font-size:1rem;color:var(--teal-deep);line-height:1.25}
.hero__proof span{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);text-transform:uppercase;margin-top:.4rem}
.hero__art{position:relative;display:flex;justify-content:center}

/* console screen di hero */
.screen{width:min(420px,100%);border:3px solid var(--ink);background:var(--navy-2);box-shadow:var(--shadow-hard)}
.screen__bar{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--paper);padding:.5rem .8rem;border-bottom:3px solid var(--ink)}
.screen__title{font-family:var(--font-px);font-size:.58rem;color:var(--teal)}
.screen__dots{display:inline-flex;gap:5px}
.screen__dots i{width:9px;height:9px;background:var(--teal);display:block}
.screen__dots i:nth-child(2){background:#e7c14b}
.screen__dots i:nth-child(3){background:#d9d9d9}
.screen__body{position:relative;padding:1.4rem 1.4rem 1rem;overflow:hidden;
  background:
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.6px) 0 0/6px 6px,
    radial-gradient(120% 90% at 50% 0%,rgba(18,163,155,.22),transparent 70%)}
.screen__body::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px)}
.hero__mascot{position:relative;z-index:1;width:100%;max-width:300px;margin:0 auto;
  filter:drop-shadow(4px 6px 0 rgba(0,0,0,.35));animation:float 3.4s ease-in-out infinite}
.screen__cap{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem;margin-top:.8rem;
  font-family:var(--font-mono);font-size:.72rem;color:#bfe6e1;text-transform:uppercase}
@keyframes float{50%{transform:translateY(-9px)}}

/* ---------- Trust strip ---------- */
.trust{background:var(--ink);color:var(--paper);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.trust__in{display:flex;align-items:center;gap:1.2rem;padding:.85rem 22px;flex-wrap:wrap}
.trust__lbl{font-family:var(--font-px);font-size:.54rem;color:var(--teal);flex:none;text-transform:uppercase}
.trust__names{font-family:var(--font-mono);font-size:.82rem;color:#cfeae6;letter-spacing:.01em}

/* ---------- Section head ---------- */
.sec{padding:clamp(3.4rem,6.5vw,5.6rem) 0}
.sec__head{max-width:680px;margin-bottom:2.6rem}
.sec__head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec__head.center .eyebrow{justify-content:center}
.sec__head h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:.8rem}

/* ============================================================
   LAUNCHER (layar pemilihan layanan)
   ============================================================ */
.launcher{position:relative;background:var(--navy-2);color:#fff;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:clamp(3.4rem,6.5vw,5.6rem) 0;overflow:hidden}
.launcher::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.6px) 0 0/6px 6px,
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px)}
.launcher>.container{position:relative;z-index:1}
.launcher__head{max-width:680px;margin-bottom:2.4rem}
.launcher__head h2{color:#fff;font-size:clamp(1.9rem,4vw,2.9rem);margin-top:.8rem}

.cart{display:flex;flex-direction:column;gap:.9rem;background:var(--card);color:var(--ink);
  border:3px solid var(--ink);box-shadow:var(--shadow-hard);padding:1.5rem 1.6rem;
  transition:transform .12s ease,box-shadow .12s ease;position:relative}
a.cart:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 0 var(--teal)}
.cart__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cart__no{font-family:var(--font-px);font-size:.56rem;color:var(--muted);letter-spacing:.02em}
.cart__status{font-family:var(--font-mono);font-weight:700;font-size:.72rem;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .5rem;border:2px solid var(--ink)}
.cart__status.is-live{background:var(--teal);color:#fff;border-color:var(--ink)}
.cart__status.is-open{background:#fff;color:var(--teal-deep)}
.cart__status.is-soon{background:var(--paper-2);color:var(--muted)}
.cart__status .lock{width:9px;height:8px;background:var(--muted);position:relative;display:inline-block;margin-top:2px}
.cart__status .lock::before{content:"";position:absolute;left:2px;top:-4px;width:5px;height:5px;border:2px solid var(--muted);border-bottom:0;border-radius:3px 3px 0 0}
.cart__main{flex:1}
.cart__main h3{font-size:1.5rem;margin-bottom:.5rem}
.cart__main p{color:var(--muted);font-size:.95rem;margin:0}
.cart__go{font-family:var(--font-mono);font-weight:700;font-size:.86rem;text-transform:uppercase;color:var(--teal-deep);display:inline-flex;align-items:center;gap:.5rem}
.cart__go em{font-style:normal;transition:transform .12s}
a.cart:hover .cart__go em{transform:translateX(4px)}
.cart__go--off{color:var(--muted)}

/* featured cartridge */
.cart--feat{background:var(--teal);color:#fff;margin-bottom:1.4rem;
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"top top" "main main" "go go";gap:1rem 1.4rem}
.cart--feat .cart__top{grid-area:top}
.cart--feat .cart__main{grid-area:main;max-width:60ch}
.cart--feat .cart__go{grid-area:go}
.cart--feat .cart__no{color:rgba(255,255,255,.7)}
.cart--feat .cart__main h3{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem)}
.cart--feat .cart__main p{color:#eafffb}
.cart--feat .cart__status.is-live{background:#fff;color:var(--teal-deep)}
.cart--feat .cart__go{color:#fff}
a.cart--feat:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 0 var(--ink)}
@media (min-width:720px){.cart--feat{grid-template-columns:1fr;grid-template-areas:"top" "main" "go"}}

.cart-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}

/* locked / segera */
.cart.is-locked{box-shadow:var(--shadow-hard-sm);opacity:.9}
.cart.is-locked .cart__main h3,.cart.is-locked .cart__main p{color:var(--muted)}
.cart.is-locked::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(12,26,27,.06) 9px 11px)}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:1.4rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:3px solid var(--ink);padding:1.7rem;box-shadow:var(--shadow-hard-sm);
  transition:transform .12s ease,box-shadow .12s ease;position:relative}
.card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 0 var(--ink)}
.card__ic{width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:var(--paper-2);border:3px solid var(--ink);margin-bottom:1.1rem;color:var(--ink)}
.card__ic svg{width:26px;height:26px}
.card h3{font-size:1.35rem}
.card p{color:var(--muted);margin-bottom:0;font-size:.96rem}
.card--pillar .num{font-family:var(--font-px);font-size:.72rem;color:var(--teal-deep);display:inline-block;margin-bottom:.3rem}
.card--accent{background:var(--navy);color:#e8eefc}
.card--accent h3{color:#fff}
.card--accent p{color:#c3cee6}
.card--accent .num{color:var(--teal)}
.card--accent .card__ic{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* ---------- Vertical (solusi) chips ---------- */
.verticals{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.vert{display:flex;align-items:center;gap:.9rem;background:var(--card);border:3px solid var(--ink);padding:1rem 1.15rem;box-shadow:var(--shadow-hard-sm);transition:transform .12s,box-shadow .12s}
.vert:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--teal)}
.vert__ic{width:44px;height:44px;flex:none;background:var(--paper-2);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.vert__ic svg{width:22px;height:22px}
.vert b{display:block;color:var(--ink);font-size:1rem;text-transform:uppercase}
.vert small{color:var(--muted);font-size:.9rem}
.vert .arr{margin-left:auto;color:var(--teal-deep);font-weight:900}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;counter-reset:s}
.step{background:var(--card);border:3px solid var(--ink);padding:1.5rem;box-shadow:var(--shadow-hard-sm);position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-px);font-size:1rem;color:var(--teal-deep);display:block;margin-bottom:.8rem}
.step h4{font-size:1.1rem;text-transform:uppercase}
.step p{color:var(--muted);font-size:.92rem;margin:0}

/* ---------- Pricing ---------- */
.price{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.tier{background:var(--card);border:3px solid var(--ink);padding:1.6rem;box-shadow:var(--shadow-hard-sm);display:flex;flex-direction:column}
.tier--hot{background:var(--navy);color:#dfe7fb}
.tier--hot h3,.tier--hot .amt{color:#fff}
.tier--hot .feat li{color:#c9d6f5}
.tier .name{font-family:var(--font-px);font-size:.6rem;letter-spacing:.02em;text-transform:uppercase;color:var(--teal-deep)}
.tier--hot .name{color:var(--teal)}
.tier .amt{font-size:2rem;font-weight:900;color:var(--ink);margin:.5rem 0 .1rem}
.tier .amt small{font-size:.85rem;color:var(--muted);font-weight:700}
.tier .feat{list-style:none;padding:0;margin:1.1rem 0 1.4rem;display:flex;flex-direction:column;gap:.55rem;font-size:.93rem;flex:1}
.tier .feat li{display:flex;gap:.5rem;color:var(--ink)}
.tier .feat li::before{content:"\25AA";color:var(--teal-deep);font-weight:900}
.tier--hot .feat li::before{color:var(--teal)}
.badge-pop{align-self:flex-start;background:var(--teal);color:#fff;font-family:var(--font-px);font-size:.52rem;padding:.35rem .5rem;border:3px solid var(--ink);margin-bottom:.8rem}

/* ---------- Why ---------- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.why__item{display:flex;gap:1rem;background:var(--card);border:3px solid var(--ink);padding:1.3rem;box-shadow:var(--shadow-hard-sm)}
.why__item .tick{flex:none;width:44px;height:44px;background:var(--paper-2);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--teal-deep);font-weight:900;font-size:1.05rem}
.why__item b{color:var(--ink);text-transform:uppercase}
.why__item p{margin:.28rem 0 0;color:var(--muted);font-size:.94rem}

/* ---------- CTA band ---------- */
.cta{background:var(--navy);color:#fff;border:3px solid var(--ink);padding:clamp(2.4rem,5vw,3.6rem);text-align:center;box-shadow:var(--shadow-hard);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.6px) 0 0/6px 6px}
.cta h2{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);position:relative}
.cta p{color:#c3d0f0;max-width:54ch;margin:0 auto 1.8rem;position:relative}
.cta .btn{position:relative}
.cta__mascot{position:absolute;right:-6px;bottom:-6px;width:135px;opacity:.9;pointer-events:none}

/* ---------- Legal / prose ---------- */
.page-head{background:var(--ink);color:#fff;border-bottom:3px solid var(--ink);padding:clamp(2.2rem,5vw,3.4rem) 0;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.6px) 0 0/6px 6px}
.page-head>.container{position:relative;z-index:1}
.page-head h1{color:#fff;font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.4rem}
.page-head p{color:#bfe6e1;margin:0;font-size:.98rem}
.page-head .crumb{font-family:var(--font-px);font-size:.54rem;color:var(--teal);margin-bottom:1rem}
.page-head .crumb a:hover{color:#fff}
.prose{background:var(--card);border:3px solid var(--ink);padding:clamp(1.6rem,4vw,3rem);box-shadow:var(--shadow-hard-sm);max-width:820px}
.prose h2{font-size:1.3rem;margin-top:2rem;text-transform:uppercase}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.05rem;margin-top:1.4rem;text-transform:uppercase}
.prose p,.prose li{color:var(--ink);font-size:.98rem;line-height:1.68}
.prose a{color:var(--teal-deep);font-weight:700;text-decoration:underline}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1rem}
.prose li{margin-bottom:.4rem}
.prose .updated{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);border-bottom:3px solid var(--ink);padding-bottom:1rem;margin-bottom:1.6rem}

/* FAQ accordion */
.faq{max-width:820px}
.faq details{background:var(--card);border:3px solid var(--ink);padding:.2rem 1.2rem;margin-bottom:1rem;box-shadow:var(--shadow-hard-sm)}
.faq summary{cursor:pointer;font-weight:800;color:var(--ink);padding:1rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;text-transform:uppercase;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-px);font-size:1rem;color:var(--teal-deep);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:0 0 1rem;font-size:.95rem;line-height:1.65}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.info{display:flex;flex-direction:column;gap:1rem}
.info__row{display:flex;gap:1rem;background:var(--card);border:3px solid var(--ink);padding:1.15rem 1.25rem;box-shadow:var(--shadow-hard-sm);align-items:flex-start}
.info__row .ic{flex:none;width:44px;height:44px;background:var(--paper-2);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.info__row .ic svg{width:22px;height:22px}
.info__row .lbl{font-family:var(--font-px);font-size:.52rem;text-transform:uppercase;color:var(--teal-deep);display:block;margin-bottom:.3rem}
.info__row b,.info__row a{color:var(--ink);font-weight:700}
.info__row small{color:var(--muted);font-size:.86rem}
.map{border:3px solid var(--ink);overflow:hidden;box-shadow:var(--shadow-hard-sm);min-height:320px}
.map iframe{width:100%;height:100%;border:0;display:block;min-height:320px}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#bfe6e1;border-top:3px solid var(--ink);padding:3.2rem 0 1.6rem;margin-top:0}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2rem}
.footer h4{color:#fff;font-family:var(--font-px);font-size:.58rem;letter-spacing:.02em;text-transform:uppercase;margin-bottom:1.1rem}
.footer a{color:#a9cfca;display:block;padding:.28rem 0;font-size:.92rem;transition:color .15s}
.footer a:hover{color:var(--teal)}
.footer__brand{display:flex;align-items:center;gap:.6rem;color:#fff;margin-bottom:.9rem}
.footer__brand img{height:28px;width:auto}
.footer__brand-p{color:#8fb8b3;font-size:.92rem;max-width:34ch;line-height:1.6}
.footer__bottom{border-top:3px solid rgba(255,255,255,.14);margin-top:2.4rem;padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.76rem;color:#7ba39e;text-transform:uppercase}
.footer__bottom a{display:inline}

/* ---------- Floating WA ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:.55rem;background:var(--teal);color:#fff;font-weight:800;text-transform:uppercase;padding:.8rem 1.15rem;border:3px solid var(--ink);box-shadow:var(--shadow-hard-sm);transition:transform .1s,box-shadow .1s}
.wa-float:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink)}
.wa-float svg{width:22px;height:22px}
.wa-float .pulse{position:absolute;inset:0;box-shadow:0 0 0 0 rgba(18,163,155,.55);animation:pulse 2.6s ease-out infinite}
.wa-float .t{font-size:.88rem}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(18,163,155,0)}100%{box-shadow:0 0 0 0 rgba(18,163,155,0)}}
@media (max-width:520px){.wa-float span.t{display:none}}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(14px);animation:rise .5s forwards}
.stagger>*:nth-child(1){animation-delay:.05s}
.stagger>*:nth-child(2){animation-delay:.14s}
.stagger>*:nth-child(3){animation-delay:.23s}
.stagger>*:nth-child(4){animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:2.2rem}
  .hero__art{order:-1;max-width:380px;margin:0 auto}
  .grid-3,.verticals,.price,.steps{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav__links{position:fixed;inset:70px 0 auto 0;flex-direction:column;gap:0;background:var(--paper);
    border-bottom:3px solid var(--ink);padding:1rem 22px 1.4rem;transform:translateY(-130%);
    transition:transform .25s ease;box-shadow:var(--shadow-soft)}
  .nav__links.open{transform:none}
  .nav__links a{padding:.85rem 0;border-bottom:3px solid rgba(12,26,27,.12);width:100%}
  .nav__toggle{display:flex}
  .nav__cta .btn--nav{display:none}
  .grid-3,.verticals,.price,.steps,.grid-2,.cart-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__proof{width:100%}
  .hero__proof div{flex:1}
  .trust__in{gap:.5rem}
}