:root{
  --bg:#05070c;--bg2:#080e18;--navy:#0a1628;
  --cyan:#4fd2e8;--blue:#3d8bff;--violet:#7b6cff;--white:#eef5fc;--offwhite:#c8d8e8;
  --text:#d5e2ef;--muted:#6a8399;--line:rgba(79,210,232,.12);
  --glass:rgba(8,14,24,.78);--max:1180px;
  --cyan-glow:0 0 30px rgba(79,210,232,.12);
  --blue-glow:0 0 30px rgba(61,139,255,.10);
  --card:rgba(10,20,38,.65);--card2:rgba(14,26,48,.55);
  --accent2:#e3f49a;--green:#4ade80;--amber:#fbbf24;--red:#f87171;
  --nav-bg:rgba(5,7,12,.88);
}

/* ═══ Day / Light Theme ═══ */
html[data-theme="light"]{
  --bg:#f4f7fb;
  --bg2:#e8eef7;
  --navy:#0f1f33;
  --text:#0f1f33;
  --muted:#4a5f78;
  --line:rgba(15,31,51,.12);
  --glass:rgba(255,255,255,.85);
  --card:rgba(255,255,255,.92);
  --card2:rgba(240,245,252,.9);
  --white:#0f1f33;
  --cyan:#0e6a7e;
  --blue:#1e5fb8;
  --violet:#5a4bb8;
  --cyan-glow:0 0 24px rgba(14,106,126,.18);
  --blue-glow:0 0 24px rgba(30,95,184,.15);
  --accent2:#3d5a2a;
  --green:#1f6b3f;
  --amber:#a36c0f;
  --red:#b13a2f;
  --nav-bg:rgba(244,247,251,.92);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.62 Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;overflow-x:hidden}
html[data-theme="light"] body{background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
.sec{padding:108px 0;position:relative}
.kicker{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--cyan);margin-bottom:8px}
h1,h2,h3{letter-spacing:-.04em;color:var(--white);margin:.4rem 0 1rem}
h2{font-size:clamp(2rem,4.8vw,4.2rem);line-height:.96}
h3{font-size:1.35rem;line-height:1.1}
.lede{max-width:42rem;color:var(--muted);font-size:1.05rem}
.muted{color:var(--muted)}
.note{font-size:.78rem;color:#5a7288}
strong{color:var(--white)}

/* ─── Nav ─── */
.nav{position:fixed;inset:0 0 auto;z-index:50;background:var(--nav-bg);backdrop-filter:blur(24px) saturate(1.4);border-bottom:1px solid var(--line)}
.navin{height:72px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{height:34px;width:auto}
.brand small{display:block;font-size:.58rem;color:var(--muted);letter-spacing:.12em}
.navlinks{display:flex;gap:14px;margin-left:auto;font-size:.78rem;color:var(--muted)}
.navlinks a{transition:color .2s}
.navlinks a:hover{color:var(--cyan)}
html[data-theme="light"] .navlinks a{color:var(--muted)}
html[data-theme="light"] .navlinks a:hover{color:var(--cyan)}
.menu{display:none;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:999px;padding:7px 12px;font-weight:700}

/* Theme Toggle Button */
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--text);font-size:18px;line-height:1;
  cursor:pointer;transition:all .2s;
}
html[data-theme="light"] .theme-btn{background:rgba(15,31,51,.06);}
.theme-btn:hover{border-color:var(--cyan);color:var(--cyan);}

.progress{position:fixed;top:72px;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));z-index:60;box-shadow:0 0 14px var(--cyan)}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:rgba(10,18,32,.6);color:var(--white);font-weight:700;transition:all .3s;font-size:.92rem}
.btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--cyan-glow)}
.btn.primary{background:linear-gradient(135deg,#3d8bff,#2b6fe0);border-color:rgba(61,139,255,.5);color:#fff}
.btn.primary:hover{color:#fff;filter:brightness(1.15);box-shadow:var(--blue-glow)}
.btn.cyan{background:rgba(79,210,232,.12);border-color:rgba(79,210,232,.3);color:var(--cyan)}
.btn.cyan:hover{background:rgba(79,210,232,.2)}
html[data-theme="light"] .btn{
  background:rgba(15,31,51,.05);
  color:var(--text);
  border-color:var(--line);
}
html[data-theme="light"] .btn.primary{
  background:linear-gradient(135deg,#1e5fb8,#0e6a7e);
  color:#fff;
  border:none;
}
html[data-theme="light"] .btn.cyan{
  background:rgba(14,106,126,.1);
  color:var(--cyan);
}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.demo-btn{position:relative;overflow:hidden}
.demo-btn::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(transparent,rgba(79,210,232,.15),transparent 30%);animation:demoSpin 4s linear infinite;opacity:0;transition:opacity .3s}
.demo-btn:hover::before{opacity:1}

/* ═══ Top Buttons in Hero (simplified, no commercial) ═══ */
.top-actions{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;
}
.top-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;font-size:.92rem;font-weight:700;
  min-height:46px;
}
.top-btn.primary{
  background:linear-gradient(135deg,#3d8bff,#2b6fe0);
  border:none;
  color:#fff;
}
html[data-theme="light"] .top-btn{
  background:rgba(15,31,51,.06);
  color:var(--text);
  border-color:var(--line);
}
html[data-theme="light"] .top-btn.primary{
  background:linear-gradient(135deg,#1e5fb8,#0e6a7e);
  color:#fff;
}
@keyframes demoSpin{to{transform:rotate(360deg)}}

/* ─── Hero ─── */
.hero{min-height:100svh;display:flex;align-items:flex-end;padding:120px 0 80px;position:relative;isolation:isolate}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-shade{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 30%,transparent 8%,rgba(5,7,12,.65) 65%),linear-gradient(180deg,rgba(5,7,12,.15),rgba(5,7,12,.92))}
html[data-theme="light"] .hero-shade{background:radial-gradient(ellipse at 50% 30%,transparent 8%,rgba(244,247,251,.55) 65%),linear-gradient(180deg,rgba(244,247,251,.25),rgba(244,247,251,.88))}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(3.2rem,8.5vw,7.6rem);line-height:.84;margin:14px 0}
.hero h1 span{display:block;font-size:.32em;letter-spacing:.06em;color:var(--cyan);margin-top:14px;font-weight:600}
.powered{margin-top:20px;color:var(--cyan);font-size:.8rem;letter-spacing:.18em;font-weight:800}
.meta-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:52px}
.meta{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.meta b{display:block;font-size:1.05rem;color:var(--white)}
html[data-theme="light"] .meta b{color:var(--text)}
.meta span{font-size:.72rem;color:var(--muted)}

/* ─── Cards ─── */
.card{padding:28px;border-radius:20px;background:var(--card);border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-3px);box-shadow:var(--cyan-glow)}
.card h3{font-size:1.3rem;margin:.3rem 0 .6rem}
.card p{color:var(--muted);margin-bottom:0}
.card-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(79,210,232,.06);font-size:1.2rem;margin-bottom:16px;color:var(--cyan)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* ─── Section headers ─── */
.sec-head{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:end;margin-bottom:36px}
.sec-head p{color:var(--muted);font-size:1rem;margin:0}

/* ─── Flow diagram ─── */
.flow{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;align-items:center}
.flow .node{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card2);font-size:.82rem;font-weight:700;color:var(--white);position:relative;white-space:nowrap}
.flow .node small{display:block;font-weight:400;color:var(--muted);font-size:.72rem}
.flow .arrow{color:var(--cyan);font-weight:900;font-size:1rem}

/* ─── Architecture diagrams ─── */
.arch-box{border-radius:24px;padding:32px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.arch-box::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(79,210,232,.04),transparent 60%);pointer-events:none}
.arch-flow{display:grid;gap:10px;margin-top:20px}
.arch-step{padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card2);display:flex;align-items:center;gap:10px;font-weight:700;font-size:.88rem}
.arch-step .dot{width:10px;height:10px;border-radius:50%;background:var(--cyan);flex-shrink:0;animation:pulse 2s infinite}
.arch-step .sub{font-weight:400;color:var(--muted);font-size:.8rem;margin-left:auto}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ─── Grid patterns ─── */
.grid-bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(79,210,232,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(79,210,232,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}

/* ─── Problem section ─── */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start}
.vs .x{color:var(--cyan);font-weight:900;font-size:1.4rem;padding-top:80px}

/* ─── Vision grid ─── */
.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vision-card{padding:26px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-align:center;transition:all .3s}
.vision-card:hover{border-color:rgba(79,210,232,.3);box-shadow:var(--cyan-glow)}
.vision-card .icon{font-size:1.8rem;margin-bottom:12px}
.vision-card h3{font-size:1.05rem;margin:.3rem 0}
.vision-card p{font-size:.84rem;color:var(--muted);margin:0}

/* ─── Living demo ─── */
.demo-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.demo-card{padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--line);min-height:200px;position:relative;overflow:hidden;transition:all .3s}
.demo-card:hover{border-color:rgba(79,210,232,.25)}
.demo-card h3{font-size:1.15rem;margin:.2rem 0 .5rem}
.demo-card p{color:var(--muted);font-size:.86rem;margin:0}
.s4{grid-column:span 4}.s6{grid-column:span 6}.s8{grid-column:span 8}.s12{grid-column:span 12}
.demo-tag{display:inline-block;border:1px solid rgba(255,196,80,.3);color:#f3d48a;border-radius:999px;padding:3px 10px;font-size:.64rem;font-weight:800;letter-spacing:.1em;margin-bottom:10px}
.rotate-content{animation:fadeRotate 12s infinite}
@keyframes fadeRotate{0%,30%{opacity:1}35%,65%{opacity:0}70%,100%{opacity:1}}

/* ─── ZAR Live feed ─── */
.live-feed{display:grid;gap:8px}
.live-event{padding:12px 16px;border-radius:12px;background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:.86rem;animation:slideIn .5s ease-out both}
.live-event .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse 1.5s infinite}
.live-event:nth-child(2){animation-delay:.15s}
.live-event:nth-child(3){animation-delay:.3s}
.live-event:nth-child(4){animation-delay:.45s}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* ─── Engineering tools ─── */
.tool-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.tool-card{padding:24px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-align:center;cursor:default;transition:all .35s;position:relative;overflow:hidden}
.tool-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(79,210,232,.08),transparent 70%);opacity:0;transition:opacity .35s}
.tool-card:hover::before{opacity:1}
.tool-card:hover{border-color:rgba(79,210,232,.3);transform:translateY(-4px);box-shadow:var(--cyan-glow)}
.tool-card .icon{font-size:2rem;margin-bottom:10px}
.tool-card h3{font-size:1rem;margin:.2rem 0}
.tool-card p{font-size:.78rem;color:var(--muted);margin:0}

/* ─── Workspace ─── */
.workspace{border-radius:24px;padding:32px;background:var(--card);border:1px solid var(--line);font-family:'SF Mono',ui-monospace,Menlo,monospace}
.ws-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(79,210,232,.06);font-size:.88rem}
.ws-row .label{color:var(--muted)}
.ws-row .val{color:var(--cyan);font-weight:700}

/* ─── Detached system ─── */
.detach-tree{display:grid;gap:10px;margin-top:20px}
.branch{padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:var(--card2);display:flex;align-items:center;gap:12px}
.branch .tag{padding:4px 10px;border-radius:8px;font-size:.7rem;font-weight:800;letter-spacing:.08em;flex-shrink:0}
.branch .tag-simple{background:rgba(74,222,128,.12);color:var(--green);border:1px solid rgba(74,222,128,.2)}
.branch .tag-data{background:rgba(79,210,232,.1);color:var(--cyan);border:1px solid rgba(79,210,232,.2)}
.branch .tag-validate{background:rgba(251,191,36,.1);color:var(--amber);border:1px solid rgba(251,191,36,.2)}
.branch .tag-ai{background:rgba(123,108,255,.1);color:var(--violet);border:1px solid rgba(123,108,255,.2)}
.branch .desc{font-size:.88rem;color:var(--muted)}

/* ─── +2 Systems counter ─── */
.plus2{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:start}
.plus2-counter{padding:36px;border-radius:24px;background:var(--card);border:1px solid var(--line);text-align:center}
.plus2-num{font-size:clamp(5rem,12vw,9rem);font-weight:950;line-height:.8;color:var(--cyan);display:block}
.plus2-label{font-size:1.6rem;color:var(--white);margin-top:8px}
.month-timeline{display:grid;gap:8px}
.month-item{padding:14px 18px;border-radius:14px;background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;gap:12px}
.month-item .mon{font-weight:800;color:var(--cyan);font-size:.82rem;min-width:72px}
.month-item .tools{color:var(--muted);font-size:.86rem}

/* ─── NeuralOps core ─── */
.neural-core{position:relative;border-radius:24px;overflow:hidden;min-height:500px;background:var(--card);border:1px solid var(--line)}
#neural-canvas{width:100%;height:500px;display:block}
.cluster-labels{position:absolute;inset:0;pointer-events:none}
.cluster-label{position:absolute;padding:8px 14px;border-radius:10px;background:rgba(5,7,12,.75);border:1px solid var(--line);font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--cyan);backdrop-filter:blur(8px)}

/* ─── Activity bar ─── */
.activity-bar{border-radius:20px;padding:28px;background:var(--card);border:1px solid var(--line)}
.bar-track{height:18px;border-radius:999px;background:rgba(79,210,232,.08);overflow:hidden;margin:16px 0}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan));width:0;transition:width 2s ease-out}
.bar-fill.on{width:74%}

/* ─── RSS pipeline ─── */
.rss-pipeline{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;align-items:center}
.rss-step{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card2);font-size:.82rem;font-weight:700;color:var(--white)}
.rss-arrow{color:var(--cyan);font-weight:900}

/* ─── SEO architecture ─── */
.seo-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.seo-item{padding:18px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:center}
.seo-item .badge{display:inline-block;padding:6px 12px;border-radius:8px;font-size:.72rem;font-weight:900;letter-spacing:.1em;background:rgba(79,210,232,.1);color:var(--cyan);border:1px solid rgba(79,210,232,.2);margin-bottom:8px}
.seo-item p{font-size:.82rem;color:var(--muted);margin:0}

/* ─── Since last visit ─── */
.return-visit{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.return-item{padding:20px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:center}
.return-item .num{font-size:2rem;font-weight:900;color:var(--cyan)}
.return-item .label{font-size:.82rem;color:var(--muted);margin-top:4px}

/* ─── 7 AINNA Models (official stack) ─── */
.models{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:20px}
.model{padding:14px 8px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-align:center;transition:all .25s;min-height:86px;display:flex;flex-direction:column;justify-content:center}
.model:hover{border-color:rgba(79,210,232,.4);box-shadow:var(--cyan-glow);transform:translateY(-2px)}
.model .tag{display:inline-block;font-size:.56rem;font-weight:900;letter-spacing:.04em;color:#05070c;background:#4fd2e8;padding:1px 6px;border-radius:3px;margin-bottom:5px}
.model .name{font-size:.9rem;font-weight:800;color:#fff;line-height:1.02}
.model .role{font-size:.63rem;color:#a9c1d8;margin-top:2px;line-height:1.15}
.model .provider{font-size:.56rem;color:#5e778b;margin-top:1px}

/* Responsive 7-model grid */
@media(max-width:1100px){.models{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.models{grid-template-columns:repeat(3,1fr);gap:8px}.model{padding:12px 6px;min-height:78px}}
@media(max-width:480px){.models{grid-template-columns:repeat(2,1fr)}}

/* ─── Governance ─── */
.gov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gov-card{padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.gov-card .check{color:var(--green);font-weight:900;font-size:1.1rem;margin-bottom:6px}
.gov-card h3{font-size:1.05rem;margin:.2rem 0}
.gov-card p{font-size:.84rem;color:var(--muted);margin:0}

/* ─── Before/After ─── */
.transform{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start}
.transform .arrow-col{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:40px;color:var(--cyan);font-size:2rem}
.transform .panel{padding:28px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.transform .panel h3{font-size:1.3rem;margin-top:0}
.transform .panel ul{padding-left:18px;color:var(--muted);font-size:.9rem}
.transform .panel ul li{margin:6px 0}

/* ─── Pricing ─── */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.price-card{border-radius:24px;padding:32px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.price-card.featured{border-color:var(--cyan)}
.price-card.featured::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(79,210,232,.06),transparent 60%);pointer-events:none}
.price-label{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:800}
.price{font-size:clamp(2.8rem,6vw,5rem);font-weight:950;line-height:1;margin:.5rem 0;color:var(--cyan)}
.price-note{font-size:.88rem;color:var(--muted);margin-bottom:16px}
.price-card ul{padding-left:18px;color:var(--muted);font-size:.9rem}
.price-card ul li{margin:6px 0}
.price-card .featured-tag{position:absolute;top:20px;right:-30px;transform:rotate(36deg);background:var(--cyan);color:var(--bg);font-size:.64rem;font-weight:950;padding:5px 38px}

/* ─── Commercial summary ─── */
.commercial-summary{border-radius:24px;padding:32px;background:var(--card);border:1px solid var(--line);text-align:center}
.cs-flow{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px;align-items:center}
.cs-item{padding:16px 22px;border-radius:14px;background:var(--card2);border:1px solid var(--line)}
.cs-item .big{font-size:1.6rem;font-weight:900;color:var(--cyan);display:block}
.cs-item .sm{font-size:.82rem;color:var(--muted)}
.cs-plus{font-size:2rem;color:var(--cyan);font-weight:900}

/* ─── Not maintenance ─── */
.not-maint{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;text-align:center}
.not-maint .bad{text-decoration:line-through;color:var(--red);font-size:1.6rem;font-weight:900}
.not-maint .good{color:var(--green);font-size:1.6rem;font-weight:900}
.not-maint .vs-x{color:var(--muted);font-size:2rem;font-weight:900}

/* ─── Roadmap ─── */
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.phase{padding:24px;border-radius:20px;background:var(--card);border:1px solid var(--line);min-height:280px}
.phase-num{font-size:3rem;font-weight:950;color:var(--cyan);line-height:1}
.phase h3{font-size:1.2rem;margin:.3rem 0}
.phase ul{padding-left:16px;color:var(--muted);font-size:.84rem}
.phase ul li{margin:5px 0}

/* ─── Growth chart ─── */
.growth-chart{display:flex;align-items:end;gap:8px;height:300px;margin-top:20px;padding:20px 0}
.growth-bar{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--cyan),rgba(79,210,232,.3));position:relative;transition:height 1.5s ease-out;min-height:20px}
.growth-bar .label{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);font-size:.68rem;color:var(--muted);white-space:nowrap}
.growth-bar .val{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:.72rem;color:var(--cyan);font-weight:800}

/* ─── Ecosystem ─── */
.eco-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.eco-card{padding:24px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.eco-card h3{font-size:1.15rem;margin:.2rem 0 .5rem}
.eco-card p{font-size:.86rem;color:var(--muted);margin:0}

/* ─── Why ZAR ─── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why-card{padding:24px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.why-card h3{font-size:1.1rem;margin:.2rem 0 .4rem}
.why-card p{font-size:.84rem;color:var(--muted);margin:0}

/* ─── Final ─── */
.final{padding:120px 0 60px;text-align:center}
.final h2{font-size:clamp(2.8rem,7vw,6.5rem);line-height:.88;margin:.3rem auto 1rem;max-width:1000px}
.final h2 span{color:var(--cyan)}
.final .subline{font-size:clamp(1.2rem,2.5vw,1.8rem);color:var(--white);font-weight:800;letter-spacing:.04em}
.final .verbs{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:28px 0}
.final .verb{padding:12px 20px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-weight:800;color:var(--cyan);font-size:1rem}

.footer-strip{padding:24px 0;color:var(--muted);font-size:.76rem;text-align:center;border-top:1px solid var(--line);margin-top:40px}

/* ═══════════════════════════════════════════════════════════════
   MISSING UTILITIES + COMPONENTS — Repair & Revamp
   Added to make current index.php render fully and consistently
═══════════════════════════════════════════════════════════════ */

/* Grid helpers used throughout */
.grid-2,.grid-3,.grid-4,.two,.three,.four,.six{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.two{grid-template-columns:1fr 1fr}
.three{grid-template-columns:repeat(3,1fr)}
.four{grid-template-columns:repeat(4,1fr)}
.six{grid-template-columns:repeat(3,1fr)}

/* Utility spans */
.s4,.s6,.s8,.s12{grid-column:span 4}
@media(max-width:960px){.s4,.s6,.s8,.s12{grid-column:span 6}}
@media(max-width:640px){.s4,.s6,.s8,.s12{grid-column:1}}

/* Base cards & flow */
.card{padding:24px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flow.row{flex-direction:row}
.node{padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card2);font-size:.82rem;font-weight:700;color:var(--white);white-space:nowrap}
.node small{display:block;font-size:.64rem;font-weight:400;color:var(--muted)}

/* Pill / tags / buttons */
.pill{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card2);font-size:.78rem;font-weight:700}
.pill.on{background:rgba(79,210,232,.12);border-color:rgba(79,210,232,.35);color:var(--cyan)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* Demo / living site mocks */
.live-shell{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
.mock{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.mock-bar{padding:10px 14px;background:rgba(0,0,0,.3);font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.mock-bar i{width:8px;height:8px;border-radius:50%;background:#f87171;display:inline-block}
.mock-body{padding:14px;background:#05070c}
.mock-card{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px}
.mock-card:last-child{margin-bottom:0}

/* Activity bars */
.bar-track{height:14px;border-radius:999px;background:rgba(79,210,232,.08);overflow:hidden;margin:12px 0}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width 1.6s ease}
.bar{height:6px;background:rgba(79,210,232,.15);border-radius:999px;position:relative;margin:10px 0}
.bar i{position:absolute;left:0;top:0;height:100%;width:74%;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:999px}
.act-score{font-size:1.6rem;font-weight:900;color:var(--cyan)}

/* Architecture tree */
.arch-tree{display:grid;gap:8px}
.arch-row{display:flex;gap:8px;flex-wrap:wrap}
.arch-flow{display:grid;gap:8px}

/* Huge +2 detached systems */
.huge{font-size:clamp(4.6rem,11vw,8.2rem);font-weight:950;line-height:.82;color:var(--cyan);letter-spacing:-.03em}
.timeline{display:grid;gap:8px;margin-top:20px}
.tl{padding:12px 16px;border-radius:12px;background:var(--card2);border:1px solid var(--line);font-size:.88rem}
.tl b{color:var(--cyan)}

/* Neural core canvas container */
.neural-core{position:relative;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);min-height:420px}
.neuralops-viz{position:relative;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);min-height:420px}
.cluster-labels{position:absolute;inset:0;pointer-events:none}
.cluster-label{position:absolute;padding:6px 12px;border-radius:8px;background:rgba(5,7,12,.8);border:1px solid var(--line);font-size:.64rem;font-weight:800;letter-spacing:.08em;color:var(--cyan)}

/* Price / commercial */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.price{padding:26px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.price.featured{border-color:var(--cyan);position:relative}
.price .amt{font-size:clamp(2.4rem,5.6vw,3.8rem);font-weight:950;line-height:1;color:var(--cyan);margin:.4rem 0}
.price ul{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:.88rem}
.price ul li{margin:5px 0}
.formula{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.formula .line{font-size:1.05rem;font-weight:700}
.formula .plus{color:var(--cyan);font-size:1.4rem;font-weight:900;justify-self:center}

/* Roadmap */
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.phase{padding:20px;border-radius:16px;background:var(--card);border:1px solid var(--line);min-height:240px}
.phase-num{font-size:2.6rem;font-weight:950;color:var(--cyan);line-height:1}
.phase h3{margin:.2rem 0 .6rem}

/* Growth chart */
.growth-chart{display:flex;align-items:end;gap:6px;height:220px;padding:16px 0}
.growth-bar{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--cyan),rgba(79,210,232,.35));min-height:18px;position:relative;transition:height 1.4s ease}
.growth-bar .label{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:.62rem;color:var(--muted);white-space:nowrap}
.growth-bar .val{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:.64rem;font-weight:800;color:var(--cyan)}

/* Verbs / final */
.verbs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0}
.verb{padding:8px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-weight:800;color:var(--cyan);font-size:.92rem}

/* Workspace */
.workspace{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px}
.ws-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(79,210,232,.08);font-size:.9rem}
.ws-row .label{color:var(--muted)}
.ws-row .val{color:var(--cyan);font-weight:700}

/* Vision / Why / Eco / Gov grids */
.vision-grid,.why-grid,.eco-grid,.gov-grid{display:grid;gap:12px}
.vision-grid{grid-template-columns:repeat(3,1fr)}
.vision-card,.why-card,.eco-card,.gov-card{padding:20px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.vision-card .icon,.why-card .icon{font-size:1.6rem;margin-bottom:8px}
.gov-card .check{color:var(--green);font-size:1.1rem;font-weight:900;margin-bottom:4px}

/* Tool cards */
.tool-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.tool-card{padding:18px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:center;transition:all .2s}
.tool-card:hover{border-color:rgba(79,210,232,.35);transform:translateY(-2px)}

/* Return visit */
.return-visit{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.return-item{padding:18px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:center}
.return-item .num{font-size:1.65rem;font-weight:900;color:var(--cyan)}
.return-item .label{font-size:.78rem;color:var(--muted);margin-top:2px}

/* Detached branch tags */
.branch{display:flex;gap:12px;align-items:center;padding:14px 18px;border-radius:14px;background:var(--card2);border:1px solid var(--line)}
.tag-simple{background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.25)}
.tag-data{background:rgba(79,210,232,.1);color:var(--cyan);border:1px solid rgba(79,210,232,.25)}
.tag-validate{background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.25)}
.tag-ai{background:rgba(123,108,255,.12);color:#7b6cff;border:1px solid rgba(123,108,255,.25)}

/* RSS + SEO */
.rss-pipeline,.pipeline{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.rss-step{padding:6px 11px;border:1px solid var(--line);border-radius:999px;font-size:.76rem;background:var(--card2)}
.seo-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.seo-item{padding:14px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-align:center;font-size:.84rem}
.badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.64rem;font-weight:900;background:rgba(79,210,232,.12);color:var(--cyan);margin-bottom:6px}

/* Plus2 / detached */
.plus2{display:grid;grid-template-columns:.7fr 1.3fr;gap:22px;align-items:start}
.plus2-counter{text-align:center;padding:26px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.plus2-num{font-size:clamp(4.2rem,9vw,7rem);font-weight:950;line-height:.78;color:var(--cyan)}
.plus2-label{font-size:1.35rem;color:var(--white);margin-top:4px}
.month-timeline{display:grid;gap:8px}
.month-item{padding:12px 16px;border-radius:12px;background:var(--card2);border:1px solid var(--line);display:flex;gap:12px;align-items:center}
.month-item .mon{color:var(--cyan);font-weight:800;font-size:.78rem;min-width:64px}

/* Not maintenance comparison */
.not-maint{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;text-align:center}
.bad{text-decoration:line-through;color:#f87171}
.good{color:#4ade80;font-weight:800}
.vs-x{font-size:1.8rem;color:var(--muted)}

/* Transform / before-after */
.transform{display:grid;grid-template-columns:1fr auto 1fr;gap:14px}
.transform .arrow-col{display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:1.6rem}
.transform .panel{padding:22px;border-radius:16px;background:var(--card);border:1px solid var(--line)}

/* Misc */
.x{font-size:1.4rem;font-weight:900;color:var(--cyan);padding:0 8px}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start}
.lede{color:var(--muted);font-size:1.02rem;max-width:46rem}
.note{font-size:.74rem;color:#5a7288}
.kicker{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--cyan);margin-bottom:6px}
.sec-head{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:end;margin-bottom:22px}
.sec-head p{color:var(--muted);margin:0}

/* Pricing commercial cards (legacy names) */
.price-card{border-radius:20px;padding:26px;background:var(--card);border:1px solid var(--line)}
.price-card.featured{border-color:var(--cyan)}
.price{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:950;color:var(--cyan);line-height:1;margin:.3rem 0}
.price-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}

/* Commercial summary */
.commercial-summary{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}
.cs-flow{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.cs-item{padding:14px 18px;border-radius:12px;background:var(--card2);border:1px solid var(--line)}
.cs-item .big{font-size:1.45rem;font-weight:900;color:var(--cyan);display:block}
.cs-item .sm{font-size:.76rem;color:var(--muted)}
.cs-plus{font-size:1.6rem;color:var(--cyan);font-weight:900}

/* Final polish */
.final h2{font-size:clamp(2.4rem,5.8vw,4.8rem);line-height:.9;margin:.25rem 0}
.subline{font-size:1.35rem;font-weight:800;color:var(--white);letter-spacing:.02em}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(10,18,32,.55);color:var(--white);font-weight:700;font-size:.9rem;transition:all .2s}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.btn.primary{background:linear-gradient(135deg,#3d8bff,#2b6fe0);border:none;color:#fff}
.btn.cyan{background:rgba(79,210,232,.1);border-color:rgba(79,210,232,.3);color:var(--cyan)}
.btn.cyan:hover{background:rgba(79,210,232,.18)}

/* Nav + progress (reinforce) */
.nav{position:fixed;inset:0 0 auto;z-index:60;background:rgba(5,7,12,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.navin{height:68px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{height:30px}
.navlinks{display:flex;gap:14px;margin-left:auto;font-size:.78rem;color:var(--muted)}
.menu{display:none;border:1px solid var(--line);background:transparent;color:#fff;border-radius:999px;padding:7px 13px;font-weight:700}
.progress{position:fixed;top:68px;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));z-index:70}

/* Hero */
.hero{min-height:92svh;display:flex;align-items:flex-end;padding:110px 0 70px;position:relative}
#hero-canvas{position:absolute;inset:0;z-index:0}
.hero-shade{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 28%,transparent 6%,rgba(5,7,12,.7) 62%),linear-gradient(180deg,rgba(5,7,12,.1),rgba(5,7,12,.9))}
.powered{color:var(--cyan);font-size:.74rem;letter-spacing:.18em;font-weight:800;margin-top:10px}
.meta-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:46px}
.meta{padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.meta b{display:block;font-size:.98rem;color:#fff}
.meta span{font-size:.66rem;color:var(--muted)}

/* Responsive fixes */
@media(max-width:960px){
  .grid-2,.grid-3,.grid-4,.two,.three,.four,.six,.vision-grid,.why-grid,.eco-grid,.gov-grid,.return-visit,.road{grid-template-columns:1fr 1fr}
  .price-grid,.plus2,.not-maint,.transform,.live-shell{grid-template-columns:1fr}
  .tool-grid{grid-template-columns:repeat(3,1fr)}
  .six{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4,.two,.three,.four,.six,.vision-grid,.why-grid,.eco-grid,.gov-grid,.return-visit,.road,.tool-grid,.six{grid-template-columns:1fr}
  .meta-strip{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
  .menu{display:block}
  .navlinks.open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:rgba(5,7,12,.96);padding:16px;border-bottom:1px solid var(--line)}
}

/* ═══ Live feed, road, phases, plus2, mocks (used by index.php + JS) ═══ */
.live-feed{display:grid;gap:6px}
.live-event{padding:8px 12px;border-radius:10px;background:var(--card2);border:1px solid var(--line);display:flex;gap:8px;font-size:.82rem}
.live-event .dot{width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;margin-top:6px}
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.phase{padding:18px;border-radius:16px;background:var(--card);border:1px solid var(--line);min-height:220px}
.phase-num{font-size:2.4rem;font-weight:950;color:var(--cyan);line-height:1}
.phase h3{margin:.15rem 0}
.plus2{display:grid;grid-template-columns:.75fr 1.25fr;gap:18px;align-items:start}
.plus2-counter{padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-align:center}
.plus2-num{font-size:clamp(3.8rem,9vw,6.4rem);font-weight:950;color:var(--cyan);line-height:.78}
.plus2-label{font-size:1.1rem;color:#fff;font-weight:700;margin-top:4px}
.month-timeline{display:grid;gap:6px}
.month-item{padding:10px 14px;border-radius:11px;background:var(--card2);border:1px solid var(--line);display:flex;gap:10px;font-size:.86rem}
.month-item .mon{color:var(--cyan);font-weight:800;min-width:58px}
.transform{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
.transform .arrow-col{display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--cyan)}
.not-maint{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;text-align:center}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.price-card{padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.price-card.featured{border-color:var(--cyan)}
.formula{padding:18px 22px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:center}
.mock{display:block}
.mock-card{background:#0a121f;border:1px solid var(--line);border-radius:10px;padding:12px;margin:6px 0}
#demo-rotate{position:relative;min-height:120px}
#live-feed{min-height:80px}

/* Defensive rules for included cyberpunk globe footer (shared component) */
.cyber-footer,.cyber-footer-link,.cyber-globe-btn,.cyber-globe-wrapper,.ainna-investor-bar-close{font-size:.78rem}
.cyber-badge-beta,.cyber-badge-enterprise,.cyber-badge-featured,.cyber-badge-hub,.cyber-badge-new,.cyber-badge-red,.cyber-badge-scenarios{padding:1px 6px;border-radius:3px;font-size:.62rem;background:rgba(79,210,232,.12);border:1px solid rgba(79,210,232,.25);color:var(--cyan)}

/* ─── Reveal animation ─── */
.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.22,1,.36,1)}
.reveal.on{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* ─── Responsive ─── */
@media(max-width:960px){
  .navlinks{display:none}
  .menu{display:block}
  .navlinks.open{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:rgba(5,7,12,.96);backdrop-filter:blur(24px);padding:20px;gap:14px;border-bottom:1px solid var(--line)}
  .meta-strip,.four,.seo-flow,.return-visit,.gov-grid,.roadmap,.model-grid,.models{grid-template-columns:1fr 1fr}
  .two,.vs,.transform,.pricing,.plus2,.not-maint,.eco-grid,.sec-head{grid-template-columns:1fr}
  .vs .x{padding:8px 0;text-align:center}
  .transform .arrow-col{flex-direction:row;padding:12px 0}
  .tool-grid{grid-template-columns:repeat(3,1fr)}
  .six,.vision-grid,.why-grid{grid-template-columns:1fr 1fr}
  .demo-grid{grid-template-columns:1fr 1fr}
  .s4,.s6,.s8,.s12{grid-column:span 1}
  .cs-flow{flex-direction:column}
  .not-maint{grid-template-columns:1fr}
  .not-maint .vs-x{transform:rotate(90deg)}
  .cluster-labels{display:none}
}
@media(max-width:640px){
  .wrap{width:min(100% - 24px,var(--max))}
  .sec{padding:72px 0}
  .hero{padding-top:100px}
  .hero h1{font-size:clamp(2.8rem,16vw,5rem)}
  .meta-strip,.three,.four,.seo-flow,.return-visit,.gov-grid,.roadmap,.model-grid,.models,.six,.vision-grid,.why-grid,.tool-grid,.demo-grid{grid-template-columns:1fr}
  .s4,.s6,.s8,.s12{grid-column:1}
  .navin{height:64px}
  .progress{top:64px}
  .plus2{grid-template-columns:1fr}
  .growth-chart{height:200px}
  .neural-core{min-height:300px}
  #neural-canvas{height:300px}
}
@media print{
  .nav,.progress,.hero-actions,#hero-canvas,.hero-shade{display:none!important}
  body{background:#fff;color:#111}
  .sec{padding:32px 0}
  .card,.arch-box,.demo-card,.price-card,.phase,.workspace,.neural-core{box-shadow:none!important;backdrop-filter:none;border-color:#ddd}
  h1,h2,h3{color:#111}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0s!important;transition-duration:0s!important}
  .reveal{opacity:1;transform:none}
}