/* ai.css — AI Platform + Industries pages only. Load AFTER site.css. Scope: <body class="ai"> */
:root{--ai-1:#3E6AE1;--ai-2:#22d3ee;--ai-3:#8b5cf6;--ai-4:#f59e0b;--ai-ink:#f4f6ff;--ai-mute:#9aa3b5;--ai-line:rgba(255,255,255,.08);
--ai-panel:#0f1117;--ai-panel-2:#151822;--ai-glow:rgba(62,106,225,.45);--ai-glow-2:rgba(34,211,238,.35);
--ai-grad:linear-gradient(90deg,#3E6AE1,#22d3ee 55%,#8b5cf6);--ai-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--ai-r:14px;--ai-ease:cubic-bezier(.22,1,.36,1);--ai-t:.6s}
body.ai h2{letter-spacing:-.02em;font-weight:600;max-width:26ch}
body.ai h3{font-weight:600}
body.ai .section{padding:clamp(88px,11vw,136px) 0}
body.ai .lead{color:var(--ai-mute)}
body.ai .btn-primary:hover{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 14px 40px -10px var(--ai-glow)!important}
.ai-grad-text{background:var(--ai-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ai-kicker{display:inline-flex;align-items:center;gap:8px;font:500 .72rem/1 var(--ai-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ai-2);margin-bottom:18px}
.ai-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ai-2);box-shadow:0 0 10px var(--ai-2);animation:aiBlink 2s infinite}
@keyframes aiBlink{50%{opacity:.25}}
/* ---------- HERO ---------- */
.ai-hero{position:relative;overflow:hidden;padding:clamp(64px,9vw,120px) 0 clamp(56px,7vw,96px);background:var(--carbon)}
.ai-hero .wrap{position:relative;z-index:2}
.ai-hero h2{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.05;max-width:16ch;margin-bottom:.4em;color:var(--ai-ink)}
.ai-hero .lead{font-size:1.15rem;max-width:56ch}
.ai-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ai-hero .engineer-line{margin-top:34px;font:400 .8rem/1.5 var(--ai-mono);color:var(--ai-mute);max-width:60ch}
.ai-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ai-mesh i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.ai-mesh i:nth-child(1){width:60vw;height:60vw;left:-15vw;top:-30vw;background:var(--ai-1);animation:aiDrift 18s var(--ai-ease) infinite alternate}
.ai-mesh i:nth-child(2){width:40vw;height:40vw;right:-10vw;top:-10vw;background:var(--ai-3);opacity:.4;animation:aiDrift 22s var(--ai-ease) infinite alternate-reverse}
.ai-mesh i:nth-child(3){width:34vw;height:34vw;left:30vw;bottom:-25vw;background:var(--ai-2);opacity:.3;animation:aiDrift 26s var(--ai-ease) infinite alternate}
@keyframes aiDrift{to{transform:translate3d(8vw,6vw,0) scale(1.15)}}
.ai-gridlines{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(var(--ai-line) 1px,transparent 1px),linear-gradient(90deg,var(--ai-line) 1px,transparent 1px);background-size:64px 64px;
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 100%);animation:aiPan 40s linear infinite}
@keyframes aiPan{to{background-position:64px 64px}}
/* ---------- NEURAL NET (svg.ai-net, nodes built by ai.js) ---------- */
.ai-net{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.45}
.ai-net line{stroke:var(--ai-2);stroke-width:1;stroke-opacity:.3;stroke-dasharray:6 10;animation:aiDash 6s linear infinite}
.ai-net circle{fill:var(--ai-ink);transform-box:fill-box;transform-origin:center;animation:aiNode 4s ease-in-out infinite}
@keyframes aiDash{to{stroke-dashoffset:-160}}
@keyframes aiNode{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.6)}}
/* ---------- STREAMING TEXT ---------- */
.ai-type{color:var(--ai-ink)}
.ai-cursor{display:inline-block;width:.07em;height:.95em;background:var(--ai-2);vertical-align:-.08em;margin-left:.06em;animation:aiBlink 1s steps(1) infinite}
/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--ai-t) var(--ai-ease),transform var(--ai-t) var(--ai-ease)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(18px);transition:opacity var(--ai-t) var(--ai-ease),transform var(--ai-t) var(--ai-ease)}
.reveal-stagger.in>*{opacity:1;transform:none}
.reveal-stagger.in>*:nth-child(2){transition-delay:.08s}.reveal-stagger.in>*:nth-child(3){transition-delay:.16s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.24s}.reveal-stagger.in>*:nth-child(5){transition-delay:.32s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.4s}.reveal-stagger.in>*:nth-child(n+7){transition-delay:.48s}
/* ---------- CAPABILITY CARD ---------- */
.caps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cap{position:relative;display:block;background:var(--ai-panel);border:1px solid var(--ai-line);border-radius:var(--ai-r);padding:28px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .3s,transform .4s var(--ai-ease)}
.cap::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(360px 200px at var(--mx,50%) var(--my,0%),rgba(62,106,225,.28),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.cap:hover{border-color:rgba(62,106,225,.5);transform:translateY(-3px)}
.cap:hover::after{opacity:1}
.cap-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(62,106,225,.14);color:#9ebcff}
.cap-icon svg{width:20px;height:20px}
.cap h3{margin:16px 0 8px;color:var(--ai-ink)}
.cap p{color:var(--ai-mute);margin:0;font-size:.95rem}
.cap .more{display:inline-block;margin-top:14px;font:500 .8rem var(--ai-mono);color:var(--ai-2);letter-spacing:.06em}
/* ---------- 3 STEPS ---------- */
.steps{display:grid;gap:22px;grid-template-columns:repeat(3,1fr);counter-reset:s}
.step{position:relative;padding:28px;background:var(--ai-panel);border:1px solid var(--ai-line);border-radius:var(--ai-r)}
.step::before{counter-increment:s;content:"0" counter(s);font:500 .78rem var(--ai-mono);color:var(--ai-2);letter-spacing:.12em}
.step+.step::after{content:"";position:absolute;left:-22px;top:50%;width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--ai-2))}
.step h3{margin:12px 0 8px;color:var(--ai-ink)}.step p{margin:0;color:var(--ai-mute);font-size:.95rem}
@media (max-width:860px){.steps{grid-template-columns:1fr}.step+.step::after{display:none}}
/* ---------- FEATURE GRID ---------- */
.feats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feat{padding:20px 22px;border-left:2px solid var(--ai-1);background:linear-gradient(90deg,rgba(62,106,225,.08),transparent 70%);border-radius:0 10px 10px 0}
.feat h3{font-size:1rem;margin:0 0 6px;color:var(--ai-ink)}.feat p{margin:0;font-size:.92rem;color:var(--ai-mute)}
/* ---------- PRODUCT MOCK ---------- */
.mock{position:relative;border-radius:18px;padding:1px;background:linear-gradient(135deg,rgba(62,106,225,.6),rgba(34,211,238,.2) 50%,rgba(139,92,246,.5));box-shadow:0 30px 80px rgba(0,0,0,.55)}
.mock::before{content:"";position:absolute;inset:-40px;z-index:-1;border-radius:40px;background:radial-gradient(60% 50% at 30% 20%,var(--ai-glow),transparent 70%),radial-gradient(50% 40% at 80% 80%,var(--ai-glow-2),transparent 70%);filter:blur(30px);opacity:.55;animation:aiGlow 8s ease-in-out infinite alternate}
@keyframes aiGlow{to{transform:translate3d(10px,-8px,0) scale(1.06);opacity:.85}}
.mock-in{background:var(--ai-panel);border-radius:17px;overflow:hidden;font:400 .85rem/1.5 var(--font);color:var(--ai-mute)}
.mock-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--ai-line);background:var(--ai-panel-2)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#2a2e3a}
.mock-bar b{margin-left:auto;font:500 .68rem var(--ai-mono);color:var(--ai-mute);letter-spacing:.1em}
.mock-body{display:grid;grid-template-columns:150px 1fr;min-height:300px}
.mock-side{border-right:1px solid var(--ai-line);padding:14px 0}
.mock-side span{display:block;padding:7px 16px;font-size:.8rem}
.mock-side span.on{color:var(--ai-ink);background:rgba(62,106,225,.14);box-shadow:inset -2px 0 0 var(--ai-1)}
.mock-main{padding:16px}
.mock-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mock-kpi div{padding:12px;border-radius:8px;background:var(--ai-panel-2);border:1px solid var(--ai-line)}
.mock-kpi b{display:block;font-size:1.25rem;font-weight:600;color:var(--ai-ink)}.mock-kpi span{font-size:.72rem}
.mock-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;border:1px solid var(--ai-line);margin-bottom:8px;background:rgba(255,255,255,.02)}
.mock-row b{font-weight:500;color:var(--ai-ink)}.mock-row small{margin-left:auto;font-family:var(--ai-mono);font-size:.72rem}
.mock-msg{max-width:78%;padding:10px 14px;border-radius:12px;margin-bottom:8px;background:var(--ai-panel-2);border:1px solid var(--ai-line)}
.mock-msg.me{margin-left:auto;background:rgba(62,106,225,.18);color:var(--ai-ink)}
.tag{font:500 .68rem/1 var(--ai-mono);padding:4px 8px;border-radius:999px;background:rgba(34,211,238,.12);color:var(--ai-2);letter-spacing:.06em;white-space:nowrap}
.tag.hot{background:rgba(245,158,11,.14);color:#fbbf24}.tag.ok{background:rgba(52,211,153,.14);color:#34d399}.tag.ai{background:rgba(139,92,246,.16);color:#c4b5fd}
.ai-stream>*{opacity:0;transform:translateX(-8px)}
.in .ai-stream>*{animation:aiIn .5s var(--ai-ease) forwards}
.in .ai-stream>*:nth-child(2){animation-delay:.2s}.in .ai-stream>*:nth-child(3){animation-delay:.4s}.in .ai-stream>*:nth-child(4){animation-delay:.6s}
.in .ai-stream>*:nth-child(5){animation-delay:.8s}.in .ai-stream>*:nth-child(n+6){animation-delay:1s}
@keyframes aiIn{to{opacity:1;transform:none}}
@media (max-width:700px){.mock-body{grid-template-columns:1fr}.mock-side{display:none}.mock-kpi{grid-template-columns:1fr 1fr}}
/* ---------- WORKFLOW NODES ---------- */
.flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;margin:28px 0}
.flow-node{padding:12px 18px;border-radius:10px;background:var(--ai-panel);border:1px solid var(--ai-line);font:500 .85rem var(--font);color:var(--ai-mute);transition:color .4s,border-color .4s,box-shadow .4s}
.flow-node.on{color:var(--ai-ink);border-color:var(--ai-2);box-shadow:0 0 0 1px var(--ai-2),0 0 26px -4px var(--ai-glow-2)}
.flow-edge{width:48px;height:2px;background:repeating-linear-gradient(90deg,var(--ai-2) 0 6px,transparent 6px 12px);background-size:24px 2px;opacity:.35;animation:aiEdge 1s linear infinite}
.flow-node.on+.flow-edge{opacity:1}
@keyframes aiEdge{to{background-position:24px 0}}
@media (max-width:700px){.flow{flex-direction:column}.flow-edge{width:2px;height:28px;background:repeating-linear-gradient(180deg,var(--ai-2) 0 6px,transparent 6px 12px);background-size:2px 24px;animation-name:aiEdgeV}@keyframes aiEdgeV{to{background-position:0 24px}}}
/* ---------- INDUSTRY CHIPS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:18px 0 0}
.chips a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--ai-line);background:var(--ai-panel);color:var(--ai-ink);text-decoration:none;font-size:.9rem;font-weight:500;transition:border-color .3s,background .3s,transform .4s var(--ai-ease)}
.chips a:hover{border-color:var(--ai-2);background:rgba(34,211,238,.08);transform:translateY(-2px)}
/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--ai-panel);border:1px solid var(--ai-line);border-radius:12px;padding:0 22px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:500;color:var(--ai-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 1.4rem/1 var(--ai-mono);color:var(--ai-2);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 18px;margin:0;color:var(--ai-mute)}
/* ---------- CTA BAND ---------- */
.ai-cta{position:relative;overflow:hidden;border:1px solid var(--ai-line);border-radius:18px;padding:56px;background:var(--ai-panel);text-align:center}
.ai-cta .ai-mesh i{opacity:.25}
.ai-cta .wrap{position:relative;z-index:2;display:grid;gap:14px;justify-items:center}
.ai-cta h2{margin:0;max-width:20ch}.ai-cta p{margin:0;color:var(--ai-mute);max-width:52ch}
.ai-cta .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:10px}
/* ---------- SPLIT (text + mock) ---------- */
.ai-split{display:grid;gap:48px;grid-template-columns:1fr 1.1fr;align-items:center}
@media (max-width:900px){.ai-split{grid-template-columns:1fr}}
/* ---------- REDUCED MOTION: everything off ---------- */
@media (prefers-reduced-motion:reduce){
 .ai-mesh i,.ai-gridlines,.ai-net line,.ai-net circle,.mock::before,.flow-edge,.ai-kicker::before,.ai-cursor{animation:none!important}
 .reveal,.reveal-stagger>*,.ai-stream>*,.in .ai-stream>*{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
 .cap,.chips a,.cap:hover,.chips a:hover{transform:none!important;transition:none!important}
 .cap::after{display:none}
}
/* 5 capability cards: 3 + 2 on wide screens, no lonely last card */
@media (min-width:1100px){.caps:has(> .cap:nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}.caps:has(> .cap:nth-child(5):last-child)>.cap{grid-column:span 2}.caps:has(> .cap:nth-child(5):last-child)>.cap:nth-child(n+4){grid-column:span 3}} /* caps-5 */
/* phones: hero decoration must never widen the page (measured 406px on a 390px screen, 2026-10-03) */
body.ai{overflow-x:clip}.ai-hero{overflow:hidden}
html:has(body.ai){overflow-x:clip}.ai-cta{overflow:hidden}