/* ============================================================
   VulnMan — Vulnerability Management Platform
   by Layer 8 Security
   Design system: dark SaaS, signature violet→cyan gradient,
   luminous-edge cards, atmospheric glow. Hand-crafted, no build.
   ============================================================ */

/* --- Fuentes de marca (self-host · licencia web) --- */
@font-face{font-family:'Flama';src:url('../fonts/Flama-Book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Flama';src:url('../fonts/Flama-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Flama';src:url('../fonts/Flama-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Flama';src:url('../fonts/Flama-Black.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Proxima Nova';src:url('../fonts/ProximaNova-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Proxima Nova';src:url('../fonts/ProximaNova-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Proxima Nova';src:url('../fonts/ProximaNova-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Proxima Nova';src:url('../fonts/ProximaNova-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* --- Design tokens (alineados al Manual de marca VulnMan) --- */
:root {
  /* Superficies — Azul noche #180636 */
  --bg:          #ffffff;
  --night:       #180636;  /* azul noche: anchor/acento, no base */
  --bg-2:        #f0f0f0;
  --panel:       #ffffff;
  --panel-2:     #f5f5f7;
  --elevate:     #ffffff;

  /* Paleta oficial (azul eléctrico + cian neón) */
  --indigo:      #3e3cff;
  --indigo-2:    #3e3cff;
  --blue:        #3e3cff;
  --cyan:        #7ffdef;
  --teal:        #7ffdef;
  --violet:      #3e3cff;

  /* Texto — Gris claro neutro #f0f0f0 */
  --text:        #180636;
  --text-dim:    rgba(24,6,54,.78);
  --muted:       rgba(24,6,54,.60);
  --faint:       rgba(24,6,54,.45);

  /* Severity scale (semántica de producto, no de marca) */
  --crit:        #F43F5E;
  --high:        #FB923C;
  --med:         #FBBF24;
  --low:         #34D399;

  /* Lines / fills */
  --rule:        rgba(24,6,54,.12);
  --rule-2:      rgba(24,6,54,.16);
  --glass:       rgba(24,6,54,.03);
  --glass-2:     rgba(24,6,54,.05);

  /* Degradado oficial #180636 → #3e3cff → #7ffdef */
  --grad: linear-gradient(110deg, #3e3cff 0%, #7ffdef 100%);
  --grad-deep: linear-gradient(135deg, #180636 0%, #3e3cff 55%, #7ffdef 100%);
  --grad-soft: linear-gradient(135deg, rgba(62,60,255,.18), rgba(127,253,239,.12));
  --grad-text: linear-gradient(100deg, #3e3cff 0%, #19b8c4 100%);

  /* Type — Flama (títulos) + Proxima Nova (cuerpo) */
  --font-head: 'Flama', 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Proxima Nova', 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Spacing rhythm */
  --s1: .25rem; --s2: .5rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2rem;   --s6: 3rem;  --s7: 4.5rem; --s8: 6.5rem;

  /* Containers */
  --maxw: 1200px;
  --maxw-narrow: 820px;

  /* Radius / shadow */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px;
  --shadow-md: 0 18px 50px -24px rgba(0,0,0,.7);
  --shadow-lg: 0 40px 90px -40px rgba(6, 2, 20, .9);
  --glow-indigo: 0 0 0 1px rgba(62,60,255,.4), 0 20px 60px -28px rgba(62,60,255,.55);
  --glow-cyan:   0 0 0 1px rgba(127,253,239,.35), 0 22px 60px -30px rgba(127,253,239,.4);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-dim);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* --- Atmospheric background --- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(62,60,255,.05), transparent 60%),
    radial-gradient(760px 520px at 6% 4%, rgba(62,60,255,.035), transparent 58%),
    radial-gradient(1100px 700px at 50% 108%, rgba(62,60,255,.03), transparent 60%),
    var(--bg);
}
/* subtle grain/grid overlay */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(24,6,54,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,6,54,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
  opacity: .3;
}

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 700;
}
p { margin: 0 0 1rem; }
.lead { font-size: 1.12rem; color: var(--text-dim); }

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

/* --- Layout helpers --- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding: var(--s8) 0; position: relative; }
.section--tight { padding: var(--s7) 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue);
  padding: .35rem .7rem;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--glass);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 10px var(--blue);
}
.section-head { max-width: 680px; margin-bottom: var(--s6); }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 1.1rem 0 .9rem; }
.section-head p { color: var(--muted); font-size: 1.06rem; margin: 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { margin-inline: auto; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: .96rem; letter-spacing: -.01em;
  padding: .85rem 1.4rem; border-radius: 12px;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary {
  color: #fff; position: relative;
  background: var(--blue);
  box-shadow: 0 10px 28px -12px rgba(62,60,255,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -14px rgba(127,253,239,.75), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--ghost {
  color: var(--text);
  border: 1px solid var(--rule-2);
  background: var(--glass);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--indigo-2); background: var(--glass-2); transform: translateY(-2px); }
.btn--lg { padding: 1rem 1.7rem; font-size: 1.02rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 74px;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand img { height: 26px; width: auto; }
.brand__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.28rem;
  letter-spacing: -.02em; color: var(--text);
}
.brand__name b { font-weight: 700; }
.brand__name .grad-text { font-weight: 700; }

.nav__links { display: flex; align-items: center; gap: .35rem; }
.nav__links a {
  font-size: .92rem; color: var(--text-dim);
  padding: .5rem .85rem; border-radius: 9px;
  transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--text); background: var(--glass-2); }
.nav__cta { display: flex; align-items: center; gap: .6rem; }

.nav__toggle {
  display: none; width: 44px; height: 44px;
  border-radius: 10px; border: 1px solid var(--rule-2);
  background: var(--glass); align-items: center; justify-content: center;
}
.nav__toggle span { position: relative; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; }
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s;
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: rotate(45deg); top: 0; }
.nav.is-open .nav__toggle span::after { transform: rotate(-45deg); top: 0; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: var(--s7) 0 var(--s8); position: relative; }
.hero__grid {
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: var(--s6); align-items: center;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; color: var(--text-dim);
  padding: .4rem .4rem .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--rule-2); background: var(--glass);
  margin-bottom: 1.4rem;
}
.hero__badge .pill {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: #180636; background: var(--grad);
  padding: .22rem .55rem; border-radius: 999px; font-weight: 600;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.05rem);
  line-height: 1.02; letter-spacing: -.03em; margin-bottom: 1.25rem;
}
.hero h1 .grad-text { display: inline; }
.hero__sub { font-size: 1.18rem; color: var(--text-dim); max-width: 33ch; margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.4rem; }
.hero__trust {
  display: flex; gap: 1.8rem; flex-wrap: wrap;
  padding-top: 1.6rem; border-top: 1px solid var(--rule);
}
.hero__trust div { line-height: 1.2; }
.hero__trust .n { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--text); display: block; }
.hero__trust .l { font-size: .82rem; color: var(--muted); }

/* fade-up entrance */
.fade-up { opacity: 0; transform: translateY(18px); animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .25s; }
.d4 { animation-delay: .35s; } .d5 { animation-delay: .45s; } .d6 { animation-delay: .55s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ---- Hero dashboard mockup (native CSS) ---- */
.dash {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--rule-2);
  background:
    linear-gradient(180deg, rgba(28,30,68,.9), rgba(16,18,40,.92));
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 1.1rem;
  overflow: hidden;
}
.dash::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(62,60,255,.7), transparent 40%, transparent 70%, rgba(127,253,239,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.dash__bar {
  display: flex; align-items: center; gap: .5rem; padding: .2rem .35rem .8rem;
  border-bottom: 1px solid var(--rule); margin-bottom: .9rem;
}
.dash__dots { display: flex; gap: .4rem; }
.dash__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-2); }
.dash__dots i:nth-child(1){ background:#F43F5E55;} .dash__dots i:nth-child(2){background:#FBBF2455;} .dash__dots i:nth-child(3){background:#34D39955;}
.dash__title { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); margin-left: .4rem; }
.dash__live { margin-left: auto; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; color: var(--teal); display: inline-flex; align-items: center; gap: .35rem; }
.dash__live::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--teal); box-shadow:0 0 8px var(--teal); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.dash__row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.dash__card {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--glass); padding: .9rem;
}
.dash__label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }

/* exposure rating */
.rating { display: flex; align-items: center; gap: .85rem; }
.rating__badge {
  width: 58px; height: 58px; border-radius: 16px; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; color: #180636;
  background: conic-gradient(from 140deg, #FB923C, #FBBF24);
  box-shadow: 0 10px 24px -10px rgba(251,146,60,.7), inset 0 1px 0 rgba(255,255,255,.4);
}
.rating__meta .t { color: var(--text); font-weight: 600; }
.rating__meta .d { font-size: .78rem; color: var(--muted); }
.rating__meta .up { color: var(--low); }
.rating__scale { display: flex; gap: 3px; margin-top: .5rem; }
.rating__scale i { height: 5px; flex: 1; border-radius: 3px; background: var(--rule-2); }
.rating__scale i.on { background: var(--high); }

/* severity counts */
.sev { display: grid; gap: .5rem; }
.sev__item { display: flex; align-items: center; gap: .55rem; font-size: .82rem; }
.sev__item .k { width: 7px; height: 7px; border-radius: 2px; }
.sev__item .name { color: var(--text-dim); }
.sev__item .num { margin-left: auto; font-family: var(--font-head); font-weight: 700; color: var(--text); }
.k.crit{background:var(--crit);} .k.high{background:var(--high);} .k.med{background:var(--med);} .k.low{background:var(--low);}

/* NIST mini bars */
.nistbars { display: grid; gap: .6rem; }
.nistbar { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: .6rem; }
.nistbar .nm { font-size: .72rem; color: var(--muted); }
.nistbar .track { height: 7px; border-radius: 6px; background: rgba(240,240,240,.12); overflow: hidden; }
.nistbar .fill { height: 100%; border-radius: 6px; background: var(--grad); transform-origin: left; animation: grow 1.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes grow { from { transform: scaleX(0); } }

/* trend sparkline */
.spark { grid-column: 1 / -1; }
.spark svg { width: 100%; height: 64px; }
.spark__legend { display: flex; gap: 1rem; font-size: .72rem; color: var(--muted); margin-top: .5rem; }
.spark__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.spark__legend i { width: 14px; height: 3px; border-radius: 3px; }

/* floating ticket chip */
.dash__chip {
  position: absolute; right: -10px; bottom: 26px;
  display: flex; align-items: center; gap: .6rem;
  background: rgba(16,18,40,.95); border: 1px solid var(--rule-2);
  border-radius: 12px; padding: .6rem .8rem; box-shadow: var(--shadow-md);
  animation: float 5s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-8px); } }
.dash__chip .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(52,211,153,.16); color: var(--low); }
.dash__chip .tx b { display: block; font-size: .78rem; color: var(--text); font-family: var(--font-head); }
.dash__chip .tx span { font-size: .68rem; color: var(--muted); }

/* ============================================================
   PROBLEM
   ============================================================ */
.prob__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.prob__card {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--glass); padding: 1.6rem 1.4rem;
  transition: transform .25s, border-color .25s, background .25s;
}
.prob__card:hover { transform: translateY(-4px); border-color: var(--rule-2); background: var(--glass-2); }
.prob__num { font-family: var(--font-mono); font-size: .8rem; color: var(--crit); margin-bottom: .9rem; }
.prob__card h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.prob__card p { font-size: .92rem; color: var(--muted); margin: 0; }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.caps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.cap {
  position: relative;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  padding: 1.7rem; overflow: hidden;
  transition: transform .28s ease, border-color .28s, box-shadow .3s;
}
.cap::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(420px 200px at var(--mx,50%) -10%, rgba(62,60,255,.2), transparent 60%);
  transition: opacity .3s; pointer-events: none;
}
.cap:hover { transform: translateY(-5px); border-color: var(--rule-2); box-shadow: var(--shadow-md); }
.cap:hover::after { opacity: 1; }
.cap__ic {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 1.1rem;
  display: grid; place-items: center; color: var(--blue);
  background: rgba(62,60,255,.10); border: 1px solid rgba(62,60,255,.18);
}
.cap__ic svg { width: 24px; height: 24px; }
.cap__ico {
  width: 26px; height: 26px; display: block; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.cap h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.cap p { font-size: .94rem; color: var(--muted); margin: 0; }
.cap__tag {
  display: inline-block; margin-top: 1rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  color: var(--text-dim); padding: .25rem .6rem; border-radius: 7px;
  border: 1px solid var(--rule); background: var(--glass);
}

/* ============================================================
   NIST CSF FEATURE
   ============================================================ */
.nist { position: relative; }
.nist__panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center;
  border: 1px solid var(--rule-2); border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(20,19,46,.85), rgba(24,6,54,.6));
  padding: clamp(1.6rem, 3.5vw, 3rem); position: relative; overflow: hidden;
}
.nist__panel::before {
  content:""; position:absolute; width: 420px; height: 420px; right: -120px; top: -140px;
  background: radial-gradient(circle, rgba(62,60,255,.25), transparent 65%); pointer-events: none;
}
.nist__panel h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 1rem 0 1rem; }
.nist__panel p { color: var(--muted); }
.nist__list { margin-top: 1.3rem; display: grid; gap: .7rem; }
.nist__list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; color: var(--text-dim); }
.nist__list .chk { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--rule-2); color: var(--teal); }
.nist__list .chk svg { width: 12px; height: 12px; }

/* radar */
.radar { position: relative; aspect-ratio: 1; max-width: 420px; margin-inline: auto; width: 100%; }
.radar__note { text-align: center; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 1rem; }

/* ============================================================
   BENEFITS
   ============================================================ */
.ben__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ben {
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--glass); padding: 1.4rem;
  transition: border-color .25s, background .25s;
}
.ben:hover { border-color: var(--rule-2); background: var(--glass-2); }
.ben__ic { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: var(--blue); background: rgba(62,60,255,.10); border: 1px solid rgba(62,60,255,.18); }
.ben__ic svg { width: 20px; height: 20px; }
.ben h3 { font-size: 1.04rem; margin-bottom: .25rem; }
.ben p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ============================================================
   AUDIENCE
   ============================================================ */
.aud__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.aud {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--glass-2), transparent);
  padding: 1.6rem; transition: transform .25s, border-color .25s;
}
.aud:hover { transform: translateY(-4px); border-color: var(--indigo-2); }
.aud__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--indigo-2); background: var(--grad-soft); border: 1px solid var(--rule-2); margin-bottom: 1rem; }
.aud__ic svg { width: 22px; height: 22px; }
.aud h3 { font-size: 1.06rem; margin-bottom: .4rem; }
.aud p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule-2); border-radius: var(--r-xl);
  background: linear-gradient(120deg, rgba(62,60,255,.18), rgba(127,253,239,.10));
  padding: clamp(2.2rem, 5vw, 3.6rem); text-align: center;
}
.cta::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 50% -40%, rgba(127,253,239,.25), transparent 60%);
  pointer-events:none;
}
.cta h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: .8rem; }
.cta p { color: var(--text-dim); max-width: 52ch; margin: 0 auto 1.8rem; font-size: 1.08rem; }
.cta__btns { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--rule); padding: var(--s6) 0 var(--s5); margin-top: var(--s7); }
.footer__top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 2rem; }
.footer .brand img { height: 34px; width: auto; opacity: .9; }
.footer__by { color: var(--muted); font-size: .9rem; max-width: 34ch; margin-top: .8rem; }
.footer__col h4 { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: .9rem; }
.footer__col a, .footer__col span { display: block; color: var(--text-dim); font-size: .92rem; margin-bottom: .5rem; transition: color .2s; }
.footer__col a:hover { color: var(--cyan); }
.footer__cols { display: flex; gap: 4rem; flex-wrap: wrap; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.6rem; border-top: 1px solid var(--rule); color: var(--faint); font-size: .82rem; }
.footer__bottom .note { max-width: 60ch; }

/* placeholder marker */
.ph { color: var(--cyan); font-style: normal; border-bottom: 1px dashed rgba(127,253,239,.5); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hero__sub { max-width: 48ch; }
  .dash__chip { display: none; }
  .prob__grid { grid-template-columns: repeat(2, 1fr); }
  .caps__grid { grid-template-columns: repeat(2, 1fr); }
  .ben__grid { grid-template-columns: repeat(2, 1fr); }
  .aud__grid { grid-template-columns: repeat(2, 1fr); }
  .nist__panel { grid-template-columns: 1fr; }
  .radar { max-width: 360px; }
}
@media (max-width: 760px) {
  :root { --s8: 4.5rem; --s7: 3.4rem; }
  .nav__links, .nav__cta .btn--ghost { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__panel {
    position: fixed; inset: 74px 0 auto 0; z-index: 49;
    background: rgba(24,6,54,.97); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--rule);
    display: none; flex-direction: column; padding: 1rem 1.25rem 1.6rem; gap: .25rem;
  }
  .nav.is-open .nav__panel { display: flex; }
  .nav__panel .nav__links { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__panel .nav__links a,
  .nav__panel a { padding: .9rem .5rem; font-size: 1.04rem; border-bottom: 1px solid var(--rule); color: var(--text); border-radius: 0; }
  .nav__panel > .btn--primary { margin-top: 1rem; }
  .hero h1 { font-size: clamp(2.3rem, 9vw, 3rem); }
  .hero__trust { gap: 1.2rem; }
  .prob__grid, .caps__grid, .ben__grid, .aud__grid { grid-template-columns: 1fr; }
  .footer__cols { gap: 2.2rem; }
  .dash__row { grid-template-columns: 1fr; }
}

/* show desktop nav-panel as inline when wide (no fixed) */
@media (min-width: 761px) { .nav__panel { display: contents; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}


/* --- Foco accesible (WCAG 2.2) --- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}

/* --- Búho mascota en el CTA --- */
.cta { position: relative; overflow: hidden; }
.cta__owl {
  position: absolute; right: 3%; bottom: -6px; width: 190px; height: auto;
  opacity: .92; pointer-events: none; filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));
}
@media (max-width: 980px) { .cta__owl { display: none; } }


/* --- Banda oscura (producto/datos) sobre lienzo claro --- */
.band-dark {
  background: var(--night); color: rgba(240,240,240,.82);
  /* re-escala los neutros a claro dentro de la banda oscura (evita texto oscuro sobre fondo oscuro) */
  --text: #f0f0f0; --text-dim: rgba(240,240,240,.82); --muted: rgba(240,240,240,.64); --faint: rgba(240,240,240,.46);
  --rule: rgba(255,255,255,.12); --rule-2: rgba(255,255,255,.2); --glass: rgba(255,255,255,.05); --glass-2: rgba(255,255,255,.08);
  --grad-text: linear-gradient(100deg, #7ffdef 0%, #8f8dff 100%);
}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4 { color:#f0f0f0; }
.band-dark .eyebrow { color: var(--cyan); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.band-dark .eyebrow::before { background: var(--cyan); box-shadow:0 0 10px var(--cyan); }
.band-dark .section-head p, .band-dark p { color: rgba(240,240,240,.72); }
.band-dark .grad-text { background: linear-gradient(100deg,#7ffdef,#8f8dff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* --- Hero kicker (slogan de marca) --- */
.hero__kicker { font-family: var(--font-head); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; color: var(--blue); margin: 0 0 .5rem; }

/* --- Seguridad de la plataforma (banda oscura) --- */
.sec__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4); margin-top: var(--s6); }
.sec__card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: var(--s4) var(--s4) calc(var(--s4) + .2rem); }
.sec__card .sec__ic { width: 40px; height: 40px; border-radius: 10px; display:grid; place-items:center; margin-bottom: .9rem; color: var(--cyan); background: rgba(127,253,239,.08); border:1px solid rgba(127,253,239,.18); }
.sec__card .sec__ic span { width:22px;height:22px;display:block;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat; }
.sec__card h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.sec__card p { font-size: .92rem; color: rgba(240,240,240,.72); margin: 0; }

/* ===== Capturas de plataforma (marco navegador) ===== */
.shot{ border-radius:14px; overflow:hidden; border:1px solid rgba(24,6,54,.12); box-shadow:0 30px 70px -30px rgba(24,6,54,.45); background:#fff; margin:0; }
.shot img{ display:block; width:100%; height:auto; }
.shot--browser .shot__bar{ display:flex; align-items:center; gap:7px; padding:9px 13px; background:#14121f; }
.shot--browser .shot__bar i{ width:10px; height:10px; border-radius:50%; background:rgba(240,240,240,.22); }
.shot--browser .shot__bar em{ margin-left:10px; font-family:var(--font-mono); font-size:.72rem; color:rgba(240,240,240,.5); font-style:normal; }
.hero__dash{ overflow:visible; }
/* hero shot contenido (cuadra en la columna) */

/* ===== Galería de capturas ===== */
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--s5); margin-top:var(--s6); }
.gcard{ margin:0; }
.gcard figcaption{ margin-top:.85rem; font-size:.92rem; color:var(--muted); line-height:1.5; }

/* ===== Lightbox ===== */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(11,8,30,.92); display:none; align-items:center; justify-content:center; padding:3.5vw; cursor:zoom-out; backdrop-filter:blur(4px); }
.lb.open{ display:flex; }
.lb img{ max-width:96vw; max-height:92vh; border-radius:12px; box-shadow:0 30px 90px -20px rgba(0,0,0,.7); }
.shot img{ cursor:zoom-in; }

/* ===== Hero apilado: product shot grande (look enterprise) ===== */
.hero__grid{ grid-template-columns:1fr; text-align:center; gap:var(--s5); align-items:stretch; }
.hero__copy{ max-width:880px; margin-inline:auto; }
.hero__sub{ max-width:58ch; margin-inline:auto; }
.hero__cta{ justify-content:center; }
.hero__trust{ justify-content:center; }
.hero__dash{ margin-top:var(--s4); overflow:visible; }
.hero__dash .shot{ width:100%; max-width:1180px; margin-inline:auto; }

/* ===== Banda GRC apilada: captura grande ===== */
#nist .nist__panel{ display:block; text-align:center; }
#nist .nist__copy{ max-width:780px; margin-inline:auto; }
#nist .nist__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 1.6rem; text-align:left; margin-top:1.5rem; }
#nist .nist__list li{ flex:1 1 230px; max-width:300px; }
#nist .nist__viz{ margin-top:var(--s6); }
#nist .nist__viz .shot{ max-width:1180px; margin-inline:auto; width:100%; }
#nist .radar__note{ text-align:center; }