/* ==========================================================================
   Dobify — obsidian liquid glass
   black #040806 · neon green #4ad888/#6cf5a8 · lagoon glass #67bed9
   ========================================================================== */

:root {
    --bg: #040806;
    --bg-2: #070d0a;
    --ink: #eef6f1;
    --mut: #95a99e;
    --grn: #4ad888;
    --neo: #6cf5a8;
    --lag: #67bed9;
    --line: rgba(235, 255, 245, .09);
    --line-soft: rgba(235, 255, 245, .055);
    --glass: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .10);
    --grad: linear-gradient(92deg, var(--grn), var(--lag));
    --grad-hot: linear-gradient(92deg, var(--neo), var(--lag));
    --f-disp: 'Clash Display', 'Avenir Next', sans-serif;
    --f-body: 'Satoshi', 'Avenir Next', sans-serif;
    --f-mono: 'Menlo', ui-monospace, monospace;
    --r: 22px;
    --r-sm: 14px;
    --pad: clamp(20px, 4vw, 48px);
    --w: 1180px;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection { background: rgba(74, 216, 136, .35); color: #fff; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; }

h1, h2, h3 { font-family: var(--f-disp); font-weight: 600; letter-spacing: -.015em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.34rem, 5.76vw, 4.86rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.2; }

.mono { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.kicker { color: var(--grn); margin-bottom: 14px; }
.grad {
    background: linear-gradient(126deg, var(--neo) 0%, var(--neo) 7%, #82d0e8 12%, #339ec1 16.3%, #339ec1 17.7%, #82d0e8 22%, var(--neo) 27%, var(--neo) 40%, #82d0e8 45%, #339ec1 49.3%, #339ec1 50.7%, #82d0e8 55%, var(--neo) 60%, var(--neo) 73%, #82d0e8 78%, #339ec1 82.3%, #339ec1 83.7%, #82d0e8 88%, var(--neo) 93%, var(--neo) 100%);
    background-size: 300% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: grad-flow 8s linear infinite;
}
@keyframes grad-flow { to { background-position: -150% center; } }
.center { text-align: center; }

/* --- atmosphere ---------------------------------------------------------- */
.aurora {
    position: fixed; inset: -20%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(42% 38% at 12% 8%, rgba(74, 216, 136, .10), transparent 70%),
        radial-gradient(36% 34% at 88% 20%, rgba(103, 190, 217, .09), transparent 70%),
        radial-gradient(50% 44% at 50% 105%, rgba(74, 216, 136, .07), transparent 70%);
    animation: aurora-drift 26s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to { transform: translate3d(1.5%, 2%, 0) scale(1.06); }
}

.grain {
    position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

#cursor-glow {
    position: fixed; z-index: -1; width: 640px; height: 640px; border-radius: 50%;
    pointer-events: none; left: 0; top: 0; opacity: 0; transition: opacity .6s;
    background: radial-gradient(circle, rgba(74, 216, 136, .07), rgba(103, 190, 217, .03) 45%, transparent 70%);
    transform: translate(-50%, -50%);
}

/* --- reveal -------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(5px); }
.reveal.in {
    opacity: 1; transform: none; filter: none;
    transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}

/* --- buttons & links ------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--f-disp); font-weight: 600; font-size: .98rem;
    padding: 14px 28px; border-radius: 999px; text-decoration: none;
    border: 0; cursor: pointer; white-space: nowrap;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.btn-lg { padding: 17px 34px; font-size: 1.05rem; }
.btn-sm { padding: 10px 20px; font-size: .88rem; }

.btn-primary {
    background: var(--grn); color: #03130a;
    box-shadow: 0 0 0 1px rgba(74, 216, 136, .45), 0 10px 34px -12px rgba(74, 216, 136, .6);
}
.btn-primary:hover {
    background: var(--neo); transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(108, 245, 168, .6), 0 16px 44px -12px rgba(74, 216, 136, .75);
}

.btn-ghost {
    background: var(--glass); color: var(--ink);
    box-shadow: var(--glass-hi), 0 0 0 1px var(--line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-hi), 0 0 0 1px rgba(103, 190, 217, .45), 0 14px 34px -16px rgba(103, 190, 217, .5);
}

.link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--grn); font-weight: 700; text-decoration: none; font-size: .95rem;
}
.link-arrow::after { content: '→'; transition: transform .3s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }
.link-arrow:hover { color: var(--neo); }

.skip-link {
    position: fixed; top: -60px; left: 20px; z-index: 999;
    background: var(--grn); color: #03130a; padding: 10px 18px; border-radius: 8px;
    font-weight: 700; text-decoration: none; transition: top .3s;
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--grn); outline-offset: 3px; border-radius: 4px; }

/* --- nav ------------------------------------------------------------------ */
.nav-wrap { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; padding: 0 18px; }

.nav {
    max-width: var(--w); margin: 0 auto;
    display: flex; align-items: center; gap: 22px;
    padding: 9px 12px 9px 22px; border-radius: 999px;
    background: linear-gradient(160deg, rgba(10, 18, 14, .72), rgba(8, 14, 11, .58));
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: var(--glass-hi), 0 0 0 1px var(--line), 0 18px 50px -20px rgba(0, 0, 0, .8);
    transition: box-shadow .4s;
}
.nav-wrap.scrolled .nav { box-shadow: var(--glass-hi), 0 0 0 1px rgba(74, 216, 136, .18), 0 18px 50px -16px rgba(0, 0, 0, .9); }

.nav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }

/* --- wordmark logo -------------------------------------------------------- */
.wordmark {
    font-family: var(--f-disp); font-weight: 700; font-size: 1.55rem;
    letter-spacing: -.04em; line-height: 1; color: var(--ink);
    white-space: nowrap; user-select: none;
}
.wordmark-dot {
    display: inline-block; width: .22em; height: .22em; margin-left: .07em;
    border-radius: 2px; vertical-align: baseline;
    background: linear-gradient(150deg, var(--lag), var(--neo));
}
.wordmark-lg { font-size: 2.1rem; }

.logo-img { height: 40px; width: auto; }
.logo-img-lg { height: 54px; }

.nav-links { display: flex; gap: 4px; margin: 0 auto; }
.nav-links a {
    text-decoration: none; color: var(--mut); font-weight: 500; font-size: .94rem;
    padding: 8px 16px; border-radius: 999px; transition: color .3s, background .3s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(74, 216, 136, .1); box-shadow: inset 0 0 0 1px rgba(74, 216, 136, .25); }

.nav-right { display: flex; align-items: center; gap: 14px; }

.lang-switch { display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: .78rem; }
.lang-switch span { color: var(--line); }
.lang-switch a { text-decoration: none; color: var(--mut); padding: 4px 2px; transition: color .3s; }
.lang-switch a:hover { color: var(--lag); }
.lang-switch a[aria-current="true"] { color: var(--grn); font-weight: 700; }

.nav-burger {
    display: none; flex-direction: column; gap: 6px; background: none; border: 0;
    padding: 12px 10px; cursor: pointer;
}
.nav-burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .3s; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav-mobile {
    display: none; flex-direction: column; gap: 6px;
    max-width: var(--w); margin: 10px auto 0; padding: 18px;
    border-radius: var(--r);
    background: linear-gradient(160deg, rgba(10, 18, 14, .92), rgba(8, 14, 11, .88));
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--glass-hi), 0 0 0 1px var(--line), 0 24px 60px -20px rgba(0, 0, 0, .9);
}
.nav-mobile a { text-decoration: none; color: var(--ink); font-weight: 600; padding: 12px 14px; border-radius: 12px; }
.nav-mobile a:hover { background: rgba(255, 255, 255, .05); }
.nav-mobile .btn { justify-content: center; margin-top: 8px; }
.nav-mobile .lang-switch { justify-content: center; padding-top: 12px; }
.nav-mobile[hidden] { display: none; }
.nav-mobile:not([hidden]) { display: flex; }

@media (max-width: 920px) {
    .nav-links, .nav .lang-switch, .nav-cta { display: none; }
    .nav-burger { display: flex; }
    .nav { gap: 10px; padding: 8px 10px 8px 18px; justify-content: space-between; }
}

/* --- hero ----------------------------------------------------------------- */
.hero {
    position: relative; min-height: 92svh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 150px var(--pad) 60px; overflow: hidden;
}

.hero-inner { max-width: var(--w); margin: 0 auto; width: 100%; position: relative; }

.badge {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--f-mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--mut); padding: 9px 18px; border-radius: 999px; margin-bottom: 30px;
    background: var(--glass); box-shadow: var(--glass-hi), 0 0 0 1px var(--line);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 12px var(--grn); animation: dot-pulse 2.2s ease infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } }

.hero h1 { max-width: 13ch; margin-bottom: 28px; }
.hero h1 span { display: block; }

.hero-lead { max-width: 56ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--mut); margin-bottom: 38px; }
.hero-lead strong { color: var(--ink); font-weight: 700; }

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 64px; }

.hero-stats { display: flex; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap; }
.hero-stats li { display: flex; flex-direction: column; gap: 2px; }
.hero-stats b { font-family: var(--f-disp); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; color: var(--ink); }
.hero-stats b span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats em { font-style: normal; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }

@media (max-width: 640px) {
    .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

/* --- marquee ---------------------------------------------------------------
   Same glass-chip vocabulary as .badge / .chiplist so the "tech we build with"
   band sits inside the site's language instead of reading as a plain text crawl.
   Label stacks above the track (the "mono kicker over content" idiom used by
   every section), which also frees the full row width on phones. No
   backdrop-filter on the chips — they move, and re-blurring each frame is the
   one effect the touch overrides exist to kill. */
.marquee {
    display: flex; flex-direction: column; gap: 16px; overflow: hidden;
    padding: clamp(24px, 3.4vw, 34px) 0;
}
.marquee-label { color: var(--mut); padding: 0 var(--pad); text-align: center; }
.marquee-track { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track ul { display: flex; align-items: center; gap: 12px; padding-right: 12px; flex-shrink: 0; animation: marquee 44s linear infinite; }
.marquee-track li {
    font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em;
    white-space: nowrap; color: var(--mut);
    padding: 9px 17px; border-radius: 999px;
    background: var(--glass); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line);
    transition: color .3s, box-shadow .3s;
}
.marquee:hover li { color: var(--ink); box-shadow: var(--glass-hi), inset 0 0 0 1px rgba(74, 216, 136, .28); }
@keyframes marquee { to { transform: translateX(-100%); } }

/* --- scroll path ------------------------------------------------------------ */
.path-zone { position: relative; }
.path-zone > section { position: relative; z-index: 1; }

.scroll-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.sp-ghost { stroke: rgba(235, 255, 245, .07); stroke-width: 2; stroke-linecap: round; }
/* Glow as layered strokes, not drop-shadow — a filter here re-rasterizes the
   whole zone-tall path on every scroll frame and tanks mobile to ~5fps. */
.sp-halo { stroke: url(#sp-grad); stroke-linecap: round; }
.sp-halo-1 { stroke-width: 14; stroke-opacity: .12; }
.sp-halo-2 { stroke-width: 7; stroke-opacity: .26; }
.sp-line { stroke: url(#sp-grad); stroke-width: 2.5; stroke-linecap: round; }
.sp-comet circle:first-child { fill: var(--neo); }
.sp-comet circle:last-child { fill: rgba(108, 245, 168, .12); }
.sp-arrow path { fill: var(--neo); }
.sp-comet, .sp-arrow { opacity: 0; transition: opacity .4s; }
.sp-comet.show, .sp-arrow.show { opacity: 1; }
/* Below the two-column breakpoint the showcases stack into one full-width
   column, leaving no side gutters for the weaving path. It would then cut
   across the headings, copy and animated cards (section backgrounds are
   transparent), so hide it on the single-column layout. */
@media (max-width: 880px) { .scroll-path { display: none; } }

/* --- sections common ---------------------------------------------------------- */
section { padding: clamp(70px, 11vh, 130px) var(--pad); }
.section-head { max-width: var(--w); margin: 0 auto 54px; }
.section-lead { color: var(--mut); max-width: 58ch; margin-top: 16px; font-size: 1.1rem; }
.sol-intro { text-align: center; padding-bottom: 10px; }
.sol-intro .section-head { margin-bottom: 0; }
.sol-intro .section-lead { margin-inline: auto; }

/* --- showcases ------------------------------------------------------------------ */
.showcase {
    max-width: var(--w); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 90px);
    align-items: center;
}
.showcase.flip .showcase-text { order: 2; }
.showcase.flip .showcase-stage { order: 1; }

.sc-index {
    font-family: var(--f-disp); font-weight: 700; font-size: 2.3rem; line-height: 1;
    letter-spacing: -.02em; margin-bottom: 10px;
    /* hug the digits so the gradient spans the number, not the whole column */
    width: fit-content;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.showcase h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 18px; }
.showcase-lead { color: var(--mut); margin-bottom: 24px; max-width: 48ch; }

.ticks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.ticks li { position: relative; padding-left: 32px; color: var(--ink); font-weight: 500; }
.ticks li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 6px;
    background: rgba(74, 216, 136, .12); box-shadow: inset 0 0 0 1px rgba(74, 216, 136, .4);
}
.ticks li::after {
    content: ''; position: absolute; left: 4px; top: 7px; width: 9px; height: 5px;
    border-left: 2px solid var(--grn); border-bottom: 2px solid var(--grn); transform: rotate(-45deg);
}

@media (max-width: 880px) {
    .showcase { grid-template-columns: 1fr; }
    .showcase.flip .showcase-text { order: 1; }
    .showcase.flip .showcase-stage { order: 2; }
}

/* --- stage (glass device) ------------------------------------------------------- */
.stage {
    position: relative; border-radius: var(--r); padding: 26px;
    background: var(--glass);
    box-shadow: var(--glass-hi), 0 0 0 1px var(--line), 0 30px 80px -30px rgba(0, 0, 0, .85);
    backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
    overflow: hidden;
}
.stage::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(80% 60% at 20% 0%, rgba(103, 190, 217, .07), transparent 60%);
}

.sc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 10px var(--grn); animation: dot-pulse 1.8s ease infinite; flex-shrink: 0; }

/* chat ---------------------------------------------------------------- */
.sc-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; }
.sc-ava {
    width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(74, 216, 136, .25), rgba(103, 190, 217, .25));
    box-shadow: inset 0 0 0 1px rgba(74, 216, 136, .35); color: var(--neo);
}
.sc-chat-head div { flex: 1; display: flex; flex-direction: column; }
.sc-chat-head strong { font-family: var(--f-disp); font-size: .95rem; }
.sc-chat-head em { font-style: normal; font-family: var(--f-mono); font-size: .64rem; color: var(--grn); letter-spacing: .06em; }

.sc-chat-body { display: flex; flex-direction: column; gap: 10px; min-height: 270px; }
.sc-msg {
    max-width: 82%; padding: 11px 16px; font-size: .88rem; line-height: 1.45;
    border-radius: 16px;
}
.sc-u { align-self: flex-end; background: rgba(103, 190, 217, .14); box-shadow: inset 0 0 0 1px rgba(103, 190, 217, .25); border-bottom-right-radius: 5px; }
.sc-b { align-self: flex-start; background: rgba(74, 216, 136, .12); box-shadow: inset 0 0 0 1px rgba(74, 216, 136, .25); border-bottom-left-radius: 5px; }
.sc-chip {
    align-self: center; margin-top: 6px; padding: 8px 18px; border-radius: 999px;
    font-family: var(--f-mono); font-size: .7rem; letter-spacing: .04em; color: var(--neo);
    background: rgba(74, 216, 136, .1); box-shadow: inset 0 0 0 1px rgba(74, 216, 136, .45), 0 0 24px -6px rgba(74, 216, 136, .5);
}

.sc-typing { align-self: flex-start; display: flex; gap: 5px; padding: 13px 16px; border-radius: 16px; border-bottom-left-radius: 5px; background: rgba(74, 216, 136, .08); opacity: 0; }
.sc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--grn); animation: typing-bounce 1s ease infinite; }
.sc-typing i:nth-child(2) { animation-delay: .15s; }
.sc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* chat loop (9s) — runs when .on */
.sc-chat .sc-msg, .sc-chat .sc-chip { opacity: 1; }
.sc-chat.on .sc-m1 { animation: chat-m1 9s var(--ease) infinite; }
.sc-chat.on .sc-t1 { animation: chat-t1 9s linear infinite; }
.sc-chat.on .sc-m2 { animation: chat-m2 9s var(--ease) infinite; }
.sc-chat.on .sc-m3 { animation: chat-m3 9s var(--ease) infinite; }
.sc-chat.on .sc-t2 { animation: chat-t2 9s linear infinite; }
.sc-chat.on .sc-m4 { animation: chat-m4 9s var(--ease) infinite; }
.sc-chat.on .sc-m5 { animation: chat-m5 9s var(--ease) infinite; }

@keyframes chat-m1 { 0%, 3% { opacity: 0; transform: translateY(10px) scale(.95); } 6%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes chat-t1 { 0%, 7% { opacity: 0; } 8%, 17% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes chat-m2 { 0%, 18% { opacity: 0; transform: translateY(10px) scale(.95); } 21%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes chat-m3 { 0%, 31% { opacity: 0; transform: translateY(10px) scale(.95); } 34%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes chat-t2 { 0%, 36% { opacity: 0; } 37%, 47% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes chat-m4 { 0%, 48% { opacity: 0; transform: translateY(10px) scale(.95); } 51%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes chat-m5 { 0%, 60% { opacity: 0; transform: translateY(8px) scale(.9); } 64%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* web ---------------------------------------------------------------- */
.sc-web { padding: 26px 26px 60px; }
.sc-browser { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: rgba(4, 10, 7, .55); }
.sc-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.sc-bar > span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.sc-bar > span:first-child { background: rgba(255, 99, 99, .55); }
.sc-bar > span:nth-child(2) { background: rgba(255, 200, 87, .55); }
.sc-bar > span:nth-child(3) { background: rgba(74, 216, 136, .6); }
.sc-url {
    margin-left: 10px; flex: 1; display: flex; align-items: center; gap: 7px;
    font-family: var(--f-mono); font-size: .68rem; color: var(--mut);
    background: rgba(255, 255, 255, .04); border-radius: 8px; padding: 5px 12px;
}
.sc-url svg { color: var(--grn); }

.sc-canvas { position: relative; padding: 18px; min-height: 240px; }
.sc-blk b, .sc-blk u, .sc-blk i { display: block; border-radius: 6px; background: rgba(255, 255, 255, .09); }
.sc-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sc-nav i { width: 26px; height: 12px; border-radius: 4px; background: linear-gradient(92deg, rgba(74, 216, 136, .8), rgba(103, 190, 217, .8)); }
.sc-nav b { width: 34px; height: 7px; }
.sc-nav u { width: 52px; height: 16px; border-radius: 999px; background: rgba(74, 216, 136, .35); margin-left: auto; }
.sc-hero { margin-bottom: 16px; }
.sc-h1 { width: 72%; height: 18px; margin-bottom: 9px; background: rgba(255, 255, 255, .14); }
.sc-h2 { width: 50%; height: 10px; margin-bottom: 13px; }
.sc-btn1 { width: 86px; height: 22px; border-radius: 999px; background: linear-gradient(92deg, var(--grn), #54dfa0); box-shadow: 0 0 18px -4px rgba(74, 216, 136, .8); }
.sc-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.sc-card { height: 56px; border-radius: 10px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-soft); }

.sc-cursor {
    position: absolute; width: 14px; height: 14px; left: 10%; top: 20%;
    border-radius: 50%; background: var(--neo); box-shadow: 0 0 16px rgba(108, 245, 168, .9);
    opacity: 0;
}

.sc-web .sc-blk, .sc-web .sc-card { opacity: 1; }
.sc-web.on .sc-nav { animation: web-pop 10s var(--ease) infinite; }
.sc-web.on .sc-hero .sc-h1 { animation: web-grow 10s var(--ease) infinite; transform-origin: left; }
.sc-web.on .sc-hero .sc-h2 { animation: web-grow2 10s var(--ease) infinite; transform-origin: left; }
.sc-web.on .sc-btn1 { animation: web-btn 10s var(--ease) infinite; }
.sc-web.on .sc-c1 { animation: web-c1 10s var(--ease) infinite; }
.sc-web.on .sc-c2 { animation: web-c2 10s var(--ease) infinite; }
.sc-web.on .sc-c3 { animation: web-c3 10s var(--ease) infinite; }
.sc-web.on .sc-cursor { animation: web-cursor 10s ease-in-out infinite; }

@keyframes web-pop { 0%, 4% { opacity: 0; transform: translateY(-8px); } 8%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes web-grow { 0%, 10% { opacity: 0; transform: scaleX(0); } 16%, 95% { opacity: 1; transform: scaleX(1); } 99%, 100% { opacity: 0; } }
@keyframes web-grow2 { 0%, 15% { opacity: 0; transform: scaleX(0); } 21%, 95% { opacity: 1; transform: scaleX(1); } 99%, 100% { opacity: 0; } }
@keyframes web-btn { 0%, 21% { opacity: 0; transform: scale(.6); } 26%, 48% { opacity: 1; transform: scale(1); } 52% { transform: scale(1.12); } 56%, 95% { transform: scale(1); opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes web-c1 { 0%, 27% { opacity: 0; transform: translateY(14px); } 33%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes web-c2 { 0%, 32% { opacity: 0; transform: translateY(14px); } 38%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes web-c3 { 0%, 37% { opacity: 0; transform: translateY(14px); } 43%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes web-cursor {
    0%, 40% { opacity: 0; left: 70%; top: 75%; }
    44% { opacity: 1; }
    50% { left: 32%; top: 47%; }
    52% { transform: scale(.7); }
    54% { transform: scale(1); }
    62%, 95% { opacity: 1; left: 32%; top: 47%; }
    99%, 100% { opacity: 0; }
}

.sc-gauge {
    position: absolute; right: 22px; bottom: 16px; display: flex; align-items: center; gap: 4px;
    border-radius: 18px; padding: 10px 16px 10px 8px;
    background: rgba(6, 13, 9, .85); box-shadow: var(--glass-hi), 0 0 0 1px var(--line), 0 16px 40px -12px rgba(0, 0, 0, .8);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sc-web.on .sc-gauge-arc { animation: gauge-fill 10s var(--ease) infinite; }
@keyframes gauge-fill { 0%, 45% { stroke-dashoffset: 201; } 60%, 95% { stroke-dashoffset: 4; } 100% { stroke-dashoffset: 201; } }
.sc-gauge-num { display: flex; flex-direction: column; line-height: 1.1; }
.sc-gauge-num span { font-family: var(--f-disp); font-weight: 700; font-size: 1.4rem; color: var(--neo); }
.sc-gauge-num em { font-style: normal; font-family: var(--f-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }

.sc-ship {
    position: absolute; left: 26px; bottom: 22px;
    font-family: var(--f-mono); font-size: .68rem; color: var(--grn); letter-spacing: .08em;
}
.sc-ship::before { content: '●'; color: var(--grn); margin-right: 8px; animation: dot-pulse 2s ease infinite; display: inline-block; }

/* agents ---------------------------------------------------------------- */
.sc-agents { padding: 16px; }
.sc-graph { width: 100%; height: auto; display: block; }
.sc-wire { stroke: rgba(235, 255, 245, .12); stroke-width: 2; fill: none; }
.sc-wire-flow { stroke: rgba(74, 216, 136, .5); stroke-width: 2; fill: none; stroke-dasharray: 5 11; }
.sc-agents.on .sc-wire-flow { animation: wire-flow 1.1s linear infinite; }
@keyframes wire-flow { to { stroke-dashoffset: -16; } }
.sc-wire-dash { stroke-dasharray: 3 7; stroke: rgba(103, 190, 217, .4); }
.sc-packet { filter: drop-shadow(0 0 5px currentColor); }

.sc-node rect { fill: rgba(10, 19, 14, .85); stroke: var(--line); stroke-width: 1.2; }
.sc-node text { fill: var(--ink); font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .04em; }
.sc-n-agent rect { stroke: rgba(74, 216, 136, .55); fill: rgba(74, 216, 136, .07); }
.sc-agents.on .sc-n-agent rect { animation: node-glow 2.4s ease infinite; }
@keyframes node-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(74, 216, 136, .25)); }
    50% { filter: drop-shadow(0 0 14px rgba(74, 216, 136, .65)); }
}
.sc-n-title { font-weight: 700; font-size: 14px; }
.sc-n-sub { fill: var(--grn) !important; font-size: 10.5px !important; opacity: .9; }
.sc-n-mem rect { stroke: rgba(103, 190, 217, .45); fill: rgba(103, 190, 217, .06); }
.sc-n-mem text { fill: var(--lag); }
.sc-led { fill: var(--grn); }
.sc-agents.on .sc-led { animation: led-blink 2.4s ease infinite; }
.sc-agents.on .sc-o1 .sc-led { animation-delay: .5s; }
.sc-agents.on .sc-o2 .sc-led { animation-delay: .9s; }
.sc-agents.on .sc-o3 .sc-led { animation-delay: 1.3s; }
@keyframes led-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* dash ---------------------------------------------------------------- */
.sc-dash-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.sc-dash-head b { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .22em; color: var(--grn); }
.sc-dash-head time { margin-left: auto; font-family: var(--f-mono); font-size: .7rem; color: var(--mut); }

.sc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.sc-kpi { border-radius: 14px; padding: 13px 15px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sc-kpi b { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 1.45rem; }
.sc-kpi em { font-style: normal; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.sc-kpi-hi { background: linear-gradient(150deg, rgba(74, 216, 136, .14), rgba(103, 190, 217, .09)); box-shadow: inset 0 0 0 1px rgba(74, 216, 136, .35); }
.sc-kpi-hi b { color: var(--neo); }

.sc-chart { position: relative; }
.sc-chart svg { width: 100%; height: auto; display: block; }
.sc-line { stroke-dasharray: 620; stroke-dashoffset: 620; }
.sc-dash.on .sc-line { animation: line-draw 2.2s var(--ease) .3s forwards; }
@keyframes line-draw { to { stroke-dashoffset: 0; } }
.sc-area { opacity: 0; }
.sc-dash.on .sc-area { animation: area-in 1.4s ease 1.6s forwards; }
@keyframes area-in { to { opacity: 1; } }
.sc-line-dot { opacity: 0; }
.sc-dash.on .sc-line-dot { animation: dot-in .4s ease 2.4s forwards, dash-dot-pulse 2s ease 2.8s infinite; }
@keyframes dot-in { to { opacity: 1; } }
@keyframes dash-dot-pulse { 0%, 100% { r: 4; } 50% { r: 6.5; } }

.sc-bars { display: flex; align-items: flex-end; gap: 9px; height: 64px; margin-top: 16px; }
.sc-bars i {
    flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, rgba(74, 216, 136, .75), rgba(74, 216, 136, .12));
    transform: scaleY(0); transform-origin: bottom;
}
.sc-bars i:nth-child(even) { background: linear-gradient(180deg, rgba(103, 190, 217, .65), rgba(103, 190, 217, .1)); }
.sc-dash.on .sc-bars i { animation: bar-grow .9s var(--ease) calc(.4s + var(--d)) forwards; }
@keyframes bar-grow { to { transform: scaleY(1); } }

/* auto ---------------------------------------------------------------- */
.sc-auto { padding: 34px 26px; overflow: visible; }
.sc-rail { position: relative; display: flex; align-items: center; padding: 10px 0 26px; }
.sc-rail-line { position: absolute; left: 10%; right: 10%; top: 25px; margin-top: -1px; height: 2px; background: linear-gradient(90deg, rgba(103, 190, 217, .3), rgba(74, 216, 136, .3)); border-radius: 2px; }
.sc-pulse {
    position: absolute; left: 10%; top: 25px; width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 50%; background: var(--neo); box-shadow: 0 0 18px rgba(108, 245, 168, 1); opacity: 0;
}
.sc-auto.on .sc-pulse { animation: pulse-travel 6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes pulse-travel {
    0%, 14%   { left: 10%; opacity: 0; }
    15.5%     { opacity: 1; }
    18.5%     { opacity: 1; }
    20%       { left: 30%; opacity: 0; }
    34%       { left: 30%; opacity: 0; }
    35.5%     { opacity: 1; }
    38.5%     { opacity: 1; }
    40%       { left: 50%; opacity: 0; }
    54%       { left: 50%; opacity: 0; }
    55.5%     { opacity: 1; }
    58.5%     { opacity: 1; }
    60%       { left: 70%; opacity: 0; }
    74%       { left: 70%; opacity: 0; }
    75.5%     { opacity: 1; }
    78.5%     { opacity: 1; }
    80%       { left: 90%; opacity: 0; }
    94%, 100% { left: 90%; opacity: 0; }
}

.sc-step {
    flex: 1 1 0;
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-family: var(--f-mono); font-size: .62rem; letter-spacing: .04em; color: var(--mut);
    transition: color .3s;
}
.sc-step svg {
    width: 30px; height: 30px; padding: 8px; border-radius: 11px; color: rgba(235, 255, 245, .35);
    background: rgba(10, 19, 14, .9); box-shadow: inset 0 0 0 1px var(--line);
}
.sc-auto.on .sc-s1 { animation: step-lit 6s ease 0s infinite; }
.sc-auto.on .sc-s2 { animation: step-lit 6s ease 1.2s infinite; }
.sc-auto.on .sc-s3 { animation: step-lit 6s ease 2.4s infinite; }
.sc-auto.on .sc-s4 { animation: step-lit 6s ease 3.6s infinite; }
.sc-auto.on .sc-s5 { animation: step-lit 6s ease 4.8s infinite; }
.sc-auto.on .sc-s1 svg { animation: node-lit 6s ease 0s infinite; }
.sc-auto.on .sc-s2 svg { animation: node-lit 6s ease 1.2s infinite; }
.sc-auto.on .sc-s3 svg { animation: node-lit 6s ease 2.4s infinite; }
.sc-auto.on .sc-s4 svg { animation: node-lit 6s ease 3.6s infinite; }
.sc-auto.on .sc-s5 svg { animation: node-lit 6s ease 4.8s infinite; }
@keyframes step-lit {
    0%        { color: var(--mut); }
    3%, 14%   { color: var(--neo); }
    20%, 100% { color: var(--mut); }
}
@keyframes node-lit {
    0% {
        color: rgba(235, 255, 245, .35);
        background: rgba(10, 19, 14, .9);
        box-shadow: inset 0 0 0 1px var(--line);
    }
    3%, 14% {
        color: #04130b;
        background: var(--neo);
        box-shadow: inset 0 0 0 1px var(--neo), 0 0 16px rgba(108, 245, 168, .7);
    }
    20%, 100% {
        color: rgba(235, 255, 245, .35);
        background: rgba(10, 19, 14, .9);
        box-shadow: inset 0 0 0 1px var(--line);
    }
}
.sc-step span { white-space: nowrap; }

.sc-runs { display: flex; align-items: center; gap: 10px; justify-content: center; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: .85rem; color: var(--mut); }
.sc-runs b { font-family: var(--f-disp); font-size: 1.2rem; color: var(--ink); }

/* --- process ---------------------------------------------------------------- */
.process-grid { max-width: var(--w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; }
.process-step {
    position: relative; border-radius: var(--r); padding: 34px 30px;
    background: var(--glass); box-shadow: var(--glass-hi), 0 0 0 1px var(--line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.process-step:hover { transform: translateY(-6px); box-shadow: var(--glass-hi), 0 0 0 1px rgba(74, 216, 136, .3), 0 26px 60px -24px rgba(74, 216, 136, .35); }
.process-n { display: block; font-size: 1rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 20px; }
.process-step h3 { margin-bottom: 12px; }
.process-step p { color: var(--mut); font-size: .97rem; }
@media (max-width: 880px) { .process-grid { grid-template-columns: 1fr; } }

/* --- cards (case studies / posts / solutions) -------------------------------- */
.cs-grid, .post-grid { max-width: var(--w); margin: 0 auto 40px; display: grid; gap: 22px; }
.cs-grid { grid-template-columns: 1fr 1fr; }
.post-grid { grid-template-columns: repeat(3, 1fr); }
.post-grid-hub { grid-template-columns: 1fr 1fr; }
.cs-grid-hub { grid-template-columns: 1fr 1fr; }

.cs-card, .post-card, .sol-card {
    display: flex; flex-direction: column; gap: 14px; text-decoration: none;
    border-radius: var(--r); padding: 34px 32px;
    background: var(--glass); box-shadow: var(--glass-hi), 0 0 0 1px var(--line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cs-card:hover, .post-card:hover, .sol-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--glass-hi), 0 0 0 1px rgba(74, 216, 136, .35), 0 30px 70px -26px rgba(74, 216, 136, .35);
}
.cs-card h3, .post-card h3 { font-size: 1.25rem; }
.cs-card h2, .post-card h2, .sol-card h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.cs-industry { color: var(--lag); }
.post-meta { color: var(--mut); }
.post-desc { color: var(--mut); font-size: .95rem; flex: 1; }

.cs-results { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-results li {
    font-family: var(--f-mono); font-size: .68rem; letter-spacing: .04em;
    padding: 7px 14px; border-radius: 999px; color: var(--neo);
    background: rgba(74, 216, 136, .08); box-shadow: inset 0 0 0 1px rgba(74, 216, 136, .35);
}
.cs-results-lg li { font-size: .78rem; padding: 9px 18px; }

.chiplist { display: flex; flex-wrap: wrap; gap: 8px; }
.chiplist li {
    font-family: var(--f-mono); font-size: .66rem; letter-spacing: .04em;
    padding: 6px 13px; border-radius: 999px; color: var(--mut);
    box-shadow: inset 0 0 0 1px var(--line);
}
.chiplist-lg li { font-size: .78rem; padding: 9px 18px; color: var(--ink); }

@media (max-width: 980px) { .post-grid { grid-template-columns: 1fr; } .post-grid-hub, .cs-grid, .cs-grid-hub { grid-template-columns: 1fr; } }

/* --- FAQ ---------------------------------------------------------------------- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq .section-head { text-align: center; }
.faq-item {
    border-radius: var(--r-sm); background: var(--glass);
    box-shadow: var(--glass-hi), 0 0 0 1px var(--line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: box-shadow .3s;
}
.faq-item[open] { box-shadow: var(--glass-hi), 0 0 0 1px rgba(74, 216, 136, .35); }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    list-style: none; cursor: pointer; padding: 20px 24px;
    font-family: var(--f-disp); font-weight: 600; font-size: 1.06rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-x { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-x::before, .faq-x::after { content: ''; position: absolute; inset: 0; margin: auto; background: var(--grn); border-radius: 2px; transition: transform .35s var(--ease); }
.faq-x::before { width: 16px; height: 2px; }
.faq-x::after { width: 2px; height: 16px; }
.faq-item[open] .faq-x::after { transform: rotate(90deg); }
.faq-a { padding: 0 24px 22px; color: var(--mut); max-width: 65ch; }

/* --- CTA band -------------------------------------------------------------------- */
.cta-band { padding-top: 40px; }
.cta-card {
    position: relative; max-width: 980px; margin: 0 auto; text-align: center;
    border-radius: 32px; padding: clamp(50px, 8vw, 90px) var(--pad);
    background: linear-gradient(165deg, rgba(74, 216, 136, .10), rgba(103, 190, 217, .06) 55%, rgba(255, 255, 255, .02));
    box-shadow: var(--glass-hi), 0 0 0 1px rgba(74, 216, 136, .22), 0 40px 110px -40px rgba(74, 216, 136, .35);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    overflow: hidden;
}
.cta-card h2 { margin-bottom: 18px; }
.cta-card > p { color: var(--mut); max-width: 56ch; margin: 0 auto 34px; }

/* --- page hero (subpages) ----------------------------------------------------------- */
.page-hero { max-width: var(--w); margin: 0 auto; padding-top: 160px; padding-bottom: 30px; }
.page-lead { color: var(--mut); font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 60ch; margin-top: 18px; }

.breadcrumbs { margin-bottom: 30px; font-size: .66rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; color: var(--mut); }
.breadcrumbs a { color: var(--mut); text-decoration: none; transition: color .3s; }
.breadcrumbs a:hover { color: var(--grn); }
.breadcrumbs [aria-current] { color: var(--ink); }
.bc-sep { color: var(--line); }

/* --- solutions hub --------------------------------------------------------------------- */
.sol-grid { max-width: var(--w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sol-card { gap: 16px; }
.sol-card .sc-index { margin-bottom: 0; }
.sol-card p { color: var(--mut); flex: 1; }
.sol-card:first-child { grid-column: 1 / -1; }
@media (max-width: 880px) { .sol-grid { grid-template-columns: 1fr; } }

/* --- solution page ------------------------------------------------------------------------ */
.sol-hero {
    max-width: var(--w); margin: 0 auto; padding-top: 160px;
    display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(34px, 5vw, 80px); align-items: center;
}
.sol-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.sol-hero .hero-cta { margin: 30px 0 0; }
@media (max-width: 980px) { .sol-hero { grid-template-columns: 1fr; } }

.pfo { max-width: var(--w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pfo-card {
    border-radius: var(--r); padding: 36px 32px;
    background: var(--glass); box-shadow: var(--glass-hi), 0 0 0 1px var(--line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.pfo-card h2 { font-size: 1.4rem; margin-bottom: 14px; }
.pfo-card > p:last-child { color: var(--mut); font-size: .96rem; }
.pfo-problem .kicker { color: #ff8e8e; }
.pfo-outcome { background: linear-gradient(165deg, rgba(74, 216, 136, .12), rgba(103, 190, 217, .05)); box-shadow: var(--glass-hi), 0 0 0 1px rgba(74, 216, 136, .3); }
@media (max-width: 980px) { .pfo { grid-template-columns: 1fr; } }

.deliver-grid { max-width: var(--w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.deliver-item {
    border-radius: var(--r-sm); padding: 28px 26px;
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow .3s, background .3s;
}
.deliver-item:hover { background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(103, 190, 217, .35); }
.deliver-item h3 { font-size: 1.06rem; margin-bottom: 10px; }
.deliver-item h3::before { content: '◆ '; color: var(--grn); font-size: .8em; }
.deliver-item p { color: var(--mut); font-size: .92rem; }
@media (max-width: 980px) { .deliver-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .deliver-grid { grid-template-columns: 1fr; } }

.techline { max-width: var(--w); margin: 0 auto; padding-top: 0; }

.other-sol { max-width: var(--w); margin: 0 auto; padding-top: 0; }
.other-sol-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.other-sol-links a {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--ink); font-family: var(--f-disp); font-weight: 600;
    padding: 16px 26px; border-radius: 999px;
    background: var(--glass); box-shadow: var(--glass-hi), 0 0 0 1px var(--line);
    transition: transform .35s var(--ease), box-shadow .35s;
}
.other-sol-links a span { color: var(--grn); transition: transform .3s var(--ease); }
.other-sol-links a:hover { transform: translateY(-3px); box-shadow: var(--glass-hi), 0 0 0 1px rgba(74, 216, 136, .4); }
.other-sol-links a:hover span { transform: translateX(4px); }

/* --- article / prose -------------------------------------------------------------------------- */
.article { max-width: 800px; margin: 0 auto; padding: 160px var(--pad) 60px; }
.article-head { margin-bottom: 50px; }
.article-head h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 18px; }
.article-head .chiplist { margin-top: 22px; }
.article-head .cs-results { margin-top: 26px; }
.article-back { margin-top: 60px; }

.prose { font-size: 1.04rem; color: #c9d8d0; }
.prose p { margin-bottom: 1.3em; }
.prose strong { color: var(--ink); }
.prose em { color: var(--ink); }
.prose a { color: var(--grn); text-decoration-color: rgba(74, 216, 136, .4); text-underline-offset: 3px; }
.prose a:hover { color: var(--neo); }
.prose h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 2em 0 .8em; color: var(--ink);
}
.prose h3 { font-size: 1.18rem; margin: 1.7em 0 .7em; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1.4em 1.3em; }
.prose ul { list-style: none; }
.prose ul li, .prose ol li { margin-bottom: .6em; }
.prose ul li { position: relative; padding-left: 8px; }
.prose ul li::before { content: ''; position: absolute; left: -16px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--grad); }
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--grn); font-weight: 700; }
.prose code {
    font-family: var(--f-mono); font-size: .85em; color: var(--lag);
    background: rgba(103, 190, 217, .09); padding: 2px 7px; border-radius: 6px;
}
.prose pre {
    margin: 0 0 1.5em; padding: 22px 24px; border-radius: var(--r-sm); overflow-x: auto;
    background: rgba(4, 9, 7, .8); box-shadow: inset 0 0 0 1px var(--line), var(--glass-hi);
}
.prose pre code { background: none; padding: 0; color: #b9d6c6; font-size: .82rem; line-height: 1.6; }
.prose figure { margin: 2em 0; }
.prose figure img { border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px rgba(0, 0, 0, .8); }
.prose figcaption { font-family: var(--f-mono); font-size: .7rem; color: var(--mut); margin-top: 12px; letter-spacing: .04em; }
.prose .cs-status { display: block; padding: 18px 22px; border-radius: var(--r-sm); background: rgba(103, 190, 217, .08); box-shadow: inset 0 0 0 1px rgba(103, 190, 217, .3); margin-bottom: 1.4em; }
.prose .cs-cta {
    margin-top: 3em; padding: 34px 32px; border-radius: var(--r); text-align: center;
    background: linear-gradient(165deg, rgba(74, 216, 136, .1), rgba(103, 190, 217, .05));
    box-shadow: var(--glass-hi), 0 0 0 1px rgba(74, 216, 136, .25);
}
.prose .cs-cta h3 { margin: 0 0 .5em; }
.prose .cs-cta p { color: var(--mut); }
.prose .cs-cta a {
    display: inline-flex; margin-top: 8px; padding: 13px 28px; border-radius: 999px;
    background: var(--grn); color: #03130a; font-weight: 700; text-decoration: none;
    font-family: var(--f-disp); transition: background .3s, transform .3s var(--ease);
}
.prose .cs-cta a:hover { background: var(--neo); transform: translateY(-2px); }

.legal-company { font-family: var(--f-mono); font-size: .82rem; color: var(--mut); padding: 18px 22px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }

/* --- contact ------------------------------------------------------------------------------------ */
.contact {
    max-width: var(--w); margin: 0 auto; padding-top: 170px;
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start;
}
.contact h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.contact-bullets { margin-top: 44px; display: flex; flex-direction: column; gap: 26px; }
.contact-bullets h3 { font-size: 1.08rem; margin-bottom: 6px; }
.contact-bullets h3::before { content: '✓ '; color: var(--grn); }
.contact-bullets p { color: var(--mut); font-size: .95rem; max-width: 46ch; }

.contact-form {
    display: flex; flex-direction: column; gap: 18px;
    border-radius: var(--r); padding: clamp(28px, 4vw, 44px);
    background: var(--glass); box-shadow: var(--glass-hi), 0 0 0 1px var(--line), 0 40px 100px -40px rgba(0, 0, 0, .9);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.field input, .field textarea {
    font-family: var(--f-body); font-size: 1rem; color: var(--ink);
    background: rgba(4, 9, 7, .55); border: 0; border-radius: 12px; padding: 14px 18px;
    box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s;
    resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(149, 169, 158, .5); }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--grn), 0 0 24px -8px rgba(74, 216, 136, .5); }
.contact-form .btn { justify-content: center; margin-top: 6px; }
.form-msg { font-size: .92rem; min-height: 1.4em; text-align: center; }
.form-msg.ok { color: var(--grn); }
.form-msg.err { color: #ff8e8e; }
@media (max-width: 920px) { .contact { grid-template-columns: 1fr; } }

/* --- 404 ------------------------------------------------------------------------------------------ */
.nf { min-height: 80svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 140px; }
.nf-code { font-size: clamp(4rem, 16vw, 9rem); letter-spacing: .1em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.nf h1 { margin: 10px 0 16px; }
.nf .hero-cta { justify-content: center; margin-top: 34px; }

/* --- footer ------------------------------------------------------------------------------------------ */
.footer { position: relative; margin-top: 60px; border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(4, 8, 6, 0)); overflow: hidden; }
.footer-inner {
    max-width: var(--w); margin: 0 auto; padding: 70px var(--pad) 40px;
    display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(36px, 6vw, 90px);
}
.footer-brand p { color: var(--mut); font-size: .92rem; margin-top: 20px; max-width: 40ch; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-cols h3 { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin-bottom: 18px; font-weight: 500; }
.footer-cols ul { display: flex; flex-direction: column; gap: 11px; }
.footer-cols a { color: var(--ink); text-decoration: none; font-size: .94rem; opacity: .85; transition: opacity .3s, color .3s; }
.footer-cols a:hover { opacity: 1; color: var(--grn); }
.footer-legal {
    position: relative; z-index: 1; max-width: var(--w); margin: 0 auto; padding: 26px var(--pad) clamp(60px, 12.67vw, 180px);
    border-top: 1px solid var(--line-soft);
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    font-family: var(--f-mono); font-size: .64rem; letter-spacing: .04em; color: var(--mut);
}
.footer-mark {
    position: absolute; left: 50%; bottom: -.28em; transform: translateX(-50%);
    font-family: var(--f-disp); font-weight: 700; font-size: clamp(90px, 19vw, 270px); line-height: 1;
    background: linear-gradient(180deg, rgba(74, 216, 136, .14), rgba(74, 216, 136, 0));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    pointer-events: none; user-select: none; white-space: nowrap;
}
@media (max-width: 880px) { .footer-inner { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; } }

/* --- HOME ONLY: neon-green accents + mobile richness ------------------------
   Scoped to .page-home so every other page keeps its existing static palette.
   The home accent is a single neon green; the mobile rules below reuse it for
   the per-chapter rail + node that stand in for the desktop scroll-path. */
.page-home .kicker,
.page-home .link-arrow,
.page-home .ticks li,
.page-home .faq-x,
.page-home .showcase-text {
    --accent: var(--neo);
}
.page-home .kicker,
.page-home .link-arrow { color: var(--accent); }
.page-home .ticks li::after { border-left-color: var(--accent); border-bottom-color: var(--accent); }
.page-home .faq-x::before,
.page-home .faq-x::after { background: var(--accent); }

@media (max-width: 880px) {
    /* The desktop weaving scroll-path is hidden on phones, so the stacked
       showcases read flat. Bring the "follow the path" motif back as a
       per-chapter glowing node + rail down the left edge. */
    .page-home .showcase-text { position: relative; padding-left: 30px; }
    .page-home .showcase-text::before {
        content: ''; position: absolute; left: 7px; top: 26px; bottom: -10px; width: 2px;
        border-radius: 2px; background: linear-gradient(180deg, var(--accent), transparent);
        opacity: .5;
    }
    .page-home .showcase-text::after {
        content: ''; position: absolute; left: 2px; top: 9px; width: 13px; height: 13px;
        border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--accent);
    }
}

/* --- touch devices: cut GPU-heavy effects --------------------------------------------------------------
   Real phone GPUs (unlike desktop GPUs, incl. DevTools mobile emulation) crawl on
   backdrop blurs and animated filters — these overrides keep mobile scrolling at 60fps. */
@media (hover: none) and (pointer: coarse) {
    /* backdrop-filter re-blurs everything behind the element on every scrolled frame */
    .nav, .nav-mobile, .btn-ghost, .badge, .stage, .sc-gauge, .process-step,
    .cs-card, .post-card, .sol-card, .faq-item, .cta-card, .pfo-card, .contact-form {
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    /* darker bases stand in for the lost frosting */
    .nav { background: linear-gradient(160deg, rgba(10, 18, 14, .95), rgba(8, 14, 11, .92)); }
    .stage, .process-step, .cs-card, .post-card, .sol-card, .faq-item, .pfo-card, .contact-form {
        background-color: rgba(8, 14, 11, .8);
    }
    /* blur transitions rasterize at single-digit fps on phones; fade+slide stays smooth */
    .reveal { filter: none; }
    /* animated/moving drop-shadows re-rasterize the SVG every frame */
    .sc-agents.on .sc-n-agent rect { animation: none; }
    .sc-packet { filter: none; }
    .aurora { animation: none; }
    /* isolate per-frame path repaints from the text/cards sharing its tiles */
    .scroll-path { will-change: transform; }
}

/* --- reduced motion ------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; filter: none; }
    .scroll-path { display: none; }
    .sc-typing { display: none; }
    .sc-line { stroke-dashoffset: 0; }
    .sc-area, .sc-line-dot, .sc-pulse { opacity: 1; }
    .sc-bars i { transform: scaleY(1); }
    .sc-gauge-arc { stroke-dashoffset: 4; }
}