:root{
  --ink:#06142E;
  --ink-2:#2B4068;
  --ink-3:#6B7FA3;
  --bg:#C6D4EB;
  --ice:#C9D8EF;
  --ice-2:#B8CBEA;
  --line:#97B1DD;
  --blue:#1B3FC4;
  --blue-2:#1533A0;
  --royal:#0B2F9E;
  --sky:#2B9BEA;
  --cyan:#06B6D4;
  --shadow:0 1px 2px rgba(20,60,140,.07),0 14px 38px -14px rgba(37,99,235,.28);
  --shadow-lg:0 2px 4px rgba(20,60,140,.07),0 34px 70px -22px rgba(37,99,235,.42);
  --r:8px;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'Sora','Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;line-height:1.08}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1200px,92vw);margin-inline:auto}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;flex:none}
:root{--hex:polygon(0 0,76% 0,100% 24%,100% 100%,24% 100%,0 76%)}

/* ===== background layers (negative z so main creates no stacking context) ===== */
.bg-wash{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
   radial-gradient(1100px 600px at 85% -10%,rgba(56,189,248,.16),transparent 60%),
   radial-gradient(900px 600px at -10% 40%,rgba(37,99,235,.09),transparent 60%),
   linear-gradient(#D2DEF1,#B9CAE6)}
.bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(37,99,235,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 15%,transparent 78%);mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 15%,transparent 78%)}
#neural{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ===== header ===== */
.hdr{position:fixed;top:14px;left:0;right:0;z-index:60}
.hdr-in{width:min(1240px,94vw);margin-inline:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:8px 10px 8px 18px;border-radius:20px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(12px) saturate(170%);-webkit-backdrop-filter:blur(12px) saturate(170%);
  border:1px solid rgba(255,255,255,.5);box-shadow:0 12px 36px -16px rgba(10,40,130,.5),inset 0 0 0 1px rgba(56,189,248,.1);transition:background .3s}
.hdr.scrolled .hdr-in{background:rgba(214,226,246,.86)}
.brand{display:flex;align-items:center;gap:12px;justify-self:start;font:700 1.02rem 'Sora',sans-serif;letter-spacing:.14em;white-space:nowrap;color:var(--ink)}
.brand img{height:46px;width:auto}
.stat .ic,.tl .dot,.opt .oi,.lvl .li,.step .si,.dl .di,.reach .ri,.mc .mi,summary .qi,.card .badge{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.brand span b{color:var(--blue);font-weight:700}
nav.main{display:flex;gap:2px;padding:5px;border-radius:999px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(27,63,196,.08)}
nav.main a{padding:9px 13px;border-radius:999px;font:700 .8rem 'Plus Jakarta Sans',sans-serif;letter-spacing:.01em;color:var(--ink);transition:.2s;position:relative;white-space:nowrap}
nav.main a:hover{color:var(--blue);background:rgba(255,255,255,.9)}
nav.main a.on{background:linear-gradient(135deg,#2D5BE3,#142F94);color:#fff;box-shadow:0 6px 16px -6px rgba(37,99,235,.8)}
.hdr-r{display:flex;align-items:center;gap:10px;justify-self:end}
.lang{display:flex;background:rgba(255,255,255,.35);border-radius:999px;padding:3px;font-family:var(--mono)}
.lang a{padding:6px 11px;border-radius:999px;font-size:.72rem;font-weight:700;color:var(--ink-3)}
.lang a.on{background:#fff;color:var(--blue);box-shadow:0 2px 6px rgba(37,99,235,.2)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:7px;font-weight:700;font-size:.95rem;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn .ico{font-size:1.15em}
.btn-pri{background:linear-gradient(135deg,#2D5BE3,#142F94);color:#fff;box-shadow:0 10px 26px -8px rgba(37,99,235,.7),inset 0 0 0 1px rgba(255,255,255,.25)}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(56,189,248,.25),0 16px 32px -8px rgba(37,99,235,.75)}
.btn-ghost{background:rgba(255,255,255,.85);color:var(--blue);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);transform:translateY(-2px)}
.hdr .btn{padding:11px 20px;font-size:.86rem;border-radius:999px}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.7);color:var(--blue);cursor:pointer;place-items:center}

/* ===== HUD labels ===== */
.hud{display:inline-flex;align-items:center;gap:9px;font:700 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.hud::before{content:"//";color:var(--sky)}
.pulse{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 2s infinite;display:inline-block;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ===== hero (full bleed) ===== */
.hero{position:relative;min-height:clamp(720px,100svh,990px);display:flex;align-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0;background:#cfe0f5}
.hero-media>picture>img,.hero-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 35%}
.hero-media>picture>img{animation:kb 24s ease-in-out infinite alternate;transform-origin:68% 40%}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-tint{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(255,255,255,.06) 0,transparent 22%),
  linear-gradient(90deg,rgba(235,244,255,.1) 0,rgba(235,244,255,.03) 34%,transparent 58%),
  linear-gradient(0deg,#C6D4EB 0,rgba(198,212,235,0) 18%)}
.hero-scan{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.hero-scan::after{content:"";position:absolute;left:-10%;right:-10%;height:160px;top:-160px;background:linear-gradient(180deg,transparent,rgba(125,211,252,.28),transparent);animation:scan 7s linear infinite}
@keyframes scan{to{transform:translateY(1200px)}}
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000);mask-image:linear-gradient(90deg,transparent 40%,#000);opacity:.55}
.hero-in{position:relative;z-index:2;padding:130px 0 160px;width:min(1200px,92vw);margin-inline:auto}
.glass{position:relative;max-width:580px;padding:36px 36px 34px;border-radius:10px;background:rgba(255,255,255,.04);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);border:1px solid rgba(255,255,255,.45);box-shadow:0 30px 70px -30px rgba(15,70,200,.45),inset 0 0 60px rgba(255,255,255,.12);text-shadow:0 0 24px rgba(255,255,255,1),0 0 10px rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.9)}
.glass::before,.glass::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--blue);pointer-events:none}
.glass::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.glass::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.hero h1{font-size:clamp(1.9rem,3.5vw,3.05rem);margin:18px 0;font-weight:800;line-height:1.06}
.grad{background:linear-gradient(100deg,#1533A0,#0A7FD0 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:1.06rem;color:var(--ink);font-weight:600}
.glass .grad{text-shadow:none;filter:drop-shadow(0 0 10px rgba(255,255,255,.9))}
.glass .btn-ghost{text-shadow:none;background:rgba(255,255,255,.9)}
.hero p.lead{font-weight:700}
.glass .btn-pri{text-shadow:none}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.chips{position:absolute;right:max(3vw,24px);bottom:190px;z-index:3;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.chip{display:flex;align-items:center;gap:11px;width:290px;padding:10px 14px 10px 10px;background:rgba(255,255,255,.84);backdrop-filter:blur(14px);border:1px solid #fff;border-left:3px solid var(--blue);border-radius:10px;box-shadow:var(--shadow-lg);animation:bob 6s ease-in-out infinite}
.chip:nth-child(2){animation-delay:-2s;margin-right:18px}.chip:nth-child(3){animation-delay:-4s}
.chip .ci{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:1.05rem;flex:none}
.chip b{display:flex;align-items:center;gap:7px;font-size:.78rem}
.chip em{font:700 .54rem var(--mono);font-style:normal;letter-spacing:.12em;color:var(--blue);background:var(--ice-2);padding:2px 6px;border-radius:4px}
.chip small{display:block;color:var(--ink-3);font-size:.7rem;font-weight:600;line-height:1.3;margin-top:1px}
.chip:nth-child(1) .ci{background:linear-gradient(135deg,#2563EB,#4F46E5)}
.chip:nth-child(2) .ci{background:linear-gradient(135deg,#38BDF8,#2563EB)}
.chip:nth-child(3) .ci{background:linear-gradient(135deg,#06B6D4,#0EA5E9)}
@keyframes bob{50%{transform:translateY(-8px)}}

.hero-stats{position:absolute;left:0;right:0;bottom:30px;z-index:3}
.hero-stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.82);backdrop-filter:blur(16px);border:1px solid #fff;border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden}
.stat{display:flex;align-items:center;gap:16px;padding:18px 26px;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--line)}
.stat .ic{width:48px;height:48px;clip-path:var(--hex);background:linear-gradient(135deg,#2B8CF0,#142F94);color:#fff;display:grid;place-items:center;font-size:1.35rem;flex:none}
.stat b{display:block;font:800 1.9rem 'Sora';line-height:1}
.stat span{font-size:.8rem;color:var(--ink-3);font-weight:600;line-height:1.35;display:block;margin-top:3px}

/* ===== sections ===== */
section{padding:104px 0;position:relative}
.sec-head{text-align:center;max-width:740px;margin:0 auto 56px}
.sec-head .hud{margin-bottom:16px}
.sec-head h2{font-size:clamp(2rem,3.8vw,3rem);font-weight:700}
.sec-head p{color:var(--ink-2);font-size:1.06rem;margin-top:16px}
.band{background:linear-gradient(180deg,rgba(150,176,220,.72),rgba(132,160,210,.66))}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.trace{display:block;width:min(1200px,92vw);height:60px;margin:-10px auto -20px;overflow:visible}
.trace path{fill:none;stroke:#2563EB;stroke-opacity:.38;stroke-width:1.4;stroke-dasharray:6 7;animation:dash 1.6s linear infinite}
.trace circle{fill:#fff;stroke:#2563EB;stroke-width:1.6}
@keyframes dash{to{stroke-dashoffset:-26}}

/* ===== deep blue sections ===== */
.blue{color:#fff;background:linear-gradient(135deg,#051A57 0%,#0C318F 52%,#0A569F 100%);overflow:hidden}
.blue::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.3px) 0 0/26px 26px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);pointer-events:none}
.blue::after{content:"";position:absolute;width:700px;height:700px;border-radius:50%;right:-260px;top:-300px;border:1.5px solid rgba(255,255,255,.2);box-shadow:0 0 0 60px rgba(255,255,255,.04),0 0 0 120px rgba(255,255,255,.03);pointer-events:none}
.blue .wrap{position:relative;z-index:1}
.blue .hud{color:#BAE6FD}.blue .hud::before{color:#7DD3FC}
.blue .sec-head p{color:rgba(255,255,255,.88)}
.blue .grad{background:linear-gradient(100deg,#fff,#A5E8FF);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== console (a day) ===== */
.console{background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.console .bar{display:flex;align-items:center;gap:8px;padding:12px 18px;background:linear-gradient(180deg,#EAF2FF,#DCE9FD);border-bottom:1px solid var(--line);font:600 .74rem var(--mono);color:var(--ink-2)}
.console .bar i{width:11px;height:11px;border-radius:50%;background:#93C5FD}.console .bar i:nth-child(2){background:#7DD3FC}.console .bar i:nth-child(3){background:#60A5FA}
.console .bar>span:first-of-type{margin-left:10px}
.console .bar .live{margin-left:auto;display:flex;align-items:center;gap:7px;color:#15803D}
.console .in{padding:34px 36px 40px}
.console h3{font-size:1.3rem;margin-bottom:4px}
.console .note{color:var(--ink-3);font-size:.84rem;margin-bottom:34px}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.tl::before{content:"";position:absolute;left:6%;right:6%;top:31px;height:2px;background:repeating-linear-gradient(90deg,var(--sky) 0 8px,transparent 8px 14px);opacity:.7}
.tl .st{position:relative;text-align:center;padding:0 8px}
.tl .dot{width:62px;height:62px;margin:0 auto 14px;clip-path:var(--hex);background:linear-gradient(135deg,#2B8CF0,#142F94);display:grid;place-items:center;color:#fff;font-size:1.5rem}
.tl .time{font:700 1.45rem var(--mono);color:var(--ink)}
.tl .st p{font-size:.9rem;color:var(--ink-2);margin:4px 0 10px}
.tag{display:inline-block;font:700 .64rem var(--mono);letter-spacing:.12em;padding:4px 10px;border-radius:5px}
.tag.review{background:#E0F2FE;color:#0369A1}.tag.approve{background:#DBEAFE;color:#1D4ED8}.tag.check{background:#CFFAFE;color:#0E7490}

/* ===== agents ===== */
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{--c:var(--blue);position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-8px);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 60%,white),0 0 28px -4px color-mix(in srgb,var(--c) 50%,transparent),var(--shadow-lg);border-color:var(--c)}
.card .stage{position:relative;aspect-ratio:1/.86;background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--c) 16%,white),color-mix(in srgb,var(--c) 5%,white) 65%,#fff);overflow:hidden}
.card .stage::before{content:"";position:absolute;inset:0;display:none}
.card .stage canvas.mx{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.card .stage img{position:absolute;inset:0;width:100%;height:118%;object-fit:cover;object-position:50% 14%;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.7,.2,1);z-index:1}
.card:hover .stage img{transform:scale(1.05) translateY(-3px)}
.card .stage::after{content:"";position:absolute;left:0;right:0;height:90px;top:-90px;z-index:2;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c) 28%,transparent),transparent);pointer-events:none;opacity:0}
.card:hover .stage::after{opacity:1;animation:sweep 1.4s ease-in-out}
@keyframes sweep{to{transform:translateY(420px)}}
.brk{position:absolute;width:18px;height:18px;border:2px solid var(--c);z-index:3;pointer-events:none;transition:.3s;opacity:.8}
.brk.k1{left:10px;top:10px;border-right:0;border-bottom:0}.brk.k2{right:10px;top:10px;border-left:0;border-bottom:0}
.brk.k3{left:10px;bottom:10px;border-right:0;border-top:0}.brk.k4{right:10px;bottom:10px;border-left:0;border-top:0}
.card:hover .brk{width:26px;height:26px;opacity:1}
.card .num{position:absolute;left:18px;top:18px;z-index:4;font:700 .7rem var(--mono);color:var(--c);background:rgba(255,255,255,.92);padding:5px 10px;border-radius:5px;letter-spacing:.1em}
.card .badge{position:absolute;right:18px;top:16px;z-index:4;width:52px;height:52px;clip-path:var(--hex);background:var(--c);color:#fff;display:grid;place-items:center;font-size:1.5rem}
.card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-size:1.3rem;font-weight:700}
.card p{color:var(--ink-2);font-size:.94rem}
.mini{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;font:700 .72rem var(--mono);padding:6px 11px;border-radius:6px;background:color-mix(in srgb,var(--c) 10%,white);color:color-mix(in srgb,var(--c) 85%,#0E2347);border:1px solid color-mix(in srgb,var(--c) 22%,white)}
.pill .ico{font-size:1.05em}
.pill.ok{background:#E8F8EF;color:#15803D;border-color:#BBF0D1}
.bar47{display:flex;width:100%;height:10px;border-radius:3px;overflow:hidden;background:var(--ice-2)}
.bar47 i{display:block;height:100%}
.legend{display:flex;gap:14px;font:700 .68rem var(--mono);color:var(--ink-3);flex-wrap:wrap;margin-top:8px}
.legend b{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.wave{display:flex;align-items:center;gap:3px;height:26px}
.wave i{width:3px;border-radius:3px;background:var(--c);animation:wave 1.2s ease-in-out infinite}
@keyframes wave{50%{transform:scaleY(.35)}}

/* ===== picker ===== */
.picker{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:stretch}
.opts{display:flex;flex-direction:column;gap:14px}
.opt{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:8px;border:1.5px solid var(--line);background:#fff;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:.25s;box-shadow:0 1px 2px rgba(20,60,140,.04)}
.opt .oi{width:54px;height:54px;clip-path:var(--hex);background:var(--ice-2);color:var(--blue);display:grid;place-items:center;font-size:1.5rem;transition:.25s;flex:none}
.opt b{font:700 1.1rem 'Sora';display:block}
.opt:hover{border-color:var(--sky)}
.opt[aria-selected=true]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(56,189,248,.2),var(--shadow);transform:translateX(6px)}
.opt[aria-selected=true] .oi{background:var(--blue);color:#fff}
.panel{position:relative;border-radius:10px;background:linear-gradient(135deg,#071F66,#123AA6 58%,#1E7FD0);color:#fff;padding:42px 40px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow-lg);min-height:300px}
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.3px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(135deg,transparent 30%,#000);mask-image:linear-gradient(135deg,transparent 30%,#000)}
.panel::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);right:-80px;bottom:-110px}
.panel .pp{display:none;position:relative;z-index:1}
.panel .pp.on{display:block;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}
.panel .big{font:700 1.7rem/1.2 'Sora';margin-bottom:12px}
.panel p{opacity:.95;font-size:1.02rem;max-width:30em}
.panel .btn{margin-top:22px;background:#fff;color:var(--blue)}
.fine{font:500 .74rem var(--mono);color:var(--ink-3);margin-top:14px;text-align:center}

/* ===== privacy flow ===== */
.flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:60px}
.node{display:flex;flex-direction:column;align-items:center;gap:10px;width:150px;text-align:center}
.node .nb{width:84px;height:84px;border-radius:18px;background:#fff;display:grid;place-items:center;font-size:2.3rem;color:var(--blue);box-shadow:0 14px 34px -12px rgba(0,20,90,.55)}
.node.gw .nb{background:linear-gradient(135deg,#fff,#DCF3FF);color:var(--royal);box-shadow:0 0 0 8px rgba(255,255,255,.18),0 0 38px 6px rgba(125,211,252,.55)}
.node b{font-size:.9rem;color:#fff}
.node small{color:#BFE3FF;font:600 .68rem var(--mono);margin-top:-6px}
.link{width:72px;height:3px;margin:0 -4px 46px;background:repeating-linear-gradient(90deg,#BAE6FD 0 8px,transparent 8px 16px);animation:dashx 1.2s linear infinite}
@keyframes dashx{to{background-position:16px 0}}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.lvl{--c:var(--blue);background:#fff;color:var(--ink);border-radius:var(--r);padding:30px 28px 28px;box-shadow:0 24px 60px -22px rgba(0,20,90,.6);position:relative;overflow:hidden;transition:.3s}
.lvl:hover{transform:translateY(-6px);box-shadow:0 0 0 2px rgba(125,211,252,.9),0 30px 70px -20px rgba(0,20,90,.7)}
.lvl .lv{font:700 .72rem var(--mono);letter-spacing:.16em;color:var(--c)}
.lvl .li{width:70px;height:70px;clip-path:var(--hex);background:color-mix(in srgb,var(--c) 14%,white);color:var(--c);display:grid;place-items:center;font-size:2rem;margin:16px 0 18px}
.lvl h3{font-size:1.3rem;margin-bottom:10px}
.lvl p{color:var(--ink-2);font-size:.94rem}
.meter{display:flex;gap:6px;margin:20px 0 12px}
.meter i{flex:1;height:7px;border-radius:2px;background:var(--ice-2)}
.meter i.f{background:var(--c)}
.lvl .keep{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;font-weight:700;color:var(--ink);padding-top:14px;border-top:1px dashed var(--line);margin-top:14px}
.lvl .keep .ico{color:var(--c);font-size:1.2rem;margin-top:1px}

/* ===== steps ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 28px;box-shadow:var(--shadow);text-align:center;position:relative}
.step .sn{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:38px;height:38px;clip-path:var(--hex);background:linear-gradient(135deg,#1B3FC4,#2B8CF0);color:#fff;font:700 .95rem var(--mono);display:grid;place-items:center}
.step .si{width:78px;height:78px;clip-path:var(--hex);background:var(--ice-2);color:var(--blue);display:grid;place-items:center;font-size:2.2rem;margin:8px auto 18px}
.step h3{font-size:1.25rem}
.step .dur{display:inline-block;margin:8px 0 10px;font:700 .7rem var(--mono);letter-spacing:.1em;color:var(--blue);background:var(--ice-2);padding:4px 11px;border-radius:5px}
.step p{color:var(--ink-2);font-size:.95rem}
.price-note{margin:34px auto 0;max-width:660px;display:flex;gap:12px;align-items:center;justify-content:center;padding:16px 22px;border-radius:7px;background:var(--ice);border:1px dashed #A9C6F2;color:var(--ink-2);font-size:.95rem}
.price-note .ico{color:var(--blue);font-size:1.4rem}

/* ===== downloads ===== */
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dl a{display:flex;align-items:center;gap:18px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:.3s}
.dl a:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:0 0 0 3px rgba(56,189,248,.2),var(--shadow-lg)}
.dl .di{width:62px;height:62px;clip-path:var(--hex);background:linear-gradient(135deg,#1B3FC4,#2B8CF0);color:#fff;display:grid;place-items:center;font-size:1.7rem;flex:none}
.dl b{display:block;font:700 1.05rem 'Sora'}
.dl span.t{font-size:.84rem;color:var(--ink-3)}
.dl .min{margin-left:auto;font:700 1.3rem var(--mono);color:var(--blue);text-align:right;line-height:1}
.dl .min small{display:block;font-size:.58rem;letter-spacing:.14em;color:var(--ink-3);margin-top:4px}

/* ===== faq ===== */
.faq{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px;counter-reset:q}
details{counter-increment:q;background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 1px 2px rgba(20,60,140,.04);transition:.25s}
details[open]{border-color:var(--sky);box-shadow:0 0 0 3px rgba(56,189,248,.14),var(--shadow)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px;font:700 1.05rem 'Sora'}
summary::-webkit-details-marker{display:none}
summary .qi{width:40px;height:40px;clip-path:var(--hex);background:var(--ice-2);color:var(--blue);display:grid;place-items:center;font-size:1.1rem;flex:none}
summary .qn{margin-left:auto;font:600 .68rem var(--mono);color:var(--ink-3);letter-spacing:.1em}
summary .qn::after{content:"Q." counter(q,decimal-leading-zero)}
summary .pm{width:30px;height:30px;border-radius:8px;background:var(--ice-2);color:var(--blue);display:grid;place-items:center;transition:.3s;flex:none}
details[open] summary .pm{transform:rotate(45deg);background:var(--blue);color:#fff}
details p{padding:0 24px 22px 76px;color:var(--ink-2);font-size:.97rem}

/* ===== more ===== */
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mc{--c:var(--blue);display:flex;flex-direction:column;gap:14px;padding:30px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:.3s}
.mc:hover{transform:translateY(-6px);border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 30px -6px color-mix(in srgb,var(--c) 55%,transparent),var(--shadow-lg)}
.mc .mi{width:58px;height:58px;clip-path:var(--hex);background:var(--c);color:#fff;display:grid;place-items:center;font-size:1.7rem}
.mc small{font:700 .72rem var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.mc h3{font-size:1.4rem}
.mc p{color:var(--ink-2);font-size:.94rem}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags span{font:600 .68rem var(--mono);padding:5px 9px;border-radius:5px;background:var(--ice-2);color:var(--ink-2)}
.mc .go{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:8px;font-weight:700;color:var(--blue)}
.mc .go .ico{transition:.3s}
.mc:hover .go .ico{transform:translateX(5px)}

/* ===== contact ===== */
#contact.blue{padding:96px 0}
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.contact h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:14px 0}
.contact p{opacity:.95;font-size:1.06rem;max-width:28em}
.reach{display:flex;flex-direction:column;gap:14px}
.reach a{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:7px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.32);transition:.25s}
.reach a:hover{background:rgba(255,255,255,.26);transform:translateX(5px)}
.reach .ri{width:48px;height:48px;clip-path:var(--hex);background:#fff;color:var(--blue);display:grid;place-items:center;font-size:1.4rem;flex:none}
.reach small{display:block;font:700 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.reach b{font-size:1.05rem}
.contact .btn{background:#fff;color:var(--blue);margin-top:26px}

footer{padding:46px 0 40px;text-align:center;color:var(--ink-3);font:500 .8rem var(--mono)}
footer .links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:12px;font-weight:600}
footer .links a:hover{color:var(--blue)}


/* ===== v5: dark glass cards, tech chips, robot bots, interactions ===== */
:root{--cy:#5EE6FF;--navy-1:#0E2D80;--navy-2:#071747;--t-lite:#EAF2FF;--t-mute:#AFC4EC;--card-bd:rgba(94,230,255,.32)}
h1,h2,h3{letter-spacing:-.018em;font-weight:800}
.sec-head h2{font-weight:800}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#5EE6FF,#2B8CF0,#1B3FC4);box-shadow:0 0 12px rgba(94,230,255,.8)}
.glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(43,155,234,.22),transparent 62%);will-change:transform;opacity:0;transition:opacity .4s}
.glow.on{opacity:1}
@media (hover:none){.glow{display:none}}
.btn{translate:var(--mx,0) var(--my,0)}

/* dark glass cards */
.card,.mc,.step,.dl a,details,.opt,.console,.price-note{background:linear-gradient(160deg,var(--navy-1),var(--navy-2));border:1px solid var(--card-bd);color:var(--t-lite);box-shadow:0 22px 50px -24px rgba(4,16,60,.8),inset 0 1px 0 rgba(255,255,255,.1)}
.card h3,.mc h3,.step h3,.dl b,.opt b,.console h3,summary,.tl .time{color:#fff}
.card p,.mc p,.step p,.dl span.t,.console .note,details p,.tl .st p,.price-note{color:var(--t-mute)}
.price-note .ico{color:var(--cy)}
.card.reveal.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .2s ease-out,opacity .8s,box-shadow .35s,border-color .35s}
.card:hover{--ty:-8px;border-color:var(--cy);box-shadow:0 0 0 1px rgba(94,230,255,.65),0 0 38px -6px rgba(94,230,255,.5),0 34px 60px -22px rgba(4,16,60,.85)}
.card .stage{margin:10px 10px 0;border-radius:3px;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));box-shadow:inset 0 0 0 1px rgba(94,230,255,.5)}
.card .num{background:rgba(5,18,56,.88);color:var(--cy)}
.pill{background:rgba(94,230,255,.1);color:#9FEFFF;border:1px solid rgba(94,230,255,.3)}
.pill.ok{background:rgba(34,197,94,.14);color:#6EE7A0;border-color:rgba(34,197,94,.4)}
.bar47{background:rgba(255,255,255,.1)}
.legend{color:var(--t-mute)}
.wave i{background:var(--cy)}
.mc small{color:#9FEFFF}
.step .dur,.tags span{background:rgba(94,230,255,.1);color:#9FEFFF}
.mc .go{color:var(--cy)}
.mc:hover{border-color:var(--cy);box-shadow:0 0 0 1px rgba(94,230,255,.6),0 0 34px -6px rgba(94,230,255,.45),0 30px 60px -22px rgba(4,16,60,.85)}
.dl a:hover{border-color:var(--cy);box-shadow:0 0 0 1px rgba(94,230,255,.55),0 0 30px -8px rgba(94,230,255,.45)}
.dl .min{color:var(--cy)}.dl .min small{color:var(--t-mute)}
.console .bar{background:rgba(255,255,255,.06);border-bottom:1px solid rgba(94,230,255,.22);color:#BFD3F5}
.console .bar .live{color:#6EE7A0}
.tag.review,.tag.approve,.tag.check{background:rgba(94,230,255,.12);color:#9FEFFF;border:1px solid rgba(94,230,255,.25)}
.tl::before{background:repeating-linear-gradient(90deg,rgba(94,230,255,.6) 0 8px,transparent 8px 14px)}
.opt{box-shadow:0 14px 34px -22px rgba(4,16,60,.8)}
.opt:hover{border-color:var(--cy)}
.opt[aria-selected=true]{background:linear-gradient(160deg,#164BC0,#0A2370);border-color:var(--cy);box-shadow:0 0 0 3px rgba(94,230,255,.2),0 20px 40px -20px rgba(4,16,60,.9)}
.opt[aria-selected=true] .oi::before{background:radial-gradient(circle at 30% 25%,#35D0FF,#1B54E8 75%)}
details[open]{border-color:var(--cy);box-shadow:0 0 0 3px rgba(94,230,255,.14),0 20px 40px -22px rgba(4,16,60,.9)}
summary .qn{color:var(--t-mute)}
summary .pm{background:rgba(94,230,255,.12);color:var(--cy)}
details[open] summary .pm{background:var(--cy);color:#06142E}
.lvl{background:rgba(255,255,255,.09);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);color:#fff;box-shadow:0 24px 60px -26px rgba(0,10,50,.8)}
.lvl:hover{border-color:var(--cy);box-shadow:0 0 0 1px rgba(94,230,255,.5),0 0 36px -8px rgba(94,230,255,.45)}
.lvl .lv{color:var(--cy)}
.lvl h3{color:#fff}
.lvl p{color:rgba(255,255,255,.86)}
.meter i{background:rgba(255,255,255,.2)}
.meter i.f{background:var(--cy)}
.lvl .keep{color:#fff;border-top-color:rgba(255,255,255,.28)}
.lvl .keep .ico{color:var(--cy)}
.node .nb{background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.4);color:#CFF8FF;box-shadow:0 14px 34px -14px rgba(0,10,50,.7);border-radius:10px}
.node.gw .nb{background:rgba(94,230,255,.2);border-color:var(--cy);color:#fff;box-shadow:0 0 0 8px rgba(94,230,255,.12),0 0 38px 6px rgba(94,230,255,.45)}
.hero-stats .wrap{background:rgba(5,18,56,.58);border:1px solid rgba(94,230,255,.32);backdrop-filter:blur(14px)}
.stat b{color:#fff}.stat span{color:#BCD0F2}
.stat+.stat::before{background:rgba(94,230,255,.25)}
.chip{background:rgba(5,18,56,.64);border:1px solid rgba(94,230,255,.35);border-left:3px solid var(--cy);color:#fff}
.chip small{color:#AFC4EC}
.chip em{background:rgba(94,230,255,.14);color:#9FEFFF}

/* tech icon chips */
.stat .ic,.tl .dot,.opt .oi,.lvl .li,.step .si,.dl .di,.reach .ri,.mc .mi,summary .qi,.card .badge{--ac:#33D6FF;position:relative;isolation:isolate;background:linear-gradient(145deg,#7DF3FF,#2C5CF0 55%,#7DF3FF);color:#D4FAFF}
.stat .ic::before,.tl .dot::before,.opt .oi::before,.lvl .li::before,.step .si::before,.dl .di::before,.reach .ri::before,.mc .mi::before,summary .qi::before,.card .badge::before{content:"";position:absolute;inset:1.6px;clip-path:var(--hex);background:radial-gradient(circle at 30% 22%,#1D4FC8,#071A58 72%);z-index:-1}
.stat .ic .ico,.tl .dot .ico,.opt .oi .ico,.lvl .li .ico,.step .si .ico,.dl .di .ico,.reach .ri .ico,.mc .mi .ico,summary .qi .ico,.card .badge .ico{filter:drop-shadow(0 0 5px rgba(94,230,255,.65))}

.card .badge{position:absolute;right:20px;top:18px}
.card .num{left:18px;top:18px}
.card h3{font:800 1.02rem/1.25 'Sora',sans-serif;text-transform:uppercase;letter-spacing:.07em;color:#fff;padding-left:14px;position:relative}
.card h3::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:4px;border-radius:1px;background:linear-gradient(180deg,#5EE6FF,#2B8CF0)}

/* orbit ring guide */
.orbit-ring{position:absolute;left:0;top:0;border:1px dashed rgba(94,230,255,.35);border-radius:50%;pointer-events:none;z-index:2;transform-origin:50% 50%}
@media (max-width:760px){.orbit-ring{display:none}}

/* robots in cards: floating loop */
.card .stage img{transform-origin:50% 22%;animation:robotFloat 7s ease-in-out infinite;will-change:transform,filter}
.card:nth-child(2) .stage img{animation-delay:-1.2s}
.card:nth-child(3) .stage img{animation-delay:-2.4s}
.card:nth-child(4) .stage img{animation-delay:-3.6s}
.card:nth-child(5) .stage img{animation-delay:-4.8s}
.card:nth-child(6) .stage img{animation-delay:-6s}
@keyframes robotFloat{
 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1.02);filter:brightness(1) saturate(1)}
 50%{transform:translate3d(0,-9px,0) rotate(.7deg) scale(1.055);filter:brightness(1.07) saturate(1.3)}
 100%{transform:translate3d(0,0,0) rotate(0deg) scale(1.02);filter:brightness(1) saturate(1)}
}
.card:hover .stage img{animation-duration:3.6s}

/* metallic navy surfaces */
:root{--metal:linear-gradient(115deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 16%,rgba(255,255,255,.07) 44%,rgba(255,255,255,0) 58%,rgba(255,255,255,.05) 82%,rgba(255,255,255,0) 100%),repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(160deg,#1A3F9C 0%,#0D2670 38%,#081B57 70%,#06133F 100%)}
.card,.mc,.step,.dl a,details,.opt,.console,.price-note{background:var(--metal)}
.opt[aria-selected=true]{background:linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,0) 30%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(160deg,#2A63E0,#103090 60%,#0A2370)}
.dtab{background:var(--metal)}
.stat .ic::before,.tl .dot::before,.opt .oi::before,.lvl .li::before,.step .si::before,.dl .di::before,.reach .ri::before,.mc .mi::before,summary .qi::before,.card .badge::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 30%),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(160deg,#2B55C8 0%,#102C80 45%,#06164A 100%)}
.card,.mc,.step,.dl a{overflow:hidden;position:relative}
.card::after,.mc::after,.step::after,.dl a::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.12) 50%,transparent 62%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.2,.7,.2,1);z-index:6}
.card:hover::after,.mc:hover::after,.step:hover::after,.dl a:hover::after{transform:translateX(130%)}
/* terminal line in hero */
.term{margin-top:22px;padding-top:16px;border-top:1px dashed rgba(6,20,46,.45);font:700 .8rem var(--mono);color:var(--ink);min-height:2.4em}
.term .pr{color:#0A57D6}
.caret{display:inline-block;width:8px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* robot face bubbles */
.bots{position:absolute;inset:0;z-index:3;pointer-events:none;translate:var(--bx,0) var(--by,0)}
.bot{position:absolute;left:0;top:0;width:84px;height:84px;margin:-42px 0 0 -42px;display:block;border-radius:50%;pointer-events:auto;will-change:transform}
.bot .face{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 28%,#F2FAFF,#9CC4F3);border:2px solid #fff;box-shadow:0 0 0 2px var(--cy),0 14px 30px -8px rgba(4,20,80,.75),0 0 24px rgba(94,230,255,.55);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.bot .face img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.bot::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px dashed rgba(94,230,255,.9);animation:spin 14s linear infinite;opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
.bot:hover .face{transform:scale(1.12);box-shadow:0 0 0 3px #fff,0 0 34px rgba(94,230,255,.95)}
.bot .st{position:absolute;right:1px;bottom:3px;width:15px;height:15px;border-radius:50%;background:#22C55E;border:2.5px solid #06142E;animation:pulse 2s infinite}
.bot .lab{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-4px);opacity:0;white-space:nowrap;font:700 .68rem var(--mono);background:rgba(5,18,56,.94);color:#9FEFFF;border:1px solid rgba(94,230,255,.4);padding:5px 10px;border-radius:5px;pointer-events:none;transition:.25s;z-index:5}
.bot:hover .lab{opacity:1;transform:translateX(-50%)}
.chips{translate:var(--cx,0) var(--cy2,0)}
.hero-media{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.06)}

/* demo */
.demo{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:stretch}
.demo-tabs{display:flex;flex-direction:column;gap:10px}
.dtab{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:8px;border:1px solid var(--card-bd);background:linear-gradient(160deg,var(--navy-1),var(--navy-2));color:#fff;cursor:pointer;text-align:left;font:inherit;transition:.25s}
.dtab b{display:block;font:700 .95rem 'Sora'}
.dtab small{font:600 .66rem var(--mono);letter-spacing:.12em;color:var(--t-mute);text-transform:uppercase}
.dtab .df{width:50px;height:50px;border-radius:50%;overflow:hidden;flex:none;background:radial-gradient(circle at 50% 28%,#F2FAFF,#9CC4F3);box-shadow:0 0 0 2px var(--cy)}
.dtab .df img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.dtab:hover{border-color:var(--cy);transform:translateX(4px)}
.dtab.on{background:linear-gradient(160deg,#1750CC,#0B2679);border-color:var(--cy);box-shadow:0 0 0 3px rgba(94,230,255,.2),0 18px 36px -18px rgba(4,16,60,.9);transform:translateX(8px)}
.dterm{background:#04112F;border:1px solid rgba(94,230,255,.35);border-radius:10px;overflow:hidden;box-shadow:0 30px 70px -28px rgba(2,10,45,.9);display:flex;flex-direction:column;min-height:420px}
.dbar{display:flex;align-items:center;gap:8px;padding:12px 18px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(94,230,255,.22);font:600 .74rem var(--mono);color:#BFD3F5}
.dbar i{width:11px;height:11px;border-radius:50%;background:#93C5FD}.dbar i:nth-child(2){background:#7DD3FC}.dbar i:nth-child(3){background:#60A5FA}
.dbar>span:first-of-type{margin-left:10px}
.dbar .live{margin-left:auto;display:flex;align-items:center;gap:7px;color:#6EE7A0}
.dout{padding:22px 24px;font:600 .88rem/1.75 var(--mono);color:#CFE0FF;flex:1}
.dout .ln{display:flex;gap:12px;opacity:0;transform:translateY(5px);animation:lnIn .35s forwards}
@keyframes lnIn{to{opacity:1;transform:none}}
.dout .cmd{color:#fff}.dout .cmd b{color:var(--cy);font-weight:600}
.dout .tg{flex:none;min-width:64px;font-weight:700;letter-spacing:.06em}
.dout .tg.ok{color:#6EE7A0}.dout .tg.hi{color:#FF8A8A}.dout .tg.md{color:#FFD27A}.dout .tg.lo{color:#7FA0D8}.dout .tg.in{color:var(--cy)}
.dact{padding:0 24px 22px;min-height:62px}
.dact .btn{padding:11px 20px;font-size:.88rem}

@media (max-width:1100px){.bot{width:68px;height:68px;margin:-34px 0 0 -34px}}
@media (max-width:900px){.demo{grid-template-columns:1fr}.demo-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px}.dtab{min-width:200px}.dtab.on,.dtab:hover{transform:none}}
@media (max-width:760px){.bots{position:relative;inset:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:min(1200px,92vw);margin:6px auto 18px;translate:none;pointer-events:auto}.bot{position:relative;left:auto;top:auto;margin:0 auto!important;width:100%;max-width:64px;height:auto;aspect-ratio:1;transform:none!important;opacity:1!important}.bot::before{inset:-5px}.bot .lab{display:none}}

/* ===== responsive ===== */
@media (max-width:1100px){.chips{display:none}}
@media (max-width:1020px){
  .hdr-in{grid-template-columns:1fr auto}
  nav.main{display:none}
  .burger{display:grid}
  .hdr .btn{display:none}
  .hdr.open nav.main{display:flex;position:absolute;top:72px;left:3vw;right:3vw;flex-direction:column;padding:12px;border-radius:18px;background:rgba(244,248,254,.97);backdrop-filter:blur(16px);box-shadow:var(--shadow-lg);border:1px solid var(--line)}
  .hdr.open nav.main a{padding:14px 16px}
  .agents,.levels,.more,.dl,.steps{grid-template-columns:1fr 1fr}
  .picker,.contact{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr 1fr;gap:36px 20px}
  .tl::before{display:none}
}
@media (max-width:760px){
  .hero{display:block;min-height:0}
  .hero-media{position:relative;height:66vw;min-height:280px}
  .hero-tint{background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 30%,#F6F9FF 100%)}
  .hero-in{padding:0 0 20px;margin-top:-56px}
  .glass{padding:26px 22px}
  .hero-stats{position:relative;bottom:auto}
  .hero-stats .wrap{grid-template-columns:1fr}
  .stat+.stat::before{left:6%;right:6%;top:0;bottom:auto;width:auto;height:1px}
  .stat{padding:14px 20px}
}
@media (max-width:640px){
  section{padding:72px 0}
  .agents,.levels,.more,.dl,.steps,.tl{grid-template-columns:1fr}
  .console .in{padding:26px 20px 30px}
  .brand{font-size:.8rem;letter-spacing:.1em}.brand img{height:38px}
  .hdr-in{gap:8px;padding:7px 8px 7px 12px}.hdr-r{gap:6px}
  details p{padding-left:24px}
  summary .qn{display:none}summary .pm{margin-left:auto}
  .link{width:3px;height:36px;margin:0;background:repeating-linear-gradient(180deg,#BAE6FD 0 8px,transparent 8px 16px);animation:none}
  .flow{flex-direction:column}
  .node{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ===== v7: hero text, 3D orbit, chrome cards ===== */
.hero{min-height:clamp(760px,100svh,990px)}
.hero-media{background:#081230}
.hero-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 35%;z-index:5;pointer-events:none;animation:kb 24s ease-in-out infinite alternate;transform-origin:68% 40%}
.hero-media .bots{position:absolute;inset:0;z-index:auto;translate:none}
.hero-tint,.hero-grid,.hero-scan{z-index:5}
.hero-tint{background:linear-gradient(90deg,rgba(3,10,36,.80) 0,rgba(3,10,36,.52) 32%,rgba(3,10,36,0) 60%),linear-gradient(0deg,rgba(3,10,36,.72) 0,rgba(3,10,36,0) 32%),linear-gradient(180deg,rgba(3,10,36,.38),transparent 22%)}
.hero-in{padding:118px 0 0;pointer-events:none;align-self:flex-start}
.hero-in .hud{color:#7DD3FC}
.hero h1.mega{max-width:min(640px,46vw);margin:16px 0 0;font-size:clamp(2.2rem,min(4.9vw,8vh),4.7rem);font-weight:800;line-height:.98;letter-spacing:-.012em;text-transform:uppercase;color:#fff;text-shadow:0 6px 44px rgba(0,8,40,.75),0 0 2px rgba(0,8,40,.5)}
.mega .l1{display:block}
.mega .l2{display:flex;align-items:center;gap:.4em;margin-top:.26em;font-size:.56em;line-height:1.04;color:#5EE6FF;text-shadow:0 0 28px rgba(51,214,255,.55),0 4px 30px rgba(0,8,40,.8)}
.mega .l3{margin-top:.1em}
.mega .w{display:inline-block;white-space:nowrap}
.mega .ch{display:inline-block;will-change:transform;transition:color .18s}
.mega .tag{display:inline-grid;place-items:center;flex:none;width:.78em;height:.78em;margin-left:.1em;clip-path:polygon(0 0,76% 0,100% 24%,100% 100%,24% 100%,0 76%);background:linear-gradient(135deg,#5EE6FF,#1D6BFF);color:#04123a;font-size:.8em}
.mega .tag svg{width:78%;height:78%}
.mega .live{flex:none;width:.34em;height:.34em;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulse 2s infinite;margin-left:.1em}
.hero-bar{position:absolute;z-index:3;left:max(4vw,calc((100vw - 1200px)/2));bottom:136px;width:min(720px,54vw);padding:20px 24px 18px;color:#E6F1FF;background:linear-gradient(160deg,rgba(14,40,110,.62),rgba(5,16,52,.72));border:1px solid rgba(94,230,255,.32);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.hero-bar p.lead{margin:10px 0 14px;font-size:1rem;font-weight:600;color:#DCE9FF;line-height:1.55}
.hero-bar .bar-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-bar .cta{margin:0;flex:none}
.hero-bar .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35)}
.hero-bar .term{margin:0;padding:0 0 0 18px;border:0;border-left:1px solid rgba(94,230,255,.3);color:#BAE6FD;min-height:0;flex:1;min-width:190px;font-size:.78rem}
.hero-bar .term .pr{color:#5EE6FF}
.hero-stats .wrap{background:rgba(5,18,56,.62)}
@media (max-width:1100px){.hero h1.mega{max-width:62vw}.hero-bar{width:60vw}}
@media (max-width:760px){
  .hero{min-height:0}
  .hero-fg{display:none}
  .hero-tint{background:linear-gradient(180deg,rgba(3,10,36,.25),transparent 30%,#F6F9FF 100%)}
  .hero-in{padding:0 0 12px;margin-top:-40px;align-self:auto}
  .hero-in .hud{color:var(--blue)}
  .hero h1.mega{max-width:none;font-size:clamp(1.9rem,9.4vw,2.7rem);color:#0A1B4D;text-shadow:none}
  .mega .l2{color:#0A6FD0;text-shadow:none}
  .hero-bar{position:relative;left:auto;bottom:auto;width:92vw;margin:6px auto 18px;padding:18px 18px 16px}
  .hero-bar .term{border-left:0;padding-left:0;flex-basis:100%}
}

.hdr:not(.scrolled) .brand{color:#fff}.hdr:not(.scrolled) .brand span b{color:#5EE6FF}
/* chrome cards */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
section .card{background:radial-gradient(260px circle at var(--gx,50%) var(--gy,-30%),rgba(130,215,255,.15),transparent 62%),linear-gradient(112deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 14%,rgba(255,255,255,.08) 40%,rgba(255,255,255,0) 56%,rgba(255,255,255,.06) 80%,rgba(255,255,255,0) 100%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,rgba(0,0,0,0) 1px 3px),conic-gradient(from 200deg at 30% -10%,#17357e,#0a1c52 18%,#2a56b0 32%,#0b1f5a 48%,#1d4294 66%,#081746 84%,#17357e);border-color:rgba(140,190,255,.28)}
section .card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 62%,rgba(51,214,255,.0) 62%,#33D6FF 84%,#fff 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;opacity:.6;z-index:7;pointer-events:none;transition:opacity .3s}
section .card:hover::before{opacity:1;animation-duration:2s}
section .card h3{transition:letter-spacing .35s,text-shadow .35s}
section .card:hover h3{letter-spacing:.06em;text-shadow:0 0 18px rgba(94,230,255,.6)}
section .card .stage::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(51,214,255,.0) 0 3px,rgba(51,214,255,.10) 3px 4px);opacity:0;transition:opacity .3s}
section .card:hover .stage::before{opacity:1}
@media (prefers-reduced-motion:reduce){section .card::before{animation:none}.hero-fg{animation:none}}

/* ===== v8: bigger headline, box variants, living city ===== */
.hero-city{position:absolute;inset:0;z-index:6;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.4) 0,#000 48%);mask-image:linear-gradient(90deg,rgba(0,0,0,.4) 0,#000 48%);width:100%;height:100%;object-fit:cover;object-position:68% 35%;mix-blend-mode:screen;pointer-events:none;animation:kb 24s ease-in-out infinite alternate;transform-origin:68% 40%}
.hero h1.mega{max-width:min(820px,56vw);font-size:clamp(2.4rem,min(6.2vw,9.8vh),6.6rem);line-height:.96}
.mega .l2{font-size:.5em;margin-top:.3em}
.hero .pills,.hero .bar-short{display:none}
.hero .pills{gap:8px;flex-wrap:wrap;margin:12px 0 14px}
.hero .pills span{font:700 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#BAE6FD;padding:6px 11px;border:1px solid rgba(94,230,255,.4);background:rgba(94,230,255,.08);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
@media (min-width:761px){
  /* B: no box, accent line */
  .hero[data-bar=b] .hero-bar{background:none;border:0;border-left:3px solid #33D6FF;clip-path:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:6px 0 6px 24px;width:min(640px,48vw)}
  .hero[data-bar=b] .hero-bar .lead{text-shadow:0 2px 22px rgba(0,8,40,.95),0 0 4px rgba(0,8,40,.8);font-size:1.08rem}
  .hero[data-bar=b] .hero-bar .term{border-left:0;padding-left:0;flex-basis:100%}
  /* C: wide strip */
  .hero[data-bar=c] .hero-bar{left:0;right:0;margin-inline:auto;width:min(1200px,92vw);display:grid;grid-template-columns:1.5fr auto 1fr;align-items:center;gap:26px;padding:16px 26px}
  .hero[data-bar=c] .hero-bar .bar-row{display:contents}
  .hero[data-bar=c] .hero-bar p.lead{margin:0;font-size:.92rem}
  .hero[data-bar=c] .hero-bar .term{border-left:1px solid rgba(94,230,255,.3);padding-left:18px;min-width:0}
  /* D: pills + one-liner */
  .hero[data-bar=d] .hero-bar{width:min(680px,52vw)}
  .hero[data-bar=d] .hero-bar p.lead{display:none}
  .hero[data-bar=d] .pills{display:flex}
  .hero[data-bar=d] .bar-short{display:block;margin:0 0 16px;font-weight:600;color:#DCE9FF}
}
@media (max-width:760px){.hero-city{display:none}.hero h1.mega{font-size:clamp(1.9rem,9.4vw,2.7rem)}.mega .l2{font-size:.56em}}

/* ===== v9: l2 colour, headline font options ===== */
.mega .l2{color:#FFC93C;text-shadow:0 0 26px rgba(255,170,30,.45),0 4px 26px rgba(0,6,30,.9),0 0 2px rgba(0,6,30,.9)}
.mega .tag{background:linear-gradient(135deg,#FFE08A,#F59E0B);color:#2a1a00}
@media (max-width:760px){.mega .l2{color:#B45309;text-shadow:none}.mega .tag{background:linear-gradient(135deg,#FCD34D,#D97706)}}
.hero[data-font=b] h1.mega{font-family:'Unbounded',sans-serif;font-weight:800;font-size:clamp(1.8rem,min(4.6vw,7.2vh),4.9rem);letter-spacing:-.02em;line-height:1.02}
.hero[data-font=c] h1.mega{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2.2rem,min(5.8vw,9.2vh),6.2rem);letter-spacing:-.01em;line-height:.95}
.hero[data-font=d] h1.mega{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(2.3rem,min(6.2vw,9.8vh),6.6rem);letter-spacing:.005em;line-height:.95}
.hero[data-font=e] h1.mega{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2.4rem,min(6.6vw,10.4vh),7rem);letter-spacing:-.02em;line-height:.94}
.hero[data-font=f] h1.mega{font-family:'Archivo',sans-serif;font-weight:900;font-stretch:125%;font-size:clamp(2.1rem,min(5.2vw,8.4vh),5.6rem);letter-spacing:-.01em;line-height:.98}
.hero[data-font] .mega .l2{font-family:inherit}

/* ===== v10: font F, big OFFICE, palette-pure proof chips, blue rain ===== */
@keyframes pulseC{70%{box-shadow:0 0 0 9px rgba(51,214,255,0)}100%{box-shadow:0 0 0 0 rgba(51,214,255,0)}}
.hero[data-font=f] h1.mega{font-size:clamp(2.4rem,min(6.6vw,10.4vh),7rem);max-width:min(900px,60vw);line-height:.96}
.mega .pre{font-size:.46em;letter-spacing:.015em;line-height:1.05;margin-bottom:.14em}
.mega .big{font-size:1.18em;line-height:.92;letter-spacing:-.025em}
.mega .proof{display:flex;flex-wrap:wrap;gap:.22em .3em;margin-top:.3em;font-size:.3em;line-height:1}
.mega .l2,.hero[data-font] .mega .l2{margin:0;padding:.5em .85em .5em .8em;gap:.55em;font-size:1em;font-weight:800;letter-spacing:.06em;color:#fff;background:linear-gradient(160deg,rgba(14,44,120,.78),rgba(5,16,52,.86));border:1px solid rgba(94,230,255,.55);text-shadow:none;clip-path:polygon(0 0,calc(100% - .7em) 0,100% .7em,100% 100%,.7em 100%,0 calc(100% - .7em));box-shadow:0 0 22px -6px rgba(51,214,255,.5)}
.mega .l2.l3{margin:0}
.mega .tag{width:1.05em;height:1.05em;margin:0;background:linear-gradient(135deg,#7DE9FF,#1D6BFF);color:#04123a;font-size:1em}
.mega .live{width:.5em;height:.5em;margin:0;background:#33D6FF;animation:pulseC 2s infinite}
.hero-in .hud .pulse{background:#5EE6FF;animation:pulseC 2s infinite}
.hero .bot .st{background:#33D6FF}
@media (max-width:760px){.hero[data-font=f] h1.mega{max-width:none;font-size:clamp(2rem,10vw,3rem)}.mega .proof{font-size:.34em}.mega .l2{color:#fff}}

/* ===== v11: headline shape/position options, proof chips placement ===== */
.proof{display:flex;align-items:center;flex-wrap:wrap;gap:.3em;margin-top:.9em;font-size:clamp(.9rem,min(1.95vw,3.1vh),2rem)}
.hero[data-font=f] .proof{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase}
.proof .arrow{display:none}
@media (min-width:761px){
  .hero-in{align-self:stretch}
  .hero-in .proof{position:relative}
  /* proof placement 2: lower-left, one row, well away from the headline */
  .hero[data-proof="2"] .hero-in .proof,.hero[data-proof="3"] .hero-in .proof{position:absolute;left:0;bottom:292px;margin:0;z-index:3}
  /* proof placement 3: connected BUILT -> WORKING */
  .hero[data-proof="3"] .proof{gap:0}
  .hero[data-proof="3"] .proof .arrow{display:block;width:4.2em;height:2px;background:repeating-linear-gradient(90deg,#5EE6FF 0 8px,transparent 8px 14px);position:relative}
  .hero[data-proof="3"] .proof .arrow::after{content:"";position:absolute;right:-1px;top:-5px;width:12px;height:12px;border-top:2px solid #5EE6FF;border-right:2px solid #5EE6FF;transform:rotate(45deg) translate(-3px,3px)}
  /* headline 2: outlined OFFICE */
  .hero[data-hl="2"] .mega .big{color:transparent;-webkit-text-stroke:2.5px #fff;text-shadow:0 0 34px rgba(51,214,255,.55)}
  .hero[data-hl="2"] .mega .big .ch{text-shadow:0 0 30px rgba(51,214,255,.5)}
  /* headline 3: slanted, underline bar */
  .hero[data-hl="3"] h1.mega{transform:skewX(-9deg);transform-origin:0 100%;padding-bottom:.2em}
  .hero[data-hl="3"] .mega .big{position:relative;display:block}
  .hero[data-hl="3"] .mega .big::after{content:"";position:absolute;left:0;bottom:-.05em;height:.085em;width:100%;background:linear-gradient(90deg,#fff 0,#5EE6FF 55%,transparent 100%);clip-path:polygon(0 0,100% 0,96% 100%,0 100%)}
  /* headline 4: vertically centred with accent rail, white-to-ice fill */
  .hero[data-hl="4"] .hero-in{padding-top:0;padding-bottom:300px;display:flex;flex-direction:column;justify-content:center}
  .hero[data-hl="4"] h1.mega{border-left:6px solid #33D6FF;padding-left:.32em;margin-top:18px}
  .hero[data-hl="4"] .mega .big,.hero[data-hl="4"] .mega .big .ch{text-shadow:none}
  .hero[data-hl="4"] .mega .big .ch{background:linear-gradient(180deg,#fff 20%,#8FD3FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
}
@media (max-width:760px){.proof{font-size:.82rem;margin-top:12px}}

/* ===== v12: layout options with fewer boxes ===== */
.hero-in .hero-bar{left:0;pointer-events:auto}
@media (min-width:761px){
  .hero[data-layout]:not([data-layout="0"]) .proof{gap:.9em;font-size:clamp(.8rem,1.15vw,1.05rem);letter-spacing:.16em;margin-top:1em;position:relative;left:auto;bottom:auto}
  .hero[data-layout]:not([data-layout="0"]) .proof .l2{background:none;border:0;box-shadow:none;clip-path:none;padding:0;font-size:1em;letter-spacing:.16em;gap:.6em;text-shadow:0 2px 14px rgba(0,8,40,.9)}
  .hero[data-layout]:not([data-layout="0"]) .proof .arrow{display:block;width:3em;height:1px;background:linear-gradient(90deg,rgba(94,230,255,.9),rgba(94,230,255,.2));position:static}
  .hero[data-layout]:not([data-layout="0"]) .proof .arrow::after{display:none}
  .hero[data-layout]:not([data-layout="0"]) .proof .tag{width:1.15em;height:1.15em}
  .hero[data-layout]:not([data-layout="0"]) .hero-stats .wrap{background:none;border:0;border-top:1px solid rgba(94,230,255,.28);border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  /* plain (box-less) text block for layouts 1,3,4 */
  .hero[data-layout="1"] .hero-bar,.hero[data-layout="3"] .hero-bar,.hero[data-layout="4"] .hero-bar{position:relative;left:auto;right:auto;bottom:auto;display:block;width:min(520px,36vw);margin:22px 0 0;padding:0;background:none;border:0;clip-path:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .hero[data-layout="1"] .hero-bar .bar-row,.hero[data-layout="3"] .hero-bar .bar-row,.hero[data-layout="4"] .hero-bar .bar-row{display:flex}
  .hero[data-layout="1"] .hero-bar p.lead,.hero[data-layout="3"] .hero-bar p.lead,.hero[data-layout="4"] .hero-bar p.lead{margin:0 0 18px;font-size:1.04rem;text-shadow:0 2px 20px rgba(0,8,40,.95),0 0 3px rgba(0,8,40,.8)}
  .hero[data-layout="1"] .hero-bar .term,.hero[data-layout="3"] .hero-bar .term,.hero[data-layout="4"] .hero-bar .term{display:none}
  /* 2: single dock = text strip + stats fused into one panel */
  .hero[data-layout="2"] .hero-bar{bottom:118px;clip-path:none;border-bottom:1px solid rgba(94,230,255,.18);border-radius:10px 10px 0 0}
  .hero[data-layout="2"]:not([data-layout="0"]) .hero-stats .wrap{background:linear-gradient(160deg,rgba(14,40,110,.62),rgba(5,16,52,.72));border:1px solid rgba(94,230,255,.32);border-top:0;border-radius:0 0 10px 10px;backdrop-filter:blur(14px)}
  /* 3: bottom-anchored text */
  .hero[data-layout="3"] .hero-in{display:flex;flex-direction:column;justify-content:flex-end;padding:118px 0 150px}
  /* 4: vertically centred with a hairline rail */
  .hero[data-layout="4"] .hero-in{display:flex;flex-direction:column;justify-content:center;padding:100px 0 150px 34px}
  .hero[data-layout="4"] .hero-in::before{content:"";position:absolute;left:0;top:170px;bottom:170px;width:1px;background:linear-gradient(180deg,transparent,#5EE6FF 18%,#5EE6FF 82%,transparent)}
  .hero[data-layout="4"] .hero-in::after{content:"";position:absolute;left:-3px;top:50%;width:7px;height:7px;background:#5EE6FF;box-shadow:0 0 12px #33D6FF;transform:rotate(45deg)}
}

/* ===== v13: layout 3 final, 3-line headline, visual job list ===== */
@media (min-width:761px){.hero[data-layout="3"] .mega .pre{font-size:.64em;line-height:.98;letter-spacing:-.01em;margin:0}}
.hero[data-layout="3"] .mega .big{margin-top:.02em}
.jobs{list-style:none;margin:14px 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
.jobs li{display:flex;align-items:center;gap:11px;font-weight:700;font-size:.97rem;color:#EAF3FF;text-shadow:0 2px 14px rgba(0,8,40,.95);opacity:0;transform:translateX(-14px);animation:jobIn .6s cubic-bezier(.2,.7,.2,1) forwards;padding-bottom:9px;border-bottom:1px solid rgba(94,230,255,.22);transition:border-color .25s,color .25s}
.jobs li:nth-child(1){animation-delay:1.3s}.jobs li:nth-child(2){animation-delay:1.45s}.jobs li:nth-child(3){animation-delay:1.6s}.jobs li:nth-child(4){animation-delay:1.75s}.jobs li:nth-child(5){animation-delay:1.9s}
.jobs li:hover{border-color:#5EE6FF;color:#fff}
@keyframes jobIn{to{opacity:1;transform:none}}
.jc{position:relative;isolation:isolate;flex:none;width:32px;height:32px;display:grid;place-items:center;color:#9BE9FF;background:linear-gradient(135deg,#5EE6FF,#1D6BFF);clip-path:polygon(0 0,76% 0,100% 24%,100% 100%,24% 100%,0 76%)}
.jc::before{content:"";position:absolute;inset:1.5px;background:linear-gradient(160deg,#10307f,#061a52);clip-path:inherit;z-index:-1}
.jc .ico{width:17px;height:17px}
.jobs li:hover .jc{color:#fff;filter:drop-shadow(0 0 8px rgba(51,214,255,.8))}
.promise{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:.9rem;font-weight:600;color:#BFE9FF;text-shadow:0 2px 14px rgba(0,8,40,.95)}
.promise .ico{width:18px;height:18px;flex:none;color:#5EE6FF}
@media (min-width:761px){.hero[data-layout="3"] .hero-bar{width:min(540px,38vw)}
.hero[data-layout="3"] .hero-bar p.lead{margin:0;font-size:.98rem;font-weight:700;color:#DCEBFF;letter-spacing:.01em}}
@media (max-width:760px){
  .mega .pre{font-size:.62em}
  .jobs{grid-template-columns:1fr 1fr;gap:8px 12px;margin:12px 0}
  .jobs li{font-size:.85rem;color:#fff;text-shadow:none;opacity:1;transform:none;animation:none}
  .promise{color:#D6F1FF;text-shadow:none}
  .hero-bar p.lead{color:#fff}
}
@media (prefers-reduced-motion:reduce){.jobs li{animation:none;opacity:1;transform:none}}

/* ===== v14: justified headline block + calmer info options ===== */
.mega .pre,.mega .big{white-space:nowrap}
.hero[data-layout="3"] .mega .pre{line-height:.95}
@media (min-width:761px){.hero[data-layout="3"] .mega .big{font-size:1.02em}}
.rot{display:none}
/* info 1: icon row */
.hero[data-info="1"] .jobs{display:flex;flex-wrap:nowrap;gap:10px;margin:16px 0 18px}
.hero[data-info="1"] .jobs li{flex-direction:column;align-items:flex-start;gap:7px;width:92px;font-size:.72rem;line-height:1.2;border-bottom:0;padding-bottom:0}
.hero[data-info="1"] .jc{width:38px;height:38px}.hero[data-info="1"] .jc .ico{width:20px;height:20px}
.hero[data-info="1"] .promise{display:none}
/* info 2: one calm line */
.hero[data-info="2"] .jobs{display:flex;flex-wrap:wrap;gap:4px 0;margin:8px 0 16px}
.hero[data-info="2"] .jobs li{border:0;padding:0;font-size:.95rem;color:#CFE8FF;gap:0}
.hero[data-info="2"] .jobs li .jc{display:none}
.hero[data-info="2"] .jobs li:not(:last-child)::after{content:"\00b7";margin:0 .6em;color:#5EE6FF;font-weight:900}
.hero[data-info="2"] .promise{display:none}
/* info 3: single rotating job */
.hero[data-info="3"] .jobs,.hero[data-info="3"] .promise{display:none}
.hero[data-info="3"] .rot{display:flex;align-items:center;gap:12px;margin:14px 0 20px;height:36px;font-weight:800;font-size:1.15rem;color:#fff;text-shadow:0 2px 14px rgba(0,8,40,.95)}
.rot .rw{display:inline-block;transition:opacity .28s,transform .28s}
.rot.out .rw,.rot.out .jc{opacity:0;transform:translateY(8px)}
.rot .jc{transition:opacity .28s,transform .28s}
/* info 4: minimum */
.hero[data-info="4"] .hero-bar p.lead,.hero[data-info="4"] .jobs,.hero[data-info="4"] .promise{display:none}
.hero[data-info="4"] .hero-bar{margin-top:20px}

/* ===== v15: headline anchored high, info block stays low ===== */
@media (min-width:761px){
  .hero[data-layout="3"] .hero-in{justify-content:flex-start;padding-top:104px}
  .hero[data-layout="3"] .hero-bar{margin-top:auto}
}