/* ============================================================
   Stochastix — shared design system
   Used by index.html and all industry pages.
   ============================================================ */
:root{
  --bg:#070b14;
  --bg-2:#0a1020;
  --panel:#0e1422;
  --panel-2:#121a2c;
  --line:rgba(120,160,220,.14);
  --text:#e6edf6;
  --muted:#94a3b8;
  --teal:#2dd4bf;
  --cyan:#22d3ee;
  --blue:#2dd4bf;
  --violet:#06b6d4;
  --grad:linear-gradient(120deg,#14b8a6 0%,#2dd4bf 50%,#22d3ee 100%);
  --grad-soft:linear-gradient(120deg,rgba(45,212,191,.16),rgba(34,211,238,.16));
  /* canvas palette (read by home.js; overridden in theme-light.css) */
  --c-band:rgba(34,211,238,0.045);
  --c-traj:rgba(94,234,212,0.10);
  --c-traj-hi:rgba(45,212,191,0.5);
  --c-apex:rgba(45,212,191,0.95);
  --c-grid:rgba(120,160,220,.10);
  --c-spark-dim:rgba(120,160,220,.18);
  --c-curve:#22d3ee;
  --c-bar0:rgba(45,212,191,.9);
  --c-bar1:rgba(34,211,238,.12);
  --c-axis:rgba(120,160,220,.25);
  --c-g0:#14b8a6; --c-g1:#2dd4bf; --c-g2:#22d3ee;
  --radius:18px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --max:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad)}

/* ---------- NAV ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(7,11,20,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.22rem;letter-spacing:.2px}
.brand .x{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand svg{filter:drop-shadow(0 0 10px rgba(45,212,191,.35))}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{color:var(--muted);font-size:.93rem;font-weight:500;transition:color .2s;position:relative}
.nav-links a:hover{color:var(--text)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.92rem;
  padding:11px 22px;border-radius:999px;cursor:pointer;border:none;
  transition:transform .2s ease,box-shadow .2s ease,background .2s;
}
.btn-primary{background:var(--grad);color:#04111a;box-shadow:0 8px 26px -8px rgba(45,212,191,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(45,212,191,.75)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.menu-toggle{display:none;background:none;border:none;color:var(--text);cursor:pointer}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);color:var(--muted);font:inherit;font-size:.85rem;font-weight:500;padding:8px 13px;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s}
.theme-toggle:hover{color:var(--text);border-color:var(--blue)}
.theme-toggle svg{display:block}

/* ---------- HERO (home) ---------- */
.hero{position:relative;padding:170px 0 120px;overflow:hidden}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(900px 500px at 75% 10%,rgba(20,184,166,.20),transparent 60%),
             radial-gradient(800px 600px at 10% 90%,rgba(34,211,238,.14),transparent 60%);
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.07;font-weight:800;letter-spacing:-1px}
.hero p.lead{color:var(--muted);font-size:1.15rem;margin:22px 0 34px;max-width:560px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:46px;flex-wrap:wrap}
.hero-stats .num{font-size:1.8rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats .lbl{font-size:.82rem;color:var(--muted)}
.hero-card{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.hero-card::before{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:.5}
.hero-card .inner{position:relative;z-index:1}
.hero-card .tag{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--muted);margin-bottom:14px}
.live{display:inline-flex;align-items:center;gap:7px;color:var(--cyan);font-weight:600}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(34,211,238,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}70%{box-shadow:0 0 0 10px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
.hero-card canvas,.panel-viz canvas{width:100%;display:block}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.mini-stats div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px}
.mini-stats b{display:block;font-size:1.25rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mini-stats span{font-size:.72rem;color:var(--muted)}

/* ---------- SECTION GENERICS ---------- */
section{position:relative}
.section-pad{padding:104px 0}
.section-head{max-width:680px;margin-bottom:54px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.5px;line-height:1.12}
.section-head p{color:var(--muted);font-size:1.08rem;margin-top:16px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* logos / trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;background:rgba(255,255,255,.012)}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.trust .lbl{color:var(--muted);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.trust .items{display:flex;gap:34px;flex-wrap:wrap}
.trust .items a{color:#cbd5e1;font-weight:600;opacity:.7;transition:color .2s,opacity .2s;font-size:.95rem}
.trust .items a:hover{opacity:1;color:var(--blue)}

/* ---------- CARDS / SERVICES ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;position:relative;overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.card:hover{transform:translateY(-6px);border-color:rgba(45,212,191,.4);box-shadow:var(--shadow)}
.card:hover::after{transform:scaleX(1)}
.ico{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--grad-soft);border:1px solid var(--line);
}
.ico svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.7}
.card h3{font-size:1.22rem;font-weight:700;margin-bottom:10px}
.card p{color:var(--muted);font-size:.96rem}
.card .more{display:inline-block;margin-top:16px;font-size:.85rem;font-weight:600;color:var(--blue)}
.span-2{grid-column:span 2}

/* ---------- APPROACH ---------- */
.approach{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{position:relative;padding:28px 22px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.015)}
.step .n{font-size:.8rem;font-weight:700;color:var(--blue);letter-spacing:.1em}
.step h4{margin:10px 0 8px;font-size:1.08rem}
.step p{color:var(--muted);font-size:.9rem}

/* ---------- INDUSTRY GRID (home) ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.also{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.also .lbl{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-right:4px}

/* ---------- PILLS ---------- */
.pills{display:flex;flex-wrap:wrap;gap:12px}
.pill{
  padding:11px 18px;border:1px solid var(--line);border-radius:999px;
  color:#cbd5e1;font-size:.92rem;font-weight:500;background:rgba(255,255,255,.02);
  transition:all .25s;
}
a.pill:hover,.pill:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}

/* ---------- ABOUT / SPLIT ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.about-grid ul{list-style:none;margin-top:22px;display:grid;gap:14px}
.about-grid li{display:flex;gap:12px;color:#cbd5e1;font-size:.98rem}
.about-grid li svg{flex:none;width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:2;margin-top:2px}
.panel-viz{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));box-shadow:var(--shadow);
}

/* ---------- CONTACT ---------- */
.contact{background:linear-gradient(160deg,var(--bg-2),var(--bg))}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px}
form{display:grid;gap:16px}
.field{display:grid;gap:7px}
label{font-size:.82rem;color:var(--muted);font-weight:600}
input,textarea,select{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;color:var(--text);font:inherit;font-size:16px;width:100%;/* 16px avoids iOS focus auto-zoom */
  transition:border-color .2s,box-shadow .2s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,212,191,.15)}
textarea{resize:vertical;min-height:120px}
.form-note{font-size:.8rem;color:var(--muted)}
.contact-info{display:grid;gap:22px;align-content:start}
.contact-info .row{display:flex;gap:14px;align-items:flex-start}
.contact-info .row svg{flex:none;width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.7;margin-top:3px}
.contact-info .row b{display:block;font-size:.98rem}
.contact-info .row span{color:var(--muted);font-size:.92rem}

/* ============================================================
   INDUSTRY PAGE COMPONENTS
   ============================================================ */
.breadcrumb{font-size:.84rem;color:var(--muted);margin-bottom:20px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--muted);transition:color .2s}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .here{color:var(--blue)}

.page-hero{position:relative;padding:150px 0 76px;overflow:hidden}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(820px 460px at 82% 0%,rgba(20,184,166,.18),transparent 60%),
             radial-gradient(720px 520px at 0% 100%,rgba(34,211,238,.12),transparent 60%);
}
.page-hero .wrap{position:relative;z-index:1}
.ico-lg{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;margin-bottom:24px;background:var(--grad-soft);border:1px solid var(--line)}
.ico-lg svg{width:32px;height:32px;stroke:var(--blue);fill:none;stroke-width:1.6}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.3rem);font-weight:800;letter-spacing:-1px;line-height:1.08;max-width:720px}
.page-hero p.lead{color:var(--muted);font-size:1.12rem;margin:20px 0 32px;max-width:640px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* challenges */
.challenge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.challenge{display:flex;gap:14px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.015)}
.challenge svg{flex:none;width:24px;height:24px;stroke:var(--cyan);fill:none;stroke-width:1.8;margin-top:2px}
.challenge h4{font-size:1.05rem;margin-bottom:6px}
.challenge p{color:var(--muted);font-size:.93rem}

/* case studies */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.case:hover{transform:translateY(-6px);border-color:rgba(45,212,191,.4);box-shadow:var(--shadow)}
.case .case-top{padding:26px 26px 0}
.case .kicker{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.case h3{font-size:1.12rem;margin:10px 0 12px;line-height:1.25}
.case .body{padding:0 26px 4px;color:var(--muted);font-size:.92rem;flex:1}
.case .body b{color:var(--text);font-weight:600}
.case .metric{margin-top:18px;padding:18px 26px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:rgba(255,255,255,.02)}
.case .metric .big{font-size:1.12rem;font-weight:700;letter-spacing:-.2px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.case .metric .ml{font-size:.92rem;line-height:1.4;color:var(--muted)}
.disclaimer{margin-top:26px;font-size:.8rem;color:var(--muted);font-style:italic}

/* cta band */
.cta-band{background:linear-gradient(120deg,rgba(20,184,166,.12),rgba(34,211,238,.05));border:1px solid var(--line);border-radius:24px;padding:56px;text-align:center}
.cta-band h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-.5px}
.cta-band p{color:var(--muted);margin:14px auto 28px;max-width:560px}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:46px 0 30px;background:var(--bg)}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{max-width:320px}
.foot-brand p{color:var(--muted);font-size:.9rem;margin-top:14px}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h5{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-col a{display:block;color:#cbd5e1;font-size:.9rem;margin-bottom:9px;transition:color .2s}
.foot-col a:hover{color:var(--blue)}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.84rem}

/* reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .cards,.steps,.ind-grid,.case-grid{grid-template-columns:1fr 1fr}
  .span-2{grid-column:span 1}
  .hero{padding:140px 0 80px}
  .challenge-grid{grid-template-columns:1fr}
  .nav-links{
    position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(7,11,20,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .nav-links.open{max-height:460px}
  .nav-links a{padding:16px 24px;width:100%;border-bottom:1px solid var(--line)}
  .nav-links .btn{margin:14px 24px}
  .nav-links .theme-toggle{margin:14px 24px;justify-content:center}
  .menu-toggle{display:block}
}
@media(max-width:560px){
  .cards,.steps,.ind-grid,.case-grid{grid-template-columns:1fr}
  .hero-stats{gap:22px}
  .cta-band{padding:38px 22px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  #net{display:none}
}