/* ===========================================================
   OOZY — shared design system
   Dark + light themes. Industrial/operational aesthetic.
   =========================================================== */
:root{
  --bg:#0B0D11; --bg-2:#0E1116; --panel:#0C0F14; --line:#1B1F27;
  --depot:#3A4151; --dormant:#262B34;
  --text:#F2F4F6; --muted:#828B98; --faint:#4A5260;
  --life:#27E06B; --life-soft:#1FB85A; --life-deep:#0B3D22;
  --cost:#FF9A3D; --cost-soft:#C9742B;
  --panel-bg:rgba(12,15,20,.62); --panel-bg-2:rgba(12,15,20,.5);
  --bub-them:#15191F; --bub-me:rgba(39,224,107,.10); --bub-me-bd:rgba(39,224,107,.3);
  --grid-line:rgba(255,255,255,.015); --nav-bg:rgba(11,13,17,.72);
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --sans:"Archivo", system-ui, sans-serif;
  --maxw:1180px; --gut:clamp(20px,4vw,40px);
}
[data-theme="light"]{
  --bg:#ECEDE7; --bg-2:#E2E3DC; --panel:#FFFFFF; --line:#D7D9D0;
  --depot:#9098A4; --dormant:#C4C8C0;
  --text:#161A1E; --muted:#5A626E; --faint:#9CA2AA;
  --life:#12A455; --life-soft:#0E8B47; --life-deep:#D9F3E2;
  --cost:#CF7414; --cost-soft:#B5610C;
  --panel-bg:rgba(255,255,255,.72); --panel-bg-2:rgba(255,255,255,.6);
  --bub-them:#E7E8E1; --bub-me:rgba(18,164,85,.14); --bub-me-bd:rgba(18,164,85,.4);
  --grid-line:rgba(0,0,0,.028); --nav-bg:rgba(236,237,231,.78);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s ease}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---- map + atmosphere ---- */
#map{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:var(--bg)}
#nightveil{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(120% 90% at 50% 30%, rgba(20,38,70,0), rgba(4,8,18,.82));transition:opacity .2s linear}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- nav ---- */
nav.site{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px var(--gut);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
nav.site.solid{background:var(--nav-bg);backdrop-filter:blur(14px);border-color:var(--line)}
.word{font-weight:900;font-size:24px;letter-spacing:-.045em}
.navlinks{display:flex;gap:22px;align-items:center;font-size:14px;color:var(--muted);font-weight:500}
.navlinks a:hover{color:var(--text)}
.themebtn{background:transparent;border:1px solid var(--line);color:var(--text);width:38px;height:38px;border-radius:8px;cursor:pointer;font-size:15px;display:grid;place-items:center;transition:.2s;line-height:1}
.themebtn:hover{border-color:var(--faint);background:rgba(127,127,127,.06)}
.btn{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:-.01em;padding:11px 20px;border-radius:6px;border:none;cursor:pointer;transition:transform .15s,background .2s,box-shadow .2s,border-color .2s;display:inline-block}
.btn-primary{background:var(--life);color:#04130A;box-shadow:0 0 0 1px rgba(39,224,107,.25),0 12px 34px -12px rgba(39,224,107,.5)}
[data-theme="light"] .btn-primary{color:#fff;box-shadow:0 0 0 1px rgba(18,164,85,.2),0 12px 30px -12px rgba(18,164,85,.5)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--faint);background:rgba(127,127,127,.05)}
.btn-lg{padding:14px 26px;font-size:15px}
.hamb{display:none;background:transparent;border:1px solid var(--line);color:var(--text);width:38px;height:38px;border-radius:8px;cursor:pointer;font-size:16px}
.mobilemenu{display:none;position:fixed;inset:0;z-index:49;background:var(--bg);flex-direction:column;gap:6px;padding:90px var(--gut) 40px}
.mobilemenu.open{display:flex}
.mobilemenu a{font-size:22px;font-weight:700;padding:14px 0;border-bottom:1px solid var(--line)}
@media(max-width:820px){.navlinks .desktoponly{display:none}.hamb{display:grid}}

/* ---- layout ---- */
section{position:relative;z-index:5}
.live-sec{background:transparent}
.solid-sec{background:var(--bg);position:relative;z-index:5}
.solid-sec::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:64px 64px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,11vh,140px) var(--gut)}
.wrap.tight{padding-top:clamp(40px,6vh,70px);padding-bottom:clamp(40px,6vh,70px)}

/* ---- type ---- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--cost);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.eyebrow.green{color:var(--life)}
.eyebrow.center{justify-content:center}
h1{font-size:clamp(38px,6.2vw,78px);line-height:.96;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
h2{font-size:clamp(28px,4.4vw,54px);line-height:1.0;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
h3{font-size:clamp(19px,2vw,24px);line-height:1.1;letter-spacing:-.02em;font-weight:700}
.lead{color:var(--muted);font-size:clamp(16px,1.6vw,20px);line-height:1.55;max-width:54ch}
.prose p{color:var(--muted);font-size:16px;line-height:1.7;max-width:62ch;margin-bottom:16px}
em.mut{font-style:normal;color:var(--muted)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.in .rv{opacity:1;transform:none}
.in .rv.d1{transition-delay:.08s}.in .rv.d2{transition-delay:.16s}.in .rv.d3{transition-delay:.24s}.in .rv.d4{transition-delay:.32s}

/* ---- buttons row ---- */
.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:32px}
.play{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:14px;cursor:pointer}
.play .tri{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.play .tri::before{content:"";border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}

/* ---- breadcrumb ---- */
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-bottom:22px}
.crumb a:hover{color:var(--muted)}

/* ---- page hero (inner pages) ---- */
.page-hero .wrap{min-height:58vh;display:flex;flex-direction:column;justify-content:center;padding-top:140px}

/* ---- splits & grids ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.v{align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---- card ---- */
.card{border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--panel-bg-2);transition:border-color .3s,transform .3s}
.card.link:hover{border-color:var(--bub-me-bd);transform:translateY(-3px)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:14px;line-height:1.55}
.card .num{font-family:var(--mono);font-size:12px;color:var(--life);margin-bottom:14px}
.card .arrow{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--life)}

/* ---- checklist ---- */
.checklist{list-style:none;display:grid;gap:14px;margin-top:8px}
.checklist li{display:grid;grid-template-columns:22px 1fr;gap:12px;color:var(--muted);font-size:15px;line-height:1.5}
.checklist li::before{content:"";width:18px;height:18px;border-radius:5px;background:var(--bub-me);border:1px solid var(--bub-me-bd);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-6' stroke='%2327E06B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;margin-top:1px}
.checklist li b{color:var(--text);font-weight:700}

/* ---- feature rows ---- */
.featrow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:48px 0;border-top:1px solid var(--line)}
.featrow.flip .featvis{order:-1}
@media(max-width:860px){.featrow{grid-template-columns:1fr;gap:28px}.featrow.flip .featvis{order:0}}
.featvis{border:1px solid var(--line);border-radius:14px;background:var(--panel-bg-2);min-height:260px;padding:24px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}

/* ---- mod chips ---- */
.chips-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.modchip{font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 11px}

/* ---- stat band ---- */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0;margin-top:8px}
@media(max-width:680px){.statband{grid-template-columns:repeat(2,1fr);gap:30px}}
.stat .n{font-family:var(--mono);font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--text)}
.stat .n.green{color:var(--life)}.stat .n.cost{color:var(--cost)}
.stat .l{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.4}

/* ---- pillars (engine) ---- */
.pillars{margin-top:46px;display:grid;border-top:1px solid var(--line)}
.pillar{display:grid;grid-template-columns:60px 1fr 1.2fr;gap:24px;align-items:center;padding:26px 8px;border-bottom:1px solid var(--line);transition:background .3s}
.pillar:hover{background:rgba(127,127,127,.04)}
.pillar a.pname:hover{color:var(--life)}
.pnum{font-family:var(--mono);font-size:13px;color:var(--life)}
.pname{font-size:clamp(20px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;display:block}
.pout{color:var(--muted);font-size:14px;margin-top:4px}
.pmods{display:flex;gap:7px;flex-wrap:wrap}
.pmod{font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 10px}
@media(max-width:760px){.pillar{grid-template-columns:40px 1fr}.pmods{grid-column:1/-1}}

/* ---- roster (hero) ---- */
.roster{background:var(--panel-bg);border:1px solid var(--line);border-radius:12px;padding:18px;backdrop-filter:blur(8px);box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.roster .rhead{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.rrow{display:grid;grid-template-columns:74px 1fr auto;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:none}
.rid{font-family:var(--mono);font-size:11px;color:var(--muted)}
.chips{display:flex;gap:5px}
.chip{width:20px;height:20px;border-radius:5px;background:rgba(39,224,107,.14);border:1px solid rgba(39,224,107,.4)}
.chip.empty{background:rgba(255,154,61,.10);border:1px dashed var(--cost);animation:cpulse 1.8s ease-in-out infinite}
@keyframes cpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,154,61,0)}50%{box-shadow:0 0 0 4px rgba(255,154,61,.14)}}
.rstat{font-family:var(--mono);font-size:10px;color:var(--faint)}
.rstat.cost{color:var(--cost)}.rstat.ok{color:var(--life)}

/* ---- leak ---- */
.leak{position:relative;height:340px;border:1px solid var(--line);border-radius:12px;background:var(--panel-bg-2);overflow:hidden}
.srcrow{display:flex;gap:8px;flex-wrap:wrap;padding:14px;border-bottom:1px solid var(--line)}
.src{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 10px}
.ldrop{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--life);top:60px;animation:fall 3.2s linear infinite}
@keyframes fall{0%{transform:translateY(0);opacity:1;background:var(--life)}55%{opacity:1}70%{background:var(--muted)}100%{transform:translateY(230px);opacity:0;background:var(--faint)}}
.leakcap{position:absolute;bottom:12px;left:14px;font-family:var(--mono);font-size:11px;color:var(--cost)}

/* ---- thread ---- */
.thread{background:var(--panel-bg);border:1px solid var(--line);border-radius:14px;padding:18px;max-width:400px;box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.thead{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.tav{width:30px;height:30px;border-radius:50%;background:var(--life);display:grid;place-items:center;font-weight:900;color:#04130A;font-size:13px}
[data-theme="light"] .tav{color:#fff}
.tname{font-size:13px;font-weight:700}.tmeta{font-family:var(--mono);font-size:10px;color:var(--life)}
.bub{max-width:82%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.4;margin-bottom:9px;opacity:0;transform:translateY(8px)}
.bub.show{opacity:1;transform:none;transition:.4s cubic-bezier(.16,1,.3,1)}
.bub.them{background:var(--bub-them);border-bottom-left-radius:3px}
.bub.me{background:var(--bub-me);border:1px solid var(--bub-me-bd);margin-left:auto;border-bottom-right-radius:3px}
.bub .tick{font-family:var(--mono);font-size:9px;color:var(--life);float:right;margin:4px 0 -2px 8px}

/* ---- goldmine ---- */
.gm-stats{display:flex;gap:30px;margin-top:30px;font-family:var(--mono);flex-wrap:wrap}
.gm-stat .n{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.gm-stat .l{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.gm-stat.cost .n{color:var(--cost)}.gm-stat.life .n{color:var(--life)}

/* ---- night ---- */
.night-in{max-width:640px;margin:0 auto;text-align:center}
.clock{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--muted);margin-bottom:22px}
.nightpunch{margin-top:30px;font-family:var(--mono);font-size:clamp(14px,2vw,18px);color:var(--life);border:1px solid var(--bub-me-bd);border-radius:8px;padding:14px 20px;display:inline-block;background:var(--bub-me)}

/* ---- machine ---- */
.machine{position:relative;height:420px;margin-top:40px;border:1px solid var(--line);border-radius:14px;background:var(--panel-bg-2);overflow:hidden}
.tool{position:absolute;left:50%;top:50%;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);background:var(--bg-2);border-radius:8px;padding:9px 13px;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s;opacity:.5}
.oozycore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;background:var(--life);color:#04130A;font-weight:900;font-size:22px;letter-spacing:-.04em;padding:18px 30px;border-radius:12px;box-shadow:0 0 50px rgba(39,224,107,.35);transition:opacity .8s .5s,transform .8s .5s cubic-bezier(.16,1,.3,1)}
[data-theme="light"] .oozycore{color:#fff}
.in .oozycore{opacity:1;transform:translate(-50%,-50%) scale(1)}
.machine-cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.1em;padding:0 16px}

/* ---- industries ---- */
.indgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
@media(max-width:860px){.indgrid{grid-template-columns:repeat(2,1fr)}}
.ind{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--panel-bg-2);aspect-ratio:1/.92;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;transition:border-color .3s,transform .3s}
.ind:hover{border-color:var(--bub-me-bd);transform:translateY(-3px)}
.ind .motif{position:absolute;inset:0;opacity:.55}
.ind .iname{font-weight:800;font-size:18px;letter-spacing:-.02em;position:relative}
.ind .ipain{font-family:var(--mono);font-size:10.5px;color:var(--muted);position:relative;opacity:0;transform:translateY(6px);transition:.3s}
.ind:hover .ipain{opacity:1;transform:none}

/* ---- demo roles ---- */
.demo-roles{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 24px}
.role{font-family:var(--sans);font-weight:600;font-size:14px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:10px 18px;cursor:pointer;transition:.2s}
.role:hover{color:var(--text);border-color:var(--faint)}
.role.active{background:var(--life);color:#04130A;border-color:var(--life)}
[data-theme="light"] .role.active{color:#fff}
.demo-stage{min-height:300px}

/* ---- outcomes ---- */
.outs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
@media(max-width:760px){.outs{grid-template-columns:1fr}}
.out{border:1px solid var(--line);border-radius:12px;padding:26px;background:var(--panel-bg-2)}
.out .ofrom{font-family:var(--mono);font-size:12px;color:var(--cost);text-decoration:line-through;opacity:.8}
.out .oto{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;margin-top:8px}
.out .odesc{color:var(--muted);font-size:13.5px;margin-top:8px;line-height:1.5}

/* ---- faq ---- */
.faq{margin-top:36px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--life)}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--muted);font-size:15px;line-height:1.6;margin-top:14px;max-width:70ch}

/* ---- team ---- */
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media(max-width:760px){.teamgrid{grid-template-columns:1fr}}
.member{border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--panel-bg-2)}
.member .av{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--life-soft),var(--life));margin-bottom:16px}
.member .role-t{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}

/* ---- pricing ---- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;align-items:start}
@media(max-width:860px){.pricing{grid-template-columns:1fr}}
.ptier{border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--panel-bg-2);display:flex;flex-direction:column;gap:8px}
.ptier.feat{border-color:var(--bub-me-bd);box-shadow:0 0 0 1px var(--bub-me-bd),0 30px 70px -40px rgba(39,224,107,.4)}
.ptier .pt-name{font-weight:800;font-size:20px}
.ptier .pt-price{font-family:var(--mono);font-size:14px;color:var(--muted);margin:6px 0 14px}
.ptier .checklist{margin-bottom:20px}
.ptier .btn{margin-top:auto}
.axis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media(max-width:760px){.axis{grid-template-columns:1fr}}

/* ---- cta band ---- */
.ctaband{text-align:center}
.ctaband .wrap{display:flex;flex-direction:column;align-items:center;min-height:60vh;justify-content:center}
.ctaband h2{max-width:18ch}

/* ---- form ---- */
.form{display:grid;gap:16px;max-width:440px}
.form label{font-size:13px;color:var(--muted);display:grid;gap:6px}
.form input,.form select{font-family:var(--sans);font-size:15px;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:12px 14px}
.form input:focus,.form select:focus{outline:none;border-color:var(--life)}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:5}
.foot{max-width:var(--maxw);margin:0 auto;padding:64px var(--gut) 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr}}
.foot .fcol h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.foot .fcol a{display:block;color:var(--muted);font-size:14px;padding:5px 0}
.foot .fcol a:hover{color:var(--text)}
.foot .brandcol p{color:var(--muted);font-size:14px;line-height:1.6;margin:14px 0;max-width:30ch}
.footbar{border-top:1px solid var(--line)}
.footbar .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:22px var(--gut)}
.nilo{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;display:flex;align-items:center;gap:9px}
.nilo b{color:var(--muted);font-weight:500}
.nilo .spark{width:6px;height:6px;border-radius:50%;background:var(--life-soft);box-shadow:0 0 8px var(--life-soft)}

/* ---- map hint ---- */
.maphint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:40;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;pointer-events:none;transition:opacity .4s}
.maphint kbd{color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 6px}

/* hero grid helper for home */
.hero-grid{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:120px}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:36px}}

/* ===========================================================
   FEATURE MINI-VISUALS (product pages) — CSS-only, theme-aware
   =========================================================== */
.featvis>*{width:100%}

/* browser frame (career site mock) */
.browserframe{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-2)}
.bf-bar{height:28px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 10px}
.bf-dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.bf-url{margin-left:8px;font-family:var(--mono);font-size:10px;color:var(--faint)}
.bf-body{padding:14px;display:grid;gap:8px}
.jobcard{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:7px;padding:11px 12px;background:var(--panel)}
.jobcard .jt{font-weight:700;font-size:13px}
.jobcard .jm{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:2px}
.jobcard .japply{font-family:var(--mono);font-size:10px;color:var(--life);border:1px solid var(--bub-me-bd);border-radius:5px;padding:4px 9px;white-space:nowrap}

/* labeled bars (campaigns, cost, ROI, segments) */
.barlist{display:grid;gap:13px}
.barrow{display:grid;grid-template-columns:92px 1fr 48px;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.bartrack{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.barfill{height:100%;background:linear-gradient(90deg,var(--life-soft),var(--life));border-radius:4px}
.barval{color:var(--text);text-align:right}

/* mini thread (static) */
.minithread{display:grid;gap:8px}
.minithread .mb{max-width:86%;padding:8px 11px;border-radius:11px;font-size:12.5px;line-height:1.35}
.minithread .them{background:var(--bub-them);border-bottom-left-radius:3px}
.minithread .me{background:var(--bub-me);border:1px solid var(--bub-me-bd);margin-left:auto;border-bottom-right-radius:3px}
.minithread .me .tk{font-family:var(--mono);font-size:9px;color:var(--life);margin-left:6px}

/* checks list */
.checks{display:grid;gap:11px}
.checks .ck{display:grid;grid-template-columns:18px 1fr auto;gap:11px;align-items:center;font-size:13px}
.checks .ck::before{content:"";width:17px;height:17px;border-radius:5px;background:var(--bub-me);border:1px solid var(--bub-me-bd);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-6' stroke='%2327E06B' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.checks .ck.pend::before{background-image:none;background:transparent;border-style:dashed}
.checks .ck .v{font-family:var(--mono);font-size:10px;color:var(--life)}
.checks .ck.pend .v{color:var(--cost)}

/* key-value (CV parse, scorecard, placement) */
.kv{display:grid;gap:0}
.kv .kvr{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}
.kv .kvr:last-child{border:none}
.kv .k{color:var(--muted);font-family:var(--mono);font-size:11px}
.kv .vv{font-weight:600;font-size:13px}

/* fit-score gauge */
.fitgauge{display:flex;align-items:center;gap:20px}
.fitgauge .ring{width:96px;height:96px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--life) calc(var(--v,87)*1%),var(--line) 0)}
.fitgauge .ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--panel)}
.fitgauge .ring b{position:relative;font-family:var(--mono);font-weight:800;font-size:23px}
.fitgauge .ring b span{font-size:11px;color:var(--muted)}
.fitgauge .fg .t{font-weight:700;font-size:15px}
.fitgauge .fg .s{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:5px}

/* dot field (talent pool / activation) */
.dotfield2{display:grid;grid-template-columns:repeat(14,1fr);gap:8px}
.dotfield2 i{aspect-ratio:1;border-radius:50%;background:var(--dormant)}
.dotfield2 i.on{background:var(--life);box-shadow:0 0 7px var(--life);animation:dpulse 2.6s ease-in-out infinite}
@keyframes dpulse{0%,100%{opacity:.55}50%{opacity:1}}

/* mini kanban */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kcol{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:9px}
.kcol h5{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.kcard{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:6px}
.kcard:last-child{margin-bottom:0}
.kbadge{font-family:var(--mono);font-size:9px;color:var(--life);border:1px solid var(--bub-me-bd);border-radius:4px;padding:2px 5px;flex:none}

/* funnel */
.funnel{display:grid;gap:9px}
.fnrow{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.fnbar{height:30px;border-radius:6px;background:linear-gradient(90deg,var(--life-soft),var(--life));display:flex;align-items:center;padding:0 11px;color:#04130A;font-weight:700;font-size:11px;min-width:40px}
[data-theme="light"] .fnbar{color:#fff}

/* speed gauge */
.speed .big{font-family:var(--mono);font-size:clamp(38px,5vw,52px);font-weight:800;color:var(--life);letter-spacing:-.02em;line-height:1}
.speed .track{height:8px;background:var(--line);border-radius:4px;margin:16px 0 9px;position:relative;overflow:hidden}
.speed .track i{position:absolute;left:0;top:0;bottom:0;width:20%;background:linear-gradient(90deg,var(--life-soft),var(--life));border-radius:4px}
.speed .lab{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* journey (product overview hero) */
.journey{display:grid}
.jstep{display:grid;grid-template-columns:24px 1fr;gap:16px;position:relative;padding-bottom:24px}
.jstep:last-child{padding-bottom:0}
.jstep .jd{width:14px;height:14px;border-radius:50%;border:2px solid var(--life);background:var(--life);box-shadow:0 0 10px var(--life);margin-top:3px;z-index:1;animation:dpulse 2.6s ease-in-out infinite}
.jstep:nth-child(2) .jd{animation-delay:.3s}.jstep:nth-child(3) .jd{animation-delay:.6s}.jstep:nth-child(4) .jd{animation-delay:.9s}.jstep:nth-child(5) .jd{animation-delay:1.2s}
.jstep::before{content:"";position:absolute;left:6px;top:18px;bottom:0;width:2px;background:linear-gradient(var(--life),var(--line))}
.jstep:last-child::before{display:none}
.jstep .jt{font-weight:700;font-size:15px}
.jstep .js{color:var(--muted);font-size:12.5px;margin-top:3px}