/* ==========================================================================
   VortexPlay / VortexSMP — design system
   Liquid glass (translucent, refracting, specular highlights) on a deep purple vortex.
   Works on desktop + phone, respects prefers-reduced-motion.
   ========================================================================== */

:root {
  --bg: #06020d;
  --bg-2: #0d0520;
  --ink: #f4ecff;
  --ink-2: #c9b8e8;
  --ink-3: #8f7bb3;
  --violet-1: #f0abfc;
  --violet-2: #c084fc;
  --violet-3: #a855f7;
  --violet-4: #7c3aed;
  --violet-5: #4c1d95;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  /* 100% clear liquid glass: no frosting, only refraction + light on the edges */
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 70%, rgba(192, 132, 252, .05));
  --glass-border: rgba(255, 255, 255, .22);
  --glass-shadow: 0 30px 70px -30px rgba(4, 0, 14, .9);
  --text-glow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 18px rgba(6, 2, 13, .85);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", var(--font);
  --font-gothic: "Pirata One", "UnifrakturMaguntia", "Old English Text MT", Georgia, serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--violet-2); text-decoration: none; transition: color .2s; }
a:hover { color: var(--violet-1); }
::selection { background: rgba(168, 85, 247, .45); color: #fff; }

/* ---------------------------------- background: the VortexPlay artwork + living vortex */
.vx-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(168, 85, 247, .28), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(124, 58, 237, .25), transparent 60%),
    radial-gradient(800px 800px at 110% 90%, rgba(192, 132, 252, .14), transparent 60%),
    linear-gradient(180deg, #08020f 0%, #0b0418 45%, #06020d 100%);
}
/* the banner: stays at the TOP of the page (70% visible) and melts into the purple below */
.page-art {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: min(125vh, 1250px); overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.6) 75%, transparent 100%);
  mask: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.6) 75%, transparent 100%);
}
.page-art .img {
  position: absolute; inset: -4% -4% 0;
  background-image: url("../img/banner.jpg"), url("../img/banner.png");
  background-size: cover; background-position: center 30%; background-repeat: no-repeat;
  opacity: .7;
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0) scale(1.05);
  transition: transform .8s var(--ease);
  animation: kenburns 40s ease-in-out infinite alternate;
}
@keyframes kenburns { from { scale: 1; } to { scale: 1.07; } }
/* purple glow under the image, so the bottom of the page is a deep violet instead of black */
.page-art::after {
  content: ""; position: absolute; inset: 0;
  /* the middle (where the site title sits) is dimmed, so the banner's own text doesn't fight with it */
  background:
    radial-gradient(ellipse 55% 38% at 50% 46%, rgba(6,2,13,.62), rgba(6,2,13,.38) 55%, transparent 80%),
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(6,2,13,.55) 100%);
}
@media (max-width: 760px) {
  .page-art .img { background-size: auto 100%; background-position: 50% 0; }
  .page-art::after { background: linear-gradient(180deg, rgba(6,2,13,.15) 0%, rgba(6,2,13,.55) 30%, rgba(6,2,13,.7) 60%, rgba(6,2,13,.5) 100%); }
}
body.app .page-art { display: none; }
.vx-bg .shade { display: none; }
/* purple light beams like in the artwork */
.vx-bg .beams { position: absolute; inset: 0; }
.vx-bg .beams i {
  position: absolute; top: -10%; width: 3px; height: 120%;
  background: linear-gradient(180deg, transparent, rgba(216, 180, 254, .9) 25%, rgba(168, 85, 247, .7) 60%, transparent);
  filter: blur(1.5px) drop-shadow(0 0 12px #a855f7) drop-shadow(0 0 30px #7c3aed);
  opacity: .0; animation: beam 9s ease-in-out infinite;
}
.vx-bg .beams i:nth-child(1) { left: 12%; animation-delay: 0s; }
.vx-bg .beams i:nth-child(2) { left: 27%; animation-delay: 2.2s; width: 2px; }
.vx-bg .beams i:nth-child(3) { left: 71%; animation-delay: 4.1s; }
.vx-bg .beams i:nth-child(4) { left: 88%; animation-delay: 6.3s; width: 2px; }
.vx-bg .beams i:nth-child(5) { left: 47%; animation-delay: 7.5s; width: 1.5px; }
@keyframes beam { 0%, 100% { opacity: 0; transform: scaleY(.6); } 20% { opacity: .9; transform: scaleY(1); } 45% { opacity: .35; } 60% { opacity: .75; } 80% { opacity: 0; } }
/* drifting fog */
.vx-bg .fog { position: absolute; left: -50%; right: -50%; height: 45%; bottom: -8%; opacity: .55; filter: blur(30px);
  background: radial-gradient(40% 60% at 20% 60%, rgba(124, 58, 237, .55), transparent 70%), radial-gradient(35% 55% at 60% 70%, rgba(168, 85, 247, .45), transparent 70%), radial-gradient(30% 50% at 90% 55%, rgba(76, 29, 149, .6), transparent 70%);
  animation: fog 40s linear infinite alternate; }
.vx-bg .fog.f2 { bottom: auto; top: -12%; height: 35%; opacity: .35; animation-duration: 55s; animation-direction: alternate-reverse; }
@keyframes fog { to { transform: translateX(22%); } }
/* lightning flash (JS adds .on) */
.vx-bg .flash { position: absolute; inset: 0; background: radial-gradient(ellipse at var(--fx, 50%) 20%, rgba(233, 213, 255, .55), rgba(168, 85, 247, .18) 30%, transparent 60%); opacity: 0; mix-blend-mode: screen; }
.vx-bg .flash.on { animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: .2; } 24% { opacity: .85; } 100% { opacity: 0; } }
/* the lower page: deep violet aurora instead of plain black */
.vx-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 40% at 15% 75%, rgba(124, 58, 237, .30), transparent 70%),
    radial-gradient(60% 40% at 85% 60%, rgba(168, 85, 247, .22), transparent 70%),
    radial-gradient(80% 35% at 50% 100%, rgba(192, 38, 211, .22), transparent 70%);
}
body.app .vx-bg .beams { opacity: .45; }

/* cursor light + scroll progress + loader */
.cursor-light { position: fixed; z-index: 1; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(192, 132, 252, .16), rgba(124, 58, 237, .06) 40%, transparent 70%); mix-blend-mode: screen;
  transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0); transition: opacity .4s; }
.progress { position: fixed; z-index: 80; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, #7c3aed, #c084fc, #f0abfc); box-shadow: 0 0 14px #a855f7; }
.loader { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: #06020d; transition: opacity .8s var(--ease), visibility .8s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader .ring { position: absolute; width: 160px; height: 160px; border-radius: 50%; border: 2px solid transparent; border-top-color: #c084fc; border-right-color: rgba(168, 85, 247, .5); animation: spin 1.1s linear infinite; filter: drop-shadow(0 0 12px #a855f7); }
.loader .ring.r2 { width: 120px; height: 120px; border-top-color: #f0abfc; animation-duration: .8s; animation-direction: reverse; }
.loader .ring.r3 { width: 200px; height: 200px; border-top-color: rgba(124, 58, 237, .8); animation-duration: 1.6s; }
.loader .mark { font-family: var(--font-gothic); font-size: 44px; color: #fff; text-shadow: 0 0 20px #a855f7; animation: pulse 1.4s infinite; }
.vx-bg .orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen;
  animation: orb 26s var(--ease) infinite alternate;
}
.vx-bg .orb.o1 { width: 520px; height: 520px; left: -120px; top: 10%; background: radial-gradient(circle, #7c3aed, transparent 65%); }
.vx-bg .orb.o2 { width: 620px; height: 620px; right: -160px; top: -120px; background: radial-gradient(circle, #a855f7, transparent 65%); animation-duration: 32s; }
.vx-bg .orb.o3 { width: 460px; height: 460px; left: 40%; bottom: -200px; background: radial-gradient(circle, #c026d3, transparent 65%); animation-duration: 38s; opacity: .35; }
.vx-bg .vortex { display: none; }
.vx-bg .grain {
  position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vx-bg .stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 64%, rgba(240,171,252,.8), transparent 60%),
    radial-gradient(1px 1px at 88% 48%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 52% 84%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 76%, rgba(192,132,252,.7), transparent 60%),
    radial-gradient(1px 1px at 64% 36%, rgba(255,255,255,.45), transparent 60%);
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes orb { to { transform: translate3d(120px, 80px, 0) scale(1.15); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }

/* ---------------------------------- liquid glass */
/*
 * Clear liquid glass (iOS-style): the background stays 100% sharp behind it - no frosting, no blur.
 * What makes it "glass": a lens rim (bright top-left, coloured bottom-right), inner edge light,
 * a specular highlight that follows the pointer, a slow liquid sheen and (Chromium) real refraction.
 */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .55),
    inset 1.5px 0 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    inset 0 0 22px rgba(255, 255, 255, .06),
    inset 0 -18px 30px -18px rgba(192, 132, 252, .25),
    var(--glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: var(--text-glow);
  overflow: hidden;
  transition: transform .6s var(--spring), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
/* specular highlight (pointer) + a liquid sheen that slowly flows over the surface */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(260px circle at var(--mx, 25%) var(--my, -10%), rgba(255, 255, 255, .22), transparent 42%),
    radial-gradient(520px circle at var(--mx, 25%) var(--my, -10%), rgba(216, 180, 254, .10), transparent 55%),
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .02) 50%, transparent 60%);
  background-size: 100% 100%, 100% 100%, 250% 100%;
  animation: sheen 9s var(--ease) infinite;
}
@keyframes sheen { 0% { background-position: 0 0, 0 0, 120% 0; } 55%, 100% { background-position: 0 0, 0 0, -130% 0; } }
/* lens rim: bright top-left, violet + pink chromatic edge bottom-right */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background: conic-gradient(from 210deg at 30% 20%, rgba(255,255,255,.9), rgba(255,255,255,.15) 18%, rgba(240,171,252,.55) 38%,
    rgba(168,85,247,.25) 55%, rgba(255,255,255,.7) 72%, rgba(192,132,252,.3) 88%, rgba(255,255,255,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7;
}
.glass.hover:hover { transform: translateY(-5px) scale(1.015); border-color: rgba(255,255,255,.4);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.75), inset 1.5px 0 0 rgba(255,255,255,.25), inset 0 0 30px rgba(255,255,255,.10),
    inset 0 -18px 34px -16px rgba(192,132,252,.45), 0 34px 90px -26px rgba(124,58,237,.75), 0 0 0 1px rgba(192,132,252,.25); }
.glass.soft { --glass-bg: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,0)); }
.glass.tint { --glass-bg: linear-gradient(135deg, rgba(168,85,247,.16), rgba(124,58,237,.04) 60%, rgba(255,255,255,.02)); }
/* the tiniest bit of body for long text blocks (forms, tables) - still see-through */
.glass.read { --glass-bg: linear-gradient(135deg, rgba(10, 4, 22, .38), rgba(10, 4, 22, .22)); }

/* ---------------------------------- layout */
.wrap { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: clamp(70px, 10vw, 130px) 0; position: relative; }
.grid { display: grid; gap: 18px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } .wrap { width: calc(100% - 28px); } }

/* ---------------------------------- type */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  font: 600 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-1);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; }
h2 { font-size: clamp(30px, 4.4vw, 52px); }
h3 { font-size: 20px; }
.lead { color: var(--ink-2); font-size: clamp(16px, 1.6vw, 19px); max-width: 720px; }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.grad-text {
  background: linear-gradient(100deg, #fff 0%, var(--violet-1) 35%, var(--violet-3) 70%, #fff 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 8s linear infinite;
}
@keyframes shine { to { background-position: -200% 0; } }
.gothic {
  font-family: var(--font-gothic); font-weight: 400; letter-spacing: .01em;
  background: linear-gradient(180deg, #ffffff 0%, #e9e1f7 38%, #b9a6d6 55%, #f5f0ff 72%, #c8b3e8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(168, 85, 247, .65)) drop-shadow(0 4px 0 rgba(76, 29, 149, .9));
}

/* ---------------------------------- buttons */
.btn {
  --b: rgba(255,255,255,.12);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  font: 600 15px/1 var(--font-display); color: #fff; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.12), inset 0 0 16px rgba(255,255,255,.08), 0 10px 30px -12px rgba(0,0,0,.7);
  transition: transform .45s var(--spring), box-shadow .3s, background .3s;
  overflow: hidden; isolation: isolate;
}
.btn::before { /* liquid sheen sweep */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  translate: -120% 0; transition: translate .9s var(--ease);
}
.btn:hover::before { translate: 120% 0; }
.btn:hover { transform: translateY(-2px) scale(1.03); color: #fff; }
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 40%, #7c3aed 100%);
  border-color: rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -8px 18px rgba(76,29,149,.45), 0 16px 40px -10px rgba(168,85,247,.75), 0 0 0 1px rgba(168,85,247,.3);
}
.btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -8px 18px rgba(76,29,149,.45), 0 22px 50px -10px rgba(192,132,252,.9); }
.btn.small { padding: 10px 16px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; }
.btn[disabled]::before { display: none; }
.btn.block { width: 100%; }
.btn.danger { background: linear-gradient(135deg, rgba(248,113,113,.35), rgba(248,113,113,.12)); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------------------------------- nav (floating glass pill) */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 50%; translate: -50% 0;
  width: min(1180px, calc(100% - 24px)); height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 0 18px;
  border-radius: 999px; transition: top .4s var(--ease), background .4s;
}
.nav .brand { display: flex; align-items: center; gap: 10px; color: #fff; font: 700 18px/1 var(--font-display); }
.nav .brand .logo {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, #c084fc, #6d28d9); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 18px rgba(124,58,237,.6);
}
.nav .brand .logo svg { width: 22px; height: 22px; }
.nav .brand .gothic { font-size: 26px; filter: drop-shadow(0 0 10px rgba(168,85,247,.6)); }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav ul a { display: block; padding: 10px 14px; border-radius: 999px; color: var(--ink-2); font: 500 14px/1 var(--font-display); transition: background .25s, color .25s; }
.nav ul a:hover, .nav ul a.active { background: rgba(255,255,255,.09); color: #fff; }
.nav .menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.nav .menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .nav ul, .nav .nav-cta { display: none; }
  .nav .menu-btn { display: grid; place-items: center; }
}
.sheet {
  position: fixed; z-index: 49; left: 12px; right: 12px; top: calc(var(--nav-h) + 24px);
  padding: 10px; border-radius: var(--radius-lg); display: grid; gap: 4px;
  opacity: 0; translate: 0 -12px; scale: .97; pointer-events: none; transition: all .45s var(--spring);
}
.sheet.open { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }
.sheet a { padding: 14px 16px; border-radius: 14px; color: #fff; font: 600 16px/1 var(--font-display); }
.sheet a:hover { background: rgba(255,255,255,.08); }

/* ---------------------------------- hero */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + 60px) 0 70px; overflow: hidden; }
.hero .banner { display: none; }
/* the title: metallic letters, a light sweep that runs INSIDE the letters (no box around it) */
.hero h1.intro {
  background-image:
    linear-gradient(105deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #e9e1f7 38%, #b9a6d6 55%, #f5f0ff 72%, #c8b3e8 100%);
  background-size: 300% 100%, 100% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: intro 1.8s var(--ease) both .35s, titleshine 6s var(--ease) infinite 2.4s;
}
@keyframes intro { from { letter-spacing: .5em; opacity: 0; transform: scale(1.15); } to { letter-spacing: .01em; opacity: 1; transform: none; } }
@keyframes titleshine { 0% { background-position: 150% 0, 0 0; } 45%, 100% { background-position: -50% 0, 0 0; } }
.title-wrap { position: relative; padding: 0 .1em; }
.hero-inner { text-align: center; display: grid; justify-items: center; gap: 22px; }
.hero h1 { margin: 0; font-size: clamp(64px, 13vw, 168px); line-height: .95; }
.hero .crown { width: clamp(60px, 9vw, 104px); margin-bottom: -18px; filter: drop-shadow(0 0 18px rgba(192,132,252,.8)); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -8px; } }
.hero .tagline {
  display: flex; align-items: center; gap: 16px; font: 600 clamp(14px, 2.1vw, 22px)/1 var(--font-display);
  letter-spacing: .32em; text-transform: uppercase; color: #ece3fb;
}
.hero .tagline::before, .hero .tagline::after { content: ""; width: clamp(24px, 6vw, 70px); height: 1px; background: linear-gradient(90deg, transparent, var(--violet-2), transparent); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: min(1180px, calc(100% - 28px)); margin-top: 34px; }
.chip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; text-align: left; }
.chip svg { width: 30px; height: 30px; flex: none; color: var(--violet-2); filter: drop-shadow(0 0 8px rgba(192,132,252,.7)); }
.chip b { display: block; font: 700 14px/1.15 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.chip span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 1100px) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chip { padding: 12px; } }
.scroll-hint { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 14px; }
.scroll-hint::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: wheel 1.8s infinite; }
@keyframes wheel { to { translate: 0 14px; opacity: 0; } }

/* ---------------------------------- marquee */
.marquee { overflow: hidden; padding: 18px 0; mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 12px; width: max-content; animation: marq 40s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee .pill { padding: 10px 18px; border-radius: 999px; font: 600 14px/1 var(--font-display); color: var(--ink-2); white-space: nowrap; }
@keyframes marq { to { translate: -50% 0; } }

/* ---------------------------------- cards */
.card { padding: 26px; border-radius: var(--radius-lg); }
.card .icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(192,132,252,.35), rgba(124,58,237,.15));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px -10px rgba(168,85,247,.8);
  color: #fff;
}
.card .icon svg { width: 26px; height: 26px; }
.card p { color: var(--ink-2); margin: 0; font-size: 15px; }
.card ul { margin: 14px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.card ul li { margin: 4px 0; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 600 11px/1.4 var(--font-display); letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.08); color: var(--ink-2); border: 1px solid rgba(255,255,255,.1); }
.tag.violet { background: rgba(168,85,247,.2); color: var(--violet-1); border-color: rgba(192,132,252,.35); }
.tag.ok { background: rgba(74,222,128,.14); color: var(--ok); border-color: rgba(74,222,128,.35); }
.tag.warn { background: rgba(251,191,36,.14); color: var(--warn); border-color: rgba(251,191,36,.35); }
.tag.bad { background: rgba(248,113,113,.14); color: var(--bad); border-color: rgba(248,113,113,.35); }
.section-head { display: grid; gap: 14px; margin-bottom: 44px; }

/* bento */
.bento { display: grid; gap: 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); }
.bento .b-wide { grid-column: span 4; }
.bento .b-half { grid-column: span 3; }
.bento .b-third { grid-column: span 2; }
.bento .b-tall { grid-row: span 2; }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento .b-wide, .bento .b-half, .bento .b-third { grid-column: span 1; } .bento .b-wide.full { grid-column: span 2; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bento .b-wide.full { grid-column: span 1; } .bento .b-tall { grid-row: auto; } }

/* mock minecraft ui */
.mc-gui { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; padding: 10px; border-radius: 16px; background: rgba(10,4,22,.55); border: 1px solid rgba(255,255,255,.08); width: 100%; overflow: hidden; }
.mc-gui .slot { aspect-ratio: 1; min-width: 0; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); display: grid; place-items: center; font-size: clamp(10px, 1.25vw, 17px); line-height: 1; overflow: hidden; transition: transform .3s var(--spring), background .3s; }
/* showcase: cards hug their content, the content block sits in the middle */
.showcase-grid { align-items: stretch; }
.showcase-grid > .card { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 22px; }
.showcase-grid .sb, .showcase-grid .chat { font-size: 13px; }
.mc-gui .slot.f { background: linear-gradient(135deg, rgba(168,85,247,.32), rgba(124,58,237,.12)); border-color: rgba(192,132,252,.35); }
.mc-gui .slot:hover { transform: scale(1.12); background: rgba(192,132,252,.35); }
.mc-title { font: 700 13px/1 var(--font-display); color: var(--ink-2); margin: 0 0 10px 4px; letter-spacing: .04em; }
.sb { font: 600 14px/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; padding: 16px 18px; border-radius: 16px; background: rgba(8,3,18,.6); border: 1px solid rgba(255,255,255,.08); }
.sb .t { text-align: center; font-weight: 800; letter-spacing: .08em; color: #c084fc; margin-bottom: 6px; }
.sb .r { display: flex; justify-content: space-between; gap: 14px; color: #e9ddff; }
.sb .r em { font-style: normal; color: #a78bfa; }
.chat { font: 500 13.5px/1.7 ui-monospace, Consolas, monospace; padding: 16px 18px; border-radius: 16px; background: rgba(8,3,18,.6); border: 1px solid rgba(255,255,255,.08); color: #ddd; }
.chat .a { color: #00a4fc; } .chat .p { color: #fff; } .chat .c { color: #f87171; } .chat .g { color: #9ca3af; } .chat .v { color: #c084fc; }

/* stats */
.stat { padding: 24px; border-radius: var(--radius-lg); }
.stat .n { font: 800 clamp(34px, 4.6vw, 54px)/1 var(--font-display); }
.stat .l { color: var(--ink-3); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }

/* network diagram */
.net { display: grid; gap: 18px; justify-items: center; }
.net .node { padding: 14px 22px; border-radius: 18px; font: 700 15px/1.2 var(--font-display); text-align: center; min-width: 160px; }
.net .node small { display: block; font: 500 12px/1.4 var(--font); color: var(--ink-3); margin-top: 4px; }
.net .row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.net .line { width: 2px; height: 34px; background: linear-gradient(var(--violet-2), transparent); position: relative; overflow: hidden; }
.net .line::after { content: ""; position: absolute; left: 0; top: -20px; width: 2px; height: 20px; background: #fff; box-shadow: 0 0 10px #fff; animation: flow 1.6s linear infinite; }
@keyframes flow { to { top: 34px; } }

/* pricing */
.price { padding: 30px; border-radius: var(--radius-xl); display: grid; gap: 16px; align-content: start; }
.price .amount { font: 800 44px/1 var(--font-display); }
.price .amount small { font-size: 15px; color: var(--ink-3); font-weight: 500; }
.price ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 9px; color: var(--ink-2); font-size: 14.5px; }
.price li { display: flex; gap: 10px; align-items: flex-start; }
.price li svg { width: 18px; height: 18px; flex: none; color: var(--violet-2); margin-top: 3px; }
.price.featured { border-color: rgba(192,132,252,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 30px 90px -30px rgba(168,85,247,.9); }
.ribbon { position: absolute; top: 18px; right: 18px; }

/* faq */
.faq details { border-radius: 20px; padding: 0; margin-bottom: 12px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font: 600 16px/1.4 var(--font-display); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font-size: 24px; color: var(--violet-2); transition: rotate .4s var(--spring); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); }

/* forms */
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { font: 600 13px/1 var(--font-display); color: var(--ink-2); letter-spacing: .03em; }
.input, select.input, textarea.input {
  width: 100%; padding: 14px 16px; border-radius: 14px; color: #fff; font: 500 15px/1.3 var(--font);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.35); outline: none; transition: border-color .25s, box-shadow .25s, background .25s;
  -webkit-appearance: none; appearance: none;
}
.input:focus { border-color: rgba(192,132,252,.7); background: rgba(255,255,255,.09); box-shadow: inset 0 2px 8px rgba(0,0,0,.35), 0 0 0 4px rgba(168,85,247,.18); }
textarea.input { min-height: 110px; resize: vertical; }
select.input { background-image: linear-gradient(45deg, transparent 50%, #c084fc 50%), linear-gradient(135deg, #c084fc 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
select.input option { background: #140a28; }
.input.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.form-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.alert { padding: 14px 18px; border-radius: 16px; margin-bottom: 18px; font-size: 14.5px; border: 1px solid; }
.alert.ok { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.35); color: #bbf7d0; }
.alert.bad { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.35); color: #fecaca; }
.alert.info { background: rgba(168,85,247,.12); border-color: rgba(192,132,252,.35); color: #ede9fe; }
.keybox { font: 700 clamp(15px, 2.6vw, 22px)/1.3 ui-monospace, Consolas, monospace; letter-spacing: .08em; padding: 16px 18px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px dashed rgba(192,132,252,.6); word-break: break-all; color: #fff; user-select: all; }

/* tables (become cards on phones) */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table th { text-align: left; font: 600 12px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.table td { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.table tr:hover td { background: rgba(255,255,255,.03); }
.table .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .table td { border: 0; padding: 6px 10px; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .table td::before { content: attr(data-label); color: var(--ink-3); font: 600 11px/1.6 var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-align: left; }
  .table .actions { justify-content: flex-end; }
}

/* footer */
.footer { padding: 50px 0 calc(40px + env(safe-area-inset-bottom)); color: var(--ink-3); font-size: 14px; }
.footer .row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.footer a { color: var(--ink-2); }

/* reveal on scroll */
.reveal { opacity: 0; translate: 0 26px; filter: blur(6px); transition: opacity .9s var(--ease), translate .9s var(--ease), filter .9s var(--ease); }
.reveal.in { opacity: 1; translate: 0 0; filter: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; translate: none; filter: none; }
}

/* app shell (admin / license) */
.shell { min-height: 100svh; display: grid; grid-template-columns: 260px 1fr; gap: 18px; padding: 18px; }
.side { position: sticky; top: 18px; height: calc(100svh - 36px); padding: 18px; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 6px; }
.side .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #fff; font: 700 17px/1 var(--font-display); }
.side a.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; color: var(--ink-2); font: 600 14.5px/1 var(--font-display); transition: background .25s, color .25s; }
.side a.item svg { width: 19px; height: 19px; }
.side a.item:hover { background: rgba(255,255,255,.06); color: #fff; }
.side a.item.active { background: linear-gradient(135deg, rgba(168,85,247,.35), rgba(124,58,237,.15)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.side .grow { flex: 1; }
.main { min-width: 0; display: grid; gap: 18px; align-content: start; padding-bottom: 90px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-radius: var(--radius-lg); }
.topbar h1 { margin: 0; font-size: 22px; }
.panel { padding: 22px; border-radius: var(--radius-lg); }
.panel h2 { font-size: 18px; margin-bottom: 14px; }
.tabbar { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; padding: 12px; }
  .side { display: none; }
  .tabbar {
    display: flex; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 8px; border-radius: 26px; justify-content: space-around;
  }
  .tabbar a { display: grid; justify-items: center; gap: 4px; padding: 8px 10px; border-radius: 16px; color: var(--ink-3); font: 600 10.5px/1 var(--font-display); }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.active { color: #fff; background: rgba(168,85,247,.28); }
}
.auth { min-height: 100svh; display: grid; place-items: center; padding: 20px; }
.auth .box { width: min(440px, 100%); padding: 34px; border-radius: var(--radius-xl); }
.kpi { padding: 20px; border-radius: var(--radius-lg); }
.kpi .n { font: 800 34px/1 var(--font-display); }
.kpi .l { color: var(--ink-3); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }
code, .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
code { background: rgba(255,255,255,.07); padding: 2px 7px; border-radius: 7px; font-size: .92em; }
.hidden { display: none !important; }

/* ---------------------------------- scale (multi-backend) section */
.worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; position: relative; }
.world { padding: 26px; border-radius: var(--radius-xl); min-height: 260px; display: grid; align-content: space-between; gap: 14px; overflow: hidden; }
.world .orb-w { width: 92px; height: 92px; border-radius: 50%; position: relative; animation: float 7s ease-in-out infinite; }
.world.ow .orb-w { background: radial-gradient(circle at 35% 30%, #a7f3d0, #22c55e 35%, #14532d 70%, #052e16); box-shadow: 0 0 40px rgba(74,222,128,.45), inset -10px -12px 24px rgba(0,0,0,.45); }
.world.ne .orb-w { background: radial-gradient(circle at 35% 30%, #fecaca, #ef4444 35%, #7f1d1d 70%, #2a0505); box-shadow: 0 0 40px rgba(248,113,113,.5), inset -10px -12px 24px rgba(0,0,0,.5); animation-delay: -2s; }
.world.en .orb-w { background: radial-gradient(circle at 35% 30%, #f5f3ff, #c4b5fd 30%, #6d28d9 65%, #1e0b3a); box-shadow: 0 0 40px rgba(192,132,252,.6), inset -10px -12px 24px rgba(0,0,0,.5); animation-delay: -4s; }
.world .orb-w::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.25); animation: spin 18s linear infinite; }
.world h3 { font-size: 22px; margin: 0; }
.world .srv { font: 600 12px/1 ui-monospace, Consolas, monospace; letter-spacing: .06em; color: var(--violet-1); }
.portal-link { position: absolute; top: 46px; height: 2px; width: 18px; background: linear-gradient(90deg, #c084fc, #f0abfc); box-shadow: 0 0 10px #a855f7; }
@media (max-width: 900px) { .worlds { grid-template-columns: 1fr; } .portal-link { display: none; } }
.code { font: 500 13px/1.7 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre; overflow-x: auto; padding: 18px 20px; border-radius: 18px; color: #e9ddff; }
.code .k { color: #c084fc; } .code .s { color: #86efac; } .code .c { color: #8f7bb3; }
/* 3D pixel blocks (own pixel art, generated in vortex.js) */
.block-stage { width: 120px; height: 120px; perspective: 700px; display: grid; place-items: center; position: relative; animation: float 6s ease-in-out infinite; }
.world.ne .block-stage { animation-delay: -2s; } .world.en .block-stage { animation-delay: -4s; }
.block-stage::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 80px; height: 16px; margin-left: -40px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); animation: shadowpulse 6s ease-in-out infinite; }
.world.ow .block-stage::before, .world.ne .block-stage::before, .world.en .block-stage::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; filter: blur(26px); opacity: .55; }
.world.ow .block-stage::before { background: #4ade80; } .world.ne .block-stage::before { background: #ef4444; } .world.en .block-stage::before { background: #e9d5ff; }
@keyframes shadowpulse { 50% { transform: scale(.78); opacity: .6; } }
.mc-block { --s: 72px; width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; animation: blockspin 16s linear infinite; }
.world.ne .mc-block { animation-duration: 19s; animation-direction: reverse; } .world.en .mc-block { animation-duration: 22s; }
.mc-block i { position: absolute; inset: 0; image-rendering: pixelated; image-rendering: crisp-edges; background-size: 100% 100%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.mc-block .t  { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.mc-block .bo { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.45); }
.mc-block .f  { transform: translateZ(calc(var(--s) / 2)); filter: brightness(.86); }
.mc-block .b  { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); filter: brightness(.7); }
.mc-block .r  { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.72); }
.mc-block .l  { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.9); }
@keyframes blockspin { from { transform: rotateX(-26deg) rotateY(0deg); } to { transform: rotateX(-26deg) rotateY(360deg); } }
.world:hover .mc-block { animation-duration: 4s; }
.scale-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 18px 0 0; }
.scale-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.scale-list li b { color: #fff; }
.scale-list svg { width: 22px; height: 22px; flex: none; color: var(--violet-2); margin-top: 2px; }
.panel h2 svg, .eyebrow svg, .keybox + .btn svg, h2 > svg { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; color: var(--violet-2); }
.side .brand .logo svg, .auth .logo svg, .flex > .logo svg { width: 22px; height: 22px; color: #fff; }
.tabbar-hide { display: none; }
/* gradient (background-clip) text must not get a text-shadow, it would show through */
.gothic, .grad-text, .glass .gothic, .glass .grad-text { text-shadow: none; }
.code, .code * { text-shadow: none; }
@media (max-width: 900px) { .tabbar-hide { display: block; } }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt { margin-top: 18px; }

/* ==========================================================================
   PERFORMANCE
   Rule of thumb: only `transform` and `opacity` are animated (the GPU composites those without repainting);
   no blur filters / blend modes on big layers; nothing animates forever on every card; off-screen sections
   are not rendered at all. These rules override the decorative ones above.
   ========================================================================== */
/* 1. background: same look, no blur filters, no blend modes */
.vx-bg .orb { display: none; }                      /* the radial gradients of .vx-bg already give this glow */
.vx-bg .stars { animation: none; }
.vx-bg .grain { opacity: .035; }
.vx-bg .beams i {
  filter: none; width: 16px; margin-left: -8px; will-change: opacity; transform: none;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.22) 35%, rgba(233,213,255,.95) 50%, rgba(168,85,247,.22) 65%, transparent);
  -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 65%, transparent);
  mask: linear-gradient(180deg, transparent, #000 25%, #000 65%, transparent);
  animation-name: beam2;
}
.vx-bg .beams i:nth-child(n+4) { display: none; }
@keyframes beam2 { 0%, 100% { opacity: 0; } 20% { opacity: .85; } 45% { opacity: .3; } 60% { opacity: .7; } 80% { opacity: 0; } }
.vx-bg .fog { filter: none; will-change: transform; opacity: .45; }
.vx-bg .flash { mix-blend-mode: normal; will-change: opacity; }
.cursor-light { mix-blend-mode: normal; will-change: transform; background: radial-gradient(circle, rgba(192,132,252,.10), rgba(124,58,237,.04) 40%, transparent 68%); }

/* 2. the artwork is a still image (no endless zoom on a 1250px masked layer) */
.page-art .img { animation: none; transform: none; transition: none; }

/* 3. glass: no endless sheen on every card - a short one only when you hover it */
.glass::before { animation: none; background-position: 0 0, 0 0, 120% 0; }
.glass.hover:hover::before { animation: sheen 1.6s var(--ease) 1; }
.grad-text { animation: none; background-position: 0 0; }
.hero h1.intro { animation: intro 1.8s var(--ease) both .35s, titleshine 2.6s var(--ease) 2.3s 1 both; }
.net .line::after { top: 0; animation-name: flow2; will-change: transform; }
@keyframes flow2 { from { transform: translateY(-20px); } to { transform: translateY(34px); } }
.reveal { filter: none; transition: opacity .8s var(--ease), translate .8s var(--ease); }

/* 4. blocks: shading without filters (filters inside a 3D scene are expensive) */
.mc-block i { filter: none !important; }
.mc-block .bo { box-shadow: inset 0 0 0 200px rgba(0,0,0,.55); }
.mc-block .f  { box-shadow: inset 0 0 0 200px rgba(0,0,0,.14); }
.mc-block .b  { box-shadow: inset 0 0 0 200px rgba(0,0,0,.30); }
.mc-block .r  { box-shadow: inset 0 0 0 200px rgba(0,0,0,.28); }
.mc-block .l  { box-shadow: inset 0 0 0 200px rgba(0,0,0,.10); }
.world .block-stage::before { filter: none !important; background: radial-gradient(circle, currentColor, transparent 68%) !important; opacity: .45; }
.world.ow .block-stage::before { color: #4ade80; } .world.ne .block-stage::before { color: #ef4444; } .world.en .block-stage::before { color: #e9d5ff; }

/* 5. sections outside the screen are not rendered (huge win on long pages) */
.section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.marquee { contain: paint; }
.marquee .track { will-change: transform; }

/* 6. lite mode (weak GPU / phone / low FPS detected by vortex.js): keep the design, drop the extras */
.perf-lite .vx-bg .beams, .perf-lite .vx-bg .fog, .perf-lite .vx-bg .flash, .perf-lite .vx-bg .grain, .perf-lite .cursor-light { display: none; }
.perf-lite .glass.hover:hover { transform: none; }
.perf-lite .glass.hover:hover::before { animation: none; }
.perf-lite .block-stage, .perf-lite .block-stage::after, .perf-lite .crown, .perf-lite .eyebrow .dot, .perf-lite .scroll-hint::after { animation: none; }
.perf-lite .mc-block { animation-duration: 40s; }
.perf-lite .marquee .track { animation-duration: 80s; }
.perf-lite .hero h1.intro { animation: intro 1s var(--ease) both .1s; }