@font-face{
  font-family:'Archivo Black';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/archivo-black.woff2') format('woff2');
}
:root{
  --paper:#F4F2ED; --paper-2:#EDEAE3; --surface:#FBFAF7; --ink:#17171A; --text:#1C1C20;
  --muted:#6E6C66; --faint:#9A978F; --line:rgba(23,23,26,.13); --line-soft:rgba(23,23,26,.07);
  --accent:#2C3AE0; --accent-ink:#1B2597; --accent-soft:rgba(44,58,224,.10);
  --on-ink:#F4F2ED; --on-ink-muted:#A7A59D; --green:#2F8F5B;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#0B0B0C; --paper-2:#131315; --surface:#131316; --ink:#E9E7E1; --text:#E9E7E1;
    --muted:#97948C; --faint:#63615B; --line:rgba(233,231,225,.14); --line-soft:rgba(233,231,225,.07);
    --accent:#8A94FF; --accent-ink:#6C78F5; --accent-soft:rgba(138,148,255,.13);
    --on-ink:#0B0B0C; --on-ink-muted:#6B6960; --green:#5FCB8C; }
}
:root[data-theme="light"]{ --paper:#F4F2ED; --paper-2:#EDEAE3; --surface:#FBFAF7; --ink:#17171A; --text:#1C1C20; --muted:#6E6C66; --faint:#9A978F; --line:rgba(23,23,26,.13); --line-soft:rgba(23,23,26,.07); --accent:#2C3AE0; --accent-ink:#1B2597; --accent-soft:rgba(44,58,224,.10); --on-ink:#F4F2ED; --on-ink-muted:#A7A59D; --green:#2F8F5B; }
:root[data-theme="dark"]{ --paper:#0B0B0C; --paper-2:#131315; --surface:#131316; --ink:#E9E7E1; --text:#E9E7E1; --muted:#97948C; --faint:#63615B; --line:rgba(233,231,225,.14); --line-soft:rgba(233,231,225,.07); --accent:#8A94FF; --accent-ink:#6C78F5; --accent-soft:rgba(138,148,255,.13); --on-ink:#0B0B0C; --on-ink-muted:#6B6960; --green:#5FCB8C; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--paper); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }

/* Archivo Black display headings */
.display{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; letter-spacing:-.02em; line-height:1.05; text-wrap:balance; }
.mono{ font-family:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }
@media (max-width:720px){ .wrap{ padding:0 22px; } }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ink); color:var(--paper); }

/* ---------- watermark ---------- */
main{ position:relative; z-index:1; }
.watermark{ position:fixed; inset:0; z-index:0; pointer-events:none; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.watermark span{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:-.04em; font-size:clamp(150px,33vw,620px); line-height:1; white-space:nowrap; color:var(--text); opacity:.05; user-select:none; }
:root[data-theme="light"] .watermark span{ opacity:.05; }
:root[data-theme="dark"] .watermark span{ opacity:.07; }
@media (prefers-color-scheme: dark){ .watermark span{ opacity:.07; } }
@media (prefers-reduced-motion: no-preference){ .watermark span{ transition:opacity .6s; } }

/* ---------- nav ---------- */
header.nav{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background .4s,border-color .4s,backdrop-filter .4s; border-bottom:1px solid transparent; }
header.nav.solid{ backdrop-filter:saturate(120%) blur(16px); background:color-mix(in srgb,var(--paper) 82%,transparent); border-bottom:1px solid var(--line-soft); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.logo{ display:inline-flex; align-items:flex-end; color:var(--nav-fg,var(--text)); transition:color .4s; }
.wordmark{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:22px; letter-spacing:-.01em; text-transform:uppercase; line-height:.9; border-bottom:2px solid currentColor; padding-bottom:3px; }
header.nav:not(.solid) .logo, header.nav:not(.solid) .nav-links a, header.nav:not(.solid) .textlink, header.nav:not(.solid) .toggle{ text-shadow:0 1px 14px rgba(0,0,0,.35); }
.nav-links{ display:flex; gap:38px; align-items:center; }
.nav-links a.link{ font-size:14.5px; color:var(--nav-fg,var(--muted)); opacity:.82; transition:opacity .25s,color .4s; }
.nav-links a.link:hover{ opacity:1; }
.nav-links a.link.active{ opacity:1; color:var(--nav-fg,var(--text)); }
.nav-cta{ display:flex; align-items:center; gap:20px; }

/* mega-menu */
.has-menu{ position:relative; }
.has-menu > .link{ display:inline-flex; align-items:center; gap:7px; }
.has-menu > .link::after{ content:""; width:5px; height:5px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-1px); opacity:.7; transition:transform .3s ease; }
.has-menu:hover > .link::after, .has-menu:focus-within > .link::after{ transform:rotate(225deg) translateY(-1px); }
.mega{ position:absolute; top:100%; left:-18px; padding-top:16px; width:560px; max-width:82vw; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px); transition:opacity .26s ease,transform .3s cubic-bezier(.2,.7,.3,1); z-index:60; }
.has-menu:hover .mega, .has-menu:focus-within .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.mega-inner{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:0 30px 70px -24px rgba(6,7,20,.45),0 6px 16px rgba(6,7,20,.12); }
.mega-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px 14px; }
.mega-head .mono{ color:var(--faint); }
.mega-head a{ font-size:13px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:1px; text-shadow:none; }
.mega-head a:hover{ color:var(--accent); border-color:var(--accent); }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.mega-card{ position:relative; display:flex; gap:14px; padding:15px 14px; border-radius:12px; transition:background .2s ease; text-shadow:none; }
.mega-card:hover{ background:var(--paper-2); }
.mc-ico{ width:40px; height:40px; border-radius:11px; background:color-mix(in srgb,var(--accent) 13%,transparent); color:var(--accent); display:grid; place-items:center; flex:none; transition:transform .25s ease; }
.mega-card:hover .mc-ico{ transform:translateY(-2px); }
.mc-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.mc-title{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:15.5px; letter-spacing:-.01em; color:var(--text); }
.mc-num{ font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:var(--faint); letter-spacing:.12em; }
.mc-desc{ color:var(--muted); font-size:13px; line-height:1.45; }
.mc-go{ position:absolute; top:15px; right:15px; color:var(--faint); opacity:0; transform:translateX(-4px); transition:opacity .2s,transform .2s,color .2s; }
.mega-card:hover .mc-go{ opacity:1; transform:none; color:var(--accent); }
.mega a{ text-shadow:none; }
@media (prefers-reduced-motion: reduce){ .mega{ transition:none; } }
.textlink{ font-size:14.5px; color:var(--nav-fg,var(--text)); border-bottom:1px solid currentColor; padding-bottom:2px; opacity:.9; transition:opacity .25s,color .4s; }
.textlink:hover{ opacity:1; }
@media (max-width:880px){ .nav-links .link{ display:none; } }
.toggle{ width:34px; height:34px; border-radius:50%; border:1px solid currentColor; background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--nav-fg,var(--muted)); opacity:.7; transition:opacity .25s,color .4s; }
.toggle:hover{ opacity:1; }

/* live temperature chip (top corner) */
.temp-chip{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; color:var(--nav-fg,var(--text)); opacity:.85; font-variant-numeric:tabular-nums; white-space:nowrap; transition:color .4s,opacity .25s; }
.temp-chip:hover{ opacity:1; }
.temp-chip svg{ opacity:.75; flex:none; }
.temp-chip .temp-val{ letter-spacing:.01em; }
header.nav:not(.solid) .temp-chip{ text-shadow:0 1px 14px rgba(0,0,0,.35); }
@media (max-width:520px){ .temp-chip{ display:none; } }

/* ---------- video hero (start) ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding-top:112px; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,.62) 0%,rgba(10,10,12,.30) 26%,rgba(10,10,12,.52) 58%,rgba(10,10,12,.92) 100%),radial-gradient(90% 70% at 18% 88%,rgba(10,10,12,.62),transparent 62%); }
.hero-watermark{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; overflow:hidden; pointer-events:none; }
.hero-watermark span{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:-.04em; font-size:clamp(150px,33vw,620px); line-height:1; white-space:nowrap; color:#F6F5F1; opacity:.06; transform:translateY(-7%); }
.hero-inner{ position:relative; z-index:3; width:100%; padding-bottom:68px; color:#F6F5F1; }
.hero-inner::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:78%; z-index:-1; pointer-events:none; background:linear-gradient(to top,rgba(6,7,12,.95) 0%,rgba(6,7,12,.84) 32%,rgba(6,7,12,.58) 56%,rgba(6,7,12,.24) 80%,transparent 100%); }
h1.hero-title{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:clamp(38px,7vw,88px); margin:0; max-width:18ch; letter-spacing:-.02em; line-height:1.02; text-shadow:0 1px 1px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.6),0 2px 44px rgba(0,0,0,.5); }
.hero-euro{ display:flex; align-items:center; gap:16px; margin:26px 0 0; color:rgba(246,245,241,.9); font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; text-shadow:0 1px 16px rgba(0,0,0,.35); }
.hero-euro .ln{ width:44px; height:1px; background:currentColor; opacity:.6; display:block; flex:none; }
h1.hero-title .thin{ color:rgba(246,245,241,.72); }
.hero-lower{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-top:40px; }
.hero-sub{ font-size:19px; color:rgba(246,245,241,.86); max-width:44ch; line-height:1.6; margin:0; text-shadow:0 1px 20px rgba(0,0,0,.3); }
.hero-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.scroll-hint{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; color:rgba(246,245,241,.7); display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint .bar{ width:1px; height:34px; background:linear-gradient(rgba(246,245,241,.7),transparent); animation:drop 2s infinite; }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
@media (prefers-reduced-motion: reduce){ .scroll-hint .bar{ animation:none; } }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-weight:500; font-size:15px; padding:14px 26px; border-radius:999px; cursor:pointer; transition:transform .25s ease,background .25s,color .25s,border-color .25s; border:1px solid transparent; }
.btn-solid{ background:#F6F5F1; color:#17171A; }
.btn-solid:hover{ transform:translateY(-2px); }
.btn-line{ border-color:rgba(246,245,241,.4); color:#F6F5F1; }
.btn-line:hover{ border-color:#F6F5F1; }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ transform:translateY(-2px); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ transform:translateY(-2px); box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 34%,transparent); }
.btn-lineink{ border-color:var(--line-strong,var(--line)); color:var(--text); border-color:color-mix(in srgb,var(--text) 22%,transparent); }
.btn-lineink:hover{ border-color:var(--text); }
.arrow{ transition:transform .3s; }
.btn:hover .arrow, .textlink:hover .arrow, .post:hover .arrow{ transform:translateX(3px); }

/* ---------- sections ---------- */
.sec{ padding:116px 0; }
@media (max-width:720px){ .sec{ padding:80px 0; } }
.sec.tight{ padding:80px 0; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.sec-head{ display:grid; grid-template-columns:0.9fr 1.4fr; gap:40px; align-items:start; margin-bottom:64px; }
@media (max-width:800px){ .sec-head{ grid-template-columns:1fr; gap:20px; margin-bottom:44px; } }
.sec-head .kicker{ color:var(--muted); }
.sec-head h2{ font-size:clamp(28px,4.2vw,46px); margin:0; letter-spacing:-.02em; line-height:1.06; }
.sec-head .lead{ color:var(--muted); font-size:19px; max-width:50ch; margin:18px 0 0; }
.kicker{ color:var(--accent); }

/* services list */
.svc-list{ border-top:1px solid var(--line); }
.svc{ display:grid; grid-template-columns:64px 1fr 1.15fr auto; gap:28px; align-items:baseline; padding:34px 8px; border-bottom:1px solid var(--line); transition:padding .4s cubic-bezier(.2,.7,.3,1),background .4s; }
.svc:hover{ background:var(--paper-2); padding-left:22px; padding-right:22px; }
.svc .num{ color:var(--faint); font-size:13px; letter-spacing:.1em; font-family:ui-monospace,Menlo,monospace; }
.svc h3{ font-size:clamp(23px,2.6vw,30px); margin:0; font-weight:600; letter-spacing:-.03em; }
.svc p{ color:var(--muted); margin:0; font-size:16px; max-width:46ch; }
.svc .go{ color:var(--faint); transition:color .3s,transform .3s; }
.svc:hover .go{ color:var(--accent); transform:translateX(4px); }
.svc .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.tag{ font-size:12px; color:var(--faint); letter-spacing:.02em; }
.tag::after{ content:"·"; margin-left:8px; color:var(--line); }
.tag:last-child::after{ content:""; }
@media (max-width:860px){ .svc{ grid-template-columns:40px 1fr auto; row-gap:12px; } .svc p{ grid-column:2 / 4; } }

/* process grid */
.proc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.proc{ background:var(--paper); padding:40px 30px 44px; }
.proc .n{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--accent); letter-spacing:.14em; }
.proc h4{ font-size:22px; margin:20px 0 12px; font-weight:600; letter-spacing:-.02em; }
.proc p{ color:var(--muted); font-size:15px; margin:0; }
@media (max-width:820px){ .proc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .proc-grid{ grid-template-columns:1fr; } }

/* demo */
.demo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
@media (max-width:920px){ .demo-grid{ grid-template-columns:1fr; gap:44px; } }
.demo-list{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:0; }
.demo-list li{ display:flex; gap:16px; align-items:baseline; padding:16px 0; border-top:1px solid var(--line-soft); color:var(--text); font-size:16px; }
.demo-list li .mono{ color:var(--faint); flex:none; }
.demo-panel{ background:var(--paper); border:1px solid var(--line); border-radius:4px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(23,23,26,.25); }
.demo-top{ display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--line); }
.demo-top .mono{ color:var(--faint); }
.demo-top .lamp{ width:7px; height:7px; border-radius:50%; background:#3F9E6E; }
.demo-body{ padding:26px 24px 6px; }
.demo-body .step-lbl{ color:var(--faint); margin-bottom:15px; display:flex; align-items:center; gap:10px; }
.demo-body .step-lbl::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.cal, .times{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.slot, .time{ border:1px solid var(--line); background:transparent; border-radius:3px; cursor:pointer; transition:border-color .2s,background .2s,color .2s; font-weight:500; color:var(--text); font-family:inherit; }
.slot{ padding:14px 6px; text-align:center; font-size:15px; }
.slot .d{ display:block; font-size:10.5px; color:var(--muted); font-weight:500; margin-bottom:5px; text-transform:uppercase; letter-spacing:.1em; }
.slot:hover, .time:hover{ border-color:var(--text); }
.slot.sel{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.slot.sel .d{ color:color-mix(in srgb,var(--paper) 70%,transparent); }
.time{ padding:12px 4px; text-align:center; font-size:14px; }
.time.sel{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.demo-foot{ padding:20px 24px 24px; margin-top:22px; border-top:1px solid var(--line); }
.confirm{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.confirm .summary{ font-size:14px; color:var(--muted); }
.confirm .summary b{ color:var(--text); font-weight:600; }
.bookbtn{ background:var(--ink); color:var(--paper); border:0; border-radius:999px; padding:12px 24px; font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; transition:opacity .25s,transform .2s; }
.bookbtn:not(:disabled):hover{ transform:translateY(-1px); }
.booked-msg{ display:none; align-items:center; gap:12px; color:var(--text); font-weight:500; font-size:15px; }
.booked-msg .check{ width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none; }
.demo-panel.done .confirm{ display:none; }
.demo-panel.done .booked-msg{ display:flex; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:6px 28px 6px 0; border-left:1px solid var(--line); padding-left:28px; }
.stat:first-child{ border-left:0; padding-left:0; }
.stat .big{ font-size:clamp(38px,5.2vw,58px); letter-spacing:-.03em; line-height:1; }
.stat .cap{ color:var(--muted); margin-top:14px; font-size:14.5px; max-width:22ch; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; gap:40px 0; } .stat:nth-child(3){ border-left:0; padding-left:0; } }
@media (max-width:420px){ .stat:nth-child(odd){ border-left:0; padding-left:0; } }

/* cta */
.cta{ background:var(--ink); color:var(--on-ink); border-radius:6px; padding:96px 64px; text-align:center; }
.cta .kicker{ color:var(--on-ink-muted); }
.cta h2{ font-size:clamp(32px,5vw,56px); margin:22px 0 22px; letter-spacing:-.02em; color:var(--on-ink); }
.cta p{ color:var(--on-ink-muted); font-size:19px; max-width:46ch; margin:0 auto 40px; }
.cta .btn-invert{ background:var(--paper); color:var(--ink); }
.cta .btn-invert:hover{ transform:translateY(-2px); }
@media (max-width:600px){ .cta{ padding:60px 26px; } }

/* footer */
footer{ padding:80px 0 56px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:40px 24px; } }
.foot-col h5{ font-size:11.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--faint); margin:0 0 18px; font-weight:500; }
.foot-col a{ display:block; color:var(--muted); margin-bottom:11px; font-size:15px; transition:color .25s; }
.foot-col a:hover{ color:var(--text); }
.foot-col p{ color:var(--muted); font-size:15px; margin:14px 0 0; max-width:32ch; }
.foot-bottom{ margin-top:60px; padding-top:28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--faint); font-size:13.5px; }

/* reveal */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* =================================================================
   INNER PAGES
   ================================================================= */
body.inner{ } /* nav is solid via JS/markup */

.page-hero{ position:relative; padding:150px 0 56px; }
.breadcrumb{ display:flex; gap:9px; align-items:center; font-size:13px; color:var(--faint); margin-bottom:26px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb span.sep{ opacity:.5; }
.ph-kicker{ color:var(--accent); }
.page-hero h1{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:clamp(36px,6.2vw,74px); letter-spacing:-.02em; line-height:1.04; margin:16px 0 0; max-width:20ch; }
.page-hero .ph-lead{ font-size:clamp(18px,2.1vw,21px); color:var(--muted); max-width:60ch; margin:24px 0 0; line-height:1.6; }
.ph-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; align-items:center; }

/* prose */
.prose{ max-width:70ch; }
.prose > *:first-child{ margin-top:0; }
.prose h2{ font-size:clamp(24px,3.2vw,34px); margin:44px 0 16px; letter-spacing:-.02em; line-height:1.15; }
.prose h3{ font-size:20px; margin:32px 0 10px; font-weight:600; letter-spacing:-.01em; }
.prose p{ color:var(--muted); font-size:17px; margin:0 0 18px; }
.prose a{ color:var(--accent); border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent); }
.prose a:hover{ border-color:var(--accent); }
.prose ul{ margin:0 0 22px; padding:0; list-style:none; display:grid; gap:12px; }
.prose ul li{ position:relative; padding-left:28px; color:var(--muted); font-size:16.5px; }
.prose ul li::before{ content:""; position:absolute; left:2px; top:9px; width:8px; height:8px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); }
.prose strong{ color:var(--text); font-weight:600; }

/* feature cards */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.features.cols-2{ grid-template-columns:repeat(2,1fr); }
.fcard{ background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:28px; transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s; }
.fcard:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -26px rgba(6,7,20,.3); }
.fico{ width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin-bottom:20px; }
.fcard h3{ font-size:19px; margin:0 0 9px; font-weight:600; letter-spacing:-.01em; }
.fcard p{ color:var(--muted); font-size:15px; margin:0; line-height:1.55; }
@media (max-width:860px){ .features, .features.cols-2{ grid-template-columns:1fr; } }

/* split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split.wide-left{ grid-template-columns:1.2fr 1fr; }
@media (max-width:860px){ .split, .split.wide-left{ grid-template-columns:1fr; gap:36px; } }
.panel{ background:var(--paper-2); border:1px solid var(--line); border-radius:18px; padding:34px; }
.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.checklist li{ display:flex; gap:13px; align-items:flex-start; color:var(--text); font-size:16px; }
.checklist li svg{ color:var(--accent); flex:none; margin-top:3px; }

/* pricing */
.prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
@media (max-width:860px){ .prices{ grid-template-columns:1fr; } }
.price{ display:flex; flex-direction:column; background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:32px; position:relative; }
.price.featured{ border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); box-shadow:0 30px 70px -30px color-mix(in srgb,var(--accent) 40%,transparent); }
.price .plan{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.price .flag{ position:absolute; top:-11px; right:24px; background:var(--accent); color:#fff; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:5px 12px; border-radius:999px; }
.price .amount{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:40px; letter-spacing:-.02em; margin:16px 0 4px; }
.price .amount small{ font-family:inherit; font-size:14px; color:var(--muted); font-weight:400; }
.price .from{ font-size:13px; color:var(--faint); }
.price ul{ list-style:none; padding:0; margin:22px 0 26px; display:grid; gap:12px; }
.price li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--muted); }
.price li svg{ color:var(--accent); flex:none; margin-top:2px; }
.price .btn{ margin-top:auto; justify-content:center; }

/* faq */
.faq{ border-top:1px solid var(--line); max-width:820px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; padding:24px 0; font-weight:600; font-size:18px; letter-spacing:-.01em; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ flex:none; width:16px; height:16px; position:relative; transition:transform .3s; }
.faq summary .pm::before, .faq summary .pm::after{ content:""; position:absolute; background:var(--accent); }
.faq summary .pm::before{ top:7px; left:0; width:16px; height:2px; }
.faq summary .pm::after{ left:7px; top:0; width:2px; height:16px; transition:opacity .3s; }
.faq details[open] summary .pm::after{ opacity:0; }
.faq .ans{ color:var(--muted); padding:0 0 24px; max-width:70ch; font-size:16px; }

/* blog list */
.posts{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:760px){ .posts{ grid-template-columns:1fr; } }
.post{ display:block; background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:28px; transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s; }
.post:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -26px rgba(6,7,20,.3); }
.post .cat{ color:var(--accent); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.post h3{ margin:12px 0 10px; font-size:21px; letter-spacing:-.02em; line-height:1.25; }
.post p{ color:var(--muted); font-size:15px; margin:0 0 16px; }
.post .more{ color:var(--text); font-size:14px; font-weight:600; display:inline-flex; gap:7px; align-items:center; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:13px; color:var(--muted); font-weight:600; }
.field input, .field textarea{ width:100%; padding:14px 15px; border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--text); font:inherit; font-size:15px; transition:border-color .2s; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field textarea{ min-height:130px; resize:vertical; }
.contact-info{ display:grid; gap:22px; }
.ci-item h4{ margin:0 0 4px; font-size:14px; }
.ci-item p, .ci-item a{ color:var(--muted); font-size:15px; margin:0; }
.ci-item a:hover{ color:var(--accent); }

/* logo strip / trust */
.trust-line{ display:flex; flex-wrap:wrap; gap:12px; }
.pill{ font-size:13px; padding:8px 15px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }

/* misc */
.center{ text-align:center; }
.mt-cta{ margin-top:24px; }
.lead-block{ max-width:60ch; }
.lead-block p{ font-size:19px; color:var(--muted); }

/* =================================================================
   WOW LAYER — atmosphere, hero visuals, mockups, dark bands
   ================================================================= */

/* soft ambient accent glows sitting above the paper, below content */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48vw 40vw at 82% -6%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%),
    radial-gradient(42vw 38vw at -8% 22%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 70%);
  opacity:.7;
}
:root[data-theme="dark"] body::before, .band-ink{ }
@media (prefers-color-scheme: dark){ body::before{ opacity:.5; } }
:root[data-theme="dark"] body::before{ opacity:.5; }

/* floating animation for visuals */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes pulse-dot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.82); } }
@keyframes dash{ to{ stroke-dashoffset:-40; } }
@keyframes grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes shine{ 0%{ transform:translateX(-120%); } 60%,100%{ transform:translateX(320%); } }

/* ---------- HERO with visual ---------- */
.page-hero{ overflow:hidden; }
.page-hero.has-visual .ph-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.page-hero.has-visual .ph-copy{ min-width:0; }
@media (max-width:900px){ .page-hero.has-visual .ph-grid{ grid-template-columns:1fr; gap:40px; } }
.ph-visual{ position:relative; min-width:0; }
.ph-visual .glow{ position:absolute; inset:-16% -10% -16% -10%; z-index:0; border-radius:40px;
  background:radial-gradient(60% 60% at 60% 40%, color-mix(in srgb,var(--accent) 30%,transparent), transparent 72%); filter:blur(18px); opacity:.7; }
.ph-visual > .mk, .ph-visual > .flowwrap{ position:relative; z-index:1; }

/* ---------- device / mockup frame base ---------- */
.mk{ position:relative; border-radius:16px; background:var(--surface); border:1px solid var(--line);
  box-shadow:0 40px 90px -40px rgba(8,10,30,.55), 0 10px 30px -18px rgba(8,10,30,.4); overflow:hidden; }
@media (prefers-reduced-motion: no-preference){ .mk.float{ animation:floaty 7s ease-in-out infinite; } }
.mk::after{ content:""; position:absolute; top:0; left:0; width:40%; height:100%; z-index:6; pointer-events:none;
  background:linear-gradient(100deg, transparent, color-mix(in srgb,#fff 22%,transparent), transparent); }
@media (prefers-reduced-motion: no-preference){ .mk::after{ animation:shine 8s ease-in-out infinite; } }
:root[data-theme="dark"] .mk::after{ background:linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent); }

/* browser chrome */
.mk-browser .mk-bar{ display:flex; align-items:center; gap:7px; padding:12px 14px; background:var(--paper-2); border-bottom:1px solid var(--line); }
.mk-bar span{ width:10px; height:10px; border-radius:50%; background:var(--line-soft); border:1px solid var(--line); }
.mk-bar span:first-child{ background:#FF6058; border-color:transparent; }
.mk-bar span:nth-child(2){ background:#FFBD2E; border-color:transparent; }
.mk-bar span:nth-child(3){ background:#28C840; border-color:transparent; }
.mk-bar i{ margin-left:10px; font-style:normal; font-size:11px; color:var(--faint); background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:3px 12px; font-family:ui-monospace,Menlo,monospace; }
.mk-screen{ padding:0; background:var(--paper); }
.mk-topnav{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line-soft); }
.mk-topnav b{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-size:12px; letter-spacing:-.02em; margin-right:auto; }
.mk-topnav u{ width:26px; height:6px; border-radius:3px; background:var(--line); text-decoration:none; }
.mk-poster{ position:relative; padding:30px 20px 26px; background:
    radial-gradient(120% 120% at 80% 0%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 60%),
    linear-gradient(180deg, var(--ink), color-mix(in srgb,var(--ink) 88%, var(--accent))); color:#fff; overflow:hidden; }
.mk-poster .kw{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-size:12px; letter-spacing:-.02em; opacity:.55; text-transform:uppercase; }
.mk-poster .l{ height:12px; border-radius:4px; background:rgba(255,255,255,.9); margin-top:10px; }
.mk-poster .l.w1{ width:82%; } .mk-poster .l.w2{ width:62%; background:rgba(255,255,255,.6); height:9px; }
.mk-poster .b{ display:inline-block; margin-top:16px; padding:8px 16px; border-radius:999px; background:var(--accent); color:#fff; font-size:10px; font-weight:600; }
.mk-poster .b.ghost{ background:transparent; border:1px solid rgba(255,255,255,.4); margin-left:8px; }
.mk-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:18px; }
.mk-grid3 .c{ background:var(--paper-2); border:1px solid var(--line-soft); border-radius:10px; padding:12px; }
.mk-grid3 .c .ic{ width:20px; height:20px; border-radius:6px; background:color-mix(in srgb,var(--accent) 18%,transparent); margin-bottom:8px; }
.mk-grid3 .c .l{ height:6px; border-radius:3px; background:var(--line); margin-top:6px; }
.mk-grid3 .c .l.s{ width:60%; }

/* dashboard mockup */
.mk-dash .mk-bar i{ margin-left:auto; }
.mk-dash .dash-body{ padding:18px; display:grid; gap:14px; background:var(--paper); }
.mk-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mk-tile{ background:var(--paper-2); border:1px solid var(--line-soft); border-radius:12px; padding:12px 14px; }
.mk-tile .t{ font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }
.mk-tile .v{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-size:20px; letter-spacing:-.02em; margin-top:4px; }
.mk-tile .v.acc{ color:var(--accent); }
.mk-chart{ background:var(--paper-2); border:1px solid var(--line-soft); border-radius:12px; padding:16px 16px 12px; }
.mk-chart .ct{ font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.mk-bars{ display:flex; align-items:flex-end; gap:8px; height:88px; }
.mk-bars i{ flex:1; border-radius:5px 5px 0 0; background:color-mix(in srgb,var(--accent) 30%,transparent); transform-origin:bottom; }
.mk-bars i.hi{ background:var(--accent); }
@media (prefers-reduced-motion: no-preference){ .mk-bars i{ animation:grow 1.1s cubic-bezier(.2,.8,.3,1) both; } }
.mk-spark{ display:block; width:100%; height:40px; margin-top:10px; }
.mk-spark path.area{ fill:color-mix(in srgb,var(--accent) 14%,transparent); }
.mk-spark path.line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; }

/* automation flow mockup (SVG) */
.flowwrap{ position:relative; border-radius:16px; padding:26px; background:
    radial-gradient(90% 90% at 50% 20%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 70%), var(--surface);
  border:1px solid var(--line); box-shadow:0 40px 90px -44px rgba(8,10,30,.5); }
@media (prefers-reduced-motion: no-preference){ .flowwrap.float{ animation:floaty 7s ease-in-out infinite; } }
.flow-svg{ width:100%; height:auto; display:block; }
.flow-svg .conn{ fill:none; stroke:color-mix(in srgb,var(--accent) 55%,transparent); stroke-width:1.6; stroke-dasharray:5 6; }
@media (prefers-reduced-motion: no-preference){ .flow-svg .conn{ animation:dash 1.6s linear infinite; } }
.flow-svg .node{ fill:var(--paper); stroke:var(--line); stroke-width:1.4; }
.flow-svg .node.core{ fill:var(--accent); stroke:var(--accent); }
.flow-svg .ndot{ fill:var(--accent); }
@media (prefers-reduced-motion: no-preference){ .flow-svg .ndot{ animation:pulse-dot 2.2s ease-in-out infinite; } }
.flow-svg text{ fill:var(--muted); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size:9px; font-weight:600; }
.flow-svg text.core{ fill:#fff; }

/* ---------- dark contrast band ---------- */
.band-ink{ position:relative; background:var(--ink); color:var(--on-ink); border-radius:0; overflow:hidden; }
.band-ink::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 70% at 85% 0%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 65%),
            radial-gradient(40% 60% at 5% 100%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 60%); }
.band-ink .wrap{ position:relative; z-index:1; }
.band-ink .sec-head h2, .band-ink h2{ color:var(--on-ink); }
.band-ink .sec-head .lead, .band-ink .lead, .band-ink p{ color:var(--on-ink-muted); }
.band-ink .kicker{ color:color-mix(in srgb,var(--accent) 60%, #fff); }
.band-ink .stat{ border-color:rgba(255,255,255,.16); }
.band-ink .stat .big{ color:var(--on-ink); }
.band-ink .stat .cap{ color:var(--on-ink-muted); }
.band-ink .fcard{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.band-ink .fcard h3{ color:var(--on-ink); }
.band-ink .fcard p{ color:var(--on-ink-muted); }
.band-ink .fico{ background:color-mix(in srgb,var(--accent) 40%,transparent); color:#fff; }

/* ---------- showcase alternating rows (home) ---------- */
.showcase-row{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:52px 0; }
.showcase-row + .showcase-row{ border-top:1px solid var(--line); }
.showcase-row.flip .sc-visual{ order:-1; }
@media (max-width:880px){ .showcase-row{ grid-template-columns:1fr; gap:36px; } .showcase-row.flip .sc-visual{ order:0; } }
.sc-copy .idx{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--accent); letter-spacing:.12em; }
.sc-copy h3{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:clamp(24px,3.2vw,34px); letter-spacing:-.02em; margin:12px 0 14px; line-height:1.08; }
.sc-copy p{ color:var(--muted); font-size:16.5px; margin:0 0 20px; max-width:44ch; }
.sc-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--text); border-bottom:1px solid var(--accent); padding-bottom:3px; }
.sc-link:hover{ color:var(--accent); }
.sc-feat{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:9px; }
.sc-feat li{ display:flex; gap:10px; align-items:center; color:var(--muted); font-size:15px; }
.sc-feat li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

/* ---------- marquee ---------- */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2); overflow:hidden; }
.marquee-track{ display:flex; gap:0; white-space:nowrap; width:max-content; }
@media (prefers-reduced-motion: no-preference){ .marquee-track{ animation:mq 34s linear infinite; } }
@keyframes mq{ to{ transform:translateX(-50%); } }
.marquee-track span{ display:inline-flex; align-items:center; font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-size:clamp(20px,2.6vw,30px); letter-spacing:-.02em; color:var(--text); opacity:.85; padding:20px 0; }
.marquee-track span::after{ content:"—"; color:var(--accent); margin:0 30px; opacity:.6; }

/* ---------- testimonial ---------- */
.quote{ max-width:900px; margin:0 auto; text-align:center; }
.quote .mark{ font-family:"Archivo Black",Arial,sans-serif; font-size:60px; line-height:.6; color:var(--accent); opacity:.5; }
.quote blockquote{ font-size:clamp(22px,3.2vw,32px); line-height:1.32; letter-spacing:-.02em; margin:14px 0 24px; font-weight:500; text-wrap:balance; }
.quote .who{ color:var(--muted); font-size:15px; }
.quote .who b{ color:var(--text); font-weight:600; }

/* richer feature cards */
.fcard{ position:relative; overflow:hidden; }
.fcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,var(--accent),transparent); opacity:0; transition:opacity .3s; }
.fcard:hover::before{ opacity:1; }
.fcard:hover{ box-shadow:0 30px 60px -30px color-mix(in srgb,var(--accent) 34%,transparent); border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); }

@media (prefers-reduced-motion: reduce){
  .mk.float, .flowwrap.float, .mk-bars i, .mk::after, .flow-svg .conn, .flow-svg .ndot, .marquee-track{ animation:none !important; }
}

/* ---------- capability grid: "we build everything" ---------- */
.cap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:900px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cap-grid{ grid-template-columns:1fr; } }
.cap{ display:flex; align-items:center; gap:13px; padding:16px 18px; border:1px solid var(--line); border-radius:13px; background:var(--paper-2);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; }
.cap:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); box-shadow:0 20px 44px -26px color-mix(in srgb,var(--accent) 46%,transparent); }
.cap .ci{ width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:none; }
.cap .cl{ font-weight:600; font-size:14.5px; letter-spacing:-.01em; line-height:1.25; }
.cap .cl small{ display:block; font-weight:400; font-size:12px; color:var(--muted); letter-spacing:0; margin-top:2px; }
.cap-more{ margin-top:20px; color:var(--muted); font-size:15px; }
.cap-more b{ color:var(--text); font-weight:600; }
/* dark-band variant */
.band-ink .cap{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.band-ink .cap:hover{ border-color:color-mix(in srgb,var(--accent) 60%,transparent); }
.band-ink .cap .ci{ background:color-mix(in srgb,var(--accent) 34%,transparent); color:#fff; }
.band-ink .cap .cl{ color:var(--on-ink); }
.band-ink .cap .cl small{ color:var(--on-ink-muted); }

/* ---------- phone / app mockup ---------- */
.mk-phone{ position:relative; width:216px; margin:0 auto; background:linear-gradient(150deg,#20202a,#0b0b10); border-radius:38px; padding:9px;
  box-shadow:0 46px 100px -40px rgba(8,10,30,.65), inset 0 0 0 1px rgba(255,255,255,.06); }
@media (prefers-reduced-motion: no-preference){ .mk-phone.float{ animation:floaty 7s ease-in-out infinite; } }
.mk-phone .p-screen{ position:relative; border-radius:30px; overflow:hidden; background:var(--paper); aspect-ratio:9/17.5; }
.mk-phone .p-notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:66px; height:16px; background:#0b0b10; border-radius:10px; z-index:4; }
.p-top{ padding:34px 16px 18px; color:#fff;
  background:radial-gradient(130% 120% at 82% 0%, color-mix(in srgb,var(--accent) 46%,transparent), transparent 62%), linear-gradient(160deg,var(--accent),var(--accent-ink)); }
.p-top .app{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-size:15px; letter-spacing:-.02em; }
.p-top .sub{ font-size:10px; opacity:.82; margin-top:3px; }
.p-body{ padding:14px 14px 58px; display:grid; gap:10px; }
.p-card{ background:var(--paper-2); border:1px solid var(--line-soft); border-radius:12px; padding:12px; display:flex; gap:10px; align-items:center; }
.p-card .dot{ width:26px; height:26px; border-radius:8px; background:color-mix(in srgb,var(--accent) 20%,transparent); flex:none; }
.p-card .ll{ flex:1; }
.p-card .l{ height:7px; border-radius:4px; background:var(--line); }
.p-card .l.s{ width:58%; margin-top:6px; }
.p-tabs{ position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-around; padding:11px 0 15px; background:var(--paper); border-top:1px solid var(--line-soft); }
.p-tabs i{ width:22px; height:22px; border-radius:7px; background:var(--line); display:block; }
.p-tabs i.on{ background:var(--accent); }

.store-badges{ display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.store-badge{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:12px; background:var(--ink); color:var(--paper); border:1px solid transparent; }
.store-badge svg{ flex:none; }
.store-badge .lab{ display:flex; flex-direction:column; line-height:1.05; }
.store-badge .lab small{ font-size:8.5px; opacity:.72; text-transform:uppercase; letter-spacing:.05em; }
.store-badge .lab b{ font-size:13px; font-weight:600; letter-spacing:-.01em; }

/* two-phone duo: iOS + Android */
.phone-duo{ display:flex; justify-content:center; align-items:center; }
.phone-duo .mk-phone{ width:168px; margin:0; }
.phone-duo .p-back{ transform:rotate(-6deg) translateY(16px) scale(.92); z-index:1; margin-right:-32px; }
.phone-duo .p-front{ transform:rotate(5deg); z-index:2; }
.mk-phone.android .p-notch{ width:9px; height:9px; border-radius:50%; top:13px; }
@media (max-width:520px){ .phone-duo .mk-phone{ width:138px; } .phone-duo .p-back{ margin-right:-26px; } }

@media (prefers-reduced-motion: reduce){ .mk-phone.float{ animation:none !important; } }

/* =================================================================
   CASE STUDY (Stodona)
   ================================================================= */
.callout{ background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line)); border-left:3px solid var(--accent); border-radius:12px; padding:18px 22px; color:var(--text); font-size:15px; line-height:1.55; max-width:78ch; }
.callout b{ font-weight:600; }
.band-ink .callout{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); border-left-color:color-mix(in srgb,var(--accent) 70%,#fff); color:var(--on-ink); }

/* big KPI grid */
.kpi-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.kpi{ grid-column:span 2; background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:30px 28px; }
.kpi.wide{ grid-column:span 3; }
.kpi.feature{ grid-column:span 3; color:#fff; border-color:transparent;
  background:radial-gradient(120% 130% at 85% 0%, color-mix(in srgb,var(--accent) 55%,transparent), transparent 60%), linear-gradient(150deg,var(--accent),var(--accent-ink)); }
.kpi .num{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:clamp(34px,4.8vw,60px); letter-spacing:-.03em; line-height:.98; }
.kpi .num.accent{ color:var(--accent); }
.kpi .lab{ color:var(--muted); margin-top:12px; font-size:15px; line-height:1.4; }
.kpi.feature .lab{ color:rgba(255,255,255,.86); }
.kpi .sub{ font-size:12.5px; color:var(--faint); margin-top:6px; }
.kpi.feature .sub{ color:rgba(255,255,255,.72); }
@media (max-width:860px){ .kpi, .kpi.wide, .kpi.feature{ grid-column:span 3; } }
@media (max-width:560px){ .kpi-grid{ grid-template-columns:1fr; } .kpi, .kpi.wide, .kpi.feature{ grid-column:span 1; } }

/* before / after */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){ .ba{ grid-template-columns:1fr; } }
.ba-col{ border:1px solid var(--line); border-radius:20px; padding:30px 30px 34px; }
.ba-col.after{ background:color-mix(in srgb,var(--accent) 7%,var(--paper-2)); border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); }
.ba-col.before{ background:var(--paper-2); }
.ba-lab{ font-family:ui-monospace,Menlo,monospace; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; }
.ba-col.before .ba-lab{ color:var(--faint); }
.ba-col.after .ba-lab{ color:var(--accent); }
.ba-col h3{ font-size:22px; margin:10px 0 0; letter-spacing:-.02em; font-weight:650; }
.ba-list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px; }
.ba-list li{ display:flex; gap:11px; align-items:flex-start; color:var(--muted); font-size:15.5px; line-height:1.45; }
.ba-list li .m{ flex:none; width:18px; height:18px; margin-top:1px; }
.ba-col.before .m{ color:var(--faint); }
.ba-col.after .m{ color:var(--accent); }

/* people 4 -> 1 */
.people-viz{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }
.pv-group{ display:flex; gap:8px; align-items:center; }
.pv-ic{ width:38px; height:42px; color:var(--accent); }
.pv-ic.off{ color:var(--faint); opacity:.42; }
.pv-mid{ display:flex; align-items:center; gap:14px; }
.pv-arrow{ color:var(--accent); }
.pv-num{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:clamp(30px,4vw,48px); letter-spacing:-.03em; }
.pv-cap{ text-align:center; color:var(--muted); font-size:14px; margin-top:14px; }

/* journey */
.journey{ display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; }
.j-step{ flex:1; min-width:200px; background:var(--paper-2); border:1px solid var(--line); border-radius:18px; padding:26px 24px; text-align:center; }
.j-step .jn{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--accent); letter-spacing:.1em; }
.j-step .jt{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:22px; letter-spacing:-.02em; margin:10px 0 8px; }
.j-step .jd{ color:var(--muted); font-size:14px; margin:0; }
.j-arrow{ display:grid; place-items:center; color:var(--accent); flex:none; }
@media (max-width:720px){ .j-arrow{ transform:rotate(90deg); } }

/* solution save card + blocks */
.save-card{ background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 13%, var(--paper-2)), var(--paper-2)); border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line)); border-radius:22px; padding:34px 32px; }
.save-card .sc-lab{ font-family:ui-monospace,Menlo,monospace; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.save-card .sc-num{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:clamp(34px,4.6vw,54px); color:var(--accent); letter-spacing:-.03em; line-height:.98; margin:10px 0 4px; }
.save-card .sc-sub{ color:var(--muted); font-size:14.5px; }
.save-card .sc-extra{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--text); }
.sol-block{ margin:0 0 20px; }
.sol-block .sb-lab{ font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.sol-block p{ margin:5px 0 0; color:var(--muted); font-size:16px; line-height:1.55; }
.sol-block p b{ color:var(--text); font-weight:600; }

/* progress (merförsäljning) */
.prog{ margin-top:6px; }
.prog .bar{ height:14px; border-radius:999px; background:var(--line); overflow:hidden; }
.prog .fill{ height:100%; width:80%; border-radius:999px; background:linear-gradient(90deg,var(--accent-ink),var(--accent)); }
.prog .ends{ display:flex; justify-content:space-between; margin-top:10px; color:var(--muted); font-size:13.5px; }
.prog .ends b{ color:var(--accent); font-weight:600; }

/* total effect */
.total-list{ border-top:1px solid var(--line-strong,var(--line)); }
.total-list .row{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:15px 2px; border-bottom:1px solid var(--line); }
.total-list .row .it{ color:var(--text); font-size:16px; }
.total-list .row .amt{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); font-size:16px; white-space:nowrap; }
.grand{ text-align:center; padding:44px 20px 8px; }
.grand .g-num{ font-family:"Archivo Black","Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:clamp(48px,10vw,120px); color:var(--accent); letter-spacing:-.04em; line-height:.92; }
.grand .g-sub{ color:var(--muted); font-size:18px; margin-top:12px; }
.band-ink .grand .g-num{ color:color-mix(in srgb,var(--accent) 55%,#fff); }
.band-ink .total-list{ border-top-color:rgba(255,255,255,.28); }
.band-ink .total-list .row{ border-color:rgba(255,255,255,.14); }
.band-ink .total-list .row .it, .band-ink .total-list .row .amt{ color:var(--on-ink); }