/* ALEXX SkyRider™ R21 — Retro → Future editorial candidate.
   Presentation layer only; demo gameplay is not modified. */
:root{
  --r21-bg:#03070d; --r21-panel:#07111a; --r21-panel2:#0b1822;
  --r21-text:#e9f7ff; --r21-dim:#a8bdc8; --r21-cyan:#63e8ff;
  --r21-blue:#6aa8ff; --r21-pink:#ff5bc9; --r21-red:#ff6573;
  --r21-max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--r21-bg)}
body.r21-gate{margin:0;background:var(--r21-bg);color:var(--r21-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
html[lang="en"] [data-r21-lang="es"]{display:none!important}
html[lang="es"] [data-r21-lang="en"]{display:none!important}
.r21-skip{position:fixed;left:10px;top:-90px;z-index:999;background:#fff;color:#000;padding:10px 14px}
.r21-skip:focus{top:10px}
.r21-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px clamp(14px,3vw,34px);background:rgba(2,7,12,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(99,232,255,.2)}
.r21-brand{color:#fff;text-decoration:none;font-weight:950;letter-spacing:.08em;white-space:nowrap}.r21-brand span{color:var(--r21-cyan)}
.r21-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.r21-nav a,.r21-nav-button{border:1px solid rgba(99,232,255,.27);background:rgba(5,14,22,.88);color:#e4fbff;border-radius:999px;padding:9px 12px;text-decoration:none;font:800 .72rem/1 system-ui;letter-spacing:.05em;cursor:pointer}
.r21-nav a:hover,.r21-nav-button:hover{border-color:var(--r21-cyan);box-shadow:0 0 18px rgba(99,232,255,.14)}
.r21-nav-button .audio-led{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px}
.r21-section{position:relative;padding:clamp(64px,9vw,118px) max(18px,calc((100vw - var(--r21-max))/2));overflow:hidden;border-bottom:1px solid rgba(255,255,255,.05)}
.era-retro{background:radial-gradient(circle at 14% 14%,rgba(255,91,201,.08),transparent 30%),radial-gradient(circle at 84% 20%,rgba(99,232,255,.07),transparent 30%),#03070d}
.era-evolution{background:radial-gradient(circle at 84% 18%,rgba(106,168,255,.08),transparent 33%),linear-gradient(180deg,#040a11,#07111a)}
.era-modern{background:radial-gradient(circle at 70% 8%,rgba(99,232,255,.06),transparent 30%),linear-gradient(180deg,#07111a,#0b1620)}
.r21-heading{display:flex;align-items:flex-end;gap:16px;margin-bottom:34px;max-width:1000px}
.r21-heading>span{color:var(--r21-cyan);font:800 .76rem/1 ui-monospace,monospace;letter-spacing:.18em}
.r21-heading h2{margin:0;font-size:clamp(1.7rem,4vw,3.2rem);line-height:1.02;letter-spacing:.015em;text-shadow:0 0 22px rgba(99,232,255,.16)}
.r21-heading h2:after{content:"";display:block;width:min(220px,42vw);height:3px;margin-top:14px;background:linear-gradient(90deg,var(--r21-cyan),var(--r21-pink),transparent);background-size:180% 100%;animation:r21bar 3.8s linear infinite}
@keyframes r21bar{to{background-position:180% 0}}
.r21-copy{max-width:960px;color:var(--r21-dim);font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.85}
.r21-copy p{margin:.6em 0 1em}.r21-copy strong{color:#fff}
.r21-note{max-width:920px;color:var(--r21-dim);line-height:1.75}
.r21-kicker{color:var(--r21-cyan);font:800 .8rem/1.3 ui-monospace,monospace;letter-spacing:.18em}
.r21-evidence{color:#829fac;font:700 .69rem/1.5 ui-monospace,monospace;letter-spacing:.08em;margin-top:24px}
.r21-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border:1px solid rgba(99,232,255,.42);border-radius:10px;background:rgba(6,16,24,.9);color:#e9fbff;text-decoration:none;font-weight:900;letter-spacing:.04em}
.r21-btn.primary{background:linear-gradient(135deg,rgba(14,95,130,.9),rgba(31,38,82,.92));box-shadow:0 0 28px rgba(99,232,255,.12)}
.r21-btn:hover{transform:translateY(-1px);border-color:var(--r21-cyan)}
.r21-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Hero */
.r21-hero{min-height:calc(100vh - 66px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(28px,5vw,78px);align-items:center;padding-top:clamp(70px,8vw,110px);padding-bottom:clamp(70px,8vw,110px)}
.r21-grid-glow{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(99,232,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(99,232,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}
.r21-hero-copy,.r21-hero-figure{position:relative;z-index:2}
.r21-hero-logo{display:block;width:min(100%,620px);height:auto;margin:8px 0 10px;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 26px rgba(99,232,255,.13))}
.r21-hero h1{margin:8px 0;font-size:clamp(3rem,8vw,7.8rem);line-height:.88;letter-spacing:-.045em;text-shadow:0 0 34px rgba(99,232,255,.18)}
.r21-slogan{margin:24px 0 0;color:var(--r21-cyan);font:950 clamp(1.2rem,3vw,2.2rem)/1 ui-monospace,monospace;letter-spacing:.18em}
.r21-impact{margin:12px 0 0;font-weight:950;font-size:clamp(1rem,2.3vw,1.65rem);letter-spacing:.04em}
.r21-support{color:var(--r21-dim);font-size:1.05rem}
.r21-crt-window{position:relative;aspect-ratio:1;border:2px solid rgba(99,232,255,.4);border-radius:26px;background:radial-gradient(circle,rgba(15,40,58,.92),#020609 70%);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 65px rgba(99,232,255,.12),inset 0 0 80px rgba(99,232,255,.07)}
.r21-scanline{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.018) 3px 4px);pointer-events:none}
.r21-sprite{image-rendering:pixelated;object-fit:contain}
.r21-sprite-hero{width:min(44%,190px);filter:drop-shadow(0 0 18px rgba(99,232,255,.42));animation:r21float 2.6s ease-in-out infinite}
.r21-sprite-medium{width:160px;max-width:34vw;filter:drop-shadow(0 0 18px rgba(255,91,201,.26))}
.r21-down-arrow{position:absolute;bottom:8%;font-size:clamp(2rem,7vw,4.5rem);color:rgba(99,232,255,.7);animation:r21down 1.35s ease-in-out infinite}
.r21-hero-figure>p{text-align:center;color:#6f8b99;font:700 .68rem/1.4 ui-monospace,monospace;letter-spacing:.12em}
@keyframes r21float{50%{transform:translateY(10px)}} @keyframes r21down{50%{transform:translateY(10px);opacity:.4}}

/* Editorial components */
.r21-era-track,.r21-progression{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:980px;padding:22px;border:1px solid rgba(99,232,255,.2);border-radius:14px;background:rgba(4,12,19,.66);color:#d9f9ff;font:800 .82rem/1.4 ui-monospace,monospace}
.r21-era-track b,.r21-progression b{color:var(--r21-pink)}
.r21-with-figure{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.r21-downward-demo{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center}
.r21-route-window{position:relative;height:min(58vw,520px);min-height:380px;overflow:hidden;border-radius:22px;border:1px solid rgba(99,232,255,.32);background:#02080d}
.r21-route-scroll{position:absolute;inset:-240px 0;background-repeat:repeat-y;background-position:center 0;background-size:min(100%,480px) auto;animation:r21route 8s linear infinite}
.r21-route-scroll.day-route{background-image:url("../assets/r21-sprites/15_ROUTE_TERRAIN/DAY/rio_clasico2.png")}
.r21-route-ship{position:absolute;left:50%;top:38%;width:96px;transform:translateX(-50%);filter:drop-shadow(0 0 12px rgba(99,232,255,.45))}
.r21-route-label{position:absolute;right:14px;bottom:14px;padding:7px 9px;background:rgba(0,0,0,.72);border:1px solid rgba(99,232,255,.35);color:var(--r21-cyan);font:800 .7rem/1 ui-monospace,monospace}
@keyframes r21route{
 from{background-position:center 0}
 to{background-position:center -480px}
}
.r21-controls-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:960px}
.r21-controls-grid>div{min-height:120px;padding:18px;border:1px solid rgba(99,232,255,.18);border-radius:14px;background:rgba(4,14,22,.72);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.r21-controls-grid span{width:100%;margin-top:8px;color:#d7f7ff;font:800 .78rem/1.3 ui-monospace,monospace}
kbd{min-width:42px;text-align:center;border:1px solid rgba(255,255,255,.26);border-bottom-width:3px;border-radius:7px;padding:7px 10px;background:#0d1821;color:#fff}
.r21-mantra{padding-left:18px;border-left:3px solid var(--r21-cyan);color:#e9fbff}
.r21-resource-layout{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;align-items:center;gap:30px;max-width:1050px}
.r21-resource{margin:0;text-align:center}.r21-resource img{max-width:110px;height:150px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 18px rgba(99,232,255,.24));animation:r21float 2.8s ease-in-out infinite}.r21-resource.danger img{filter:drop-shadow(0 0 18px rgba(255,101,115,.3));animation-delay:-1.3s}.r21-resource figcaption{margin-top:8px;font:950 .85rem/1 ui-monospace,monospace;letter-spacing:.16em}

/* Five Faces as one continuous journey */
.r21-face-journey{position:relative;display:grid;gap:14px;margin-top:34px}
.r21-face-journey:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(var(--r21-cyan),var(--r21-pink),var(--r21-blue));opacity:.22}
.r21-face-band{position:relative;min-height:260px;display:grid;grid-template-columns:280px minmax(0,1fr) 180px;gap:24px;align-items:center;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;background:rgba(3,9,14,.82)}
.r21-face-route{height:220px;border-radius:14px;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),var(--route);background-position:center;background-repeat:repeat-y;background-size:cover;animation:r21faceRoute 9s linear infinite;box-shadow:inset 0 0 50px rgba(0,0,0,.28)}
@keyframes r21faceRoute{to{background-position:center 460px}}
.r21-face-copy{position:relative;z-index:2}.r21-face-copy>span{font:950 clamp(1.35rem,3vw,2.4rem)/1 ui-monospace,monospace;color:#fff;letter-spacing:.08em}.r21-face-copy p{color:var(--r21-dim);line-height:1.7}
.r21-face-creature{justify-self:center;max-width:150px;max-height:150px;filter:drop-shadow(0 0 18px rgba(99,232,255,.25))}
.r21-face-band.night{border-color:rgba(106,168,255,.2)}.r21-face-band.cemetery{border-color:rgba(255,91,201,.18)}.r21-face-band.snow{border-color:rgba(190,240,255,.22)}.r21-face-band.canyon{border-color:rgba(255,180,96,.18)}

/* Threats / Guardians */
.r21-threat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.r21-threat-grid article{min-height:190px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(3,11,17,.65);display:grid;place-items:center;text-align:center}
.r21-threat-grid article.feature{grid-column:span 2;background:radial-gradient(circle,rgba(255,91,201,.08),transparent 60%),rgba(3,11,17,.72)}
.r21-threat-grid img{max-width:145px;max-height:110px;image-rendering:pixelated;object-fit:contain}.r21-threat-grid h3{margin:8px 0 0;font:900 .86rem/1.2 ui-monospace,monospace;letter-spacing:.08em}
.r21-threat-grid article p{margin:10px auto 0;max-width:28ch;color:var(--r21-dim);font-size:.82rem;line-height:1.5;text-align:center}
.r21-guardian-line{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:30px}
.r21-guardian-line article{min-height:260px;padding:14px;border:1px solid rgba(99,232,255,.13);border-radius:16px;background:rgba(3,11,17,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.r21-guardian-line img{max-width:135px;max-height:135px;image-rendering:pixelated}.r21-guardian-line h3{margin:14px 0 2px;color:var(--r21-cyan);font:950 .82rem/1.25 ui-monospace,monospace}.r21-guardian-line p{margin:0;color:var(--r21-dim)}
.r21-guardian-line .r21-guardian-name{color:#e9f7ff;font-weight:850}
.r21-guardian-line .r21-guardian-desc{margin-top:9px;color:var(--r21-dim);font-size:.76rem;line-height:1.45;max-width:22ch}
.r21-mode-split{display:grid;grid-template-columns:1fr 1fr;gap:18px}.r21-mode-split article{padding:28px;border:1px solid rgba(99,232,255,.18);border-radius:18px;background:linear-gradient(160deg,rgba(7,23,34,.9),rgba(7,12,20,.88))}.r21-mode-split h3{font-size:clamp(1.3rem,2.5vw,2rem);margin-top:0}.r21-mode-split p{color:var(--r21-dim);line-height:1.75}.r21-mode-split strong{color:#fff}
.r21-basics{max-width:920px;display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;padding-left:24px;color:#d8edf6}.r21-basics li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);line-height:1.55}

/* Modern close */
.r21-then-now{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin-bottom:30px}.r21-then-now>div{padding:28px;border:1px solid rgba(99,232,255,.18);border-radius:16px;background:rgba(11,28,40,.7)}.r21-then-now span{display:block;margin-bottom:12px;color:var(--r21-cyan);font:800 .72rem/1 ui-monospace,monospace;letter-spacing:.14em}.r21-then-now strong{font-size:clamp(1rem,2vw,1.4rem);line-height:1.5}
.r21-tested-grid,.r21-journal-categories{display:flex;flex-wrap:wrap;gap:10px;max-width:1000px}.r21-tested-grid span,.r21-journal-categories span{padding:10px 13px;border:1px solid rgba(99,232,255,.18);border-radius:999px;background:rgba(10,28,40,.78);color:#dff9ff;font-weight:780;font-size:.88rem}
.r21-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px}.r21-demo-grid article{padding:34px;border:1px solid rgba(99,232,255,.22);border-radius:18px;background:linear-gradient(160deg,rgba(11,35,48,.95),rgba(8,16,25,.95))}.r21-demo-grid h3{font-size:clamp(1.6rem,3vw,2.5rem);margin:.25em 0}.r21-demo-grid p:not(.r21-kicker){color:var(--r21-dim)}.r21-copy.compact{margin-top:24px}
.r21-journal-categories{margin:26px 0}.r21-text-link{display:inline-block;margin-top:12px;color:var(--r21-cyan);text-decoration:none;font-weight:900;letter-spacing:.05em}
.r21-faq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.r21-faq-grid details{padding:20px;border:1px solid rgba(99,232,255,.16);border-radius:14px;background:rgba(10,25,35,.72)}.r21-faq-grid summary{cursor:pointer;font-weight:900;line-height:1.4}.r21-faq-grid p{color:var(--r21-dim);line-height:1.65}
.r21-closing-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.r21-contact{color:var(--r21-dim)}
.r21-footer{padding:38px max(18px,calc((100vw - var(--r21-max))/2));display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#02070b;border-top:1px solid rgba(99,232,255,.14);color:#88a4b1}.r21-footer a{color:var(--r21-cyan);text-decoration:none}

@media(max-width:900px){
 .r21-topbar{align-items:flex-start}.r21-nav{max-width:72%}
 .r21-hero{grid-template-columns:1fr;min-height:auto}.r21-hero-figure{max-width:560px;width:100%;margin:auto}
 .r21-downward-demo{grid-template-columns:1fr}.r21-route-window{height:520px}
 .r21-controls-grid{grid-template-columns:1fr 1fr}.r21-resource-layout{grid-template-columns:120px minmax(0,1fr) 120px}
 .r21-face-band{grid-template-columns:220px minmax(0,1fr) 140px}.r21-guardian-line{grid-template-columns:repeat(3,minmax(0,1fr))}
 .r21-faq-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
 .r21-hero-logo{width:min(100%,520px);margin-left:auto;margin-right:auto}
 .r21-topbar{position:relative;display:block}.r21-brand{display:block;margin-bottom:10px}.r21-nav{max-width:none;justify-content:flex-start}.r21-nav a{display:none}.r21-nav-button{min-height:44px}
 .r21-section{padding:58px 18px}.r21-heading{align-items:flex-start}.r21-heading h2{overflow-wrap:anywhere}
 .r21-with-figure{grid-template-columns:1fr}.r21-sprite-medium{justify-self:center}.r21-controls-grid{grid-template-columns:1fr}
 .r21-resource-layout{grid-template-columns:1fr}.r21-resource{display:flex;align-items:center;justify-content:center;gap:16px}.r21-resource img{height:110px}
 .r21-progression{justify-content:center}.r21-face-journey:before{display:none}.r21-face-band{grid-template-columns:1fr;min-height:0}.r21-face-route{height:190px}.r21-face-creature{max-width:130px}
 .r21-threat-grid{grid-template-columns:1fr 1fr}.r21-threat-grid article.feature{grid-column:span 2}.r21-guardian-line{grid-template-columns:1fr 1fr}.r21-guardian-line article{min-height:220px}
 .r21-mode-split,.r21-then-now,.r21-demo-grid{grid-template-columns:1fr}.r21-basics{grid-template-columns:1fr}.r21-route-window{height:430px;min-height:0}
}
@media(max-width:420px){.r21-threat-grid,.r21-guardian-line{grid-template-columns:1fr}.r21-threat-grid article.feature{grid-column:auto}.r21-hero h1{font-size:clamp(3rem,18vw,5rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.r21-heading h2:after,.r21-sprite-hero,.r21-down-arrow,.r21-route-scroll,.r21-face-route,.r21-resource img{animation:none!important}}


/* R21B atmosphere pass — presentation only. */
:root{
  --r21-violet:#8a6dff;
  --r21-gold:#ffc66d;
}
html{background:
 radial-gradient(circle at 15% 8%, rgba(255,91,201,.10), transparent 18%),
 radial-gradient(circle at 85% 0%, rgba(99,232,255,.09), transparent 22%),
 #02060a}
body.r21-gate{position:relative;background:
 radial-gradient(circle at 18% 0%, rgba(255,91,201,.07), transparent 20%),
 radial-gradient(circle at 86% 0%, rgba(99,232,255,.07), transparent 25%),
 linear-gradient(180deg,#02060a 0%,#031018 22%,#07121a 55%,#07131d 100%)}
body.r21-gate::before,
body.r21-gate::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body.r21-gate::before{
  opacity:.42;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.020) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 12%, rgba(0,0,0,.18));
  mix-blend-mode:screen;
}
body.r21-gate::after{
  opacity:.55;
  background:
    radial-gradient(circle at 50% -10%, rgba(99,232,255,.16), transparent 36%),
    radial-gradient(circle at -5% 20%, rgba(255,91,201,.11), transparent 30%),
    radial-gradient(circle at 105% 28%, rgba(106,168,255,.12), transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.42) 100%);
}
.r21-topbar,.r21-section,.r21-footer{position:relative;z-index:1}
.r21-topbar{
  background:linear-gradient(180deg,rgba(4,10,16,.94),rgba(3,8,13,.88));
  box-shadow:0 14px 40px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.04);
}
.r21-topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,rgba(99,232,255,.85),rgba(255,91,201,.75),transparent);opacity:.85}
.r21-brand{letter-spacing:.11em;text-shadow:0 0 12px rgba(99,232,255,.18),0 0 24px rgba(99,232,255,.1)}
.r21-nav a,.r21-nav-button{
  background:linear-gradient(180deg,rgba(8,18,28,.92),rgba(4,11,18,.92));
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 8px 18px rgba(0,0,0,.18);
}
.r21-section{scroll-margin-top:90px;border-bottom:1px solid rgba(255,255,255,.045)}
.r21-section::before{
  content:"";position:absolute;inset:10px 12px auto 12px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,232,255,.18),rgba(255,91,201,.16),transparent);
  pointer-events:none;opacity:.75;
}
.era-retro{background:
  linear-gradient(180deg,rgba(255,255,255,.015),transparent 18%),
  radial-gradient(circle at 10% 16%,rgba(255,91,201,.12),transparent 26%),
  radial-gradient(circle at 85% 16%,rgba(99,232,255,.11),transparent 26%),
  linear-gradient(180deg,#03070d,#06111b 68%,#08131b)}
.era-evolution{background:
  linear-gradient(180deg,rgba(255,255,255,.018),transparent 16%),
  radial-gradient(circle at 84% 18%,rgba(106,168,255,.12),transparent 31%),
  radial-gradient(circle at 16% 34%,rgba(99,232,255,.06),transparent 28%),
  linear-gradient(180deg,#040a11,#07131b 60%,#08141d)}
.era-modern{background:
  linear-gradient(180deg,rgba(255,255,255,.018),transparent 18%),
  radial-gradient(circle at 75% 8%,rgba(99,232,255,.10),transparent 24%),
  radial-gradient(circle at 18% 20%,rgba(255,198,109,.08),transparent 20%),
  linear-gradient(180deg,#07111a,#0c1925)}
.r21-heading{
  position:relative;align-items:center;gap:18px;margin-bottom:38px;padding:14px 18px 18px;
  border:1px solid rgba(99,232,255,.12);border-radius:18px;
  background:linear-gradient(180deg,rgba(6,16,25,.76),rgba(4,11,18,.48));
  box-shadow:0 18px 36px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02);
}
.r21-heading::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;box-shadow:inset 0 0 26px rgba(99,232,255,.05), inset 0 0 40px rgba(255,91,201,.03)}
.r21-heading>span{
  display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:0 8px;
  border-radius:14px;border:1px solid rgba(99,232,255,.26);
  background:linear-gradient(180deg,rgba(7,23,35,.92),rgba(4,14,22,.84));
  box-shadow:0 0 18px rgba(99,232,255,.10), inset 0 0 18px rgba(99,232,255,.08);
  color:#d9fdff;text-shadow:0 0 10px rgba(99,232,255,.45);
}
.r21-heading h2{
  text-transform:uppercase;letter-spacing:.04em;
  text-shadow:0 0 8px rgba(255,255,255,.14), 0 0 18px rgba(99,232,255,.16), 0 0 34px rgba(99,232,255,.10);
}
.r21-heading h2:after{height:4px;border-radius:999px;box-shadow:0 0 12px rgba(99,232,255,.28), 0 0 22px rgba(255,91,201,.18)}
.r21-copy,.r21-note,.r21-support,.r21-contact{ text-shadow:0 1px 0 rgba(0,0,0,.25); }
.r21-hero{
  isolation:isolate;
  background:
   radial-gradient(circle at 12% 14%, rgba(255,91,201,.14), transparent 24%),
   radial-gradient(circle at 82% 18%, rgba(99,232,255,.14), transparent 28%),
   linear-gradient(180deg,#03070d 0%,#051019 42%,#07131b 100%);
}
.r21-hero::before{
  content:"";position:absolute;inset:16px;border:1px solid rgba(99,232,255,.10);border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 30%);
  box-shadow:inset 0 0 40px rgba(255,255,255,.02), 0 0 60px rgba(99,232,255,.04);
  pointer-events:none;z-index:1;
}
.r21-hero-video-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;border-radius:0}
.r21-hero-video{width:100%;height:100%;object-fit:cover;opacity:.16;filter:saturate(1.12) contrast(1.08) blur(.5px)}
.r21-hero-video-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,7,11,.74) 0%,rgba(2,7,11,.50) 40%,rgba(2,7,11,.64) 100%),radial-gradient(circle at 70% 45%,rgba(99,232,255,.10),transparent 28%),radial-gradient(circle at 25% 20%,rgba(255,91,201,.10),transparent 28%)}
.r21-ambient-lights{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.r21-ambient-lights span{position:absolute;display:block;width:360px;height:360px;border-radius:50%;filter:blur(45px);opacity:.22;animation:r21Pulse 8s ease-in-out infinite}
.r21-ambient-lights span:nth-child(1){left:-120px;top:10%;background:rgba(255,91,201,.55)}
.r21-ambient-lights span:nth-child(2){right:-100px;top:18%;background:rgba(99,232,255,.55);animation-delay:-2.5s}
.r21-ambient-lights span:nth-child(3){left:30%;bottom:-140px;background:rgba(106,168,255,.40);animation-delay:-5s}
@keyframes r21Pulse{50%{transform:scale(1.16);opacity:.32}}
.r21-grid-glow{background-image:linear-gradient(rgba(99,232,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(99,232,255,.055) 1px,transparent 1px);background-size:34px 34px;opacity:.95}
.r21-hero-copy{padding:22px 24px 24px;border-radius:24px;background:linear-gradient(180deg,rgba(4,11,18,.74),rgba(4,11,18,.46));border:1px solid rgba(99,232,255,.14);box-shadow:0 30px 50px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.02)}
.r21-kicker{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(5,19,30,.82);border:1px solid rgba(99,232,255,.20);box-shadow:0 0 16px rgba(99,232,255,.10)}
.r21-hero-logo{filter:drop-shadow(0 0 14px rgba(255,255,255,.10)) drop-shadow(0 0 30px rgba(99,232,255,.24)) drop-shadow(0 0 55px rgba(255,91,201,.12))}
.r21-slogan{display:inline-block;padding:.42em .7em;border-radius:14px;background:linear-gradient(180deg,rgba(10,29,41,.86),rgba(6,18,27,.86));border:1px solid rgba(99,232,255,.22);box-shadow:0 0 24px rgba(99,232,255,.10)}
.r21-impact{display:inline-block;padding:10px 14px;border-radius:12px;background:rgba(5,18,30,.56);border-left:3px solid rgba(99,232,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 10px 20px rgba(0,0,0,.16)}
.r21-actions{margin-top:30px}
.r21-btn{background:linear-gradient(180deg,rgba(8,22,33,.94),rgba(5,13,20,.94));box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 12px 24px rgba(0,0,0,.24)}
.r21-btn.primary{background:linear-gradient(135deg,rgba(17,105,146,.96),rgba(52,44,118,.96));box-shadow:0 0 22px rgba(99,232,255,.18), 0 0 36px rgba(99,232,255,.10), 0 12px 24px rgba(0,0,0,.24)}
.r21-crt-window{border-color:rgba(99,232,255,.48);background:
  radial-gradient(circle at 50% 38%,rgba(34,98,134,.34),transparent 26%),
  radial-gradient(circle at 50% 48%,rgba(255,91,201,.12),transparent 32%),
  radial-gradient(circle,rgba(15,40,58,.98),#020609 72%);
  box-shadow:0 0 85px rgba(99,232,255,.14), inset 0 0 90px rgba(99,232,255,.08), inset 0 0 24px rgba(255,255,255,.04)}
.r21-hero-figure>p{display:inline-block;padding:8px 10px;background:rgba(0,0,0,.42);border-radius:999px;border:1px solid rgba(99,232,255,.20)}
.r21-era-track,.r21-progression,
.r21-controls-grid>div,
.r21-face-band,
.r21-threat-grid article,
.r21-guardian-line article,
.r21-mode-split article,
.r21-then-now>div,
.r21-demo-grid article,
.r21-faq-grid details{
  box-shadow:0 18px 32px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.018);
}
.r21-controls-grid>div,
.r21-threat-grid article,
.r21-guardian-line article,
.r21-demo-grid article,
.r21-faq-grid details{
  background:linear-gradient(180deg,rgba(6,17,25,.90),rgba(5,13,20,.74));
}
.r21-face-band{background:linear-gradient(180deg,rgba(5,13,20,.88),rgba(3,9,14,.84));}
.r21-face-route{box-shadow:inset 0 0 60px rgba(0,0,0,.32), 0 0 24px rgba(99,232,255,.08)}
.r21-threat-grid article.feature{background:radial-gradient(circle at 50% 20%,rgba(255,91,201,.10),transparent 38%),linear-gradient(180deg,rgba(8,18,27,.92),rgba(5,13,20,.80))}
.r21-guardian-line h3,.r21-resource figcaption,.r21-threat-grid h3{
  text-shadow:0 0 10px rgba(99,232,255,.18);
}
.r21-tested-grid span,.r21-journal-categories span{box-shadow:0 8px 16px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.02)}
.r21-footer{background:linear-gradient(180deg,#02070b,#010509)}
@media(max-width:900px){
  .r21-hero-copy{padding:20px}
}
@media(max-width:640px){
  .r21-hero::before{inset:8px}
  .r21-heading{padding:14px 14px 16px;align-items:flex-start}
  .r21-heading>span{min-width:46px;height:46px}
  .r21-hero-copy{padding:18px}
  .r21-slogan,.r21-impact{display:block}
}
@media(prefers-reduced-motion:reduce){
  .r21-ambient-lights span{animation:none}
  .r21-hero-video{display:none}
}


/* R21D demo-entry arcade marquee — Gate presentation only. */
.r21-demo-hall{
  background:
    radial-gradient(circle at 20% 22%,rgba(190,238,255,.10),transparent 26%),
    radial-gradient(circle at 80% 24%,rgba(64,100,255,.11),transparent 28%),
    linear-gradient(180deg,#07131d,#07111a 68%,#081722);
}
.r21-demo-intro{max-width:820px;margin:-10px 0 30px;color:#cae8f3;font-size:clamp(1rem,1.8vw,1.18rem);line-height:1.7}
.r21-demo-intro p{margin:0}
.r21-demo-marquee-grid{max-width:1160px;gap:26px;align-items:stretch}
.r21-demo-cabinet{
  position:relative;isolation:isolate;min-height:560px;padding:0!important;overflow:hidden;
  border:1px solid rgba(99,232,255,.34)!important;border-radius:24px!important;
  background:#030a10!important;
  box-shadow:0 34px 60px rgba(0,0,0,.34),0 0 34px rgba(99,232,255,.08),inset 0 0 0 1px rgba(255,255,255,.035)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.r21-demo-cabinet:hover,.r21-demo-cabinet:focus-within{
  transform:translateY(-4px);border-color:rgba(99,232,255,.72)!important;
  box-shadow:0 38px 72px rgba(0,0,0,.40),0 0 38px rgba(99,232,255,.15),inset 0 0 0 1px rgba(255,255,255,.05)!important;
}
.r21-demo-cabinet-night{border-color:rgba(106,168,255,.38)!important;box-shadow:0 34px 60px rgba(0,0,0,.34),0 0 34px rgba(106,168,255,.08),inset 0 0 0 1px rgba(255,255,255,.035)!important}
.r21-demo-preview{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#02070b}
.r21-demo-cabinet-arctic .r21-demo-preview{background:#071722 url("../assets/img/visual-update/face-arctic.png") center/cover no-repeat}
.r21-demo-cabinet-night .r21-demo-preview{background:#040713 url("../assets/img/visual-update/face-night.png") center/cover no-repeat}
.r21-demo-preview video{width:100%;height:100%;object-fit:cover;transform:scale(1.035);filter:saturate(1.18) contrast(1.07);opacity:.66}
.r21-demo-preview-overlay{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,5,10,.10) 0%,rgba(0,5,10,.34) 34%,rgba(2,7,12,.88) 72%,rgba(2,7,12,.97) 100%),
  radial-gradient(circle at 50% 15%,transparent 0 18%,rgba(0,0,0,.22) 65%,rgba(0,0,0,.55) 100%)}
.r21-demo-cabinet-arctic .r21-demo-preview-overlay{box-shadow:inset 0 0 80px rgba(181,237,255,.08)}
.r21-demo-cabinet-night .r21-demo-preview-overlay{box-shadow:inset 0 0 80px rgba(106,168,255,.09)}
.r21-demo-scanlines{position:absolute;inset:0;opacity:.34;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.022) 3px 4px);mix-blend-mode:screen}
.r21-demo-corners{position:absolute;inset:12px;pointer-events:none;z-index:5}
.r21-demo-corners span{position:absolute;width:34px;height:34px;border-color:rgba(99,232,255,.66);filter:drop-shadow(0 0 6px rgba(99,232,255,.32))}
.r21-demo-corners span:nth-child(1){left:0;top:0;border-left:2px solid;border-top:2px solid}
.r21-demo-corners span:nth-child(2){right:0;top:0;border-right:2px solid;border-top:2px solid}
.r21-demo-corners span:nth-child(3){left:0;bottom:0;border-left:2px solid;border-bottom:2px solid}
.r21-demo-corners span:nth-child(4){right:0;bottom:0;border-right:2px solid;border-bottom:2px solid}
.r21-demo-cabinet-night .r21-demo-corners span{border-color:rgba(106,168,255,.72);filter:drop-shadow(0 0 6px rgba(106,168,255,.34))}
.r21-demo-marquee{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:18px 18px 0;padding:14px 18px;border:1px solid rgba(99,232,255,.38);border-radius:14px;
  background:linear-gradient(180deg,rgba(5,24,35,.92),rgba(4,14,22,.82));
  box-shadow:0 0 18px rgba(99,232,255,.11),inset 0 0 22px rgba(99,232,255,.05);
  backdrop-filter:blur(5px);
}
.r21-demo-cabinet-night .r21-demo-marquee{border-color:rgba(106,168,255,.40);background:linear-gradient(180deg,rgba(10,20,49,.92),rgba(4,10,24,.84));box-shadow:0 0 18px rgba(106,168,255,.12),inset 0 0 22px rgba(106,168,255,.05)}
.r21-demo-marquee span{font:950 clamp(.90rem,1.8vw,1.12rem)/1 ui-monospace,monospace;letter-spacing:.12em;color:#effdff;text-shadow:0 0 10px rgba(99,232,255,.42)}
.r21-demo-marquee small{font:900 .66rem/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--r21-cyan);white-space:nowrap}
.r21-demo-cabinet-night .r21-demo-marquee small{color:#9bbcff}
.r21-demo-cabinet-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 28px 28px;background:linear-gradient(180deg,transparent,rgba(2,7,12,.58) 12%,rgba(2,7,12,.94) 38%,rgba(2,7,12,.985) 100%)}
.r21-demo-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.r21-demo-badges span{padding:7px 9px;border-radius:999px;border:1px solid rgba(99,232,255,.28);background:rgba(5,20,30,.76);color:#e3faff;font:850 .66rem/1 ui-monospace,monospace;letter-spacing:.08em;box-shadow:0 0 12px rgba(99,232,255,.06)}
.r21-demo-cabinet-night .r21-demo-badges span{border-color:rgba(106,168,255,.30);background:rgba(8,15,37,.78)}
.r21-demo-cabinet-body p{min-height:3.6em;margin:0 0 18px!important;color:#c5dce7!important;line-height:1.65!important;text-shadow:0 1px 2px #000}
.r21-demo-play{width:100%;gap:10px;justify-content:center;position:relative;overflow:hidden}
.r21-demo-play::after{content:"";position:absolute;top:-40%;bottom:-40%;width:46px;left:-72px;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:r21DemoButtonSweep 4.4s ease-in-out infinite}
@keyframes r21DemoButtonSweep{0%,68%{left:-72px}88%,100%{left:calc(100% + 72px)}}
.r21-demo-footnote{max-width:940px;margin-top:28px;padding:16px 18px;border-left:2px solid rgba(99,232,255,.30);background:rgba(4,13,20,.36);border-radius:0 12px 12px 0}
@media(max-width:900px){.r21-demo-cabinet{min-height:520px}}
@media(max-width:640px){
 .r21-demo-marquee-grid{gap:18px}
 .r21-demo-cabinet{min-height:500px}
 .r21-demo-marquee{margin:14px 14px 0;padding:12px 13px;align-items:flex-start;flex-direction:column;gap:7px}
 .r21-demo-cabinet-body{padding:24px 20px 22px}
 .r21-demo-cabinet-body p{min-height:0}
}
@media(prefers-reduced-motion:reduce){.r21-demo-preview video{display:none}.r21-demo-play::after{animation:none}}


/* R21E — Five Faces live preview integration */
.r21-face-band{grid-template-columns:280px minmax(0,1fr) 180px}
.r21-face-preview{
  position:relative;
  height:220px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(99,232,255,.28);
  background-image:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22)),var(--route);
  background-position:center;
  background-repeat:repeat-y;
  background-size:cover;
  box-shadow:inset 0 0 60px rgba(0,0,0,.34),0 0 24px rgba(99,232,255,.08);
}
.r21-face-preview::before,
.r21-face-preview::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2}
.r21-face-preview::before{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0 2px,transparent 2px 4px);opacity:.34}
.r21-face-preview::after{background:linear-gradient(180deg,rgba(2,8,12,.08),rgba(2,8,12,.28) 52%,rgba(2,8,12,.62));}
.r21-face-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.92;filter:saturate(1.08) contrast(1.05)}
.r21-face-preview-tag{
  position:absolute;left:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  background:rgba(0,0,0,.68);border:1px solid rgba(99,232,255,.32);
  color:var(--r21-cyan);font:800 .64rem/1 ui-monospace,monospace;letter-spacing:.16em;
  box-shadow:0 0 14px rgba(99,232,255,.10);
}
.r21-face-preview-tag::before{content:"●";font-size:.7rem;color:#8cff89;text-shadow:0 0 8px rgba(140,255,137,.7)}
.r21-face-band.day .r21-face-preview{border-color:rgba(255,198,109,.28)}
.r21-face-band.night .r21-face-preview{border-color:rgba(106,168,255,.32)}
.r21-face-band.cemetery .r21-face-preview{border-color:rgba(255,91,201,.30)}
.r21-face-band.snow .r21-face-preview{border-color:rgba(190,240,255,.34)}
.r21-face-band.canyon .r21-face-preview{border-color:rgba(255,180,96,.28)}
@media(max-width:900px){
 .r21-face-band{grid-template-columns:220px minmax(0,1fr) 140px}
}
@media(max-width:640px){
 .r21-face-band{grid-template-columns:1fr;min-height:0}
 .r21-face-preview{height:190px}
}
@media(prefers-reduced-motion:reduce){
 .r21-face-video{display:none}
}


/* R21F — Journal connection only */
.r21-journal-categories a{
  padding:10px 13px;
  border:1px solid rgba(99,232,255,.18);
  border-radius:999px;
  background:rgba(10,28,40,.78);
  color:#dff9ff;
  font-weight:780;
  font-size:.88rem;
  text-decoration:none;
  box-shadow:0 8px 16px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.02);
}
.r21-journal-categories a:hover,.r21-journal-categories a:focus-visible{
  border-color:var(--r21-cyan);
  color:#fff;
  box-shadow:0 0 18px rgba(99,232,255,.14),0 8px 16px rgba(0,0,0,.12);
}
.r21-journal-context-link{
  display:inline-block;
  margin-top:12px;
  color:var(--r21-cyan);
  text-decoration:none;
  font:850 .82rem/1.45 ui-monospace,monospace;
  letter-spacing:.035em;
  border-bottom:1px solid rgba(99,232,255,.22);
}
.r21-journal-context-link:hover,.r21-journal-context-link:focus-visible{color:#fff;border-bottom-color:var(--r21-cyan);text-shadow:0 0 10px rgba(99,232,255,.28)}
.r21-context-wrap{max-width:1000px;margin:20px 0 0}
.r21-latest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1100px;margin-top:28px}
.r21-latest-card{
  min-height:285px;
  padding:24px;
  border:1px solid rgba(99,232,255,.16);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(7,20,30,.90),rgba(5,13,20,.80));
  box-shadow:0 18px 32px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.018);
  display:flex;
  flex-direction:column;
}
.r21-latest-category{color:var(--r21-cyan);font:850 .68rem/1.3 ui-monospace,monospace;letter-spacing:.14em;margin-bottom:10px}
.r21-latest-card h3{margin:.15em 0 .7em;font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.2;color:#fff}
.r21-latest-card p{margin:.25em 0 1.2em;color:var(--r21-dim);line-height:1.65;flex:1}
.r21-latest-card>a{align-self:flex-start;color:var(--r21-cyan);font-weight:900;text-decoration:none;letter-spacing:.04em}
.r21-latest-card>a:hover,.r21-latest-card>a:focus-visible{color:#fff;text-shadow:0 0 10px rgba(99,232,255,.3)}
.r21-latest-journal-cta{margin-top:24px}
@media(max-width:760px){.r21-latest-grid{grid-template-columns:1fr}.r21-latest-card{min-height:0}}