/* ============================================================================
   VULALERT — landing styles. Self-hosted fonts, no inline CSS, no JavaScript.
   Language switch (EN/ES) is pure CSS via a hidden radio + :checked selector.
   ========================================================================== */

/* ── Self-hosted fonts (latin subset, woff2) ─────────────────────────────── */
@font-face{
  font-family:'Sora';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/fonts/sora-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;
  src:url('/fonts/fraunces-italic-latin.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/ibmplexmono-400-latin.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/ibmplexmono-500-latin.woff2') format('woff2');
}

:root{
  --bg:#06060a; --bg2:#0b0b11; --card:#101018; --card2:#15151f; --elev:#1b1b27;
  --line:#20202c; --line2:#2d2d3e; --hair:#17171f;
  --text:#f5f5fa; --muted:#a9a9bf; --dim:#6f6f88;
  --violet:#7c3aed; --violet-l:#a78bfa; --violet-xl:#cdbcff; --indigo:#5b6cff;
  --glow:rgba(124,58,237,.4);
  --p5:#fb5b73; --p4:#fb923c; --p3:#facc15; --p2:#34d399; --p1:#7c8499;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Fraunces',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:18px}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;
  line-height:1.72;-webkit-font-smoothing:antialiased;letter-spacing:-.004em;
  overflow-x:hidden;position:relative;min-height:100vh;display:flex;flex-direction:column}

/* Aurora background (pure CSS animation) */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.aurora .a1{width:680px;height:680px;top:-260px;right:-160px;
  background:radial-gradient(circle,rgba(124,58,237,.55),transparent 62%);animation:drift1 26s ease-in-out infinite}
.aurora .a2{width:560px;height:560px;top:18%;left:-220px;
  background:radial-gradient(circle,rgba(91,108,255,.4),transparent 64%);animation:drift2 32s ease-in-out infinite}
.aurora .a3{width:520px;height:520px;bottom:-200px;left:40%;
  background:radial-gradient(circle,rgba(124,58,237,.32),transparent 66%);animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,60px) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,-50px) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,-40px) scale(1.14)}}

/* Grain overlay (data-URI in CSS, allowed by img-src 'self' data:) */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:1200px;margin:0 auto;padding:0 44px;position:relative;width:100%}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400}
.accent{color:var(--violet-l)}

/* ── Language switch: pure CSS (hidden radios drive visibility) ──────────── */
.lang-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.lang-toggle{display:inline-flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em}
.lang-toggle label{padding:8px 15px;color:var(--dim);cursor:pointer;transition:.2s;user-select:none;line-height:1}
.lang-toggle label:hover{color:var(--text)}
/* Default state (EN checked): show .en, hide .es */
.es{display:none}
#lang-en:checked ~ .topbar .lang-toggle label[for="lang-en"]{background:rgba(124,58,237,.22);color:#fff}
#lang-es:checked ~ .topbar .lang-toggle label[for="lang-es"]{background:rgba(124,58,237,.22);color:#fff}
#lang-es:checked ~ * .en, #lang-es:checked ~ .en{display:none}
#lang-es:checked ~ * .es, #lang-es:checked ~ .es{display:revert}

/* Topbar */
.topbar{border-bottom:1px solid var(--hair);background:rgba(6,6,10,.6);backdrop-filter:blur(14px) saturate(140%);
  position:sticky;top:0;z-index:50}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:18px;padding-bottom:18px}
.brand{font-weight:600;font-size:1.05rem;letter-spacing:.2em}
.brand b{color:var(--violet-l);font-weight:700}

/* Hero */
header{flex:1;padding:120px 0 96px;position:relative;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;width:100%}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:48px}}
.pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--violet-l);border:1px solid var(--line2);border-radius:999px;padding:8px 16px;
  background:rgba(124,58,237,.06);margin-bottom:34px}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--p2);box-shadow:0 0 0 4px rgba(52,211,153,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
h1{font-size:clamp(2.7rem,5.4vw,4.4rem);font-weight:600;letter-spacing:-.034em;line-height:1.04}
.h1-accent{display:block;font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em;margin-top:.18em;
  background:linear-gradient(108deg,#fff 2%,var(--violet-xl) 46%,var(--violet) 98%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{max-width:580px;margin:32px 0 0;font-size:1.16rem;color:var(--muted);font-weight:300;line-height:1.62}
.sub .mono{color:var(--violet-l);font-size:.92em}

/* Hero floating card */
.hero-card{position:relative;perspective:1400px}
.floatcard{background:linear-gradient(165deg,rgba(22,22,31,.92),rgba(13,13,20,.92));
  border:1px solid var(--line2);border-radius:22px;padding:28px;backdrop-filter:blur(8px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(124,58,237,.06),0 0 60px -20px var(--glow);
  transform:rotateY(-9deg) rotateX(4deg);transition:transform .5s ease;animation:floaty 7s ease-in-out infinite}
.floatcard:hover{transform:rotateY(-3deg) rotateX(1deg)}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -12px}}
.fc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.fc-id{font-family:var(--mono);font-size:.8rem;color:var(--violet-l)}
.fc-badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--p5);border:1px solid rgba(251,91,115,.4);
  background:rgba(251,91,115,.1);border-radius:6px;padding:4px 9px}
.fc-title{font-size:1.05rem;font-weight:600;line-height:1.35;margin-bottom:22px}
.fc-gauge{display:flex;align-items:center;gap:22px;margin-bottom:22px}
/* Static gauge: 91 VRS → conic angle 327.6deg, no JS */
.gauge{--c:var(--p5);width:120px;height:120px;border-radius:50%;flex:none;
  background:conic-gradient(var(--c) 327.6deg,var(--elev) 0);
  display:flex;align-items:center;justify-content:center;position:relative}
.gauge::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#0d0d14}
.gauge .gv{position:relative;z-index:1;text-align:center}
.gauge .gv b{font-family:var(--mono);font-size:2rem;color:#fff;font-weight:500;line-height:1}
.gauge .gv span{display:block;font-size:.6rem;color:var(--dim);letter-spacing:.2em;margin-top:4px}
.fc-gmeta .pp{display:inline-flex;font-family:var(--mono);font-weight:600;font-size:1rem;color:var(--p5);
  border:1px solid rgba(251,91,115,.4);background:rgba(251,91,115,.1);padding:5px 12px;border-radius:8px}
.fc-gmeta p{font-size:.86rem;color:var(--muted);margin-top:10px;line-height:1.5}
.fc-rows{border-top:1px solid var(--line);padding-top:8px}
.fc-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.82rem;gap:14px}
.fc-row .k{color:var(--dim)} .fc-row .v{font-family:var(--mono);text-align:right}
.fc-row .v.bad{color:var(--p5)} .fc-row .v.warn{color:var(--p4)} .fc-row .v.good{color:var(--p2)}

/* KPI strip */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(16,16,24,.5);backdrop-filter:blur(6px)}
.kpi{padding:28px 26px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:none}
.kpi b{display:block;font-family:var(--mono);font-size:2rem;color:#fff;font-weight:400;letter-spacing:-.02em}
/* Use direct-child (>) so nested .en/.es spans are not forced to display:block */
.kpi > span{font-size:.72rem;color:var(--dim);text-transform:uppercase;letter-spacing:.14em;margin-top:8px;display:block;font-weight:400}
@media(max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}.kpi:nth-child(2){border-right:none}}

/* Footer */
footer{padding:46px 0;border-top:1px solid var(--hair)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
footer .brand{font-size:1.05rem}
footer p{color:var(--dim);font-size:.84rem;max-width:560px;line-height:1.6}
.foot-close{color:var(--muted)}

/* Reduced motion: disable all animation */
@media(prefers-reduced-motion:reduce){
  .aurora span,.floatcard,.pill .dot{animation:none}
  .floatcard{transform:none}
}

/* Responsive */
@media(max-width:760px){
  html{font-size:16px}
  .wrap{padding:0 22px}
  header{padding:72px 0 56px}
  .floatcard{transform:none;animation:none}
  .topbar .wrap{gap:18px}
}