/* Northkeen v13: Pakistani small business digital services. Mobile-first, system fonts, no external assets. */
:root{
  --navy:#0c1626;--navy-2:#13213a;--navy-3:#1c2f50;--navy-4:#070d18;
  --ink:#121b2b;--muted:#4a576d;--line:#e2ddd3;--paper:#f7f5f0;--sand:#efeae0;--card:#fff;
  --accent:#f0ac5a;--accent-h:#f6bf7a;--accent-ink:#7a4a10;--accent-soft:#fcefdc;
  --teal:#3fd1c0;--violet:#7c6cf2;--wa:#25d366;
  --ok:#1f7a50;--ok-soft:#dcf1e6;--bad:#a33a2c;--bad-soft:#f8e3df;
  --on-dark:#d3dcea;--on-dark-2:#a9b7cb;
  --r:22px;--r-sm:14px;
  --sh-1:0 1px 2px rgba(12,22,38,.06),0 10px 28px -14px rgba(12,22,38,.25);
  --sh-2:0 2px 4px rgba(12,22,38,.06),0 30px 60px -24px rgba(12,22,38,.45);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--ink);padding:8px 12px;z-index:100;border-radius:8px}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
h1,h2,h3{line-height:1.1;margin:0;letter-spacing:-.025em;font-weight:800}
h2{font-size:clamp(30px,5vw,48px);margin-bottom:12px}
h3{font-size:20px;margin:0 0 8px;letter-spacing:-.01em}
p{margin:0 0 12px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--accent-ink);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.dark .eyebrow{color:var(--accent)}
.lede{color:var(--muted);font-size:18px;max-width:62ch;margin:10px 0 0}
.dark .lede{color:var(--on-dark-2)}
section{padding:80px 0;position:relative}
.sec-head{max-width:780px;margin-bottom:38px}
.sec-head.c{text-align:center;margin-left:auto;margin-right:auto}
.dark{background:var(--navy);color:#fff}
.dark.deep{background:radial-gradient(1200px 600px at 80% -10%,#1d3358 0,transparent 60%),radial-gradient(900px 500px at -10% 110%,#173a4a 0,transparent 60%),var(--navy-4)}
.sand{background:var(--sand)}
.tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}.tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.ghost{background:rgba(255,255,255,.1);color:var(--on-dark)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:999px;font-weight:800;font-size:16.5px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;font-family:inherit}
.btn.pri{background:linear-gradient(180deg,var(--accent-h),var(--accent));color:#1a1206;box-shadow:0 10px 30px -10px rgba(240,172,90,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(240,172,90,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.sec{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn.sec:hover{background:rgba(255,255,255,.14)}
.btn.ink{background:var(--navy);color:#fff}
.btn.block{width:100%}

/* nav */
header.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
header.nav.solid,header.nav.open{background:rgba(9,16,29,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#fff;text-decoration:none;letter-spacing:-.01em}
.brand svg{width:36px;height:36px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.menu-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
#navlinks{display:none;list-style:none;margin:0;padding:0}
header.nav.open #navlinks{display:flex;flex-direction:column;position:absolute;top:66px;left:0;right:0;background:rgba(9,16,29,.97);padding:10px 20px 22px;gap:4px}
#navlinks a{display:block;padding:12px 6px;color:var(--on-dark);text-decoration:none;font-weight:700}
#navlinks a:hover{color:#fff}
#navlinks .cta-mini{background:var(--accent);color:#1a1206;border-radius:999px;padding:12px 20px;text-align:center;margin-top:6px}
@media(min-width:900px){
  .menu-toggle{display:none}
  #navlinks{display:flex;align-items:center;gap:6px}
  #navlinks a{padding:8px 12px;font-size:15px}
  #navlinks .cta-mini{margin:0 0 0 8px;padding:10px 18px}
}

/* hero */
.hero{min-height:100svh;padding:96px 0 40px;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero .stage{position:absolute;inset:0;z-index:-1}
.hero .stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 40%,rgba(63,209,192,.18),transparent 70%),radial-gradient(50% 40% at 25% 70%,rgba(240,172,90,.16),transparent 70%)}
.hero .stage::after{content:"";position:absolute;inset:auto 0 0 0;height:140px;background:linear-gradient(transparent,var(--bg))}
.hero .gl{position:absolute;right:0;top:0;width:100%;height:100%;opacity:0;transition:opacity 1s var(--ease)}
.hero .fallback{position:absolute;right:-4%;top:50%;width:min(620px,58vw);transform:translateY(-50%);opacity:.95;transition:opacity .8s var(--ease);pointer-events:none}
.gl-on .hero .gl{opacity:1}
.gl-on .hero .fallback{opacity:0}
.hero-grid{position:relative;display:grid;gap:26px}
.hero h1{font-size:clamp(36px,8.4vw,76px);max-width:13ch;text-shadow:0 10px 40px rgba(0,0,0,.4)}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent-h),var(--accent) 40%,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:var(--on-dark);font-size:18.5px;max-width:52ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding:0;list-style:none}
.chips li{font-size:14px;font-weight:700;color:var(--on-dark);padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.chips li::before{content:"✓ ";color:var(--teal)}
.hero .copy{max-width:620px}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);color:var(--on-dark-2);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
@media(max-width:899px){
  .hero{align-items:flex-start;padding-top:84px}
  .hero .stage .gl{top:auto;bottom:0;height:min(60vh,520px)}
  .hero .fallback{top:auto;bottom:10px;right:50%;transform:translateX(50%);width:min(480px,100vw,58vh)}
  .hero .copy{padding-bottom:min(54vh,470px)}
  .scroll-cue{display:none}
}
@media(min-width:900px){.hero .copy{padding-right:40%}.hero h1{max-width:12ch}}

/* glass cards + 3D tilt */
.glass{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 30px 60px -30px rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--r)}
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease);will-change:transform}
.tilt .lift{transform:translateZ(40px)}
.persp{perspective:1100px}

/* problem */
.vs{display:grid;gap:18px}
.vs .side{border-radius:var(--r);padding:26px;background:var(--card);box-shadow:var(--sh-1);position:relative;overflow:hidden}
.vs .side h3{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:14px}
.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vs li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px}
.vs li i{flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:15px}
.vs .them{box-shadow:var(--sh-2),inset 0 0 0 2px rgba(31,122,80,.25)}
.vs .them li i{background:var(--ok-soft);color:var(--ok)}
.vs .you li i{background:var(--bad-soft);color:var(--bad)}
.vs .you{background:#fbfaf7}
.vs .vsdot{display:grid;place-items:center;font-weight:900;color:var(--muted)}
.vs .vsdot span{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--accent);box-shadow:var(--sh-2);font-size:16px}
.punch{margin:30px auto 0;max-width:760px;text-align:center;font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.01em}
.punch b{color:var(--accent-ink)}
.note{font-size:14px;color:var(--muted);margin-top:10px}
.dark .note{color:var(--on-dark-2)}
@media(min-width:860px){.vs{grid-template-columns:1fr 70px 1fr;align-items:stretch}}

/* services */
.svc-grid{display:grid;gap:18px}
@media(min-width:720px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.svc-grid{grid-template-columns:repeat(4,1fr)}}
.svc{padding:26px 24px 24px;position:relative}
.svc .ico{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;margin-bottom:18px;box-shadow:0 16px 30px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.svc .ico svg{width:32px;height:32px}
.svc p{color:var(--on-dark-2);font-size:15.5px}
.svc ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;color:var(--on-dark)}
.svc li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-right:10px;transform:translateY(-2px)}
.svc .from{margin-top:16px;font-weight:800;color:var(--accent)}
.i1{background:linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af)}
.i2{background:linear-gradient(135deg,#3fd1c0,#1d7fd1)}
.i3{background:linear-gradient(135deg,#43e97b,#169b52)}
.i4{background:linear-gradient(135deg,#f6bf7a,#e07a2e)}
.gbp{margin-top:18px;display:grid;gap:16px;align-items:center;padding:22px 24px}
.gbp .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#7c6cf2,#3f57d1)}
.gbp .ico svg{width:28px;height:28px}
.gbp p{margin:0;color:var(--on-dark-2)}
@media(min-width:760px){.gbp{grid-template-columns:auto 1fr auto}}

/* packages */
.pk-grid{display:grid;gap:20px;align-items:stretch}
@media(min-width:900px){.pk-grid{grid-template-columns:1fr 1.15fr 1fr}}
.pk{background:var(--card);border-radius:var(--r);padding:28px 24px;box-shadow:var(--sh-1);display:flex;flex-direction:column;position:relative}
.pk h3{font-size:22px}
.pk .price{font-size:40px;font-weight:900;letter-spacing:-.03em;margin:10px 0 2px;line-height:1}
.pk .price small{font-size:16px;font-weight:700;color:var(--muted);letter-spacing:0}
.pk .was{font-size:14px;color:var(--muted)}
.pk ul{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px;font-size:15.5px}
.pk li{display:flex;gap:10px}
.pk li::before{content:"✓";color:var(--ok);font-weight:900}
.pk .btn{margin-top:auto}
.pk.best{background:linear-gradient(160deg,#14243f,#0c1626);color:#fff;box-shadow:var(--sh-2),0 0 0 2px rgba(240,172,90,.55);transform:translateZ(0)}
.pk.best .was,.pk.best .price small{color:var(--on-dark-2)}
.pk.best li::before{color:var(--teal)}
.pk .ribbon{position:absolute;top:-13px;left:24px;background:var(--accent);color:#1a1206;font-size:12.5px;font-weight:900;letter-spacing:.06em;padding:6px 12px;border-radius:999px;text-transform:uppercase}
@media(min-width:900px){.pk.best{transform:translateY(-14px)}}
.rate-table{margin-top:34px;background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.rate-table h3{padding:22px 24px 6px}
.rt-row{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:16px 24px;border-top:1px solid var(--line);align-items:center}
.rt-row b{display:block}
.rt-row span{font-size:14.5px;color:var(--muted)}
.rt-row .amt{font-weight:900;font-size:18px;white-space:nowrap;text-align:right}
.pay{margin-top:22px;display:grid;gap:12px;padding:22px 24px;border-radius:var(--r);background:var(--accent-soft);color:#3b2608}
.pay p{margin:0;font-size:15.5px}

/* process */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:s;position:relative}
.steps li{position:relative;padding:24px 22px 22px 84px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:20px;top:22px;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:20px;color:#1a1206;background:linear-gradient(160deg,var(--accent-h),var(--accent));box-shadow:0 12px 24px -10px rgba(240,172,90,.9)}
.steps p{margin:0;color:var(--on-dark-2);font-size:15.5px}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}.steps li{padding:84px 22px 24px}.steps li::before{top:22px}
  .steps::before{content:"";position:absolute;left:5%;right:5%;top:45px;height:2px;background:linear-gradient(90deg,transparent,rgba(240,172,90,.6),transparent);z-index:-1}}

/* examples */
.ex-grid{display:grid;gap:18px}
@media(min-width:720px){.ex-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.ex-grid{grid-template-columns:repeat(4,1fr)}}
.ex{background:var(--card);border-radius:var(--r);padding:24px;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.ex .emo{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:14px;background:var(--navy);color:var(--accent)}
.ex .emo svg{width:28px;height:28px}
.ex .tag{position:absolute;top:20px;right:20px}
.ex dl{margin:12px 0 0;display:grid;gap:10px;font-size:15px}
.ex dt{font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ex dd{margin:0}
.ex .flow{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--sand);font-size:14.5px;font-weight:600}

/* faq */
.faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--card);border-radius:var(--r-sm);box-shadow:var(--sh-1);padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:20px 30px 20px 0;font-weight:800;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:16px;font-size:26px;font-weight:400;color:var(--accent-ink);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;margin:0;color:var(--muted)}

/* contact */
.contact-grid{display:grid;gap:26px}
@media(min-width:960px){.contact-grid{grid-template-columns:1fr 1.1fr;align-items:start}}
.form{padding:26px 22px}
.form label{display:block;font-weight:700;font-size:14.5px;margin:0 0 6px;color:var(--on-dark)}
.form .f{margin-bottom:16px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.18);border-radius:12px;padding:13px 14px;min-height:50px}
.form select option{color:#111}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(240,172,90,.25)}
.form [aria-invalid=true]{border-color:#ff8a7a}
.form .row2{display:grid;gap:0 14px}
@media(min-width:560px){.form .row2{grid-template-columns:1fr 1fr}}
.form-note{margin-top:14px;padding:14px;border-radius:12px;background:rgba(63,209,192,.12);color:var(--on-dark);font-size:15px}
.contact-side ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.contact-side li{display:flex;gap:12px;color:var(--on-dark)}
.contact-side li b{color:#fff}
.contact-side a{color:var(--accent)}

/* footer */
footer{background:#060b14;color:var(--on-dark-2);padding:48px 0 30px;font-size:15px}
footer .cols{display:grid;gap:24px}
@media(min-width:800px){footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
footer a{color:var(--on-dark);text-decoration:none}
footer a:hover{color:#fff}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer h4{color:#fff;margin:0 0 10px;font-size:15px}
footer .legal{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px}

/* whatsapp float (hidden until NK_CONFIG.whatsapp is set) */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 14px 30px -8px rgba(37,211,102,.7)}
.wa-float svg{width:32px;height:32px}

/* reveal with depth */
.js .rv{opacity:0;transform:perspective(900px) translate3d(0,40px,-60px) rotateX(8deg);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

/* floating decor shapes in sections (CSS 3D) */
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(.3px);z-index:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.15) 30%,transparent 60%),radial-gradient(circle at 70% 70%,var(--c,#3fd1c0),transparent 70%);opacity:.5}
section>.wrap{position:relative;z-index:1}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}
.chk{display:inline-flex!important;align-items:center;gap:8px;margin:0!important;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);cursor:pointer;font-weight:700;font-size:14.5px}
.chk input{width:18px;height:18px;min-height:0;accent-color:var(--accent);margin:0}
.chk:has(input:checked){background:rgba(240,172,90,.18);box-shadow:inset 0 0 0 1.5px var(--accent)}

/* ===================================================================
   v13 look: dark, bold uppercase grotesk, tilted marquee ribbons,
   giant outline words, numbered steps (inspired by the reference Asad liked;
   own code and content, Northkeen amber kept as the main accent)
   =================================================================== */
@font-face{font-family:"NK Grotesk";src:url(fonts/space-grotesk-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--bg:#0e0e10;--bg-2:#151518;--bg-3:#1c1c21;--blue:#2f5bff;--disp:"NK Grotesk",var(--sans);--line-d:rgba(255,255,255,.1)}
body{background:var(--bg);color:#e8e8ea}
h1,h2,.disp{font-family:var(--disp);text-transform:uppercase;letter-spacing:-.01em;font-weight:700}
h3{font-family:var(--disp);letter-spacing:0}
section{background:var(--bg);color:#e8e8ea}
.sand,.dark,.dark.deep{background:var(--bg)}
.dark.deep{background:radial-gradient(900px 500px at 85% 0,rgba(240,172,90,.13),transparent 60%),radial-gradient(700px 400px at 0 100%,rgba(47,91,255,.12),transparent 60%),var(--bg)}
.lede,.dark .lede{color:#a9a9b2}
.eyebrow{color:#e8e8ea!important;letter-spacing:.14em}
.eyebrow::before{content:"✱";width:auto;height:auto;background:none;color:var(--accent);font-size:16px;letter-spacing:0}
.note{color:#8f8f98}
.hero h1{font-size:clamp(38px,10vw,104px);line-height:.95;max-width:none}
.hero .lede{color:#c9c9d0}
.hero .copy{max-width:760px}
@media(min-width:900px){.hero .copy{padding-right:34%}}
.hero .ghost-word{position:absolute;left:-2vw;top:14%;font-family:var(--disp);font-weight:700;font-size:clamp(120px,24vw,360px);line-height:.85;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(240,172,90,.16);white-space:nowrap;pointer-events:none;z-index:0;will-change:transform}
.btn.pri{background:var(--accent);box-shadow:0 12px 30px -12px rgba(240,172,90,.8)}
.btn.sec{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);border-radius:999px}
.chips li{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);text-transform:uppercase;font-size:12.5px;letter-spacing:.08em}

/* tilted crossing marquee ribbons */
.ribbons{position:relative;height:150px;overflow:hidden;background:var(--bg);margin:-30px 0 0;z-index:2}
.rib{position:absolute;left:-5%;width:110%;display:flex;overflow:hidden;padding:12px 0;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(20px,3.2vw,34px);line-height:1;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.rib.a{top:28px;background:var(--accent);color:#120c04;transform:rotate(-3deg)}
.rib.b{top:74px;background:var(--blue);color:#fff;transform:rotate(2.2deg)}
.rib .track{display:flex;flex:none;gap:0;white-space:nowrap;animation:nkm 38s linear infinite}
.rib.b .track{animation-direction:reverse;animation-duration:44s}
.rib .track span{padding:0 18px}
.rib .track span::after{content:"✱";margin-left:36px}
@keyframes nkm{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* cards to dark */
.vs .side,.pk,.ex,.faq details,.rate-table{background:var(--bg-2);color:#e8e8ea;box-shadow:inset 0 0 0 1px var(--line-d),0 30px 60px -30px rgba(0,0,0,.8)}
.vs .you{background:#121215}
.vs .them{box-shadow:inset 0 0 0 1.5px rgba(63,209,192,.35),0 30px 60px -30px rgba(0,0,0,.8)}
.vs .them li i{background:rgba(63,209,192,.15);color:var(--teal)}
.vs .you li i{background:rgba(255,106,80,.14);color:#ff8a70}
.tag{background:rgba(240,172,90,.15);color:var(--accent)}
.tag.ok{background:rgba(63,209,192,.15);color:var(--teal)}.tag.bad{background:rgba(255,106,80,.14);color:#ff8a70}
.vs .vsdot span{background:var(--accent);color:#120c04;font-family:var(--disp)}
.punch{font-family:var(--disp);text-transform:uppercase;font-size:clamp(22px,3.4vw,34px);line-height:1.15}
.punch b{color:var(--accent)}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px var(--line-d),0 30px 60px -30px rgba(0,0,0,.8)}
.svc .cat,.ex .cat{display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8f8f98;margin-bottom:6px}
.svc h3{font-size:22px;text-transform:uppercase;line-height:1.1}
.svc .from{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-d);padding-top:14px}
.svc .from::after{content:"→";color:#fff;font-size:20px}
.pk .was,.pk .price small,.rt-row span{color:#9a9aa3}
.pk .price{font-family:var(--disp)}
.pk li::before{color:var(--teal)}
.pk.best{background:linear-gradient(160deg,#1f1a12,#141210);box-shadow:inset 0 0 0 2px var(--accent),0 40px 80px -30px rgba(240,172,90,.35)}
.btn.ink{background:#fff;color:#111}
.rt-row{border-top-color:var(--line-d)}
.pay{background:rgba(240,172,90,.1);color:#f3dcbc;box-shadow:inset 0 0 0 1px rgba(240,172,90,.3)}
.ex .emo{background:var(--accent);color:#120c04}
.ex .flow{background:rgba(255,255,255,.05);color:#d8d8de}
.ex dt{color:#8f8f98}
.faq summary::after{color:var(--accent)}
.faq details p{color:#a9a9b2}
footer{background:#080809}

/* big statement with inline 3D chips */
.statement{padding:70px 0 40px;text-align:center}
.statement p{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:clamp(30px,6.4vw,76px);line-height:1.08;margin:0}
.statement .chip3d{display:inline-block;width:1.5em;height:.82em;border-radius:.41em;vertical-align:-.06em;margin:0 .12em;background:var(--g);box-shadow:inset 0 -6px 12px rgba(0,0,0,.35),inset 0 6px 12px rgba(255,255,255,.35),0 10px 24px -8px rgba(0,0,0,.6);animation:nkspin 6s ease-in-out infinite}
.statement .chip3d.r{width:.82em;border-radius:50%}
.statement .hl{display:inline-block;background:var(--accent);color:#120c04;padding:0 .2em;border-radius:.14em;transform:rotate(-2deg)}
@keyframes nkspin{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-4px)}}

/* numbered steps like 01 / 02 */
.steps li::before{content:"0" counter(s);background:none;box-shadow:none;width:auto;height:auto;font-family:var(--disp);font-size:46px;color:transparent;-webkit-text-stroke:1.5px var(--accent);left:22px;top:16px}
.steps li{padding-left:96px}
@media(min-width:900px){.steps li{padding:88px 22px 24px}}
.steps h3{text-transform:uppercase}

/* section heading underline accent */
.sec-head h2{font-size:clamp(32px,5.6vw,64px);line-height:1}
.outline{color:transparent;-webkit-text-stroke:1.5px currentColor}
.sec-head h2 .outline{-webkit-text-stroke-color:#e8e8ea}

/* form on dark already */
.form label,.contact-side li{color:#c9c9d0}

@media (prefers-reduced-motion: reduce){.rib .track{animation:none}.statement .chip3d{animation:none}}
section,.ribbons,footer{overflow-x:clip}
@supports not (overflow:clip){section,.ribbons,footer{overflow-x:hidden}}
@media(min-width:900px){
  .hero{min-height:max(100svh,640px)}
  .hero h1{font-size:clamp(40px,5.4vw,78px)}
  .hero .copy{padding-right:30%}
}
/* v13 clinic additions */
.gbp.ai{border-radius:var(--r);box-shadow:inset 0 0 0 1.5px rgba(124,108,242,.6),0 30px 60px -30px rgba(0,0,0,.8)}
.gbp .cat{display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#a99cff;margin-bottom:4px}
.gbp .from{color:var(--accent);font-weight:800}
.ex-grid.three{grid-template-columns:1fr}
@media(min-width:900px){.ex-grid.three{grid-template-columns:repeat(3,1fr)}}
.jaiza-grid,.hum-grid{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.jaiza-grid{grid-template-columns:1fr 1fr}.hum-grid{grid-template-columns:.9fr 1.1fr}}
.report{padding:22px}
.rep-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--disp);text-transform:uppercase}
.rep-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line-d);font-size:15px}
.rep-row i{font-style:normal;font-weight:800;text-align:right}
.rep-row i.bad{color:#ff8a70}.rep-row i.mid{color:var(--accent)}.rep-row i.ok{color:var(--teal)}
.rep-next{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:rgba(240,172,90,.1);font-size:15px}
.promise{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.promise li{padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-d);color:#d8d8de}
.promise li::before{content:"✱ ";color:var(--accent)}
.m-cta{position:fixed;left:12px;right:84px;bottom:14px;z-index:55;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;background:var(--accent);color:#120c04;font-weight:800;text-decoration:none;box-shadow:0 14px 30px -10px rgba(0,0,0,.7);transform:translateY(120%);transition:transform .35s var(--ease)}
html:not(.has-wa) .m-cta{right:12px}
.m-cta.show{transform:none}
@media(min-width:900px){.m-cta{display:none}}
.m-cta{transform:translateY(calc(100% + 40px))}
.m-cta.show{transform:none}
@media(max-width:599px){.hero .chips{display:none}.hero .copy{padding-bottom:min(50vh,430px)}}

/* v13b nuksan calculator */
.calc-grid{display:grid;gap:22px;align-items:stretch}
@media(min-width:900px){.calc-grid{grid-template-columns:1fr 1fr}}
.calc{padding:24px 22px}
.calc .f:last-of-type{margin-bottom:14px}
.calc-out{padding:26px 22px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.calc-out .tag{margin-bottom:14px}
.calc-lbl{margin:0;color:#a9a9b2;font-weight:700;font-size:15px}
.calc-amt{margin:2px 0 4px;font-family:var(--disp);font-weight:800;font-size:clamp(40px,8vw,64px);line-height:1.05;color:var(--accent);letter-spacing:-.02em;overflow-wrap:anywhere;max-width:100%}
.calc-sub{margin:0 0 14px;font-weight:700;color:#e8e8ea}
.calc-how{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:rgba(240,172,90,.1);font-size:15px;color:#d8d8de;width:100%}
.calc-out .btn{margin-top:auto}

/* ===== v13i SEO + social additions ===== */
.hero .fallback{height:auto;aspect-ratio:1/1;object-fit:contain}
footer h2{color:#fff;margin:0 0 10px;font-size:15px;font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:800;line-height:1.3}
/* social icons (icon only, URLs come from NK_CONFIG in nk3.js) */
.soc{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px}
.soc a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;transition:transform .2s var(--ease),filter .2s}
.soc a:hover{transform:translateY(-2px);filter:brightness(1.12)}
.soc svg{width:22px;height:22px}
.soc .s-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.soc .s-li{background:#0a66c2}
.soc .s-wa{background:var(--wa)}
.soc-h{order:2;margin-left:auto;margin-right:10px;gap:8px}
.soc-h a{width:34px;height:34px;border-radius:10px}.soc-h svg{width:18px;height:18px}
header.nav .menu-toggle{order:3}
@media(max-width:479px){.soc-h{display:none}}
@media(min-width:900px){.soc-h{order:4;margin:0 0 0 14px}header.nav #navlinks{order:3;margin-left:auto}}
footer .soc{margin-top:16px}
.contact-side .soc{margin-top:18px}
.wa-float{text-decoration:none}
/* jump menu (internal anchors) */
.jump{background:#0b0b0d;border-bottom:1px solid var(--line-d);padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.jump ul{list-style:none;margin:0 auto;padding:12px 20px;display:flex;gap:8px;max-width:1180px;white-space:nowrap}
.jump a{display:inline-block;padding:8px 14px;border-radius:999px;color:#d6d6dc;text-decoration:none;font-weight:700;font-size:14.5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.jump a:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--accent)}
/* service page links on home */
.svc-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.svc-links a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;text-decoration:none;font-weight:700;font-size:15px}
.svc-links a::after{content:"→";color:var(--accent)}
.svc-links a:hover{box-shadow:inset 0 0 0 1px var(--accent)}
/* landing pages */
.page-hero{padding:128px 0 56px}
.page-hero h1{font-size:clamp(32px,6.4vw,64px);line-height:1;max-width:18ch}
.page-hero .lede{color:#c9c9d0;font-size:18.5px;max-width:60ch}
.crumbs{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:#a9a9b3}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}
.crumbs a{color:#d6d6dc}
.price-pill{display:inline-block;margin-top:18px;padding:8px 16px;border-radius:999px;background:rgba(240,172,90,.14);color:var(--accent-h);font-weight:800;box-shadow:inset 0 0 0 1px rgba(240,172,90,.4)}
.prose{max-width:760px}
.prose h2{font-size:clamp(24px,3.6vw,34px);margin:44px 0 12px;color:#fff}
.prose h2:first-child{margin-top:0}
.prose h3{margin:24px 0 8px}
.prose p,.prose li{color:#c4c4cc;font-size:17.5px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 14px}
.prose li{margin:6px 0}
.prose a{color:var(--accent);font-weight:700}
.prose strong,.prose b{color:#fff}
.prose .box{background:var(--bg-2);border-radius:var(--r-sm);padding:18px 20px;box-shadow:inset 0 0 0 1px var(--line-d);margin:18px 0}
.prose .box p:last-child{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:16px;background:var(--bg-2);border-radius:12px;overflow:hidden}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-d);color:#d6d6dc}
.prose th{color:#fff}
.lp-cta{padding:64px 0}
.lp-cta .wrap{display:grid;gap:18px;max-width:860px}
.lp-cta .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.related{list-style:none;padding:0;margin:0;display:grid;gap:10px}
@media(min-width:720px){.related{grid-template-columns:1fr 1fr}}
.related a{display:block;padding:14px 16px;border-radius:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-d);text-decoration:none;font-weight:700;color:#fff}
.related a:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.related a span{display:block;font-weight:400;color:#a9a9b2;font-size:15px;margin-top:2px}
@media(min-width:800px){footer .cols.cols4{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.trust-list{list-style:none;margin:22px 0 18px;padding:0;display:grid;gap:10px}
.trust-list li{padding:14px 16px;border-radius:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-d);color:#c4c4cc;font-size:16px}
.trust-list b{color:#fff}.trust-list a{color:var(--accent)}
.soc-cta{margin-left:4px}