/* ============================================================
   qdp.css — Quantum Digital+ shared design system (Ink)
   Single source of truth for tokens + shared components.
   Derived from DESIGN.md / v8-keynote-rich-FINAL.
   Every page links this; page-specific CSS stays in-page.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --white:#FFFFFF; --gray:#F5F5F7; --ink:#1D1D1F; --ink-hover:#000000;
  --muted:#6E6E73; --hairline:#D2D2D7; --wash:#EFEFF1; --wash-edge:#D6D6DA; --focus:#1D1D1F;
  --danger:#B42318; --danger-bg:#FEF3F2; --danger-edge:#F5C2BD;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --ease:cubic-bezier(.25,.1,.25,1);
}

/* ---------- reset + base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans); color:var(--ink); background:var(--white); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
::selection{background:var(--ink); color:#fff}
a{color:inherit}
img{max-width:100%; display:block}
h1,h2,h3{letter-spacing:-.022em; text-wrap:balance; font-weight:700}
p{text-wrap:pretty}
.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(20px,4vw,44px)}
.wrap--narrow{max-width:760px}
:where(a,button,input,select,textarea):focus-visible{outline:2.5px solid var(--focus); outline-offset:3px}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important; transition:none!important} html{scroll-behavior:auto} }

/* ---------- icon chip (the one icon family) ---------- */
.chip{width:44px; height:44px; border-radius:12px; background:var(--wash); border:1px solid var(--wash-edge); display:grid; place-items:center; flex-shrink:0}
.chip svg{width:22px; height:22px; stroke:var(--ink); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.72); backdrop-filter:saturate(1.8) blur(20px); -webkit-backdrop-filter:saturate(1.8) blur(20px); border-bottom:1px solid rgba(0,0,0,.08)}
.nav__in{max-width:1080px; margin:0 auto; padding:12px clamp(20px,4vw,44px); display:flex; align-items:center; gap:24px}
.nav__logo{font-size:.94rem; font-weight:600; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:9px}
.nav__logo img{height:22px; width:auto; display:block}
.nav__links{display:flex; gap:26px; margin-left:auto; list-style:none}
.nav__links a{font-size:.82rem; color:var(--muted); text-decoration:none; transition:color .2s}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--ink)}
.nav__toggle{display:none; font-size:.82rem; font-weight:500; background:none; border:1px solid var(--hairline); color:var(--ink); padding:7px 14px; border-radius:999px; cursor:pointer}
.nav__menu{display:none}
@media(max-width:820px){
  .nav__links{display:none} .nav .btn{margin-left:auto} .nav__toggle{display:inline-block}
  .nav__menu{display:none; position:absolute; top:100%; left:0; right:0; z-index:55; background:rgba(255,255,255,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(0,0,0,.1)}
  .nav--open .nav__menu{display:block}
  .nav__menu a{display:block; padding:15px clamp(20px,4vw,44px); text-decoration:none; font-size:1rem; font-weight:600; color:var(--ink); border-top:1px solid rgba(0,0,0,.06)}
  .nav__menu a:hover{color:var(--muted)}
}
@media(max-width:480px){ .nav__in{gap:12px; padding-left:16px; padding-right:16px} .nav .btn{padding:6px 12px; font-size:.74rem} .nav__toggle{padding:6px 12px; font-size:.74rem} }

/* ---------- buttons ---------- */
.btn{display:inline-block; background:var(--ink); color:#fff; text-decoration:none; font-weight:500; font-size:.96rem; padding:13px 28px; border-radius:999px; border:1px solid var(--ink); transition:background .2s var(--ease), transform .2s var(--ease); box-shadow:0 8px 22px -12px rgba(0,0,0,.28); cursor:pointer}
.btn:hover{background:var(--ink-hover); transform:translateY(-1px)}
.btn--link{background:none; border:none; color:var(--ink); padding:12px 4px; font-weight:500; box-shadow:none}
.btn--link:hover{text-decoration:underline; text-underline-offset:4px; transform:none; background:none}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--wash-edge); box-shadow:none}
.btn--ghost:hover{background:#fff; border-color:var(--ink)}
.nav .btn{padding:7px 16px; font-size:.8rem; box-shadow:none}
.assure{font-size:.8rem; color:var(--muted); margin-top:12px}
.assure b{color:var(--ink); font-weight:600}

/* ---------- page hero (centered default) ---------- */
.phero{padding:clamp(52px,7.5vw,96px) 0 clamp(28px,4vw,40px); text-align:center; position:relative; overflow:hidden}
.phero::before{content:""; position:absolute; left:50%; top:-15%; transform:translateX(-50%); width:min(1050px,120vw); height:70%; background:radial-gradient(closest-side, rgba(0,0,0,.045), transparent 70%); pointer-events:none}
.phero>.wrap{position:relative}
.phero .kicker{font-family:var(--mono); font-size:.8rem; color:var(--muted); margin-bottom:16px}
.phero h1{font-size:clamp(2.1rem,5vw,3.5rem); line-height:1.08; max-width:20ch; margin:0 auto}
.phero h1 em{font-style:normal; color:var(--muted)}
.phero .sub{margin:20px auto 0; font-size:clamp(1.02rem,1.6vw,1.24rem); color:var(--muted); max-width:54ch}
.phero .cta{margin-top:26px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; align-items:center}

/* ---------- bands ---------- */
.band{padding:clamp(52px,8vw,92px) 0}
.band--gray{background:var(--gray)}
.band h2{font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.16; max-width:24ch}
.band h2.center,.band .center{text-align:center; margin-left:auto; margin-right:auto}
.band .lead{margin-top:16px; color:var(--muted); max-width:60ch; font-size:1.05rem}

/* ---------- terminal ---------- */
.term{background:#fff; border:1px solid var(--hairline); border-radius:18px; overflow:hidden; text-align:left; box-shadow:0 2px 6px rgba(0,0,0,.05), 0 44px 90px -40px rgba(0,0,0,.30)}
.term__bar{display:flex; align-items:center; gap:8px; padding:12px 18px; background:var(--gray); border-bottom:1px solid var(--hairline)}
.term__bar .dots{display:flex; gap:7px}
.term__bar .dots i{width:11px; height:11px; border-radius:50%; border:1px solid rgba(0,0,0,.08)}
.term__bar .dots i:nth-child(1){background:#F87171} .term__bar .dots i:nth-child(2){background:#FBBF24} .term__bar .dots i:nth-child(3){background:#34D399}
.term__bar .title{font-family:var(--mono); font-size:.72rem; color:var(--muted); margin:0 auto}
.term__body{padding:22px 26px; font-family:var(--mono); font-size:.84rem; line-height:2.05}
.term__body .dim{color:var(--muted)} .term__body .em{color:var(--ink); font-weight:500}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,24px)}
.step{background:#fff; border:1px solid var(--hairline); border-radius:18px; padding:28px 30px}
.step .chip{margin-bottom:16px}
.step h3{font-size:1.1rem}
.step .no{font-family:var(--mono); font-size:.7rem; color:var(--ink); display:block; margin:4px 0 8px}
.step p{font-size:.92rem; color:var(--muted)}
@media(max-width:820px){ .steps{grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto} }

/* ---------- pricing (no figures) ---------- */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,28px)}
.plan{background:#fff; border:1px solid var(--hairline); border-radius:18px; padding:clamp(28px,3.5vw,40px); display:flex; flex-direction:column}
.plan--partner{outline:2px solid var(--ink); outline-offset:-2px; background:linear-gradient(180deg,#fff,#F7F7F8)}
.plan .kind{font-family:var(--mono); font-size:.7rem; color:var(--muted); margin-bottom:12px}
.plan h3{font-size:1.32rem}
.plan .sub{margin-top:4px; font-size:.92rem; color:var(--muted)}
.plan .price{margin-top:18px; font-size:1.5rem; font-weight:700; letter-spacing:-.03em}
.plan .price small{display:block; font-size:.82rem; font-weight:400; color:var(--muted); margin-top:2px}
.plan ul{margin:18px 0 24px; list-style:none; flex:1}
.plan li{padding:8px 0 8px 26px; font-size:.92rem; color:var(--muted); border-bottom:1px solid var(--gray); position:relative}
.plan li::before{content:""; position:absolute; left:2px; top:15px; width:9px; height:5px; border-left:1.8px solid var(--ink); border-bottom:1.8px solid var(--ink); transform:rotate(-45deg)}
.plan li:last-child{border-bottom:0}
.plan .btn{align-self:flex-start}
.anchorline{margin:0 auto; max-width:60ch; font-size:1rem; color:var(--muted); background:#fff; border:1px solid var(--hairline); border-radius:999px; padding:12px 26px; display:inline-block}
.anchorline b{color:var(--ink)}
.guarantee{background:#fff; border:1.5px solid var(--wash-edge); border-radius:18px; padding:clamp(24px,3.5vw,32px); display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; box-shadow:0 2px 10px rgba(0,0,0,.05)}
.guarantee h3{font-size:1.16rem}
.guarantee p{margin-top:6px; font-size:.95rem; color:var(--muted); max-width:64ch}
@media(max-width:820px){ .plans{grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto} }
@media(max-width:600px){ .guarantee{grid-template-columns:1fr} }

/* ---------- diff (before → after) ---------- */
.diff{border:1px solid var(--hairline); border-radius:14px; overflow:hidden; font-family:var(--mono); font-size:.84rem; line-height:1.8; background:#fff}
.diff .bar{padding:10px 18px; background:var(--gray); border-bottom:1px solid var(--hairline); font-size:.7rem; color:var(--muted)}
.diff .hunk{padding:14px 18px; border-bottom:1px solid var(--hairline)}
.diff .hunk:last-child{border-bottom:0}
.diff .file{font-size:.7rem; color:var(--muted); display:block; margin-bottom:8px}
.diff .minus,.diff .plus{display:block; padding-left:1.4em; position:relative}
.diff .minus{color:var(--muted)} .diff .minus::before{content:"−"; position:absolute; left:0}
.diff .plus{color:var(--ink); font-weight:500} .diff .plus::before{content:"+"; position:absolute; left:0}

/* ---------- stats + quote ---------- */
.numbers{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,28px)}
.numbers div{text-align:center}
.numbers b{display:block; font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:700; letter-spacing:-.03em; color:var(--ink)}
.numbers span{display:block; margin-top:6px; font-size:.88rem; color:var(--muted)}
.quoteline{max-width:52ch; font-size:1.15rem; line-height:1.55}
.quoteline footer{margin-top:12px; font-size:.82rem; color:var(--muted)}
@media(max-width:720px){ .numbers{grid-template-columns:1fr 1fr} }

/* ---------- photo ---------- */
.photo{border-radius:18px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.05), 0 34px 80px -44px rgba(0,0,0,.3)}
.photo img{width:100%; object-fit:cover; filter:saturate(.85)}
.photocap{margin-top:12px; font-size:.82rem; color:var(--muted)}
.photogrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:640px){ .photogrid{grid-template-columns:1fr} }

/* ---------- generic CTA band ---------- */
.cta-band{text-align:center}
.cta-band .prompt{font-family:var(--mono); font-size:.84rem; color:var(--muted); margin-bottom:16px}
.cta-band h2{margin:0 auto}
.cta-band p{margin:14px auto 0; color:var(--muted); max-width:52ch}
.cta-band .cta{margin-top:26px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap}

/* ---------- footer ---------- */
footer.site{background:var(--gray); border-top:1px solid var(--hairline)}
footer.site .in{max-width:1080px; margin:0 auto; padding:28px clamp(20px,4vw,44px); display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; font-size:.8rem; color:var(--muted)}
footer.site .fam{font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:8px}
footer.site .fam img{height:17px; width:auto; display:block}
footer.site nav{margin-left:auto; display:flex; gap:16px}
footer.site nav a{text-decoration:none; color:var(--muted)}
footer.site nav a:hover{color:var(--ink)}
footer.site .abn{width:100%; font-size:.72rem}
@media(max-width:680px){ footer.site nav{margin-left:0} }