/* ===========================================================
   ScalePie — Release Assurance Platform
   2026 system-interface aesthetic · light glass · neon accents
   =========================================================== */

:root{
  /* canvas */
  --bg: #F7F9FC;
  --bg-2: #EEF2F8;
  --ink: #0B1020;
  --ink-2: #2A3147;
  --muted: #6B7390;
  --line: rgba(11,16,32,.08);
  --line-2: rgba(11,16,32,.14);

  /* glass */
  --glass: rgba(255,255,255,.62);
  --glass-2: rgba(255,255,255,.78);
  --glass-edge: rgba(255,255,255,.85);
  --shadow-1: 0 1px 2px rgba(11,16,32,.04), 0 8px 28px rgba(11,16,32,.06);
  --shadow-2: 0 1px 2px rgba(11,16,32,.05), 0 24px 60px rgba(11,16,32,.10);

  /* neon accents */
  --neon-purple: #7C5CFF;
  --neon-blue:   #26A8FF;
  --neon-orange: #FF7A45;
  --neon-pink:   #FF4D8B;
  --ok-green:    #2ECF7F;

  /* type */
  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-body:    "Sora", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* radii */
  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;

  --max: 1280px;
}

*{box-sizing:border-box}
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* ENHANCED: anchor links (#problem, #platform, etc.) now stop ~84px below the top
     so the sticky sysbar doesn't cover the section heading on jump */
  scroll-padding-top: 84px;
}

/* ENHANCED: content-visibility lets the browser skip layout/paint for sections
   that are far offscreen — the closest native equivalent to virtual scrolling for
   static long pages. contain-intrinsic-size reserves space so the scrollbar
   doesn't jump as sections enter the viewport. The hero is excluded (always visible). */
section:not(.hero):not(.finalcta){
  content-visibility: auto;
  contain-intrinsic-size: 1px 1200px;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; background:none; border:0; color:inherit; padding:0}
ul,ol{list-style:none; padding:0; margin:0}
h1,h2,h3,h4,h5{margin:0; font-weight:500}
p{margin:0}

/* ===== background atmosphere ===== */
.bg-mesh{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(38,168,255,.16), transparent 65%),
    radial-gradient(700px 500px at 50% 110%, rgba(255,122,69,.12), transparent 60%),
    linear-gradient(180deg, #F7F9FC 0%, #EEF2F8 100%);
}
.bg-mesh::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(11,16,32,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,16,32,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* ===== TYPE ===== */
.display{
  font-family:var(--f-display);
  font-weight:400;
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  line-height: 1.02;
  letter-spacing:-.02em;
}
.display.sm{ font-size: clamp(2rem, 4.4vw, 3.6rem); line-height:1.06; }
.display.lg{ font-size: clamp(3.2rem, 8vw, 6.6rem); }
.display i{ font-style:italic; color:var(--neon-purple) }
.display .hl{
  background: linear-gradient(95deg, var(--neon-orange), var(--neon-purple) 55%, var(--neon-blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.display .em-dash{ color:var(--neon-orange); font-style:normal; margin: 0 .15em }
.display .vs{ font-style:italic; color:var(--neon-orange); margin:0 .15em }

.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--neon-purple);
  padding:.5rem .8rem;
  background:var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}
.kicker .kdot{
  width:7px; height:7px; border-radius:50%;
  background:var(--neon-orange);
  box-shadow:0 0 0 3px rgba(255,122,69,.18), 0 0 18px rgba(255,122,69,.6);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 50%{ transform:scale(1.4); opacity:.7 } }

.lead{
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  color: var(--ink-2);
  max-width: 56ch;
  margin-top: 1.4rem;
}
.sec-lead{ color:var(--ink-2); max-width:64ch; font-size:1.05rem; margin-top:.8rem }
.sec-lead.big{ font-size:1.4rem; color:var(--ink) }
.sec-lead .arrow{ color:var(--neon-orange); font-weight:600; margin:0 .35em }

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.2rem;
  border-radius: 999px;
  font-family:var(--f-body); font-weight:500; font-size:.95rem;
  letter-spacing:-.005em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-sm{ padding:.55rem .9rem; font-size:.82rem }
.btn-pri{
  color:white;
  background: linear-gradient(120deg, #2A2360, #0B1020 70%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 0 0 1px rgba(11,16,32,.6),
    0 12px 28px rgba(11,16,32,.22);
  position:relative; overflow:hidden;
}
.btn-pri::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 100% at 0% 0%, rgba(124,92,255,.55), transparent 60%),
              radial-gradient(80% 100% at 100% 100%, rgba(38,168,255,.45), transparent 60%);
  opacity:.85; transition: opacity .3s ease;
}
.btn-pri > *{ position:relative; z-index:1 }
.btn-pri:hover{ transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 0 0 1px rgba(11,16,32,.6), 0 18px 36px rgba(11,16,32,.28) }
.btn-pri:hover::before{ opacity:1 }
.btn-ghost{
  color:var(--ink);
  background: var(--glass);
  border:1px solid var(--line-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn-ghost:hover{ background:var(--glass-2); transform:translateY(-1px); box-shadow:var(--shadow-1) }
.btn.full{ width:100%; justify-content:center }
.btn.lg{ padding:1rem 1.6rem; font-size:1rem }

/* ===== TOP SYSTEM BAR ===== */
.sysbar{
  position:sticky; top:0; z-index:50;
  padding: 14px 24px;
}
.sysbar-inner{
  max-width: var(--max);
  margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border:1px solid var(--line-2);
  border-radius: 999px;
  padding: 8px 8px 8px 18px;
  box-shadow: var(--shadow-1);
  /* ENHANCED: smooth shadow morph when scrolled, replaces the previous JS inline-style approach */
  transition: box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
.sysbar-inner.scrolled{
  box-shadow: 0 1px 2px rgba(11,16,32,.06), 0 18px 40px rgba(11,16,32,.10);
  background: rgba(255, 255, 255, .82);
  border-color: rgba(11, 16, 32, .08);
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:600 }
.brand-mark{ width:26px; height:26px }
.brand-name{ font-family:var(--f-display); font-size:1.4rem; line-height:1; letter-spacing:-.01em }
.brand-tag{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em;
  color:var(--muted); padding:.25rem .5rem; border:1px solid var(--line-2); border-radius:6px;
  margin-left:.4rem;
}
.sysnav{ display:flex; gap:1.4rem; font-size:.92rem; color:var(--ink-2) }
.sysnav a{ position:relative }
.sysnav a:hover{ color:var(--ink) }
.sysnav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px;
  height:1.5px; background: linear-gradient(90deg, var(--neon-orange), var(--neon-purple));
  transition: right .3s ease;
}
.sysnav a:hover::after{ right:0 }

.sys-status{ display:flex; align-items:center; gap:.8rem }
.status-text{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--muted) }
.status-text b{ color:var(--ok-green); font-weight:600 }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--muted) }
.dot.live{ background:var(--ok-green); box-shadow:0 0 0 3px rgba(46,207,127,.18); animation:pulse 1.6s ease-in-out infinite }
.dot.tiny{ width:6px; height:6px }

/* ===== HERO ===== */
.hero{
  position:relative;
  padding: 24px 24px 40px;
  max-width: var(--max); margin: 0 auto;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-copy .display{ margin-top:1.6rem }
.hero-copy .em-dash{ display:inline-block; transform:translateY(-.05em) }

.cta-row{ display:flex; gap:.8rem; margin-top: 2.2rem; flex-wrap:wrap }
.cta-row.center{ justify-content:center }

.hero-stats{
  margin-top: 3rem;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1.6rem;
  border-top:1px dashed var(--line-2);
}
.stat-num{
  font-family:var(--f-display); font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height:1;
  letter-spacing:-.02em;
}
.stat-num span{ font-size:.6em; color:var(--neon-orange); margin-left:.05em }
.stat-lbl{ color:var(--muted); font-size:.78rem; letter-spacing:.04em; margin-top:.4rem; max-width: 18ch }

/* ===== HERO LIVE PANEL ===== */
.hero-panel{
  position:relative;
  height: 620px;
  perspective: 1400px;
}
.panel{
  position:absolute;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border:1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  padding: 18px;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px dashed var(--line);
}
.phead-l{ display:flex; align-items:center; gap:.6rem }
.phead-id{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em;
  background: rgba(124,92,255,.1); color: var(--neon-purple);
  padding:.25rem .5rem; border-radius:6px; border:1px solid rgba(124,92,255,.22);
}
.phead-title{ font-size:.85rem; font-weight:500 }
.phead-r.mini, .phead-r{ font-family:var(--f-mono); font-size:.66rem; color:var(--muted); letter-spacing:.12em }

.badge{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em;
  padding:.32rem .55rem; border-radius:6px;
  background: rgba(255,122,69,.15); color: var(--neon-orange); border:1px solid rgba(255,122,69,.3);
}
.badge.ok-set{ background: rgba(46,207,127,.15); color:var(--ok-green); border-color: rgba(46,207,127,.3) }

/* RISK PANEL */
.risk-panel{
  top: 0; left: 0; width: 320px;
  transform: rotate(-1.2deg);
  z-index: 3;
  animation: floatA 7s ease-in-out infinite;
}
@keyframes floatA{ 50%{ transform: translateY(-6px) rotate(-1.2deg) } }

.risk-body{ display:flex; flex-direction:column; gap: 14px }
.risk-score{ display:grid; grid-template-columns: 120px 1fr; gap: 12px; align-items:center }
.risk-ring{ width:120px; height:120px }
.ring-track{ fill:none; stroke: var(--line-2); stroke-width: 14 }
.ring-fill{
  fill:none; stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 528;
  stroke-dashoffset: 528;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 6px 14px rgba(124,92,255,.35));
}
.ring-pulse{
  fill:none; stroke: rgba(124,92,255,.4); stroke-width: 1; opacity: 0;
  transform-origin: 50% 50%;
  animation: ringPulse 3s ease-out infinite;
}
@keyframes ringPulse{
  0%{ transform:scale(.92); opacity:.7 }
  100%{ transform:scale(1.18); opacity:0 }
}
.risk-label{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; color:var(--muted) }
.risk-val{ font-family:var(--f-display); font-size: 3rem; line-height:1; letter-spacing:-.02em }
.risk-trend{ display:flex; align-items:center; gap:.4rem; font-family:var(--f-mono); font-size:.78rem; color:var(--muted); margin-top:.2rem }
.risk-trend .ok{ color:var(--ok-green); font-weight:600 }
.risk-conf{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink-2); margin-top:.4rem }
.risk-conf b{ color:var(--neon-purple) }

.risk-meta{ display:flex; flex-direction:column; gap:.3rem; padding-top:10px; border-top:1px dashed var(--line) }
.meta-row{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); font-family:var(--f-mono) }
.meta-row b{ color:var(--ink); font-weight:500 }

/* MODULES PANEL */
.modules-panel{
  top: 360px; left: 14px; width: 280px;
  transform: rotate(1deg);
  z-index: 4;
  animation: floatB 8s ease-in-out infinite;
}
@keyframes floatB{ 50%{ transform: translateY(-4px) rotate(1deg) } }
.mod-list{ display:flex; flex-direction:column; gap:10px }
.mod{
  display:grid; grid-template-columns: 6px 1fr auto;
  gap:.7rem; align-items:center;
  font-size:.85rem;
  padding:.55rem .7rem;
  border-radius:10px;
  background: rgba(255,255,255,.6);
  border:1px solid var(--line);
}
.mod .bar{ width:6px; height:24px; border-radius:3px; background:var(--muted) }
.mod.hot .bar{ background: linear-gradient(180deg, var(--neon-orange), #FF4D4D); box-shadow:0 0 12px rgba(255,77,77,.5) }
.mod.warm .bar{ background: linear-gradient(180deg, var(--neon-purple), var(--neon-orange)) }
.mod.cool .bar{ background: linear-gradient(180deg, var(--neon-blue), var(--neon-purple)) }
.mod .prob{ font-family:var(--f-mono); font-size:.75rem; color:var(--muted) }
.mod.hot .prob{ color:#FF4D4D; font-weight:600 }

/* DEP GRAPH */
.graph-panel{
  top: 200px; right: 0; width: 320px;
  transform: rotate(1.4deg);
  z-index: 2;
  animation: floatC 9s ease-in-out infinite;
}
@keyframes floatC{ 50%{ transform: translateY(-8px) rotate(1.4deg) } }
.dep-graph{ width: 100%; height: 200px }
.dep-graph .edge{
  stroke: rgba(124,92,255,.3); stroke-width: 1.2; fill:none;
  stroke-dasharray: 4 4;
  animation: flow 6s linear infinite;
}
.dep-graph .edge.hot{ stroke: var(--neon-orange); stroke-width: 1.6 }
@keyframes flow{ to{ stroke-dashoffset: -64 } }
.dep-graph .node{
  fill: white; stroke: var(--neon-purple); stroke-width: 1.5;
  filter: drop-shadow(0 4px 10px rgba(124,92,255,.25));
}
.dep-graph .node.hot{ stroke: var(--neon-orange); fill:#FFF4EE }
.dep-graph .node.core{ fill: var(--neon-purple); stroke: var(--neon-purple) }
.dep-graph .nlbl{ font-family:var(--f-mono); font-size:9px; fill:var(--ink-2) }

/* DOMAIN PILLS */
.domain-pills{
  position:absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  display:flex; gap:.5rem;
  background: var(--glass-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px;
  box-shadow: var(--shadow-1);
}
.dpill{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em;
  padding:.5rem .9rem; border-radius:999px; color:var(--muted); transition: all .25s ease;
}
.dpill.active{ background:var(--ink); color:white }
.dpill:not(.active):hover{ color:var(--ink) }

/* TICKER */
.ticker{
  margin-top: 60px;
  border-top: 1px dashed var(--line-2);
  border-bottom: 1px dashed var(--line-2);
  padding: 14px 0;
  overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.ticker-track{
  display:flex; gap: 3rem; white-space: nowrap;
  animation: tick 50s linear infinite;
  font-family: var(--f-mono); font-size:.78rem; letter-spacing:.16em; color:var(--muted);
}
.ticker-track span{ color: var(--ink-2) }
@keyframes tick{ to{ transform: translateX(-50%) } }


/* ===== SECTION HEAD ===== */
.sec-head{ max-width: var(--max); margin: 0 auto; padding: 0 24px; margin-bottom: 56px }
.sec-tag{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; color:var(--muted);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.35rem .7rem; border:1px solid var(--line-2); border-radius:999px;
  background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  margin-bottom: 1.4rem;
}
.sec-tag span{ color:var(--neon-orange); font-weight:600 }


/* ===== 2. PROBLEM ===== */
.problem{ padding: 110px 0 60px }
.problem-grid{
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.pcard{
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border:1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-1);
  position:relative; overflow:hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.pcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2) }
.pcard-head{ display:flex; justify-content:space-between; align-items:center; color:var(--neon-purple) }
.pidx{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; color:var(--muted) }
.pcard h3{ font-family:var(--f-display); font-size:1.6rem; line-height:1.05; margin-top:.6rem; letter-spacing:-.01em }
.pcard p{ color:var(--ink-2); font-size:.92rem; margin-top:.6rem }
.pcard-vis{ height: 64px; margin-top: 16px; border-top: 1px dashed var(--line); padding-top:14px; position:relative }

/* problem visuals */
.pcard-vis.sparkline::before{
  content:""; position:absolute; left:0; right:0; top:18px; height:36px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><polyline fill='none' stroke='%237C5CFF' stroke-width='1.4' points='0,30 16,28 30,32 44,18 60,22 78,12 96,16 116,8 130,14 152,4 170,10 186,6 200,8'/><polyline fill='none' stroke='%23FF7A45' stroke-width='1.4' stroke-dasharray='3 3' points='0,34 200,18'/></svg>") no-repeat center/100% 100%;
}
.pcard-vis.miss{
  display:grid; grid-template-columns: repeat(20, 1fr); gap: 3px; align-content: end; height:64px; padding-top:0; margin-top:16px;
}
.pcard-vis.miss::before{ content:""; display:none }
.pcard-vis.miss > i{ display:none }
.pcard-vis.bars{
  display:flex; align-items:end; gap: 4px; padding: 12px 0 0;
}
.pcard-vis.bars::after{
  content:""; width:100%; height:54px;
  background:
    linear-gradient(to right,
      var(--neon-blue) 0 8%, transparent 8% 12%,
      var(--neon-blue) 12% 18%, transparent 18% 22%,
      var(--neon-purple) 22% 32%, transparent 32% 36%,
      var(--neon-orange) 36% 50%, transparent 50% 54%,
      var(--neon-orange) 54% 70%, transparent 70% 74%,
      var(--neon-purple) 74% 84%, transparent 84% 88%,
      var(--neon-blue) 88% 100%);
  -webkit-mask: linear-gradient(to top, black 60%, transparent);
          mask: linear-gradient(to top, black 60%, transparent);
  border-radius:4px;
  opacity:.85;
}
.pcard-vis.incident{
  background:
    radial-gradient(8px 8px at 20% 50%, var(--neon-orange) 60%, transparent 62%),
    radial-gradient(6px 6px at 50% 30%, var(--neon-purple) 60%, transparent 62%),
    radial-gradient(10px 10px at 80% 60%, #FF4D4D 60%, transparent 62%),
    radial-gradient(4px 4px at 35% 70%, var(--neon-blue) 60%, transparent 62%),
    radial-gradient(5px 5px at 65% 80%, var(--neon-orange) 60%, transparent 62%);
}
/* miss grid render via JS-less trick */
.pcard-vis.miss { background:
  conic-gradient(from 0deg at 50% 50%, transparent 0% 100%);
}
.pcard-vis.miss::after{
  content:""; position:absolute; left:0; right:0; bottom:0; top:14px;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 12px 12px;
}
.pcard-vis.miss::before{
  content:""; position:absolute; bottom:8px; left:24px;
  width:10px; height:10px; border-radius:50%;
  background:#FF4D4D; box-shadow: 22px -8px var(--neon-orange), 60px -16px #FF4D4D, 100px -4px var(--neon-orange), 140px -22px #FF4D4D;
  display:block;
}


/* ===== 3. SOLUTION ===== */
.solution{ padding: 90px 0 80px }
.flow-panel{
  max-width: 1100px; margin: 40px auto 0;
  background: var(--glass-2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border:1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  padding: 30px 26px;
  display:grid; grid-template-columns: 1fr 60px 1.2fr 60px 1fr;
  align-items:center; gap: 8px;
  margin-left: 24px; margin-right: 24px;
  position:relative;
}
.flow-stage{ text-align:center }
.flow-stage .stage-tag{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; color:var(--muted) }
.flow-stage .stage-name{ font-family:var(--f-display); font-size:1.6rem; line-height:1.1; margin-top:.3rem }
.flow-stage .stage-meta{ font-size:.84rem; color:var(--ink-2); margin-top:.3rem; font-family:var(--f-mono) }
.flow-stage.core .stage-name{
  background: linear-gradient(95deg, var(--neon-orange), var(--neon-purple), var(--neon-blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.flow-line{ position:relative; height:2px; background: linear-gradient(90deg, transparent, var(--line-2), transparent) }
.flow-line span{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background: var(--neon-orange);
  box-shadow: 0 0 12px var(--neon-orange);
  animation: flowDot 3s linear infinite;
}
@keyframes flowDot{ to{ left:100% } }


/* ===== 4. PLATFORM ===== */
.platform{ padding: 110px 0 80px }
.engine-block{
  max-width: var(--max); margin: 0 auto 40px; padding: 0 24px;
}
.engine-grid{
  display:grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items:center;
}
.engine-grid.reverse{ grid-template-columns: 1.15fr 1fr }
.engine-grid.reverse .engine-meta{ order:2 }
.engine-id{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--neon-purple) }
.engine-name{ font-family:var(--f-display); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height:1.05; margin-top:.6rem; letter-spacing:-.02em }
.rie-tag{
  display:inline-block; vertical-align: middle;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em;
  padding:.3rem .55rem; margin-left:.4rem;
  background: rgba(124,92,255,.12); color: var(--neon-purple);
  border:1px solid rgba(124,92,255,.25); border-radius: 6px;
}
.rie-tag.exec{ background: rgba(38,168,255,.12); color: var(--neon-blue); border-color: rgba(38,168,255,.25) }
.engine-pos{ color:var(--ink-2); margin-top:1rem; font-size:1.02rem; max-width: 50ch }
.engine-msg{
  margin-top: 1.2rem; padding: 14px 16px;
  background: var(--glass-2);
  border-left: 3px solid var(--neon-orange);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  font-size: 1.05rem;
}
.engine-msg b{ color:var(--neon-orange); font-weight:600 }

.cap-list{ display:flex; flex-direction:column; gap:.6rem; margin-top:1.4rem }
.cap-list li{ display:flex; align-items:center; gap:.7rem; font-size:.95rem; color:var(--ink-2) }
.cap-ico{ color: var(--c, var(--neon-purple)); font-size:.75rem }
.cap-list b{ color:var(--ink); font-weight:500 }

/* RIE OUTPUT */
.rie-output, .exec-output{
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border:1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  overflow:hidden;
  font-family:var(--f-mono);
}
.output-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 16px;
  background: rgba(11,16,32,.04);
  border-bottom: 1px solid var(--line);
  font-size:.74rem; letter-spacing:.14em;
}
.ob-l{ display:flex; align-items:center; gap:.6rem; color:var(--ink-2) }
.ob-tab{ padding:.25rem .55rem; background:white; border-radius:6px; border:1px solid var(--line-2); color:var(--ink) }
.ob-tab.active{ background:var(--ink); color:white; border-color:var(--ink) }

.output-body{ padding: 22px 22px 24px; display:flex; flex-direction:column; gap: 18px }
.ob-section .ob-key{ font-size:.66rem; letter-spacing:.2em; color:var(--muted); margin-bottom:.5rem }
.ob-val.big{ font-size:1.4rem; color:var(--ink); display:flex; align-items:baseline; gap:.8rem }
.ob-val .num{
  font-family:var(--f-display); font-size: 3rem; line-height:1; letter-spacing:-.02em;
  background: linear-gradient(95deg, var(--neon-orange), var(--neon-purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ob-val .conf{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; color:var(--muted) }
.ob-bar{ height:8px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:.6rem }
.ob-bar span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--neon-orange), var(--neon-purple), var(--neon-blue));
  border-radius:99px;
  animation: barIn 1.4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes barIn{ from{ width:0 } }

.ob-modules{ display:flex; flex-direction:column; gap:.4rem; font-family:var(--f-body); font-size:.95rem }
.ob-modules li{ display:flex; align-items:center; gap:.6rem }
.hot-dot{
  width:8px; height:8px; border-radius:50%;
  background:#FF4D4D;
  box-shadow:0 0 0 4px rgba(255,77,77,.18);
  animation: pulse 1.6s ease-in-out infinite;
}
.ob-preds{ display:flex; flex-direction:column; gap:.7rem; font-family:var(--f-body); font-size:.92rem }
.ob-preds li{ display:grid; grid-template-columns: 1fr 130px; gap:1rem; align-items:center }
.pred-text{ color:var(--ink-2) }
.pred-prob{ display:flex; align-items:center; gap:.5rem; justify-content:flex-end }
.pred-prob .bar{
  width:80px; height:6px; border-radius:99px; background:var(--line); position:relative; overflow:hidden;
}
.pred-prob .bar::before{
  content:""; position:absolute; inset:0;
  width: var(--p, 50%);
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-orange));
  border-radius:99px;
  animation: barIn 1.4s cubic-bezier(.2,.8,.2,1) both;
}
.pred-prob b{ font-family:var(--f-mono); font-size:.78rem; color:var(--ink) }

.ob-hist{ font-family:var(--f-body); font-size:.92rem; color:var(--ink-2); display:flex; align-items:center; gap:.8rem; flex-wrap:wrap }
.ob-hist b{ color:var(--neon-purple) }
.memory-pill{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em;
  padding:.3rem .55rem; background: rgba(124,92,255,.12); color:var(--neon-purple);
  border:1px solid rgba(124,92,255,.25); border-radius:6px;
}
.ob-scope{ display:flex; flex-direction:column; gap:.5rem; font-family:var(--f-body); font-size:.92rem; color:var(--ink-2) }
.ob-scope li{ display:flex; align-items:center; gap:.6rem }
.tag{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em;
  padding:.2rem .45rem; background: var(--bg-2); border:1px solid var(--line-2); border-radius:6px;
}
.tag.good{ background: rgba(46,207,127,.12); border-color: rgba(46,207,127,.3); color:var(--ok-green) }


/* EXEC OPT */
.opt-body{ padding: 22px; display:flex; flex-direction:column; gap: 16px; font-family:var(--f-body) }
.opt-row{ display:grid; grid-template-columns: 130px 1fr; align-items:center; gap: 12px }
.opt-label{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; color:var(--muted) }
.opt-bar{ height: 22px; border-radius: 999px; background: var(--bg-2); position:relative; overflow:hidden; border:1px solid var(--line) }
.opt-bar span{ display:block; height:100%; border-radius:999px; animation: barIn 1.6s cubic-bezier(.2,.8,.2,1) both }
.opt-bar.full span{ background: linear-gradient(90deg, var(--muted), var(--ink-2)) }
.opt-bar.smart span{ background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)) }
.opt-bar b{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-family:var(--f-mono); font-size:.78rem }

.opt-savings{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 0; border-top:1px dashed var(--line-2); border-bottom:1px dashed var(--line-2) }
.sv-num{ font-family:var(--f-display); font-size:2rem; line-height:1 }
.sv-num span{ font-size:.55em; color:var(--neon-orange); margin-left:.05em }
.sv-lbl{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; color:var(--muted); margin-top:.3rem }

.opt-grid{ display:grid; grid-template-columns: repeat(40, 1fr); gap:2px; margin-top:6px }
.opt-grid i{ display:block; aspect-ratio:1; border-radius:2px; background:var(--line); transition: background .4s ease }
.opt-grid i.on{ background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); box-shadow:0 0 6px rgba(124,92,255,.5) }
.opt-legend{ font-family:var(--f-mono); font-size:.66rem; color:var(--muted); display:flex; align-items:center; gap:.8rem }
.ll{ width:10px; height:10px; border-radius:2px; background:var(--line); display:inline-block; vertical-align: middle; margin-right:.3rem }
.ll.on{ background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)) }


/* COMBINED */
.combined{ max-width: var(--max); margin: 60px auto 0; padding: 0 24px }
.combined-inner{
  background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(255,122,69,.06), rgba(38,168,255,.08));
  border:1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 36px 28px;
  text-align:center;
  position:relative; overflow:hidden;
}
.combined-inner::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 200px at 50% 0%, rgba(124,92,255,.16), transparent);
  pointer-events:none;
}
.combined-eq{
  display:flex; justify-content:center; align-items:center; gap: 1.4rem; flex-wrap:wrap;
  position:relative;
}
.ceq-item{ text-align:center }
.ceq-item b{ font-family:var(--f-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height:1; display:block }
.ceq-item span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--muted); display:block; margin-top:.3rem }
.ceq-op{ font-family:var(--f-display); font-size:2rem; color:var(--neon-orange) }
.ceq-result b{
  background: linear-gradient(95deg, var(--neon-orange), var(--neon-purple), var(--neon-blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.combined-stats{
  margin-top: 28px; display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.82rem; color:var(--ink-2);
}
.combined-stats b{ color:var(--neon-purple); font-weight:600; font-family:var(--f-body) }


/* ===== 5. HOW ===== */
.how{ padding: 110px 0 80px }
.how-steps{ max-width: var(--max); margin: 0 auto; padding: 0 24px; display:flex; flex-direction:column; gap: 14px }
.hstep{
  display:grid; grid-template-columns: 100px 1fr 280px; gap: 24px; align-items:center;
  padding: 22px 26px;
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border:1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hstep:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2) }
.hs-num{
  font-family:var(--f-display); font-size: 4rem; line-height:.9;
  background: linear-gradient(160deg, var(--neon-purple), var(--neon-orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hs-body h4{ font-family:var(--f-display); font-size:1.6rem; line-height:1; letter-spacing:-.01em }
.hs-body p{ color:var(--ink-2); margin-top:.5rem; max-width:60ch }
.hs-vis{ height: 90px; border-radius: 14px; background: rgba(255,255,255,.55); border:1px solid var(--line); position:relative; overflow:hidden }
.hs-vis.ingest{
  background-image:
    linear-gradient(90deg, var(--neon-blue) 0 20%, transparent 20% 24%, var(--neon-purple) 24% 50%, transparent 50% 54%, var(--neon-orange) 54% 80%, transparent 80% 84%, var(--neon-blue) 84% 100%);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: center 30%;
}
.hs-vis.ingest::after{
  content:""; position:absolute; left:0; right:0; bottom:18px; height:2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.hs-vis.model{
  background:
    radial-gradient(circle at 20% 50%, var(--neon-purple) 4px, transparent 5px),
    radial-gradient(circle at 50% 30%, var(--neon-orange) 4px, transparent 5px),
    radial-gradient(circle at 50% 70%, var(--neon-blue) 4px, transparent 5px),
    radial-gradient(circle at 80% 50%, var(--neon-purple) 4px, transparent 5px);
}
.hs-vis.model::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg, transparent 19%, rgba(124,92,255,.4) 20% 21%, transparent 22%),
    linear-gradient(75deg, transparent 19%, rgba(255,122,69,.4) 20% 21%, transparent 22%),
    linear-gradient(95deg, transparent 49%, rgba(38,168,255,.4) 50% 51%, transparent 52%);
}
.hs-vis.predict{
  background:
    linear-gradient(90deg, transparent 0 70%, rgba(255,77,77,.18) 70% 100%);
}
.hs-vis.predict::after{
  content:""; position:absolute; inset:14px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'><polyline fill='none' stroke='%237C5CFF' stroke-width='1.6' points='0,40 30,38 50,30 80,32 110,18 140,22 170,8 200,12'/><circle cx='170' cy='8' r='4' fill='%23FF7A45'/></svg>") no-repeat center/100% 100%;
}
.hs-vis.assure{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(46,207,127,.08), rgba(38,168,255,.08));
}
.hs-vis.assure::after{
  content:"GO"; font-family:var(--f-display); font-size:2.4rem; color:var(--ok-green); letter-spacing:.04em;
  text-shadow: 0 0 16px rgba(46,207,127,.4);
}


/* ===== 6. ENGAGEMENT ===== */
.engagement{ padding: 110px 0 80px }
.eng-grid{
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.ecard{
  background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border:1px solid var(--line-2); border-radius: var(--r-3);
  padding: 28px;
  box-shadow: var(--shadow-1);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ecard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2) }
.ecard.core{
  background: linear-gradient(180deg, rgba(124,92,255,.1), var(--glass-2));
  border-color: rgba(124,92,255,.3);
}
.ecard.core::before{
  content:"RECOMMENDED"; position:absolute; top:14px; right:14px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em;
  padding:.3rem .55rem; border-radius:6px;
  background: var(--neon-purple); color:white;
}
.ecard-tag{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; color:var(--neon-orange) }
.ecard h3{ font-family:var(--f-display); font-size:1.8rem; line-height:1; margin-top:.5rem; letter-spacing:-.01em }
.ecard-time{ font-family:var(--f-mono); font-size:.78rem; color:var(--muted); margin-top:.3rem }
.ecard p{ color:var(--ink-2); margin-top:1rem; font-size:.95rem }
.ecard ul{ display:flex; flex-direction:column; gap:.4rem; margin: 1rem 0 1.4rem; font-size:.92rem; color:var(--ink-2) }
.ecard ul li::before{ content:"› "; color:var(--neon-orange); font-weight:600 }
.ecard .btn{ margin-top:auto }


/* ===== 7. OUTPUT ===== */
.output{ padding: 110px 0 80px }
.output-card{
  max-width: 1080px; margin: 0 24px; margin-left:auto; margin-right:auto;
  background: var(--glass-2);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border:1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  overflow:hidden;
}
.oc-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 20px;
  background: rgba(11,16,32,.04); border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em;
}
.oc-l{ display:flex; align-items:center; gap:.6rem; color:var(--ink-2) }
.oc-name{ color:var(--ink); font-weight:600 }
.oc-id{ color:var(--muted) }
.oc-stamp{ color:var(--neon-purple) }
.oc-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.oc-cell{
  padding: 24px 20px;
  border-right:1px dashed var(--line);
}
.oc-cell:last-child{ border-right:0 }
.oc-cell.decision{
  grid-column: span 5;
  background: linear-gradient(90deg, rgba(46,207,127,.1), rgba(38,168,255,.06));
  border-top:1px dashed var(--line);
  border-right:0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem;
}
.oc-key{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; color:var(--muted) }
.oc-val{ font-family:var(--f-display); font-size:1.6rem; line-height:1; margin-top:.4rem }
.oc-val.big{ font-size: 2.6rem }
.oc-val .oc-sub{ font-family:var(--f-mono); font-size:.7rem; color:var(--muted); letter-spacing:.1em; margin-left:.2rem }
.oc-val.gono{ color: var(--ok-green); font-size: 2.4rem; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-top:0 }
.oc-cond{ font-family:var(--f-mono); font-size:.74rem; color:var(--muted); letter-spacing:.1em }
@media (max-width: 800px){
  .oc-grid{ grid-template-columns: repeat(2, 1fr) }
  .oc-cell{ border-right:0; border-bottom:1px dashed var(--line) }
  .oc-cell.decision{ grid-column: span 2 }
}


/* ===== 8. INDUSTRIES ===== */
.industries{ padding: 110px 0 80px }
.ind-grid{
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.ind-card{
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--line-2); border-radius: var(--r-2);
  padding: 22px 18px; text-align:center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ind-card:hover{ transform: translateY(-3px); box-shadow:var(--shadow-2); border-color: var(--neon-purple) }
.ind-ico{ font-size: 1.8rem }
.ind-card h4{ font-family:var(--f-display); font-size:1.3rem; line-height:1; margin-top:.5rem; letter-spacing:-.01em }
.ind-card p{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; color:var(--muted); margin-top:.4rem }


/* ===== 9. EXPERTS ===== */
.experts{ padding: 110px 0 80px }
.exp-grid{
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.exp-card{
  padding: 28px; border-radius: var(--r-3);
  background: var(--glass-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--line-2);
  box-shadow: var(--shadow-1);
}
.exp-num{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--neon-orange) }
.exp-card h4{ font-family:var(--f-display); font-size:1.7rem; line-height:1; margin-top:.4rem; letter-spacing:-.01em }
.exp-card p{ color:var(--ink-2); margin-top:.7rem }


/* ===== 10. DIFF TABLE ===== */
.diff{ padding: 110px 0 80px }
.diff-table{
  max-width: 1080px; margin: 0 24px; margin-left:auto; margin-right:auto;
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border:1px solid var(--line-2); border-radius: var(--r-3);
  overflow:hidden;
  display:grid; grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-2);
}
.dh{
  padding: 18px 24px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.18em;
  background: rgba(11,16,32,.04); color:var(--muted);
  border-bottom:1px solid var(--line);
}
.dh-r{ background: linear-gradient(90deg, rgba(124,92,255,.1), rgba(38,168,255,.1)); color: var(--neon-purple) }
.dr-l, .dr-r{
  padding: 22px 24px;
  font-size: 1.05rem; color:var(--ink-2);
  border-bottom:1px dashed var(--line);
}
.dr-r{ background: rgba(124,92,255,.04); color:var(--ink) }
.dr-r b{ color:var(--neon-purple) }
.dr-l:nth-last-child(2), .dr-r:last-child{ border-bottom:0 }


/* ===== 11. FINAL CTA ===== */
.finalcta{
  padding: 140px 24px 110px;
  text-align:center;
  position:relative;
}
.cta-stage{
  max-width: 1000px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(255,122,69,.06), rgba(38,168,255,.08));
  border:1px solid var(--line-2);
  border-radius: 32px;
  padding: 80px 32px 70px;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-2);
}
.cta-stage::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(500px 300px at 20% 20%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(500px 300px at 80% 80%, rgba(255,122,69,.18), transparent 60%);
  pointer-events:none;
}
.cta-sub{ font-size:1.15rem; color:var(--ink-2); margin-top:1rem; max-width: 56ch; margin-left:auto; margin-right:auto }


/* ===== 12. CAREERS ===== */
.careers{ padding: 80px 0 110px }
.careers-grid{
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:start;
}
.career-card{
  background: var(--glass-2);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border:1px solid var(--line-2); border-radius: var(--r-3);
  padding: 30px; box-shadow: var(--shadow-1);
}
.career-card h4{ font-family:var(--f-display); font-size:1.6rem; line-height:1; letter-spacing:-.01em }
.career-card p{ color:var(--ink-2); margin-top:.7rem }
.career-card a{ color:var(--neon-purple); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.career-card ul{ list-style: none; margin: .8rem 0 1rem }
.career-card ul li::before{ content:"› "; color:var(--neon-orange) }
.career-note{ font-size:.92rem }


/* ===== FOOTER ===== */
.foot{
  padding: 64px 24px 32px;
  border-top:1px solid var(--line-2);
  background: linear-gradient(180deg, transparent, rgba(11,16,32,.03));
}
.foot-grid{
  max-width: var(--max); margin: 0 auto;
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px;
}
.foot-tag{ font-family:var(--f-display); font-size:1.2rem; margin-top:.6rem; color:var(--ink-2) }
.foot-loc{ font-family:var(--f-mono); font-size:.78rem; color:var(--muted); margin-top:.4rem; letter-spacing:.08em }
.foot-col h5{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--muted); margin-bottom:.8rem; text-transform:uppercase }
.foot-col a{ display:block; color:var(--ink-2); padding:.25rem 0; font-size:.95rem }
.foot-col a:hover{ color: var(--neon-purple) }
.foot-bar{
  max-width: var(--max); margin: 32px auto 0;
  padding-top: 20px; border-top:1px dashed var(--line-2);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; color:var(--muted);
}
.foot-bar .ok{ color:var(--ok-green); font-weight:600 }


/* ===== MODAL ===== */
.modal-root{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0;
  transition: opacity .3s ease;
}
.modal-root.open{ opacity:1; pointer-events:auto }
.modal-scrim{
  position:absolute; inset:0;
  background: rgba(11,16,32,.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.modal-card{
  position:relative;
  width: min(560px, calc(100vw - 32px));
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  border:1px solid var(--glass-edge);
  border-radius: 24px;
  padding: 36px 30px 28px;
  box-shadow: 0 30px 80px rgba(11,16,32,.25), 0 0 0 1px rgba(255,255,255,.5) inset;
  transform: translateY(16px) scale(.98);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.modal-root.open .modal-card{ transform: translateY(0) scale(1) }
.modal-x{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  background: rgba(11,16,32,.06); color:var(--ink);
  font-size:1.3rem; line-height: 1;
  transition: background .2s ease;
}
.modal-x:hover{ background: rgba(11,16,32,.12) }
.modal-tag{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; color:var(--neon-purple); margin-bottom:.6rem }
.modal-card h3{ font-family:var(--f-display); font-size: 2rem; line-height:1.05; letter-spacing:-.01em }
.modal-sub{ color:var(--ink-2); margin-top:.8rem }
.modal-email{
  margin: 20px 0 14px;
  display:flex; align-items:center; gap:1rem;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(124,92,255,.08); border:1px solid rgba(124,92,255,.2);
}
.me-l{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; color:var(--neon-purple) }
.modal-email a{ font-family:var(--f-mono); font-size:1.02rem; color:var(--ink); font-weight:500 }
.modal-meta{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); margin-bottom: 18px }
.modal-meta > div{ display:flex; flex-direction:column; gap:.2rem }
.modal-meta span{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; color:var(--muted) }
.modal-meta b{ font-size:.86rem; font-weight:500 }
.modal-foot{ font-family:var(--f-mono); font-size:.7rem; color:var(--muted); text-align:center; margin-top:14px; letter-spacing:.08em }
.modal-foot kbd{ font-family:var(--f-mono); font-size:.65rem; padding: 2px 6px; border:1px solid var(--line); border-radius:4px; background: rgba(11,16,32,.04); color: var(--ink); margin: 0 2px }

.modal-copy{
  width: 100%;
  margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em;
  color: var(--ink-muted, #3A4159);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  position: relative;
}
.modal-copy:hover{ background: rgba(124, 92, 255, .06); border-color: rgba(124,92,255,.35); color: var(--ink) }
.modal-copy .mc-icon{ display:inline-flex; align-items:center; justify-content:center }
.modal-copy .mc-done{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none;
  color: var(--ok-green, #2ECF7F);
  transition: opacity .2s ease;
}
.modal-copy.done .mc-text,
.modal-copy.done .mc-icon{ opacity: 0; transition: opacity .15s ease }
.modal-copy.done{ border-color: rgba(46,207,127,.4); background: rgba(46,207,127,.06) }
.modal-copy.done .mc-done{ opacity: 1 }


/* ===== REVEAL ON SCROLL — premium 2026 motion ===== */
/* Each element fades in with a slight upward motion AND a soft scale-in (0.95 → 1).
   Stagger is driven by --rev-d (set per-element by JS, not by entry order),
   so the same card always animates at the same offset whether it enters alone or with siblings.
   will-change is added only while animating, then cleared, to avoid permanent GPU layers. */
.reveal{
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(.965);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1) var(--rev-d, 0ms),
    transform .9s cubic-bezier(.22,.61,.36,1) var(--rev-d, 0ms);
  will-change: opacity, transform;
}
.reveal.in{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
/* After the transition completes, JS toggles .reveal-done which removes will-change
   so the GPU layer is released. Pure CSS would also work but is unreliable cross-browser. */
.reveal-done{ will-change: auto }

/* Subtle hover lift for cards that just revealed — premium micro-interaction */
.pcard.reveal-done,
.ind-card.reveal-done,
.exp-card.reveal-done,
.ecard.reveal-done,
.career-card.reveal-done,
.output-card.reveal-done{
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}


/* ============================================================
   SCROLL-PROGRESS BAR — thin, fixed, neon gradient, reads from --sp
   Updated by JS via rAF. Never blocks pointer events, hides on
   reduced-motion, and disappears entirely when at top of page.
   ============================================================ */
.scroll-prog{
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  background: transparent;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.scroll-prog.active{ opacity: 1 }
.scroll-prog::before{
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, var(--neon-purple) 0%, var(--neon-blue) 55%, var(--neon-orange) 100%);
  box-shadow: 0 0 12px rgba(124, 92, 255, .4);
  /* Use scaleX over width so the browser can compose on the GPU */
  transition: transform .08s linear;
}


/* ============================================================
   SKELETON SHIMMER — used for any element that needs a loading
   placeholder. Apply .skel as a base, .skel-text / .skel-block
   for variants. Auto-hides when the element gets .skel-loaded.
   ============================================================ */
.skel{
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(11,16,32,.04) 0%,
    rgba(124,92,255,.06) 50%,
    rgba(11,16,32,.04) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skel-shimmer 1.6s linear infinite;
}
@keyframes skel-shimmer{
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
.skel-text{ height: 14px; margin: 8px 0; border-radius: 4px }
.skel-block{ height: 100%; width: 100%; min-height: 60px }
.skel-loaded{ animation: none; background: transparent }


/* ============================================================
   IMAGE FADE-IN — applied to any <img data-lazy> by JS once
   the image has actually decoded. Prevents pop-in.
   ============================================================ */
img[data-lazy]{
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
img[data-lazy].loaded{
  opacity: 1;
  transform: scale(1);
}


/* ============================================================
   SECTION END MARKER — small "system idle" indicator before footer
   Appears as content nears its end, mirrors system-status aesthetic
   ============================================================ */
.end-marker{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 50px 24px 40px;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--muted);
  opacity: 0;
  transition: opacity .9s ease .2s;
}
.end-marker.in{ opacity: .7 }
.end-marker .dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok-green, #2ECF7F);
  box-shadow: 0 0 0 4px rgba(46,207,127,.16);
  animation: end-pulse 2.4s ease-in-out infinite;
}
@keyframes end-pulse{
  0%,100%{ opacity: .9; transform: scale(1) }
  50%    { opacity: 1;  transform: scale(1.2) }
}
.end-marker .line{
  flex: 1; max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1100px){
  .sysnav{ display:none }
  .hero-grid{ grid-template-columns: 1fr; gap: 40px }
  .hero-panel{ height: 540px; max-width: 540px; margin: 0 auto; width: 100% }
  .engine-grid, .engine-grid.reverse{ grid-template-columns: 1fr; gap: 30px }
  .engine-grid.reverse .engine-meta{ order: 0 }
  .problem-grid{ grid-template-columns: repeat(2, 1fr) }
  .eng-grid{ grid-template-columns: 1fr }
  .ind-grid{ grid-template-columns: repeat(3, 1fr) }
  .exp-grid{ grid-template-columns: 1fr }
  .careers-grid{ grid-template-columns: 1fr }
  .foot-grid{ grid-template-columns: 1fr 1fr }
  .hstep{ grid-template-columns: 70px 1fr; }
  .hs-vis{ grid-column: 1 / -1 }
  .flow-panel{ grid-template-columns: 1fr; gap: 16px }
  .flow-line{ height: 30px; width:2px; margin: 0 auto; background: linear-gradient(180deg, transparent, var(--line-2), transparent) }
  .flow-line span{ left:50%; transform:translate(-50%, 0); top:0; animation: flowDotV 3s linear infinite }
  @keyframes flowDotV{ to{ top:100% } }
}
@media (max-width: 700px){
  .hero{ padding: 36px 16px 24px }
  .sysbar{ padding: 10px 12px }
  .sys-status .status-text{ display:none }
  .brand-tag{ display:none }
  .hero-stats{ grid-template-columns: 1fr; gap: 1rem }
  .stat{ display:flex; align-items:center; justify-content:space-between }
  .problem, .solution, .platform, .how, .engagement, .output, .industries, .experts, .diff, .careers{ padding: 70px 0 50px }
  .problem-grid{ grid-template-columns: 1fr; padding: 0 16px }
  .ind-grid{ grid-template-columns: repeat(2, 1fr); padding: 0 16px }
  .sec-head{ padding: 0 16px; margin-bottom: 36px }
  .eng-grid{ padding: 0 16px }
  .how-steps{ padding: 0 16px }
  .careers-grid{ padding: 0 16px }
  .foot-grid{ grid-template-columns: 1fr }
  .foot-bar{ flex-direction: column; gap:.5rem }
  .opt-row{ grid-template-columns: 1fr; gap: 6px }
  .ob-preds li{ grid-template-columns: 1fr; gap:.3rem }
  .pred-prob{ justify-content: flex-start }
  .ceq-op{ font-size: 1.4rem }
  .combined-eq{ flex-direction: column; gap: .8rem }
  .modal-card{ padding: 28px 22px 22px }
  .modal-card h3{ font-size: 1.6rem }
  .modal-meta{ grid-template-columns: 1fr; gap: 6px }
  .hero-panel{ height: 600px }
  .risk-panel{ width: calc(100% - 12px); left:6px }
  .modules-panel{ width: 80%; left: 8% }
  .graph-panel{ width: calc(100% - 12px); right: 6px }
  .hstep{ grid-template-columns: 1fr }
  .hs-num{ font-size: 2.6rem }
  .diff-table{ grid-template-columns: 1fr }
  .dh-l, .dr-l{ border-right: 0 }
  .dh, .dr-l, .dr-r{ padding: 14px 18px }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0ms !important; transition-duration: 0ms !important }
  .ring-fill{ stroke-dashoffset: 220 !important }
  .skel{ animation: none; background: rgba(11,16,32,.04) }
  .end-marker .dot{ animation: none }
  .scroll-prog{ display: none }
  /* Reveal still applies, but instantly — no fading or scaling delay */
  .reveal{ opacity: 1; transform: none }
}