/* NeuronOps — Web estática (offline-ready)
   Brand: #243A5E / #2EC4C7 / #3ED598 / gradiente #5B4B8A → #2EC4C7 → #3ED598
   Tipografía: Inter (si está disponible) + fallbacks system
*/

:root{
  --ink:#0B1220;
  --navy:#243A5E;
  --teal:#2EC4C7;
  --green:#3ED598;
  --violet:#5B4B8A;

  --bg:#FFFFFF;
  --bg2:#F4F6F8;
  --muted:#6B7280;
  --muted2:#93A0B4;

  --card:#FFFFFF;
  --line:rgba(36,58,94,.12);

  --shadow: 0 18px 40px rgba(11,18,32,.10);
  --shadow2: 0 10px 26px rgba(11,18,32,.12);
  --radius: 22px;
  --radius2: 16px;

  --container: 1140px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

img{max-width:100%; display:block}
a{color:inherit}
p{margin:0 0 1rem}
h1,h2,h3{margin:0 0 .8rem; line-height: 1.12}
h1{font-size: clamp(2.1rem, 3.8vw, 3.4rem); letter-spacing: -.02em}
h2{font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.02em}
h3{font-size: 1.12rem; letter-spacing: -.01em}
.lead{font-size: 1.08rem; color: rgba(11,18,32,.78); max-width: 48ch}
.lead2{font-size: 1.06rem; color: rgba(11,18,32,.78); max-width: 52ch}
.muted{color: var(--muted)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.skip-link{
  position:absolute; left:-999px; top:10px;
  background: var(--navy); color:#fff; padding:10px 14px; border-radius: 999px;
}
.skip-link:focus{left:10px; z-index:999}

.container{
  width: min(100% - 40px, var(--container));
  margin-inline:auto;
}

.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.brand{display:flex; align-items:center; text-decoration:none}
.brand__logo{height: 34px; width:auto}

.nav{display:flex; align-items:center; gap: 10px}
.nav__toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
}
.nav__toggleBars{
  display:block; width:18px; height:2px; background: var(--navy); position:relative;
}
.nav__toggleBars::before,.nav__toggleBars::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background: var(--navy);
}
.nav__toggleBars::before{top:-6px}
.nav__toggleBars::after{top:6px}

.nav__menu{display:flex; align-items:center; gap: 16px}
.nav__link{
  text-decoration:none;
  color: rgba(11,18,32,.72);
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 10px;
}
.nav__link:hover{background: rgba(36,58,94,.06)}
.nav__cta{
  text-decoration:none;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(46,196,199,.14);
  color: var(--navy);
  border:1px solid rgba(46,196,199,.25);
}
.nav__cta:hover{background: rgba(46,196,199,.20)}

.hero{
  padding: 54px 0 40px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-220px -220px auto -220px;
  height: 520px;
  background: radial-gradient(closest-side, rgba(46,196,199,.18), rgba(46,196,199,0));
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute; inset:auto -180px -220px auto;
  width: 520px; height:520px;
  background: radial-gradient(closest-side, rgba(62,213,152,.16), rgba(62,213,152,0));
  pointer-events:none;
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap: 36px;
}

.kicker{
  display:flex; align-items:center; gap: 10px;
  color: rgba(36,58,94,.85);
  font-weight: 700;
  font-size: .92rem;
  margin: 0 0 16px;
}
.dot{
  width: 10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--violet), var(--teal), var(--green));
  box-shadow: 0 6px 16px rgba(46,196,199,.25);
}

.hero__ctas{display:flex; gap: 12px; margin: 20px 0 18px; flex-wrap:wrap}

.btn{
  border:1px solid transparent;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn:active{transform: translateY(1px)}
.btn.is-disabled, .btn[aria-disabled="true"]{opacity:.55; pointer-events:none; filter: grayscale(.15)}
.btn--primary{
  background: linear-gradient(135deg, var(--violet), var(--teal), var(--green));
  color:#fff;
  box-shadow: 0 14px 30px rgba(46,196,199,.18);
}
.btn--primary:hover{filter: brightness(1.02)}
.btn--ghost{
  background:#fff;
  border-color: var(--line);
  color: rgba(11,18,32,.82);
}
.btn--ghost:hover{background: rgba(36,58,94,.04)}

.hero__proof{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 14px}
.pill{
  display:flex; gap: 10px; align-items:center;
  padding: 10px 12px;
  background: #fff;
  border:1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(11,18,32,.05);
  font-weight: 650;
  color: rgba(11,18,32,.72);
}
.pill img{width:18px; height:18px; color: var(--navy)}

.hero__visual .glass{
  position:relative;
  border-radius: var(--radius);
  background: rgba(255,255,255,.70);
  border:1px solid rgba(36,58,94,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 520px;
}
.glass__bg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(800px 420px at 20% 20%, rgba(91,75,138,.18), transparent 60%),
    radial-gradient(700px 420px at 90% 30%, rgba(46,196,199,.16), transparent 58%),
    radial-gradient(700px 420px at 80% 90%, rgba(62,213,152,.16), transparent 58%);
  pointer-events:none;
}
.viz{
  position:relative;
  padding: 18px 18px 16px;
}
.viz__header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.viz__title{font-weight: 900; color: rgba(11,18,32,.80)}
.viz__chips{display:flex; gap: 6px; flex-wrap:wrap; justify-content:flex-end}
.chip{
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(36,58,94,.16);
  color: rgba(11,18,32,.76);
  background: rgba(255,255,255,.70);
}
.chip--ok{
  border-color: rgba(46,196,199,.25);
  background: rgba(46,196,199,.10);
}
.viz__body{padding-top: 8px}
.mini{padding: 12px 12px; background: rgba(255,255,255,.72); border:1px solid rgba(36,58,94,.12); border-radius: 14px; margin: 10px 0}
.mini__row{display:flex; justify-content:space-between; gap:10px; font-weight: 750}
.mini__label{color: rgba(11,18,32,.72)}
.mini__value{color: var(--navy)}
.bar{height: 8px; margin-top: 10px; border-radius: 999px; background: rgba(36,58,94,.08); overflow:hidden}
.bar span{display:block; height:100%; border-radius:999px; background: linear-gradient(90deg, var(--teal), var(--green))}
.divider{height:1px; background: rgba(36,58,94,.12); margin: 14px 0}
.timeline{display:flex; flex-direction:column; gap: 12px}
.timeline__item{display:flex; gap: 12px; align-items:flex-start}
.badge{
  width: 34px; height:34px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(36,58,94,.06);
  border:1px solid rgba(36,58,94,.14);
  color: var(--navy);
  font-weight: 900;
}
.tTitle{font-weight: 900; color: rgba(11,18,32,.82)}
.tText{color: rgba(11,18,32,.70); font-size: .95rem; margin-top: 2px}

.floating{
  position:absolute;
  inset:auto -180px -160px auto;
  width: 520px;
  opacity: .72;
  transform: rotate(-8deg);
  pointer-events:none;
}

.section{
  padding: 72px 0;
}
.section--alt{
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section__head{
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-width: 72ch;
  margin-bottom: 28px;
}
.section__head p{color: rgba(11,18,32,.72); font-size: 1.03rem}

.grid{
  display:grid;
  gap: 18px;
}
.cards{
  grid-template-columns: repeat(3, 1fr);
}
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 18px 18px 16px;
  box-shadow: 0 10px 20px rgba(11,18,32,.05);
}
.card__icon{
  width: 40px; height:40px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(46,196,199,.10);
  border:1px solid rgba(46,196,199,.20);
  margin-bottom: 10px;
}
.card__icon img{width:22px; height:22px; color: var(--navy)}
.card p{color: rgba(11,18,32,.70)}

.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: start;
  gap: 26px;
}
.bullets{
  list-style:none; padding:0; margin: 18px 0 0;
  display:flex; flex-direction:column; gap: 12px;
}
.bullets li{
  display:flex; gap: 10px; align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(36,58,94,.12);
  background: rgba(255,255,255,.70);
}
.bullets img{width:18px; height:18px; margin-top: 2px}

.panel{
  background: #fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
}
.panel__title{
  font-weight: 900;
  color: rgba(11,18,32,.80);
  margin-bottom: 14px;
}
.panel__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.metric{
  border:1px solid rgba(36,58,94,.12);
  border-radius: 16px;
  padding: 14px;
  background: rgba(244,246,248,.70);
}
.metric__k{font-weight: 850; color: rgba(11,18,32,.76)}
.metric__v{
  font-weight: 950;
  letter-spacing: -.02em;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--violet), var(--teal), var(--green));
  -webkit-background-clip: text; background-clip:text; color: transparent;
  font-size: 1.15rem;
}
.metric__t{color: rgba(11,18,32,.68); margin-top: 8px; font-size: .95rem}
.panel__foot{
  margin-top: 14px;
  opacity: .78;
  transform: translateY(6px);
}

.steps{
  list-style:none;
  padding:0;
  margin: 18px 0 0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.step{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: 0 10px 20px rgba(11,18,32,.05);
  position:relative;
  overflow:hidden;
}
.step::after{
  content:"";
  position:absolute; inset:auto -120px -120px auto;
  width: 220px; height:220px;
  background: radial-gradient(closest-side, rgba(46,196,199,.16), transparent 60%);
  pointer-events:none;
}
.step__n{
  width: 40px; height:40px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight: 950;
  color: var(--navy);
  border:1px solid rgba(46,196,199,.25);
  background: rgba(46,196,199,.10);
}
.step__c{margin-top: 12px}
.step p{color: rgba(11,18,32,.70); margin: 0}

.demo{
  margin-top: 32px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.demo__head{
  padding: 20px 20px 0;
}
.demo__head p{color: rgba(11,18,32,.72)}
.demo__grid{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  padding: 16px 16px 20px;
}
.demo__list{
  display:flex; flex-direction:column; gap: 10px;
  padding-right: 14px;
  border-right: 1px solid rgba(36,58,94,.12);
}
.demo__item{
  text-align:left;
  border:1px solid rgba(36,58,94,.12);
  background: rgba(244,246,248,.55);
  border-radius: 16px;
  padding: 12px 12px;
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.demo__item:hover{transform: translateY(-1px); background: rgba(244,246,248,.75)}
.demo__item[aria-selected="true"]{
  background: rgba(46,196,199,.10);
  border-color: rgba(46,196,199,.25);
}
.demo__itemTitle{display:block; font-weight: 950; color: rgba(11,18,32,.80)}
.demo__itemMeta{display:block; color: rgba(11,18,32,.62); font-size: .92rem; margin-top: 2px}

.demo__panel{
  padding-left: 18px;
}
.case{display:none}
.case.is-active{display:block}
.case__k{
  margin-top: 12px;
  font-weight: 950;
  color: rgba(11,18,32,.78);
}
.case__v{color: rgba(11,18,32,.70); margin-top: 6px}
.case ul{margin: 10px 0 0; padding-left: 18px}
.case li{margin: 6px 0; color: rgba(11,18,32,.72)}
.case__chips{display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px}

.roles{grid-template-columns: repeat(4, 1fr)}
.roleCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: 0 10px 20px rgba(11,18,32,.05);
}
.roleCard__top{display:flex; gap: 10px; align-items:center}
.roleCard__top img{width:22px; height:22px}
.roleCard p{color: rgba(11,18,32,.70)}
.roleCard ul{margin: 10px 0 0; padding-left: 18px; color: rgba(11,18,32,.72)}

.diff{grid-template-columns: repeat(2, 1fr); gap: 16px}
.diff__col{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background:#fff;
  box-shadow: 0 10px 20px rgba(11,18,32,.05);
}
.diff__col--accent{
  background: rgba(46,196,199,.08);
  border-color: rgba(46,196,199,.25);
}
.diffList{list-style:none; padding:0; margin: 14px 0 0; display:flex; flex-direction:column; gap: 10px}
.diffList li{display:flex; gap: 10px; align-items:center; color: rgba(11,18,32,.75); font-weight: 650}
.ok,.x{
  width: 26px; height:26px; border-radius: 10px;
  display:grid; place-items:center;
  font-weight: 950;
}
.ok{background: rgba(62,213,152,.16); border:1px solid rgba(62,213,152,.30); color: rgba(11,18,32,.78)}
.x{background: rgba(36,58,94,.06); border:1px solid rgba(36,58,94,.14); color: rgba(11,18,32,.60)}

.govern{
  margin-top: 20px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background:#fff;
  box-shadow: var(--shadow2);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:0;
}
.govern__copy{padding: 20px}
.govern__copy p{color: rgba(11,18,32,.72); max-width: 62ch}
.govern__tags{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 14px}
.tag{
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(36,58,94,.12);
  background: rgba(244,246,248,.70);
  color: rgba(11,18,32,.70);
  font-weight: 700;
  font-size: .9rem;
}
.govern__visual{
  background:
    radial-gradient(700px 380px at 30% 30%, rgba(91,75,138,.18), transparent 65%),
    radial-gradient(700px 380px at 80% 60%, rgba(46,196,199,.16), transparent 62%),
    radial-gradient(700px 380px at 70% 90%, rgba(62,213,152,.16), transparent 62%);
  display:flex; align-items:center; justify-content:center;
  padding: 14px;
}
.govern__visual img{opacity: .9; transform: translateY(8px)}

.cta{
  padding: 72px 0 0;
  background: var(--navy);
  color: rgba(255,255,255,.92);
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute; inset:-260px -260px auto -260px;
  height: 560px;
  background: radial-gradient(closest-side, rgba(46,196,199,.22), rgba(46,196,199,0));
}
.cta__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  padding-bottom: 42px;
}
.cta__lead{color: rgba(255,255,255,.80); max-width: 58ch}
.cta__actions{display:flex; gap: 12px; flex-wrap:wrap; margin-top: 16px}
.cta .btn--ghost{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color:#fff}
.cta .btn--ghost:hover{background: rgba(255,255,255,.12)}
.fineprint{color: rgba(255,255,255,.72); font-size: .92rem; margin-top: 14px}

.toast{
  margin-top: 12px;
  display:inline-block;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(62,213,152,.16);
  border:1px solid rgba(62,213,152,.28);
  color: rgba(255,255,255,.92);
  font-weight: 750;
}

.cta__card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  overflow:hidden;
}
.cta__cardTop{
  display:flex; align-items:center; justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.cta__logo{height: 30px}
.cta__miniK{font-weight: 850; color: rgba(255,255,255,.86)}
.cta__miniV{color: rgba(255,255,255,.72); margin-top: 2px}
.cta__cardBody{padding: 16px 18px}
.lineItem{display:flex; justify-content:space-between; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.14)}
.lineItem:last-child{border-bottom:none}

.cta__cardFoot{
  display:flex; gap: 10px;
  padding: 14px 18px 18px;
}
.spark{
  height: 10px; flex:1;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(91,75,138,.85), rgba(46,196,199,.85), rgba(62,213,152,.85));
  opacity: .85;
}

.footer{
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 18px 0 22px;
  margin-top: 20px;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap:wrap;
}
.footer__logo{height: 26px}
.footer__left p{margin: 8px 0 0; color: rgba(255,255,255,.72)}
.footer__right{display:flex; align-items:center; gap: 10px; color: rgba(255,255,255,.78)}
.footer__right a{color:#fff; text-decoration:none}
.footer__right a:hover{text-decoration:underline}
.sep{opacity:.6}

/* Reveal animations */
.reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .hero__grid, .split, .cta__grid, .govern{grid-template-columns: 1fr}
  .cards{grid-template-columns: repeat(2, 1fr)}
  .roles{grid-template-columns: repeat(2, 1fr)}
  .steps{grid-template-columns: repeat(2, 1fr)}
  .demo__grid{grid-template-columns: 1fr}
  .demo__list{border-right:none; padding-right:0; flex-direction:row; overflow:auto}
  .demo__panel{padding-left:0; padding-top: 10px}
  .floating{inset:auto -220px -220px auto; width: 520px; opacity:.55}
}
@media (max-width: 640px){
  .cards{grid-template-columns: 1fr}
  .roles{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .brand__logo{height: 30px}
  .topbar__inner{padding: 12px 0}
  .hero{padding-top: 44px}
}

/* Mobile nav */
@media (max-width: 820px){
  .nav__toggle{display:inline-flex}
  .nav__menu{
    position:absolute;
    right: 20px;
    top: 62px;
    width: min(92vw, 340px);
    background: rgba(255,255,255,.98);
    border:1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow2);
    padding: 10px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 6px;
  }
  .nav__menu.is-open{display:flex}
  .nav__link{padding: 10px 12px}
  .nav__cta{display:inline-flex; justify-content:center}
}

/* ──────────────────────────────────────────────────────────
   Simulador NeuronOps (Scenario Studio)
   - 100% offline
   - Visual: canvas + SVG overlay
   - Accesible y responsive
   ────────────────────────────────────────────────────────── */

.sim{display:grid; grid-template-columns: 420px 1fr; gap: 18px; align-items:start}
.sim__left{background: rgba(255,255,255,.72); border:1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: var(--shadow)}
.sim__right{background: rgba(255,255,255,.72); border:1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: var(--shadow)}

.sim__stepper{display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px}
.sim__step{display:flex; flex-direction:column; gap: 6px; align-items:center; text-align:center; padding: 10px 8px; border-radius: 14px; border:1px solid var(--line); background: rgba(255,255,255,.72)}
.sim__step span{width: 28px; height: 28px; border-radius: 999px; display:grid; place-items:center; font-weight: 800; background: rgba(36,58,94,.10); color: var(--ink)}
.sim__step small{font-size: 12px; color: var(--muted); font-weight: 700}
.sim__step.is-active{border-color: rgba(46,196,199,.55); box-shadow: 0 0 0 4px rgba(46,196,199,.14)}

.sim__group{border:0; margin: 0 0 14px 0; padding: 0}
.sim__group legend{font-weight: 900; letter-spacing: .2px; margin-bottom: 10px}
.sim__options{display:flex; flex-wrap:wrap; gap: 10px}

.simOpt{display:inline-flex; align-items:center; gap: 8px; padding: 10px 12px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.82); color: var(--ink); font-weight: 800; cursor:pointer; user-select:none}
.simOpt:hover{transform: translateY(-1px)}
.simOpt:active{transform: translateY(0)}
.simOpt[aria-pressed="true"], .simOpt.is-on{border-color: rgba(46,196,199,.72); background: rgba(46,196,199,.10)}
.simOpt__dot{width: 10px; height: 10px; border-radius: 999px; background: rgba(36,58,94,.25)}
.simOpt[aria-pressed="true"] .simOpt__dot{background: rgba(46,196,199,.95)}

.sim__miniForm{margin-top: 10px; border-top:1px solid var(--line); padding-top: 14px}
.sim__miniHead h3{margin: 0 0 4px 0; font-size: 16px}
.sim__miniHead p{margin:0 0 12px 0; color: var(--muted); font-size: 13px}
.sim__fields{display:grid; grid-template-columns: 1fr; gap: 10px}
.sim__field span{display:block; font-size: 12px; color: var(--muted); font-weight: 800; margin-bottom: 6px}
.sim__field input{width:100%; padding: 10px 12px; border-radius: 12px; border:1px solid var(--line); background: rgba(255,255,255,.96); outline:none}
.sim__field input:focus{box-shadow: 0 0 0 4px rgba(46,196,199,.14); border-color: rgba(46,196,199,.60)}
.sim__actions{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px}
.sim__note{margin-top: 10px; color: var(--muted); font-size: 12px}

.sim__viz{position: relative; border-radius: 16px; border:1px solid var(--line); background: linear-gradient(180deg, rgba(36,58,94,.06), rgba(46,196,199,.05)); overflow:hidden; height: 320px}
.sim__canvas{position:absolute; inset:0; width:100%; height:100%}
.sim__overlay{position:absolute; inset:0; width:100%; height:100%}

.sim__result{margin-top: 14px}
.sim__title{font-weight: 950; font-size: 18px; letter-spacing: -.2px}
.sim__subtitle{color: var(--muted); margin-top: 4px; font-size: 13px}

.sim__blocks{display:grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px}
.simBlock{border:1px solid var(--line); background: rgba(255,255,255,.86); border-radius: 16px; padding: 12px}
.simBlock__k{font-weight: 950; font-size: 12px; color: var(--muted); letter-spacing: .2px}
.simBlock__v{margin-top: 6px; font-size: 14px; line-height: 1.55}

.sim__mods{margin-top: 12px; border-top:1px solid var(--line); padding-top: 12px}
.sim__modsK{font-weight: 950; font-size: 12px; color: var(--muted); letter-spacing: .2px}
.sim__modsV{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 8px}
.simMod{display:inline-flex; align-items:center; gap: 8px; padding: 9px 12px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.82); font-weight: 900}
.simMod i{width: 10px; height: 10px; border-radius: 999px; background: rgba(62,213,152,.85)}

.sim__confidence{display:flex; align-items:center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 14px; border:1px solid rgba(46,196,199,.30); background: rgba(46,196,199,.08)}
.sim__confidenceDot{width: 10px; height: 10px; border-radius: 999px; background: rgba(46,196,199,.95); filter: drop-shadow(0 0 8px rgba(46,196,199,.45))}

.simNode{cursor: default}
.simNode__bg{fill: rgba(255,255,255,.90); stroke: rgba(36,58,94,.22); stroke-width: 2}
.simNode__bg.is-focus{stroke: rgba(46,196,199,.90); filter: url(#glow)}
.simNode__label{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 900; font-size: 20px; fill: rgba(11,16,23,.92)}
.simNode__meta{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; font-size: 14px; fill: rgba(11,16,23,.62)}
.simEdge{stroke: rgba(36,58,94,.22); stroke-width: 4; fill: none}
.simEdge.is-break{stroke: rgba(255, 99, 132, .65); stroke-dasharray: 10 10}
.simEdge.is-fix{stroke: rgba(62,213,152,.75)}

@media (max-width: 980px){
  .sim{grid-template-columns: 1fr}
  .sim__viz{height: 280px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none}
  .btn{transition:none}
  .demo__item{transition:none}
}