/* ============================================================
   STHORIFY / AI Automation Platform
   Design system: Intelligent Flow
   ============================================================ */

:root{
    --obsidian:#0D1117;
    --graphite:#171D24;
    --slate:#242D36;

    --electric-cobalt:#356AE6;
    --bright-blue:#5B8CFF;

    --mint:#55C9A5;
    --soft-mint:#DDF6ED;

    --ice:#EEF4FA;
    --cloud:#F7F9FC;

    --white:#FFFFFF;
    --text:#17212B;
    --muted:#6D7985;

    --line:rgba(13,17,23,.12);
    --line-dark:rgba(255,255,255,.10);
    --text-dark:#E7EDF4;
    --muted-dark:#93A1B0;

    --flow:linear-gradient(135deg,#356AE6,#55C9A5);

    --shell:1240px;
    --gutter:clamp(20px,5vw,48px);
    --radius:18px;
    --radius-sm:12px;

    --ease:cubic-bezier(.22,.61,.36,1);
    --header-h:76px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--header-h) + 16px);
}
html,body{max-width:100%;overflow-x:clip}
body{
    margin:0;
    background:var(--white);
    color:var(--text);
    font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:17px;
    line-height:1.65;
    font-weight:450;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- a11y ---------- */
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
    position:absolute;left:16px;top:-70px;z-index:200;
    background:var(--white);color:var(--text);
    padding:12px 18px;border-radius:10px;font-weight:700;
    border:1px solid var(--line);transition:top .2s var(--ease);
}
.skip-link:focus{top:16px}
:focus-visible{
    outline:2px solid var(--bright-blue);
    outline-offset:3px;
    border-radius:6px;
}

/* ---------- layout ---------- */
.shell{
    width:100%;
    max-width:var(--shell);
    margin-inline:auto;
    padding-inline:var(--gutter);
}
.section{padding:clamp(76px,10vw,132px) 0;position:relative}
.pt-0{padding-top:0}
.section-white{background:var(--white)}
.section-cloud{background:var(--cloud)}
.section-ice{background:var(--ice)}
.section-graphite{background:var(--graphite);color:var(--text-dark)}

/* ---------- type ---------- */
.h2{
    font-family:"Space Grotesk","Manrope",sans-serif;
    font-size:clamp(30px,4.2vw,54px);
    line-height:1.06;
    letter-spacing:-.025em;
    font-weight:700;
    color:var(--text);
    text-wrap:balance;
}
.h1-alt{
    font-family:"Space Grotesk","Manrope",sans-serif;
    font-size:clamp(38px,6vw,80px);
    line-height:1.02;
    letter-spacing:-.032em;
    font-weight:700;
    text-wrap:balance;
}
.h2-dark{color:#fff}
.lead{
    font-size:clamp(16px,1.35vw,19px);
    color:var(--muted);
    max-width:60ch;
    margin-top:20px;
}
.lead-dark{color:var(--muted-dark)}
.grad{
    background:var(--flow);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:"Space Grotesk","Manrope",sans-serif;
    font-size:12px;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);margin-bottom:18px;
}
.eyebrow .num{color:var(--electric-cobalt);font-weight:700}
.eyebrow .sep{opacity:.45}
.eyebrow-dark{
    color:var(--muted-dark);
    border:1px solid var(--line-dark);
    background:rgba(255,255,255,.03);
    padding:8px 16px;border-radius:100px;
}
.eyebrow-dark .num{color:var(--bright-blue)}
.eyebrow .dot{
    flex:0 0 7px;height:7px;border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 0 4px rgba(85,201,165,.18);
    animation:blink 2.4s var(--ease) infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.section-head .lead{margin-top:22px}
.disclaimer{
    margin-top:22px;font-size:13px;color:var(--muted);
    letter-spacing:.01em;
}
.disclaimer-inline{margin-top:18px}
.fineprint{margin-top:22px;font-size:13px;color:var(--muted-dark);opacity:.8}

/* ---------- buttons ---------- */
.btn{
    --btn-shift:0;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:14px 24px;border-radius:12px;
    font-weight:700;font-size:15px;letter-spacing:-.01em;
    border:1px solid transparent;
    transition:transform .28s var(--ease),box-shadow .28s var(--ease),
               background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
    white-space:nowrap;
}
.btn-sm{padding:11px 18px;font-size:14px}
.btn-lg{padding:17px 30px;font-size:16px}
.btn .arw,.btn .arw-up{transition:transform .28s var(--ease);display:inline-block}
.btn:hover .arw{transform:translateX(4px)}
.btn:hover .arw-up{transform:translate(3px,-3px)}

.btn-primary{
    background:var(--electric-cobalt);color:#fff;
    box-shadow:0 6px 18px -8px rgba(53,106,230,.7);
}
.btn-primary:hover{
    transform:translateY(-2px);
    background:#2d5ed3;
    box-shadow:0 14px 30px -12px rgba(53,106,230,.85);
}
.btn-outline{
    border-color:rgba(255,255,255,.22);
    color:#fff;background:rgba(255,255,255,.02);
}
.btn-outline:hover{
    transform:translateY(-2px);
    border-color:var(--mint);
    background:rgba(85,201,165,.08);
}
.btn-ghost{border-color:var(--line);color:var(--text)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
    position:fixed;inset:0 0 auto 0;z-index:100;
    height:var(--header-h);
    display:flex;align-items:center;
    border-bottom:1px solid transparent;
    transition:background .3s var(--ease),border-color .3s var(--ease),
               backdrop-filter .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
    background:rgba(13,17,23,.72);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    backdrop-filter:blur(16px) saturate(140%);
    border-bottom-color:var(--line-dark);
    box-shadow:0 10px 30px -20px rgba(0,0,0,.8);
}
.site-header.on-light.is-scrolled{
    background:rgba(255,255,255,.82);
    border-bottom-color:var(--line);
    box-shadow:0 10px 30px -22px rgba(13,17,23,.35);
}
.header-inner{
    display:flex;align-items:center;gap:28px;
    width:100%;
}

/* logo */
.logo{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto}
.logo-mark{display:flex}
.logo-mark svg{overflow:visible}
.logo-type{display:flex;flex-direction:column;line-height:1}
.logo-name{
    font-family:"Space Grotesk","Manrope",sans-serif;
    font-weight:700;font-size:20px;letter-spacing:.10em;color:#fff;
}
.logo-sub{
    font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--muted-dark);margin-top:5px;font-weight:600;
}
.on-light .logo-name{color:var(--text)}
.on-light .logo-sub{color:var(--muted)}
.logo .sflow-a,.logo .sflow-b{
    transition:transform .5s var(--ease);
    transform-origin:20px 20px;
}
.logo:hover .sflow-a{transform:translateX(1.5px)}
.logo:hover .sflow-b{transform:translateX(-1.5px)}

/* nav */
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:4px}
.site-nav a{
    position:relative;display:inline-block;
    padding:9px 14px;border-radius:9px;
    font-size:14.5px;font-weight:600;
    color:rgba(255,255,255,.72);
    transition:color .2s var(--ease),background .2s var(--ease);
}
.site-nav a::after{
    content:"";position:absolute;left:14px;right:14px;bottom:4px;
    height:1.5px;background:var(--flow);
    transform:scaleX(0);transform-origin:left;
    transition:transform .32s var(--ease);
}
.site-nav a:hover{color:#fff}
.site-nav a:hover::after{transform:scaleX(1)}
.on-light .site-nav a{color:var(--muted)}
.on-light .site-nav a:hover{color:var(--text)}

.header-actions{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.link-login{
    font-size:14.5px;font-weight:600;color:rgba(255,255,255,.78);
    transition:color .2s var(--ease);
}
.link-login:hover{color:#fff}
.on-light .link-login{color:var(--muted)}
.on-light .link-login:hover{color:var(--text)}
.nav-actions-mobile{display:none}

.menu-btn{
    display:none;width:44px;height:44px;border-radius:11px;
    border:1px solid var(--line-dark);
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
    margin-left:auto;
}
.menu-btn span{
    display:block;width:18px;height:1.8px;border-radius:2px;background:#fff;
    transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.on-light .menu-btn{border-color:var(--line)}
.on-light .menu-btn span{background:var(--text)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
    position:relative;
    background:var(--obsidian);
    padding:calc(var(--header-h) + clamp(56px,9vw,104px)) 0 clamp(72px,9vw,120px);
    overflow:hidden;
    isolation:isolate;
}
.hero-grid-bg{
    position:absolute;inset:0;z-index:-1;
    background-image:
        radial-gradient(900px 520px at 78% 12%,rgba(53,106,230,.16),transparent 62%),
        radial-gradient(700px 420px at 8% 82%,rgba(85,201,165,.10),transparent 60%),
        linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
    background-size:100% 100%,100% 100%,64px 64px,64px 64px;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
}
.hero-inner{display:grid;gap:clamp(48px,6vw,76px)}
.hero-copy{max-width:900px}
.hero-title{
    font-family:"Space Grotesk","Manrope",sans-serif;
    font-size:clamp(48px,7vw,96px);
    line-height:.98;
    letter-spacing:-.038em;
    font-weight:700;
    color:#fff;
    margin-bottom:26px;
}
.hero-lead{
    font-size:clamp(16px,1.45vw,20px);
    color:var(--muted-dark);
    max-width:62ch;line-height:1.65;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-notes{
    display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;
    font-size:13.5px;color:var(--muted-dark);
}
.hero-notes li{display:flex;align-items:center;gap:10px}
.hero-notes li+li::before{
    content:"";flex:0 0 4px;height:4px;border-radius:50%;
    background:var(--mint);margin-right:16px;opacity:.8;
}

/* ---------- hero flow map ---------- */
.flowmap{
    position:relative;
    border:1px solid var(--line-dark);
    border-radius:24px;
    background:
        radial-gradient(700px 340px at 50% 40%,rgba(53,106,230,.09),transparent 70%),
        rgba(255,255,255,.018);
    padding:clamp(16px,2.4vw,30px);
}
.flowmap-svg{width:100%;height:auto}
.flowmap-mobile{display:none}

.fm-label{
    fill:var(--muted-dark);font-size:11px;font-weight:700;
    letter-spacing:.2em;font-family:"Space Grotesk",sans-serif;
}
.fm-node rect{
    fill:rgba(255,255,255,.035);
    stroke:rgba(255,255,255,.12);
    stroke-width:1;
    transition:fill .3s var(--ease),stroke .3s var(--ease);
}
.fm-node text{
    fill:#DCE5EF;font-size:15px;font-weight:600;
    font-family:"Manrope",sans-serif;
}
.fm-dot{fill:var(--bright-blue)}
.fm-dot-mint{fill:var(--mint)}
.fm-node:hover rect{fill:rgba(91,140,255,.10);stroke:rgba(91,140,255,.55)}
.fm-out .fm-node:hover rect{fill:rgba(85,201,165,.10);stroke:rgba(85,201,165,.55)}

.fm-core-halo{
    fill:none;stroke:rgba(91,140,255,.22);stroke-width:1;
    animation:coreHalo 3.6s var(--ease) infinite;
}
@keyframes coreHalo{0%,100%{opacity:.35}50%{opacity:.9}}
.fm-core-box{
    fill:rgba(36,45,54,.85);
    stroke:rgba(91,140,255,.4);
    stroke-width:1.2;
}
.fm-core-dot{animation:blink 2.2s var(--ease) infinite}
.fm-core-t1{
    fill:#fff;font-size:17px;font-weight:700;letter-spacing:.06em;
    font-family:"Space Grotesk",sans-serif;
}
.fm-core-t2{
    fill:var(--mint);font-size:11px;font-weight:700;letter-spacing:.2em;
    font-family:"Space Grotesk",sans-serif;
}

/* enter animations */
.fm-node,.eco-node{opacity:0;transform:translateY(10px)}
.fm-link,.eco-line{stroke-dasharray:1000;stroke-dashoffset:1000}
.in .fm-node,.in .eco-node{animation:nodeIn .6s var(--ease) forwards;animation-delay:var(--d,0s)}
.in .fm-link{animation:drawLine 1s var(--ease) forwards;animation-delay:var(--d,0s)}
.in .eco-line{animation:drawLine 1.2s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes nodeIn{to{opacity:1;transform:translateY(0)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
.pulse{opacity:0}
.in .pulse{opacity:.95;animation:fadeIn .6s 1.6s var(--ease) backwards}
@keyframes fadeIn{from{opacity:0}to{opacity:.95}}

/* ============================================================
   LIVE WORKFLOW DEMONSTRATION
   ============================================================ */
.demo-wrap{margin-top:clamp(64px,8vw,104px)}
.demo-head{max-width:640px;margin-bottom:clamp(32px,4vw,48px)}
.demo-flow{
    display:flex;align-items:stretch;gap:0;
    flex-wrap:nowrap;
}
.demo-step{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;gap:10px;
    padding:20px 18px;
    border:1px solid var(--line-dark);
    border-radius:16px;
    background:rgba(255,255,255,.026);
    transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.demo-step:hover{
    transform:translateY(-4px);
    border-color:rgba(91,140,255,.45);
    background:rgba(91,140,255,.06);
}
.demo-step.is-live{
    border-color:rgba(85,201,165,.6);
    background:rgba(85,201,165,.07);
    box-shadow:0 0 0 1px rgba(85,201,165,.18),0 18px 40px -30px rgba(85,201,165,.9);
}
.demo-kind{
    font-family:"Space Grotesk",sans-serif;
    font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted-dark);
}
.demo-ico{
    width:34px;height:34px;border-radius:10px;
    display:grid;place-items:center;
    border:1px solid var(--line-dark);
}
.ico-blue{color:var(--bright-blue);background:rgba(91,140,255,.10)}
.ico-mint{color:var(--mint);background:rgba(85,201,165,.12)}
.ico-grad{
    color:#fff;
    background:var(--flow);
    border-color:transparent;
}
.demo-text{color:#E7EDF4;font-size:15px;font-weight:600;line-height:1.4}
.demo-link{
    flex:0 0 34px;align-self:center;
    height:1px;position:relative;
}
.demo-link span{
    position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(91,140,255,.15),rgba(91,140,255,.5),rgba(91,140,255,.15));
}
.demo-link::after{
    content:"";position:absolute;top:-2.5px;left:0;
    width:6px;height:6px;border-radius:50%;background:var(--mint);
    box-shadow:0 0 10px rgba(85,201,165,.9);
    animation:travel 3.6s linear infinite;
    opacity:0;
}
.demo-flow.in .demo-link::after{opacity:1}
.demo-flow.in .demo-link:nth-child(4)::after{animation-delay:.2s}
.demo-flow.in .demo-link:nth-child(6)::after{animation-delay:.4s}
.demo-flow.in .demo-link:nth-child(8)::after{animation-delay:.6s}
@keyframes travel{
    0%{transform:translateX(0);opacity:0}
    10%{opacity:1}
    90%{opacity:1}
    100%{transform:translateX(28px);opacity:0}
}

/* ---------- S-flow divider ---------- */
.sflow-divider{
    display:grid;place-items:center;
    padding:44px 0 0;background:var(--white);color:var(--line);
}
.sflow-divider svg{opacity:.9}

/* ============================================================
   INTRO
   ============================================================ */
.intro-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(32px,5vw,72px);align-items:start;
}
.intro-highlight{
    margin-top:32px;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(24px,2.6vw,34px);
    line-height:1.18;letter-spacing:-.02em;font-weight:700;
}

/* ============================================================
   FEATURES
   ============================================================ */
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:clamp(22px,2.4vw,30px);
    transition:transform .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease);
}
.card:hover{
    transform:translateY(-4px);
    border-color:rgba(53,106,230,.38);
    box-shadow:0 22px 44px -32px rgba(13,17,23,.45);
}
.feature{display:flex;flex-direction:column;gap:8px}
.feature-ico{
    width:44px;height:44px;border-radius:13px;
    display:grid;place-items:center;margin-bottom:14px;
    color:var(--electric-cobalt);
    background:linear-gradient(140deg,rgba(53,106,230,.10),rgba(85,201,165,.10));
    border:1px solid rgba(53,106,230,.18);
    transition:transform .32s var(--ease),color .32s var(--ease);
}
.card:hover .feature-ico{transform:translateY(-2px) scale(1.04)}
.feature h3{
    font-family:"Space Grotesk",sans-serif;
    font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);
}
.card-lead{
    font-size:19px;font-weight:700;letter-spacing:-.02em;
    color:var(--text);line-height:1.3;
}
.feature p:not(.card-lead){color:var(--muted);font-size:15.5px}
.feature-wide{grid-column:span 1}

.int-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;
}
.int-grid li{
    font-size:12.5px;font-weight:600;color:var(--text);
    padding:10px 8px;border-radius:10px;text-align:center;
    background:var(--cloud);border:1px solid var(--line);
    transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.int-grid li:hover{
    border-color:rgba(85,201,165,.6);
    background:var(--soft-mint);
}

/* ============================================================
   AUTOMATION BUILDER
   ============================================================ */
.app-window{
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--white);
    box-shadow:0 40px 80px -60px rgba(13,17,23,.55);
    overflow:hidden;
}
.app-bar{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:14px 18px;
    background:var(--graphite);
    border-bottom:1px solid rgba(255,255,255,.08);
    flex-wrap:wrap;
}
.app-bar-left{display:flex;align-items:center;gap:14px;min-width:0}
.app-dots{display:flex;gap:6px}
.app-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.app-dots i:first-child{background:rgba(91,140,255,.7)}
.app-title{
    font-family:"Space Grotesk",sans-serif;
    font-size:11.5px;font-weight:700;letter-spacing:.2em;color:#fff;
}
.app-bar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.app-crumb{font-size:13px;color:var(--muted-dark);font-weight:600}
.status-pill{
    display:inline-flex;align-items:center;gap:7px;
    padding:5px 12px;border-radius:100px;
    background:rgba(85,201,165,.12);
    border:1px solid rgba(85,201,165,.32);
    color:var(--mint);font-size:11.5px;font-weight:700;letter-spacing:.06em;
}
.status-dot{
    width:6px;height:6px;border-radius:50%;background:var(--mint);
    animation:blink 1.8s var(--ease) infinite;
}
.app-body{display:flex;min-height:420px;background:var(--white)}
.app-tools{
    display:flex;flex-direction:column;gap:8px;padding:16px 12px;
    border-right:1px solid var(--line);background:var(--cloud);
}
.tool{
    width:36px;height:36px;border-radius:10px;
    display:grid;place-items:center;color:var(--muted);
    border:1px solid transparent;
}
.tool.is-on{
    color:var(--electric-cobalt);background:rgba(53,106,230,.09);
    border-color:rgba(53,106,230,.22);
}
.canvas{
    flex:1;min-width:0;display:flex;flex-direction:column;
    background:
        radial-gradient(circle at 1px 1px,rgba(13,17,23,.10) 1px,transparent 0);
    background-size:22px 22px;
}
.canvas-top{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 18px;border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.7);flex-wrap:wrap;
}
.canvas-tag{
    font-size:10.5px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted);
}
.canvas-controls{display:flex;align-items:center;gap:10px}
.zoom{
    display:inline-flex;align-items:center;gap:2px;
    border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--white);
}
.zoom button{width:28px;height:28px;color:var(--muted);font-size:15px;line-height:1}
.zoom b{font-size:11.5px;font-weight:700;padding:0 6px;color:var(--text)}
.run-btn{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 14px;border-radius:9px;
    background:var(--electric-cobalt);color:#fff;
    font-size:12.5px;font-weight:700;
}
.nodes{
    flex:1;display:flex;flex-direction:column;align-items:center;
    padding:clamp(24px,3.4vw,40px) 20px;gap:0;
}
.node{
    width:min(320px,100%);
    background:var(--white);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px 18px;
    box-shadow:0 12px 26px -22px rgba(13,17,23,.5);
    transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.node:hover{
    transform:translateY(-3px);
    border-color:rgba(53,106,230,.45);
    box-shadow:0 22px 44px -28px rgba(53,106,230,.6);
}
.node.is-live{
    border-color:rgba(85,201,165,.7);
    box-shadow:0 0 0 3px rgba(85,201,165,.14);
}
.node header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.node-tag{
    font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    padding:4px 9px;border-radius:6px;
}
.tag-blue{color:var(--electric-cobalt);background:rgba(53,106,230,.10)}
.tag-mint{color:#2f8c70;background:rgba(85,201,165,.15)}
.tag-grad{color:#fff;background:var(--flow)}
.node-dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:0 0 auto}
.node.is-live .node-dot{background:var(--mint);box-shadow:0 0 0 4px rgba(85,201,165,.18)}
.node h3{
    font-family:"Space Grotesk",sans-serif;
    font-size:17px;font-weight:700;letter-spacing:-.01em;
}
.node p{font-size:13.5px;color:var(--muted);margin-top:3px}
.node-ai{border-color:rgba(53,106,230,.3);background:linear-gradient(180deg,rgba(53,106,230,.04),var(--white))}
.node-link{
    width:2px;height:34px;position:relative;
    background:linear-gradient(180deg,rgba(53,106,230,.12),rgba(53,106,230,.4));
}
.node-link span{
    position:absolute;left:50%;top:0;
    width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
    background:var(--mint);box-shadow:0 0 10px rgba(85,201,165,.8);
    opacity:0;
}
.app-window.in .node-link span{animation:travelDown 3.2s linear infinite}
.app-window.in .node-link:nth-of-type(2) span{animation-delay:.35s}
.app-window.in .node-link:nth-of-type(3) span{animation-delay:.7s}
@keyframes travelDown{
    0%{transform:translateY(0);opacity:0}
    12%{opacity:1}
    88%{opacity:1}
    100%{transform:translateY(28px);opacity:0}
}
.canvas-foot{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 18px;border-top:1px solid var(--line);
    background:rgba(255,255,255,.7);flex-wrap:wrap;
}
.activity{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:600}
.activity-dot{
    width:7px;height:7px;border-radius:50%;background:var(--mint);
    animation:blink 2s var(--ease) infinite;
}
.canvas-note{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.75}

/* ============================================================
   STEPS
   ============================================================ */
.steps{
    position:relative;
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:clamp(18px,2.4vw,32px);
}
.steps::before,
.steps::after{
    content:"";position:absolute;left:6%;right:6%;top:28px;height:1px;
}
.steps::before{background:var(--line)}
.steps::after{
    background:var(--flow);
    transform:scaleX(0);transform-origin:left;
}
.steps.in::after{animation:growLine 1.8s .2s var(--ease) forwards}
@keyframes growLine{to{transform:scaleX(1)}}
.step{position:relative;padding-top:0}
.step-num{
    display:grid;place-items:center;
    width:56px;height:56px;border-radius:16px;
    background:var(--white);border:1px solid var(--line);
    font-family:"Space Grotesk",sans-serif;
    font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--electric-cobalt);
    margin-bottom:20px;position:relative;z-index:1;
    transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.step:hover .step-num{
    transform:translateY(-3px);
    border-color:var(--mint);color:var(--mint);
}
.step h3{
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(19px,1.7vw,23px);font-weight:700;letter-spacing:-.02em;
}
.step p{color:var(--muted);font-size:15.5px;margin-top:8px;max-width:30ch}

/* ============================================================
   INTELLIGENCE COMPARISON
   ============================================================ */
.intel-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(36px,5vw,72px);align-items:center;
}
.compare{display:grid;grid-template-columns:1fr 1.15fr;gap:16px}
.compare-col{
    padding:24px 20px;border-radius:var(--radius);
    border:1px solid var(--line-dark);
    background:rgba(255,255,255,.02);
}
.compare-col-smart{
    border-color:rgba(91,140,255,.35);
    background:linear-gradient(180deg,rgba(53,106,230,.10),rgba(85,201,165,.05));
}
.compare-head{
    font-family:"Space Grotesk",sans-serif;
    font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted-dark);margin-bottom:18px;
}
.compare-head-smart{
    background:var(--flow);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.chain{display:flex;flex-direction:column;align-items:center;gap:8px}
.chain li:not(.chain-arrow){
    width:100%;text-align:center;
    padding:11px 12px;border-radius:10px;
    font-family:"Space Grotesk",sans-serif;
    font-size:13.5px;font-weight:600;letter-spacing:.04em;
    border:1px solid var(--line-dark);
    background:rgba(255,255,255,.03);
    color:var(--text-dark);
}
.chain-arrow{color:var(--muted-dark);font-size:13px;line-height:1}
.chain-smart li:not(.chain-arrow){
    border-color:rgba(91,140,255,.32);
    background:rgba(91,140,255,.08);
    color:#fff;
}
.chain-smart .chain-arrow{color:var(--mint)}
.chain-smart li:nth-child(3){border-color:rgba(85,201,165,.35);background:rgba(85,201,165,.08)}
.chain-smart li:nth-child(7){border-color:rgba(85,201,165,.45);background:rgba(85,201,165,.12)}

/* ============================================================
   USE CASES
   ============================================================ */
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.uc h3{
    font-family:"Space Grotesk",sans-serif;
    font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--electric-cobalt);margin-bottom:18px;
}
.uc-chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.uc-chain li{
    display:inline-flex;align-items:center;
    font-size:14px;font-weight:600;
    padding:8px 13px;border-radius:9px;
    background:var(--cloud);border:1px solid var(--line);
    transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease);
}
.uc-chain li+li::before{
    content:"→";margin-left:-9px;padding-right:11px;
    color:var(--muted);opacity:.6;font-weight:400;
}
.card:hover .uc-chain li{border-color:rgba(53,106,230,.28)}
.card:hover .uc-chain li:last-child{
    background:var(--soft-mint);border-color:rgba(85,201,165,.5);
}

/* ============================================================
   ECOSYSTEM
   ============================================================ */
.eco{display:grid;place-items:center}
.eco-svg{width:min(100%,680px);height:auto}
.eco-ring{fill:none;stroke:rgba(13,17,23,.10);stroke-width:1;stroke-dasharray:3 8}
.eco-ring-2{stroke:rgba(53,106,230,.16)}
.in .eco-ring{animation:spin 90s linear infinite;transform-origin:360px 360px}
.in .eco-ring-2{animation:spin 60s linear infinite reverse;transform-origin:360px 360px}
@keyframes spin{to{transform:rotate(360deg)}}
.eco-links{opacity:.5}
.eco-node circle{
    fill:var(--white);stroke:var(--line);stroke-width:1;
    transition:fill .3s var(--ease),stroke .3s var(--ease);
}
.eco-node text{
    fill:var(--text);font-size:12.5px;font-weight:700;letter-spacing:.08em;
    text-anchor:middle;font-family:"Space Grotesk",sans-serif;
}
.eco-node:hover circle{fill:var(--soft-mint);stroke:rgba(85,201,165,.7)}
.eco-center-halo{fill:rgba(53,106,230,.06);stroke:rgba(53,106,230,.2);stroke-width:1}
.eco-center-bg{fill:var(--obsidian)}
.eco-center-t{
    fill:#fff;font-size:16px;font-weight:700;letter-spacing:.16em;
    font-family:"Space Grotesk",sans-serif;
}

/* ============================================================
   WHY
   ============================================================ */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.why-item{padding-top:26px;border-top:2px solid var(--line);transition:border-color .3s var(--ease)}
.why-item:hover{border-top-color:var(--electric-cobalt)}
.why-item h3{
    font-family:"Space Grotesk",sans-serif;
    font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--electric-cobalt);margin-bottom:10px;
}
.why-item p{color:var(--muted);font-size:16px}

/* ============================================================
   SECURITY
   ============================================================ */
.sec-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.sec-item{
    padding:24px 20px;border-radius:var(--radius);
    border:1px solid var(--line-dark);
    background:rgba(255,255,255,.02);
    transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.sec-item:hover{
    transform:translateY(-4px);
    border-color:rgba(85,201,165,.4);
    background:rgba(85,201,165,.04);
}
.sec-ico{
    width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
    color:var(--mint);background:rgba(85,201,165,.10);
    border:1px solid rgba(85,201,165,.22);margin-bottom:16px;
}
.sec-item h3{
    font-size:16px;font-weight:700;letter-spacing:-.01em;color:#fff;margin-bottom:8px;
}
.sec-item p{font-size:14.5px;color:var(--muted-dark)}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{
    max-width:900px;margin-inline:auto;text-align:center;
    display:grid;justify-items:center;gap:28px;
}
.quote-mark{opacity:.9}
.quote blockquote p{
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(24px,3.4vw,44px);
    line-height:1.24;letter-spacing:-.028em;font-weight:700;
    text-wrap:balance;
}
.quote figcaption{display:grid;gap:8px}
.q-name{
    font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--electric-cobalt);
}
.q-note{font-size:13px;color:var(--muted)}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{
    position:relative;background:var(--obsidian);overflow:hidden;
    padding:clamp(90px,12vw,160px) 0;text-align:center;isolation:isolate;
}
.cta-net{
    position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.5;
    -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,transparent 18%,#000 80%);
    mask-image:radial-gradient(70% 70% at 50% 50%,transparent 18%,#000 80%);
}
.cta-line{stroke-dasharray:2400;stroke-dashoffset:2400;opacity:.5}
.cta.in .cta-line{animation:drawLine 3s var(--ease) forwards;animation-delay:var(--d,0s)}
.cta-node{opacity:0}
.cta.in .cta-node{animation:pulseNode 3s var(--ease) infinite;animation-delay:var(--d,0s)}
@keyframes pulseNode{0%,100%{opacity:.3;r:3}50%{opacity:1;r:5}}
.cta-inner{display:grid;justify-items:center}
.cta-inner .lead{margin-inline:auto;text-align:center}
.cta .h1-alt{max-width:16ch}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
    background:var(--graphite);color:var(--text-dark);
    padding-top:clamp(56px,7vw,88px);position:relative;overflow:hidden;
}
.footer-grid{
    display:grid;grid-template-columns:1.1fr 2fr;
    gap:clamp(36px,5vw,64px);
    padding-bottom:clamp(40px,5vw,64px);
}
.footer-statement{
    margin-top:22px;font-family:"Space Grotesk",sans-serif;
    font-size:20px;font-weight:700;letter-spacing:-.02em;color:#fff;
}
.footer-mini{
    margin-top:8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--mint);font-weight:600;
}
.footer-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer-col h2{
    font-family:"Space Grotesk",sans-serif;
    font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted-dark);margin-bottom:16px;
}
.footer-col li+li{margin-top:10px}
.footer-col a{
    font-size:14.5px;color:#C7D2DE;font-weight:500;
    transition:color .2s var(--ease),padding-left .25s var(--ease);
}
.footer-col a:hover{color:#fff;padding-left:5px}
.footer-bottom{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;flex-wrap:wrap;
    padding-block:22px;border-top:1px solid var(--line-dark);
    font-size:13px;color:var(--muted-dark);
}
.footer-legal{display:flex;gap:22px;flex-wrap:wrap}
.footer-legal a{transition:color .2s var(--ease)}
.footer-legal a:hover{color:#fff}
.footer-sflow{width:100%;height:46px;opacity:.7}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{
    opacity:0;transform:translateY(22px);
    transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}
.feature-grid .reveal:nth-child(2),.uc-grid .reveal:nth-child(2){transition-delay:.06s}
.feature-grid .reveal:nth-child(3),.uc-grid .reveal:nth-child(3){transition-delay:.12s}
.feature-grid .reveal:nth-child(4),.uc-grid .reveal:nth-child(4){transition-delay:.18s}
.feature-grid .reveal:nth-child(5),.uc-grid .reveal:nth-child(5){transition-delay:.24s}
.feature-grid .reveal:nth-child(6),.uc-grid .reveal:nth-child(6){transition-delay:.30s}
.why-grid .reveal:nth-child(2),.sec-grid .reveal:nth-child(2){transition-delay:.08s}
.why-grid .reveal:nth-child(3),.sec-grid .reveal:nth-child(3){transition-delay:.16s}
.why-grid .reveal:nth-child(4),.sec-grid .reveal:nth-child(4){transition-delay:.24s}
.sec-grid .reveal:nth-child(5){transition-delay:.32s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
    .feature-grid{grid-template-columns:repeat(2,1fr)}
    .uc-grid{grid-template-columns:repeat(2,1fr)}
    .sec-grid{grid-template-columns:repeat(3,1fr)}
    .why-grid{grid-template-columns:repeat(2,1fr)}
    .intel-grid,.intro-grid{grid-template-columns:1fr}
    .compare{max-width:640px}
    .site-nav ul{gap:0}
    .site-nav a{padding:9px 10px;font-size:14px}
}

@media (max-width:940px){
    :root{--header-h:70px}
    .site-nav{
        position:fixed;inset:var(--header-h) 0 auto 0;
        background:rgba(13,17,23,.97);
        -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
        border-bottom:1px solid var(--line-dark);
        padding:18px var(--gutter) 28px;
        display:grid;gap:8px;
        transform:translateY(-12px);opacity:0;pointer-events:none;
        transition:opacity .28s var(--ease),transform .28s var(--ease);
        max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    }
    .site-nav.is-open{opacity:1;transform:none;pointer-events:auto}
    .site-nav ul{flex-direction:column;gap:2px}
    .site-nav a{
        display:block;padding:13px 6px;font-size:17px;color:#fff;
        border-bottom:1px solid rgba(255,255,255,.06);
    }
    .site-nav a::after{display:none}
    .nav-actions-mobile{display:grid;gap:10px;margin-top:14px}
    .nav-actions-mobile .btn{width:100%}
    .nav-actions-mobile .btn-ghost{color:#fff;border-color:var(--line-dark)}
    .header-actions{display:none}
    .menu-btn{display:flex}
    .demo-flow{flex-direction:column;gap:0}
    .demo-step{flex:1 1 auto;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
    .demo-step .demo-kind{order:1;flex:0 0 auto;min-width:52px}
    .demo-step .demo-ico{order:0}
    .demo-step .demo-text{order:2;flex:1 1 160px}
    .demo-link{
        flex:0 0 28px;width:2px;height:28px;align-self:flex-start;margin-left:35px;
    }
    .demo-link span{
        background:linear-gradient(180deg,rgba(91,140,255,.15),rgba(91,140,255,.5));
    }
    .demo-link::after{top:0;left:-2px;animation-name:travelDown}
    .steps{grid-template-columns:repeat(2,1fr);row-gap:34px}
    .steps::before,.steps::after{display:none}
    .app-tools{display:none}
    .app-body{min-height:0}
}

@media (max-width:720px){
    body{font-size:16px}
    .flowmap-svg{display:none}
    .flowmap-mobile{display:block}
    .flowmap{padding:22px 18px}
    .fm-m-label{
        font-family:"Space Grotesk",sans-serif;
        font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
        color:var(--muted-dark);margin-bottom:12px;
    }
    .fm-m-chips{display:flex;flex-wrap:wrap;gap:8px}
    .fm-m-chips li{
        padding:9px 14px;border-radius:10px;font-size:13.5px;font-weight:600;
        color:#DCE5EF;border:1px solid var(--line-dark);background:rgba(255,255,255,.035);
    }
    .fm-m-chips-mint li{border-color:rgba(85,201,165,.28);background:rgba(85,201,165,.07)}
    .fm-m-connector{height:34px;display:grid;place-items:center;position:relative}
    .fm-m-connector span{
        width:2px;height:100%;
        background:linear-gradient(180deg,rgba(91,140,255,.1),rgba(85,201,165,.6));
    }
    .fm-m-core{
        display:flex;align-items:center;gap:14px;
        padding:16px;border-radius:14px;
        border:1px solid rgba(91,140,255,.35);
        background:rgba(36,45,54,.7);
    }
    .fm-m-core strong{display:block;color:#fff;font-size:16px;font-family:"Space Grotesk",sans-serif;letter-spacing:.04em}
    .fm-m-core span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);font-weight:700}
    .feature-grid,.uc-grid,.sec-grid,.why-grid,.steps{grid-template-columns:1fr}
    .compare{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .footer-nav{grid-template-columns:repeat(2,1fr);gap:28px 20px}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
    .hero-cta .btn{flex:1 1 100%}
    .int-grid{grid-template-columns:repeat(2,1fr)}
    .node{width:100%}
    .quote blockquote p{text-align:left}
    .quote{text-align:left;justify-items:start}
}

@media (max-width:420px){
    .logo-name{font-size:18px}
    .logo-sub{font-size:8px;letter-spacing:.2em}
    .int-grid{grid-template-columns:1fr}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    .reveal{opacity:1;transform:none}
    .fm-node,.eco-node{opacity:1;transform:none}
    .fm-link,.eco-line,.cta-line{stroke-dashoffset:0}
    .steps.in::after{transform:scaleX(1)}
    .pulse,.demo-link::after,.node-link span{display:none}
    .cta-node{opacity:.8}
}