/* ==========================================================================
   iWeb.mx — Futuristic neon-on-dark · mobile first
   ========================================================================== */

:root{
  --bg:        #05060d;
  --bg-2:      #0a0d1a;
  --bg-3:      #11142a;
  --ink:       #e7ecff;
  --ink-dim:   #9aa3c7;
  --ink-mute:  #5b6388;
  --line:      rgba(120,140,200,.14);
  --line-2:    rgba(120,140,200,.28);

  --cyan:      #00f0ff;
  --magenta:   #ff2bd6;
  --green:     #5dff9b;
  --violet:    #8a5bff;

  --grad-1:    linear-gradient(135deg, #00f0ff 0%, #8a5bff 60%, #ff2bd6 100%);
  --grad-2:    linear-gradient(135deg, #5dff9b 0%, #00f0ff 100%);

  --rad:       14px;
  --rad-lg:    22px;
  --maxw:      1200px;

  --shadow-glow: 0 0 0 1px rgba(0,240,255,.25), 0 12px 48px -12px rgba(0,240,255,.35);

  --ease:      cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
::selection{background:var(--cyan);color:#001218}

.mono{font-family:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; letter-spacing:.02em}

/* ============================== Background FX =============================== */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-grid{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(120,140,200,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,200,.05) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}
.fx-glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.45;mix-blend-mode:screen;will-change:transform}
.fx-glow--cyan{    width:520px;height:520px; background:#00f0ff; top:-160px; left:-120px; animation: float 18s var(--ease) infinite alternate;}
.fx-glow--magenta{ width:560px;height:560px; background:#ff2bd6; top:30%;    right:-180px; animation: float 22s var(--ease) infinite alternate-reverse;}
.fx-glow--green{   width:440px;height:440px; background:#5dff9b; bottom:-160px; left:30%; opacity:.30; animation: float 26s var(--ease) infinite alternate;}
.fx-scan{position:absolute;inset:0;background:repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px); mix-blend-mode:overlay; opacity:.7}
#fx-particles{position:absolute;inset:0;width:100%;height:100%}

@keyframes float{
  0%   { transform: translate3d(0,0,0) scale(1)    }
  100% { transform: translate3d(40px,-30px,0) scale(1.1) }
}

/* ============================== Layout primitives ============================== */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding: 0 20px; position:relative; z-index:1}

.section{ padding: clamp(64px, 9vw, 120px) 0; position:relative; z-index:1}
.section--alt{ background:linear-gradient(180deg, transparent, rgba(10,13,26,.65) 30%, rgba(10,13,26,.65) 70%, transparent); }

.section__head{ max-width:780px; margin:0 auto clamp(32px, 5vw, 56px); text-align:center}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border:1px solid var(--line-2); border-radius:999px;
  font: 500 12px/1 'JetBrains Mono', monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);
  background:rgba(255,255,255,.02); backdrop-filter: blur(8px);
}
.dot{ width:8px;height:8px;border-radius:50%; box-shadow:0 0 12px currentColor}
.dot--cyan   { background:var(--cyan);    color:var(--cyan)}
.dot--magenta{ background:var(--magenta); color:var(--magenta)}
.dot--green  { background:var(--green);   color:var(--green); animation: pulse 1.6s ease-in-out infinite}
@keyframes pulse{ 50%{ opacity:.4 } }

.h2{
  font-family:'Space Grotesk', sans-serif;
  font-size: clamp(30px, 5vw, 52px);
  line-height:1.05; letter-spacing:-.02em; font-weight:700;
  margin:14px 0 14px;
}
.lede{ color:var(--ink-dim); font-size: clamp(15px, 1.6vw, 18px); max-width:62ch; margin: 0 auto}

.grad{
  background:var(--grad-1);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad--alt{ background:var(--grad-2); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ============================== Buttons ============================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 13px 18px; border-radius: 999px;
  font-weight:600; font-size:14px; letter-spacing:.01em;
  border:1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space:nowrap;
}
.btn--primary{
  color:#001218;
  background: var(--grad-1);
  box-shadow: 0 0 0 1px rgba(0,240,255,.25), 0 18px 60px -18px rgba(0,240,255,.65), 0 18px 60px -28px rgba(255,43,214,.45);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,240,255,.45), 0 28px 80px -16px rgba(0,240,255,.8), 0 24px 80px -22px rgba(255,43,214,.6); }
.btn--ghost{ color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.02); backdrop-filter: blur(10px);}
.btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); transform: translateY(-2px) }

/* ============================== Nav ============================== */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px;
  padding: 14px 20px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background: rgba(5,6,13,.55);
  border-bottom:1px solid var(--line);
}
.nav__logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.nav__logo-mark{
  width:34px;height:34px;display:grid;place-items:center;
  background: rgba(0,240,255,.06); border:1px solid var(--line-2); border-radius:10px;
  box-shadow: inset 0 0 30px rgba(0,240,255,.15);
}
.nav__logo-text{font-size:18px}
.nav__logo-text em{font-style:normal; color:var(--ink-dim); font-weight:500}
.nav__links{display:none; gap:6px; margin-left:8px}
.nav__links a{ padding:8px 12px; border-radius:8px; color:var(--ink-dim); font-size:14px; font-weight:500; transition: color .2s, background .2s}
.nav__links a:hover{ color:var(--ink); background:rgba(255,255,255,.04)}
.nav__cta{display:none; margin-left:auto}

.nav__menu{display:inline-flex; flex-direction:column; gap:5px; padding:10px; margin-left:auto; border:1px solid var(--line-2); border-radius:10px}
.nav__menu span{ display:block; width:18px;height:2px; background:var(--ink); border-radius:2px; transition: transform .25s, opacity .25s}
.nav__menu[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg)}
.nav__menu[aria-expanded="true"] span:nth-child(2){ opacity:0}
.nav__menu[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg)}

@media (min-width: 900px){
  .nav__links{display:flex}
  .nav__cta{display:inline-flex}
  .nav__menu{display:none}
}

.nav-mobile{
  display:none;
  position:fixed; inset:64px 0 0 0; z-index:49;
  padding:24px 20px;
  background: rgba(5,6,13,.92); backdrop-filter: blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-mobile a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:18px; font-weight:600}
.nav-mobile.is-open{ display:block }
@media (min-width: 900px){ .nav-mobile{ display:none !important } }

/* ============================== Hero ============================== */
.hero{ padding: clamp(60px, 10vw, 120px) 0 clamp(40px, 6vw, 80px); position:relative; z-index:1}
.hero__inner{ text-align:center }
.hero__pre{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border:1px solid var(--line-2); border-radius:999px;
  background: rgba(255,255,255,.02);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
  margin-bottom:22px;
}
.hero__title{
  font-size: clamp(40px, 8.6vw, 96px);
  line-height: .98; letter-spacing:-.03em; font-weight:700;
  margin:0 0 22px;
}
.hero__sub{ max-width: 64ch; margin: 0 auto 30px; color: var(--ink-dim); font-size: clamp(15px, 1.7vw, 19px) }
.hero__sub strong{ color: var(--ink); font-weight:600 }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:48px }

/* Terminal */
.terminal{
  margin: 0 auto;
  max-width: 760px; text-align:left;
  background: linear-gradient(180deg, rgba(10,13,26,.92), rgba(5,6,13,.92));
  border:1px solid var(--line-2); border-radius:var(--rad-lg);
  box-shadow: 0 0 0 1px rgba(0,240,255,.08), 0 30px 80px -30px rgba(0,240,255,.35), 0 30px 80px -40px rgba(255,43,214,.25);
  overflow:hidden;
}
.terminal__bar{
  display:flex; align-items:center; gap:6px; padding: 10px 14px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);
}
.terminal__bar i{ width:11px;height:11px;border-radius:50%; background:#1f2540 }
.terminal__bar i:nth-child(1){ background:#ff5f56 }
.terminal__bar i:nth-child(2){ background:#ffbd2e }
.terminal__bar i:nth-child(3){ background:#27c93f }
.terminal__bar span{ margin-left:auto; font-size:11px; color:var(--ink-mute) }
.terminal__body{
  margin:0; padding: 18px 18px 22px; min-height: 168px;
  font: 13px/1.65 'JetBrains Mono', monospace;
  white-space: pre-wrap; word-break: break-word;
  color:#cfe2ff;
}
.terminal__body .c-cyan   { color: var(--cyan) }
.terminal__body .c-mag    { color: var(--magenta) }
.terminal__body .c-green  { color: var(--green) }
.terminal__body .c-dim    { color: var(--ink-mute) }
.cursor{ display:inline-block; width:8px; height:14px; background:var(--cyan); transform: translateY(2px); animation: blink 1s steps(1) infinite}
@keyframes blink{ 50%{opacity:0} }

/* Stats */
.stats{ list-style:none; padding:0; margin: 56px auto 0; display:grid; grid-template-columns: repeat(2,1fr); gap:14px; max-width: 760px}
.stats li{
  border:1px solid var(--line); border-radius:var(--rad);
  padding: 18px; background: rgba(255,255,255,.015);
  text-align:left;
}
.stats b{ display:block; font-size: clamp(22px, 3.4vw, 30px); font-weight:700; background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stats span{ color:var(--ink-dim); font-size:13px }
@media (min-width:700px){ .stats{ grid-template-columns: repeat(4,1fr) } }

/* ============================== Cards (Servicios) ============================== */
.cards{ display:grid; grid-template-columns: 1fr; gap:14px}
@media (min-width: 700px){ .cards{ grid-template-columns: repeat(2,1fr) } }
@media (min-width: 1000px){ .cards{ grid-template-columns: repeat(3,1fr) } }

.card{
  position:relative; padding: 26px;
  border:1px solid var(--line-2); border-radius:var(--rad-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  overflow:hidden; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(380px 140px at var(--mx,50%) var(--my,0%), rgba(0,240,255,.18), transparent 60%);
  opacity:0; transition: opacity .3s;
}
.card:hover{ transform: translateY(-4px); border-color: rgba(0,240,255,.4); box-shadow: 0 30px 80px -40px rgba(0,240,255,.4); }
.card:hover::before{ opacity:1 }

.card__icon{
  width:56px;height:56px; border-radius:14px;
  display:grid; place-items:center; color: var(--cyan);
  background: linear-gradient(135deg, rgba(0,240,255,.18), rgba(0,240,255,.04));
  border:1px solid rgba(0,240,255,.25);
  margin-bottom:18px;
}
.card__icon--magenta{ color: var(--magenta); background: linear-gradient(135deg, rgba(255,43,214,.2), rgba(255,43,214,.04)); border-color: rgba(255,43,214,.3)}
.card__icon--green  { color: var(--green);   background: linear-gradient(135deg, rgba(93,255,155,.2), rgba(93,255,155,.04)); border-color: rgba(93,255,155,.3)}
.card h3{ font-size:20px; margin: 0 0 8px; letter-spacing:-.01em }
.card p{ color:var(--ink-dim); margin:0 0 14px; font-size:15px }
.taglist{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px}
.taglist li{
  font: 500 11px/1 'JetBrains Mono', monospace;
  padding:6px 10px; border-radius:999px; color:var(--ink-dim);
  border:1px solid var(--line); background:rgba(255,255,255,.025);
}

/* ============================== Industrias ============================== */
.ind{ display:grid; grid-template-columns: 1fr; gap: 12px}
@media (min-width:700px){ .ind{ grid-template-columns: repeat(2,1fr) } }
@media (min-width:1000px){ .ind{ grid-template-columns: repeat(3,1fr) } }
.ind__card{
  padding: 26px; border:1px solid var(--line-2); border-radius:var(--rad-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  display:block; transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.ind__card:hover{ transform: translateY(-3px); border-color: rgba(255,43,214,.45); background: linear-gradient(180deg, rgba(255,43,214,.06), rgba(255,255,255,.005)) }
.ind__num{
  font: 700 13px/1 'JetBrains Mono', monospace; letter-spacing:.16em;
  color:var(--magenta); margin-bottom: 14px;
}
.ind__card h3{ margin: 0 0 8px; font-size:20px; letter-spacing:-.01em }
.ind__card p{ color:var(--ink-dim); margin:0; font-size:15px }

/* ============================== Stack ============================== */
.stack{ display:grid; gap: 40px; grid-template-columns: 1fr; align-items:center }
@media (min-width:1000px){ .stack{ grid-template-columns: 1fr 1fr; gap: 60px } }

.bullets{ list-style:none; padding:0; margin: 18px 0 0; display:grid; gap:12px; }
.bullets li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-dim) }
.bullets li span{ font-size:18px; line-height:1 }

.stack__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px }
@media (min-width:480px){ .stack__grid{ grid-template-columns: repeat(4,1fr) } }
.chip{
  padding: 14px 12px; text-align:center;
  border:1px solid var(--line); border-radius:12px;
  background: rgba(255,255,255,.02);
  font: 500 13px/1 'JetBrains Mono', monospace;
  color: var(--ink-dim);
  transition: transform .25s, color .25s, border-color .25s, background .25s;
}
.chip:hover{ color:var(--ink); border-color: rgba(0,240,255,.4); background: rgba(0,240,255,.06); transform: translateY(-2px) }

/* ============================== Steps ============================== */
.steps{ list-style:none; padding:0; margin:0; display:grid; gap:14px}
@media (min-width:800px){ .steps{ grid-template-columns: repeat(5,1fr) } }
.steps li{
  position:relative;
  padding:24px; border:1px solid var(--line-2); border-radius:var(--rad-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
}
.steps__n{
  font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing:.18em;
  color: var(--green); margin-bottom: 12px;
}
.steps li h3{ margin: 0 0 6px; font-size:17px }
.steps li p{ color:var(--ink-dim); margin:0; font-size:14px }

/* ============================== CTA ============================== */
.cta{}
.cta__inner{
  position:relative; padding: clamp(28px, 5vw, 56px);
  border:1px solid var(--line-2); border-radius: 28px;
  background:
    radial-gradient(800px 300px at 0% 0%, rgba(0,240,255,.12), transparent 60%),
    radial-gradient(700px 280px at 100% 100%, rgba(255,43,214,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,13,26,.7), rgba(5,6,13,.7));
  text-align:center;
  overflow:hidden;
}
.cta__inner::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  padding:1px;
  background: linear-gradient(135deg, rgba(0,240,255,.4), rgba(255,43,214,.4) 60%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.7;
}
.cta__grid{ display:grid; grid-template-columns: 1fr; gap:12px; margin: 28px 0 18px}
@media (min-width:700px){ .cta__grid{ grid-template-columns: repeat(2,1fr) } }
@media (min-width:1000px){ .cta__grid{ grid-template-columns: repeat(4,1fr) } }
.cta__item{
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:16px; border:1px solid var(--line); border-radius:var(--rad);
  background: rgba(255,255,255,.02);
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}
.cta__item:hover{ transform: translateY(-3px); border-color: rgba(0,240,255,.4); background: rgba(0,240,255,.05); }
.cta__item--static{ cursor:default }
.cta__item--static:hover{ transform: none; border-color:var(--line); background: rgba(255,255,255,.02) }
.cta__icon{
  width:42px;height:42px; flex:0 0 42px; border-radius:10px; display:grid; place-items:center;
  color:var(--cyan); background: rgba(0,240,255,.08); border:1px solid rgba(0,240,255,.25);
}
.cta__icon--magenta{ color:var(--magenta); background: rgba(255,43,214,.08); border-color: rgba(255,43,214,.3)}
.cta__icon--green  { color:var(--green);   background: rgba(93,255,155,.08); border-color: rgba(93,255,155,.3)}
.cta__item span.mono{ display:block; font-size:11px; color:var(--ink-mute); letter-spacing:.16em; text-transform:uppercase}
.cta__item strong{ display:block; font-size:15px; margin-top:2px }

.cta__foot{ color:var(--ink-mute); font-size:12px; margin: 14px 0 0 }

/* ============================== Footer ============================== */
.foot{ position:relative; z-index:1; border-top:1px solid var(--line); margin-top: 40px }
.foot__inner{ display:grid; gap:32px; padding: 56px 20px 24px; grid-template-columns:1fr }
@media (min-width:800px){ .foot__inner{ grid-template-columns: 1.4fr 2fr } }
.foot__brand p{ color:var(--ink-dim); max-width: 36ch; margin-top:10px }
.foot__cols{ display:grid; gap:32px; grid-template-columns: repeat(2,1fr) }
@media (min-width:600px){ .foot__cols{ grid-template-columns: repeat(3,1fr) } }
.foot__cols h4{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin: 0 0 12px}
.foot__cols a, .foot__cols span{ display:block; padding:5px 0; color:var(--ink-dim); font-size:14px; transition:color .2s }
.foot__cols a:hover{ color:var(--cyan) }
.foot__bar{
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  padding: 18px 20px; color:var(--ink-mute); font-size:12px;
  max-width: var(--maxw); margin: 0 auto;
}

/* ============================== Inner pages ============================== */
.crumbs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font: 500 12px/1 'JetBrains Mono', monospace; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-mute); padding-top: 28px;
}
.crumbs a{ color:var(--ink-dim) }
.crumbs a:hover{ color: var(--cyan) }
.crumbs span.sep{ opacity:.5 }

.page-hero{ padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 60px); }
.page-hero__inner{ max-width: 880px }
.page-hero h1{
  font-size: clamp(36px, 6vw, 68px); line-height: 1.02; letter-spacing:-.02em; font-weight:700;
  margin: 18px 0 16px;
}
.page-hero p.lede{ margin: 0; max-width: 64ch; text-align:left }
.page-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 26px}

.split{ display:grid; gap: 28px; grid-template-columns: 1fr; align-items:start }
@media (min-width: 980px){ .split{ grid-template-columns: 1.1fr .9fr; gap: 56px } }

.split h2{
  font-size: clamp(26px, 3.4vw, 36px); line-height:1.1; letter-spacing:-.015em;
  margin: 12px 0 14px;
}
.split p{ color: var(--ink-dim); font-size: 16px; margin: 0 0 14px}
.split ul.checks{ list-style:none; padding:0; margin: 6px 0 0; display:grid; gap:10px}
.split ul.checks li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-dim); font-size:15px}
.split ul.checks li::before{
  content:""; flex:0 0 18px; width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--cyan), transparent 70%);
  box-shadow: 0 0 12px rgba(0,240,255,.55), inset 0 0 0 1px rgba(0,240,255,.4);
  margin-top: 3px;
}
.split--magenta ul.checks li::before{
  background: radial-gradient(circle at 30% 30%, var(--magenta), transparent 70%);
  box-shadow: 0 0 12px rgba(255,43,214,.55), inset 0 0 0 1px rgba(255,43,214,.4);
}
.split--green ul.checks li::before{
  background: radial-gradient(circle at 30% 30%, var(--green), transparent 70%);
  box-shadow: 0 0 12px rgba(93,255,155,.55), inset 0 0 0 1px rgba(93,255,155,.4);
}

.split__panel{
  position: sticky; top: 88px;
  padding: 22px;
  border:1px solid var(--line-2); border-radius: var(--rad-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
}
.split__panel h4{ margin: 0 0 12px; font-size: 13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim)}
.split__panel ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px}
.split__panel li{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding: 10px 12px; border-radius: 10px; border:1px solid var(--line);
  background: rgba(255,255,255,.02); font-size:14px;
}
.split__panel li b{ color: var(--ink) }
.split__panel li span.mono{ color: var(--ink-mute); font-size: 11px}

.benefits{ display:grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px){ .benefits{ grid-template-columns: repeat(2,1fr) } }
@media (min-width: 1000px){ .benefits{ grid-template-columns: repeat(3,1fr) } }
.benefit{
  padding: 22px; border:1px solid var(--line-2); border-radius: var(--rad-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.benefit:hover{ transform: translateY(-3px); border-color: rgba(0,240,255,.4); box-shadow: 0 22px 60px -30px rgba(0,240,255,.4) }
.benefit__n{ font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing:.18em; color: var(--cyan); margin-bottom:10px}
.benefit h3{ margin: 0 0 6px; font-size: 18px; letter-spacing:-.01em }
.benefit p{ color: var(--ink-dim); margin: 0; font-size: 14px }

.related{ display:grid; gap:12px; grid-template-columns: 1fr; margin-top: 12px}
@media (min-width: 700px){ .related{ grid-template-columns: repeat(2,1fr) } }
@media (min-width: 1100px){ .related{ grid-template-columns: repeat(4,1fr) } }
.related a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 14px 16px; border:1px solid var(--line-2); border-radius: 12px;
  background: rgba(255,255,255,.02); transition: transform .25s var(--ease), border-color .25s, color .25s;
  font-size: 14px; font-weight: 600;
}
.related a:hover{ transform: translateY(-2px); border-color: rgba(0,240,255,.4); color: var(--cyan)}
.related a span{ color: var(--ink-mute); font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing:.16em }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border:1px solid var(--line-2); border-radius:999px;
  font: 500 12px/1 'JetBrains Mono', monospace; letter-spacing:.14em; text-transform:uppercase;
  color: var(--cyan); background: rgba(0,240,255,.05);
}
.tag--magenta{ color: var(--magenta); background: rgba(255,43,214,.05); border-color: rgba(255,43,214,.25)}
.tag--green  { color: var(--green);   background: rgba(93,255,155,.05); border-color: rgba(93,255,155,.25)}

/* ============================== Reveal animations ============================== */
[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease) }
[data-reveal].is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none }
  .fx-glow, .dot--green, .cursor{ animation: none !important }
  html{ scroll-behavior:auto }
}