/* ═══════════════════════════════════════════════════════
   INZX — landing page
   Theme: red on black
   ═══════════════════════════════════════════════════════ */

/* ---------- tokens ---------- */
:root{
  --ink:        #050506;
  --ink-2:      #08080a;
  --ink-3:      #0d0d10;
  --line:       rgba(255,255,255,.08);
  --line-soft:  rgba(255,255,255,.05);
  --surface:    rgba(255,255,255,.028);
  --surface-2:  rgba(255,255,255,.05);

  --red:        #ff1f2e;
  --red-hot:    #ff4b52;
  --red-deep:   #9e0009;
  --red-ink:    #2a0206;
  --glow:       rgba(255,31,46,.42);

  --fg:         #f2f2f5;
  --fg-2:       #b6b6c0;
  --fg-3:       #7c7c88;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 34px;

  --gut: clamp(20px, 5vw, 56px);
  --max: 1220px;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,h5{ font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.025em; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
code{ font-family:var(--mono); font-size:.88em; }
::selection{ background:var(--red); color:#fff; }

:focus-visible{ outline:2px solid var(--red-hot); outline-offset:3px; border-radius:6px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:860px; }
.section{ position:relative; padding:clamp(72px,10vw,140px) 0; }

/* ---------- ambient layers ---------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; width:520px; height:520px; left:0; top:0; z-index:0; pointer-events:none;
  border-radius:50%; opacity:0; transition:opacity .5s;
  background:radial-gradient(circle, rgba(255,31,46,.09) 0%, transparent 62%);
  transform:translate(-50%,-50%);
  will-change:transform;
}
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1000; background:transparent;
}
.scroll-progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--red-deep),var(--red),var(--red-hot));
  box-shadow:0 0 12px var(--glow);
}

/* ═══════════ NAV ═══════════ */
.nav{
  position:absolute; top:clamp(14px, 2.4vw, 28px); left:0; right:0; z-index:900;
  border-bottom:1px solid transparent;
}
.nav-inner{
  max-width:var(--max); margin-inline:auto; padding:clamp(12px, 1.6vw, 18px) var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; text-decoration:none; }
.brand-mark{
  height:clamp(58px, 5.2vw, 68px); width:auto; display:block;
  filter:drop-shadow(0 6px 20px rgba(255,31,46,.4));
  transition:transform .3s var(--ease), filter .3s;
}
.brand-text-img{
  height:clamp(42px, 3.8vw, 50px); width:auto; display:block;
  transition:transform .3s var(--ease);
}
.brand:hover .brand-mark{
  transform:scale(1.06);
  filter:drop-shadow(0 8px 26px rgba(255,31,46,.65));
}
.brand:hover .brand-text-img{
  transform:scale(1.03);
}
.brand-combined{
  display:none;
}

.nav-actions{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.ghost-link{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  font-size:15.5px; font-weight:500; color:var(--fg-2); border-radius:999px;
  border:1px solid var(--line); transition:.25s;
}
.ghost-link:hover{ color:var(--fg); border-color:rgba(255,31,46,.4); background:rgba(255,31,46,.06); }

/* ── Dedicated Docs Nav Link Animation ── */
.docs-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  font-size:15.5px;
  font-weight:550;
  color:var(--fg-2);
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  transition:all .3s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.docs-link::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,74,54,.35), transparent 70%);
  opacity:0;
  transition:opacity .35s;
  pointer-events:none;
}
.docs-link:hover{
  color:#fff;
  border-color:rgba(255,74,54,.55);
  background:rgba(255,31,46,.08);
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 22px -6px rgba(0,0,0,.6), 0 0 16px rgba(255,31,46,.3);
}
.docs-link:hover::before{
  opacity:1;
}

/* Nav Download button hover enhancement */
.nav .btn-primary{
  padding:12px 26px;
  font-size:15.5px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s var(--ease), border-color .3s;
}
.nav .btn-primary:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 12px 30px -6px rgba(255,31,46,.6), 0 0 20px rgba(255,74,54,.4);
}
.nav-download-btn .btn-text{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.nav-dl-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
  transition:transform .25s var(--ease);
}
.nav-download-btn:hover .nav-dl-icon{
  transform:translateY(1.5px);
}

/* ── GitHub Star Pill & Interactive Hover ── */
.gh-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px 10px 18px;
  font-size:15.5px;
  font-weight:500;
  color:var(--fg-2);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  transition:all .3s var(--ease);
  overflow:hidden;
}
.gh-btn::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,215,0,.15), transparent 70%);
  opacity:0; transition:opacity .35s; pointer-events:none;
}
.gh-btn .gh-icon{
  width:20px; height:20px;
  transition:transform .4s cubic-bezier(.34, 1.56, .64, 1), color .3s;
}
.gh-btn .gh-label{
  color:var(--fg);
  font-weight:550;
  transition:color .25s;
}
.gh-btn .gh-stars{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px 4px 9px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  color:var(--fg-2);
  transition:all .3s var(--ease);
}
.gh-btn .star-icon{
  width:15px; height:15px;
  color:#e3b341;
  transition:transform .5s cubic-bezier(.34, 1.56, .64, 1), filter .3s;
}

.gh-btn:hover{
  color:#fff;
  border-color:rgba(255,215,0,.4);
  background:rgba(255,255,255,.06);
  transform:translateY(-1.5px);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.6), 0 0 16px rgba(255,215,0,.18);
}
.gh-btn:hover::before{
  opacity:1;
}
.gh-btn:hover .gh-icon{
  transform:rotate(-15deg) scale(1.15);
  color:#fff;
}
.gh-btn:hover .gh-stars{
  background:rgba(255,215,0,.12);
  border-color:rgba(255,215,0,.35);
  color:#fff;
}
.gh-btn:hover .star-icon{
  transform:rotate(72deg) scale(1.25);
  filter:drop-shadow(0 0 6px rgba(255,215,0,.8));
}

.burger{ display:none; width:40px; height:40px; border-radius:11px; border:1px solid var(--line); flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span{ display:block; width:17px; height:1.7px; background:var(--fg); border-radius:2px; transition:.3s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(3.4px) rotate(45deg); }
.burger.open span:nth-child(2){ transform:translateY(-3.3px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:880; display:flex; flex-direction:column;
  justify-content:center; gap:6px; padding:0 var(--gut);
  background:rgba(5,5,6,.97); backdrop-filter:blur(20px);
  animation:menuIn .35s var(--ease);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{
  font-family:var(--display); font-size:clamp(26px,7vw,36px); font-weight:600;
  padding:8px 0; color:var(--fg-2); border-bottom:1px solid var(--line-soft);
}
.mobile-menu a:last-child{
  border:0; margin-top:24px; align-self:flex-start; font-size:16px;
}
@keyframes menuIn{ from{ opacity:0; } to{ opacity:1; } }

/* ═══════════ BUTTONS ═══════════ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:999px; font-size:14.5px; font-weight:550;
  letter-spacing:-.01em; white-space:nowrap; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s;
}
.btn-sm{ padding:11px 22px; font-size:15px; }
.btn-lg{ padding:15px 30px; font-size:15.5px; }

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--red) 0%, var(--red-deep) 130%);
  box-shadow:0 8px 26px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:not(.btn-blob)::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn-primary:not(.btn-blob):hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-primary:not(.btn-blob):hover::before{ transform:translateX(120%); }

/* ── Blob Button (Gooey Fluid Effect) ── */
.btn-blob{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 31, 46, .45);
  box-shadow: 0 8px 26px -8px var(--glow);
  z-index: 1;
}
.btn-blob .btn-text{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  transition: color .4s var(--ease);
}
.btn-blob .blob-btn__inner{
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 130%);
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-blob .blob-btn__blobs{
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  filter: url('#goo');
}
.btn-blob .blob-btn__blob{
  position: absolute;
  top: 0;
  width: 32%;
  height: 100%;
  background: #ffffff;
  border-radius: 100%;
  transform: translate3d(0, 150%, 0) scale(1.5);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.btn-blob .blob-btn__blob:nth-child(1){ left: 0%;   transition-delay: 0s; }
.btn-blob .blob-btn__blob:nth-child(2){ left: 26%;  transition-delay: .06s; }
.btn-blob .blob-btn__blob:nth-child(3){ left: 52%;  transition-delay: .12s; }
.btn-blob .blob-btn__blob:nth-child(4){ left: 74%;  transition-delay: .18s; }

.btn-blob:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 16px 40px -10px var(--glow), 0 0 24px rgba(255, 255, 255, .25);
}
.btn-blob:hover .btn-text{
  color: #050506;
}
.btn-blob:hover .blob-btn__blob{
  transform: translate3d(0, 0, 0) scale(1.6);
}

.btn-ghost{
  color:var(--fg); border:1px solid var(--line);
  background:rgba(255,255,255,.025); backdrop-filter:blur(8px);
}
.btn-ghost:hover{ border-color:rgba(255,31,46,.45); background:rgba(255,31,46,.07); transform:translateY(-2px); }

.round-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; color:var(--fg-2);
  transition:.25s; background:rgba(255,255,255,.02);
}
.round-btn:hover{ color:#fff; border-color:rgba(255,31,46,.5); background:rgba(255,31,46,.1); }

/* ═══════════ HERO ═══════════ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:clamp(150px, 14vw, 175px) 0 90px; overflow:hidden; }

.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-backdrop{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:min(78vw,1250px); height:auto; object-fit:cover;
  opacity:.9;
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 72% 50%, #000 32%, transparent 76%);
  mask-image:radial-gradient(ellipse 72% 78% at 72% 50%, #000 32%, transparent 76%);
}
.hero-fade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 4%, rgba(5,5,6,.86) 32%, rgba(5,5,6,.1) 62%, transparent 82%),
    linear-gradient(180deg, rgba(5,5,6,.85) 0%, transparent 24%, transparent 62%, var(--ink) 99%);
}
.hero-grid{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 26% 45%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 62% 62% at 26% 45%, #000 0%, transparent 72%);
}
.orb{ position:absolute; border-radius:50%; filter:blur(64px); pointer-events:none; contain:strict; }
.orb-a{ width:520px; height:520px; left:-160px; top:6%; background:radial-gradient(circle,rgba(255,31,46,.2),transparent 68%); animation:drift 19s ease-in-out infinite; }
.orb-b{ width:640px; height:640px; right:4%; bottom:-14%; background:radial-gradient(circle,rgba(158,0,9,.24),transparent 68%); animation:drift 24s ease-in-out infinite reverse; }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,-34px) scale(1.12);} }

.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,70px); align-items:center;
}
.hero-copy{ max-width:660px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  padding:7px 10px 7px 14px; border-radius:999px;
  border:1px solid rgba(255,31,46,.28); background:rgba(255,31,46,.07);
  font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:-.01em;
  color:#ffb6ba; transition:.3s;
}
.eyebrow:hover{ border-color:rgba(255,31,46,.6); background:rgba(255,31,46,.13); }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 var(--glow); animation:ping 2.2s infinite; }
#releaseTag{
  background: linear-gradient(
    90deg,
    #ffb6ba 0%,
    #ffb6ba 35%,
    #ffffff 50%,
    #ff5a62 60%,
    #ffb6ba 75%,
    #ffb6ba 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShimmer 2.2s ease-in-out infinite;
  display: inline-block;
}
#releaseTag b{ color: inherit; }
.eyebrow svg{ color: #ffb6ba; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(255,31,46,.6);} 70%{ box-shadow:0 0 0 9px rgba(255,31,46,0);} 100%{ box-shadow:0 0 0 0 rgba(255,31,46,0);} }
@keyframes textShimmer{ 0%{ background-position: 100% 0; } 65%{ background-position: -20% 0; } 100%{ background-position: -20% 0; } }

.hero-title{
  font-size:clamp(44px,6.2vw,74px); font-weight:700; letter-spacing:-.038em; text-wrap:balance;
  margin-bottom:24px;
}
.grad{
  background:linear-gradient(105deg,#ff5a62 0%, var(--red) 34%, var(--red-deep) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative; display:inline-block;
  filter:drop-shadow(0 6px 28px rgba(255,31,46,.28));
}
.hero-sub{
  font-size:clamp(15.5px,1.65vw,18.5px); color:var(--fg-2); max-width:600px;
  font-weight:340; line-height:1.72; margin-bottom:34px;
}
.hero-sub strong{ color:#ffffff; font-weight:600; }

.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:52px; }
.badge-link{ display:inline-flex; align-items:center; line-height:0; }
.badge-link img{ height:50px; width:auto; display:block; transition:transform .3s var(--ease), filter .3s; }
.badge-link:hover img{ transform:translateY(-2px) scale(1.02); filter:drop-shadow(0 10px 22px rgba(255,31,46,.35)); }

.hero-highlights{
  display:flex; flex-wrap:wrap; gap:16px 24px;
  align-items:center; padding-top:24px;
  border-top:1px solid var(--line-soft);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:0;
  font-size:13.5px; font-weight:450;
  color:var(--fg-2);
  transition:color .25s;
}
.hero-badge svg{
  color:var(--red);
  flex-shrink:0;
}
.hero-badge:hover{
  color:#fff;
}

/* hero visual */
.hero-visual{ position:relative; display:flex; justify-content:center; align-items:center; min-height:520px; }

.phone{
  position:relative; width:250px; aspect-ratio:1272/2800;
  border-radius:38px; padding:7px;
  background:linear-gradient(160deg,#2a2a2f,#0a0a0c 42%,#1c1c21);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 40px 90px -28px rgba(0,0,0,.95),
    0 0 70px -20px rgba(255,31,46,.3);
}
.phone-screen{ position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden; background:#000; }
.phone-screen img,
.phone-screen video{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.phone-notch{ display:none !important; }
.phone-glow{
  position:absolute; inset:-28%; z-index:-1; border-radius:50%; filter:blur(58px);
  background:radial-gradient(circle,rgba(255,31,46,.34),transparent 66%);
  opacity:.75;
}
.phone-hero{ width:clamp(230px,24vw,290px); transform:rotateY(-13deg) rotateX(4deg) rotateZ(1.5deg); transform-style:preserve-3d; }
.hero-visual{ perspective:1400px; }

.float-chip{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px; font-size:12.5px; font-weight:500;
  color:var(--fg); white-space:nowrap;
  background:rgba(16,16,19,.78); backdrop-filter:blur(14px);
  border:1px solid var(--line);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
  animation:floaty 6s ease-in-out infinite;
}
.float-chip .pulse{ width:7px; height:7px; border-radius:50%; background:var(--red); animation:ping 2s infinite; }
.chip-1{ top:11%; left:-4%; }
.chip-2{ top:47%; right:-9%; animation-delay:-2s; }
.chip-3{ bottom:11%; left:2%; animation-delay:-4s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-13px);} }

/* ═══════════ TICKER ═══════════ */
.ticker{
  position:relative; overflow:hidden; padding:28px 0;
  border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(255,31,46,.08),transparent 35%,transparent 65%,rgba(255,31,46,.08));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{ display:flex; width:max-content; animation:slide 36s linear infinite; }
.ticker-row{ display:flex; align-items:center; gap:36px; padding-right:36px; }
.ticker-row span{
  font-family:var(--display); font-size:clamp(17px,2.1vw,24px); font-weight:600;
  color:var(--fg-2); letter-spacing:-.02em; white-space:nowrap;
  transition:color .3s;
}
.ticker-row span:hover{
  color:#fff;
}
.ticker-row i{
  width:7px; height:7px; border-radius:50%; background:var(--red); flex-shrink:0;
  box-shadow:0 0 8px var(--glow);
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ═══════════ SECTION HEADS ═══════════ */
.sec-head{ max-width:700px; margin-bottom:clamp(40px,5vw,64px); }
.sec-head-row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.kicker{
  display:inline-block; margin-bottom:16px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-hot);
}
.sec-head h2{ font-size:clamp(31px,4.6vw,54px); letter-spacing:-.034em; margin-bottom:16px; }
.sec-head h2 em{
  font-style:normal;
  background:linear-gradient(100deg,#ff6a71,var(--red) 55%,var(--red-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sec-head > p{ color:var(--fg-2); font-size:16.5px; font-weight:340; line-height:1.7; }

/* ═══════════ BENTO ═══════════ */
.bento{
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.4vw,20px);
  grid-auto-flow:dense;
}
.card{
  position:relative; grid-column:span 2; overflow:hidden;
  padding:30px; border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:border-color .4s, transform .5s var(--ease);
}
.card::after{
  /* mouse spotlight */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .45s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,31,46,.13), transparent 62%);
}
.card:hover{ border-color:rgba(255,31,46,.34); transform:translateY(-4px); }
.card:hover::after{ opacity:1; }

.card-lg{
  grid-column:span 4; grid-row:span 2;
  display:flex; flex-direction:column;
  padding-bottom:0;
}
.card-wide{ grid-column:span 4; display:flex; flex-direction:column; padding-bottom:0; }
.card-body{ flex:0 0 auto; }

.badge{
  display:inline-flex; align-items:center; align-self:flex-start; width:fit-content; gap:6px; margin-bottom:14px; padding:5px 12px; border-radius:999px;
  font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:-.01em;
  color:#ff9fa4; background:rgba(255,31,46,.1); border:1px solid rgba(255,31,46,.22);
}
.badge svg{ flex-shrink:0; }
.card h3{ font-size:clamp(18px,1.9vw,23px); margin-bottom:10px; letter-spacing:-.028em; }
.card p{ color:var(--fg-2); font-size:14.5px; font-weight:340; line-height:1.64; }
.card p strong{ color:var(--fg); font-weight:560; }

.mini-list{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.mini-list li{
  padding:4px 10px; border-radius:999px; font-size:12px; color:var(--fg-2);
  border:1px solid var(--line); background:rgba(255,255,255,.028);
}

.card-art{ margin:18px -30px 0; position:relative; }

/* ═══════════ KARAOKE SHOWCASE BENTO CARD ═══════════ */
.card-lyrics{
  grid-column:span 4;
  grid-row:auto;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.28fr) minmax(0, 0.92fr);
  align-items:center;
  gap:clamp(16px, 2vw, 28px);
  padding:clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px);
  background:
    radial-gradient(ellipse at 88% 50%, rgba(255,31,46,.18) 0%, rgba(255,31,46,.03) 48%, transparent 68%),
    linear-gradient(150deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  overflow:hidden;
}
.lyrics-body{
  display:flex;
  flex-direction:column;
  gap:11px;
  z-index:2;
}
.badge-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(255,31,46,.12);
  border-color:rgba(255,31,46,.3);
  color:#ff9fa4;
  margin-bottom:0;
  align-self:flex-start;
}
.badge-live .pulse-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 0 rgba(255,31,46,.6);
  animation:ping 2s infinite;
}
.lyrics-heading{
  font-size:clamp(20px, 1.9vw, 25px);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.03em;
  margin:0;
}
.lyrics-text{
  font-size:13.5px;
  color:var(--fg-2);
  line-height:1.52;
  font-weight:340;
  margin:0;
}

/* 3-cell metric strip */
.lyrics-specs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:1px;
}
.spec-cell{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:7px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-soft);
  transition:all .3s var(--ease);
}
.card-lyrics:hover .spec-cell{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.1);
}
.spec-cell-val{
  font-family:var(--display);
  font-size:17px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.02em;
  line-height:1.1;
}
.spec-cell-label{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:500;
  color:var(--fg-3);
  letter-spacing:.02em;
  white-space:nowrap;
}

/* capability pills */
.lyrics-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:1px;
}
.pill-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:500;
  color:var(--fg-2);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  transition:.25s;
}
.pill-item svg{
  color:var(--red-hot);
  flex-shrink:0;
}
.pill-item:hover{
  color:var(--fg);
  border-color:rgba(255,31,46,.35);
  background:rgba(255,31,46,.08);
}

/* Stage showcase (Phone device on right) */
.art-lyrics-stage{
  position:relative;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
  perspective:1200px;
  padding:0;
  flex-shrink:0;
}
.lyrics-stage-halo{
  position:absolute;
  width:220px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,31,46,.32) 0%, rgba(158,0,9,.16) 48%, transparent 72%);
  filter:blur(48px);
  pointer-events:none;
  z-index:0;
  transition:filter .5s, opacity .5s;
}
.card-lyrics:hover .lyrics-stage-halo{
  filter:blur(58px);
  opacity:1;
}
.phone-lyrics-card{
  position:relative;
  z-index:1;
  width:clamp(144px, 12.5vw, 170px);
  aspect-ratio:1272/2800;
  border-radius:28px;
  padding:5.5px;
  background:linear-gradient(160deg,#2e2e34,#0d0d10 42%,#1c1c22);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    0 22px 55px -15px rgba(0,0,0,.95),
    0 0 45px -12px rgba(255,31,46,.35);
  transform:rotateY(-8deg) rotateX(3deg) rotateZ(1deg);
  transform-style:preserve-3d;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.card-lyrics:hover .phone-lyrics-card{
  transform:rotateY(-2deg) rotateX(1deg) translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 32px 75px -16px rgba(0,0,0,.98),
    0 0 65px -8px rgba(255,31,46,.6);
}
.phone-lyrics-card .phone-screen{
  border-radius:23px;
}

/* karaoke demo fallback/legacy */
.art-lyrics{
  flex:1;
  position:relative;
  overflow:hidden;
  padding:0 30px;
  min-height:170px;
  height:185px;
  display:flex;
  align-items:center;
  background:linear-gradient(180deg, transparent, rgba(255,31,46,.06));
  border-top:1px solid var(--line-soft);
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.kdemo{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:transform;
}
.kline{
  font-family:var(--body);
  font-size:clamp(17px,1.8vw,21px);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.3;
  color:rgba(255,255,255,.24);
  transition:color .45s ease, opacity .45s ease, transform .55s cubic-bezier(0.22, 1, 0.36, 1), filter .45s ease;
  transform-origin:left center;
}
.kline.past{
  opacity:.28;
  transform:scale(.92);
  filter:blur(.5px);
  color:rgba(255,255,255,.2);
}
.kline.active{
  color:rgba(255,255,255,.45);
  opacity:1;
  transform:scale(1.05);
}
.kline.upcoming{
  opacity:.35;
  transform:scale(.94);
  color:rgba(255,255,255,.22);
}
.kline.active .kword{
  color:rgba(255,255,255,.38);
}
.kword{
  position:relative;
  display:inline-block;
  white-space:pre;
  transform-origin:left center;
  will-change:transform;
  /* Seamless text fill via gradient & background-clip */
  background:linear-gradient(
    90deg,
    var(--red-hot) 0%,
    var(--red-hot) calc(var(--fill, 0) * 100%),
    rgba(255,255,255,.38) calc(var(--fill, 0) * 100%),
    rgba(255,255,255,.38) 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 calc(var(--glow, 0) * 10px) rgba(255,31,46,calc(var(--glow, 0) * 0.75)));
}
.kline.past .kword{
  background:none;
  -webkit-text-fill-color:initial;
  color:rgba(255,255,255,.2);
  filter:none;
}
.kline.upcoming .kword{
  background:none;
  -webkit-text-fill-color:initial;
  color:rgba(255,255,255,.22);
  filter:none;
}
.kword.sung{
  background:none;
  -webkit-text-fill-color:var(--red-hot);
  color:var(--red-hot);
  filter:drop-shadow(0 0 5px rgba(255,31,46,.4));
}

/* ═══════════ EQUALIZER: MIRRORED PULSE WAVEFORM ═══════════ */
.eq-mirrored{
  margin-top:clamp(18px, 2.2vw, 26px);
  padding:clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 24px);
  border-radius:18px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.09);
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:0 20px 48px -15px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
  overflow:hidden;
  box-sizing:border-box;
}
.card-audio:hover .eq-mirrored{
  border-color:rgba(255,31,46,.32);
  box-shadow:0 24px 55px -12px rgba(0,0,0,.92), 0 0 32px -8px rgba(255,31,46,.25);
}
.eq-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--mono);
  font-size:11px;
  color:var(--fg-3);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.eq-meta-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#ff9fa4;
  font-weight:650;
  font-size:11px;
}
.eq-meta-tag .eq-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px var(--red);
  animation:ping 2s infinite;
}
.eq-meta-hz{
  font-size:11px;
  color:var(--fg-2);
  font-weight:500;
}
.eq-wave-bars{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(3px, 0.4vw, 5px);
  height:56px;
  padding:4px 0;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.eq-wave-bars i{
  flex:1 1 0px;
  min-width:2px;
  max-width:5px;
  width:auto;
  height:100%;
  border-radius:999px;
  background:linear-gradient(180deg, #ff7a80 0%, var(--red) 50%, #9e0009 100%);
  transform-origin:center;
  animation:wavePulse 1.25s ease-in-out infinite;
  box-shadow:0 0 6px rgba(255,31,46,.35);
}
.card-audio:hover .eq-wave-bars i{
  box-shadow:0 0 8px rgba(255,31,46,.45);
}
@keyframes wavePulse{
  0%,100%{ transform:scaleY(.14); opacity:.4; }
  50%{ transform:scaleY(1); opacity:1; }
}
.eq-wave-bars i:nth-child(1){ animation-delay:-0.08s; }
.eq-wave-bars i:nth-child(2){ animation-delay:-0.32s; }
.eq-wave-bars i:nth-child(3){ animation-delay:-0.62s; }
.eq-wave-bars i:nth-child(4){ animation-delay:-0.92s; }
.eq-wave-bars i:nth-child(5){ animation-delay:-0.36s; }
.eq-wave-bars i:nth-child(6){ animation-delay:-0.72s; }
.eq-wave-bars i:nth-child(7){ animation-delay:-1.02s; }
.eq-wave-bars i:nth-child(8){ animation-delay:-0.22s; }
.eq-wave-bars i:nth-child(9){ animation-delay:-0.52s; }
.eq-wave-bars i:nth-child(10){ animation-delay:-0.82s; }
.eq-wave-bars i:nth-child(11){ animation-delay:-1.12s; }
.eq-wave-bars i:nth-child(12){ animation-delay:-0.42s; }
.eq-wave-bars i:nth-child(13){ animation-delay:-0.76s; }
.eq-wave-bars i:nth-child(14){ animation-delay:-0.16s; }
.eq-wave-bars i:nth-child(15){ animation-delay:-0.46s; }
.eq-wave-bars i:nth-child(16){ animation-delay:-0.86s; }
.eq-wave-bars i:nth-child(17){ animation-delay:-1.16s; }
.eq-wave-bars i:nth-child(18){ animation-delay:-0.26s; }
.eq-wave-bars i:nth-child(19){ animation-delay:-0.66s; }
.eq-wave-bars i:nth-child(20){ animation-delay:-0.96s; }
.eq-wave-bars i:nth-child(21){ animation-delay:-0.20s; }
.eq-wave-bars i:nth-child(22){ animation-delay:-0.56s; }
.eq-wave-bars i:nth-child(23){ animation-delay:-0.90s; }
.eq-wave-bars i:nth-child(24){ animation-delay:-0.36s; }
.eq-wave-bars i:nth-child(25){ animation-delay:-0.72s; }
.eq-wave-bars i:nth-child(26){ animation-delay:-1.06s; }
.eq-wave-bars i:nth-child(27){ animation-delay:-0.50s; }
.eq-wave-bars i:nth-child(28){ animation-delay:-0.16s; }
.eq-wave-bars i:nth-child(29){ animation-delay:-0.44s; }
.eq-wave-bars i:nth-child(30){ animation-delay:-0.78s; }
.eq-wave-bars i:nth-child(31){ animation-delay:-1.10s; }
.eq-wave-bars i:nth-child(32){ animation-delay:-0.30s; }
.eq-wave-bars i:nth-child(33){ animation-delay:-0.64s; }
.eq-wave-bars i:nth-child(34){ animation-delay:-0.94s; }
.eq-wave-bars i:nth-child(35){ animation-delay:-0.18s; }
.eq-wave-bars i:nth-child(36){ animation-delay:-0.48s; }

/* Original simple equalizer fallback */
.eq{ display:flex; align-items:flex-end; gap:4px; height:52px; margin-top:22px; }
.eq i{
  flex:1; height:100%; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--red-hot),var(--red-deep));
  animation:bounce 1.15s ease-in-out infinite;
  transform-origin:bottom;
}
.eq i:nth-child(1){ animation-delay:-.1s } .eq i:nth-child(2){ animation-delay:-.45s }
.eq i:nth-child(3){ animation-delay:-.8s }  .eq i:nth-child(4){ animation-delay:-.25s }
.eq i:nth-child(5){ animation-delay:-.6s }  .eq i:nth-child(6){ animation-delay:-.95s }
.eq i:nth-child(7){ animation-delay:-.35s } .eq i:nth-child(8){ animation-delay:-.7s }
.eq i:nth-child(9){ animation-delay:-.15s } .eq i:nth-child(10){ animation-delay:-.5s }
.eq i:nth-child(11){ animation-delay:-.85s } .eq i:nth-child(12){ animation-delay:-.4s }
@keyframes bounce{ 0%,100%{ transform:scaleY(.14); opacity:.55 } 50%{ transform:scaleY(1); opacity:1 } }

/* ═══════════ DYNAMIC THEMING CARD ═══════════ */
.card-theming{
  --t-primary: #ff1f3d;
  --t-vibrant: #ff6b72;
  --t-surface: #2a0409;
  --t-glow: rgba(255, 31, 61, 0.28);
  --t-border: rgba(255, 31, 61, 0.42);
  --t-badge-bg: rgba(255, 31, 61, 0.12);
  --t-badge-color: #ff9fa4;

  position: relative;
  overflow: hidden;
  border-color: var(--t-border);
  box-shadow: 0 16px 45px -18px var(--t-glow);
  background:
    radial-gradient(ellipse at 88% 22%, var(--t-glow) 0%, transparent 62%),
    linear-gradient(165deg, rgba(255,255,255,.05) 0%, var(--t-surface) 55%, rgba(255,255,255,.015) 100%);
  transition: border-color .55s var(--ease), box-shadow .55s var(--ease), background .55s var(--ease), transform .5s var(--ease);
}
.theme-card-ambient{
  position: absolute;
  top: -20%;
  right: -20%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--t-glow) 0%, transparent 70%);
  filter: blur(44px);
  pointer-events: none;
  z-index: 0;
  transition: background .55s var(--ease);
}
.theme-badge{
  background: var(--t-badge-bg) !important;
  border-color: var(--t-border) !important;
  color: var(--t-badge-color) !important;
  transition: all .5s var(--ease);
}
.theme-accent-text{
  color: var(--t-vibrant);
  transition: color .5s var(--ease);
  font-weight: 700;
}

/* Big prominent active poster showcase */
.theme-poster-stage{
  position: relative;
  z-index: 1;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.theme-poster-frame{
  position: relative;
  width: clamp(140px, 46vw, 175px);
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  box-shadow: 0 16px 36px -10px rgba(0,0,0,.9), 0 0 40px -10px var(--t-glow);
  transition: transform .4s var(--ease), box-shadow .5s var(--ease);
}
.theme-poster-stage:hover .theme-poster-frame{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 22px 46px -10px rgba(0,0,0,.95), 0 0 55px -6px var(--t-glow);
}
.theme-poster-glow{
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--t-glow) 0%, transparent 68%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  transition: background .6s var(--ease);
}
.theme-poster-deck{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.14);
}
.theme-poster-item{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(.94);
  filter: blur(4px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s ease;
  pointer-events: none;
}
.theme-poster-item.active{
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
  pointer-events: auto;
  z-index: 2;
}
.theme-poster-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.theme-poster-shine{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 40%, transparent 100%);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  z-index: 3;
}
.theme-poster-meta{
  margin-top: 12px;
  width: clamp(140px, 46vw, 175px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.theme-track-info{
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.theme-track-title{
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  transition: color .4s;
}
.theme-track-artist{
  font-family: var(--body);
  font-size: 11px;
  color: var(--fg-3);
}
.theme-palette-dots{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--line-soft);
}
.pdot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background .55s, box-shadow .55s;
}
.pdot-1{ background: var(--t-primary); box-shadow: 0 0 7px var(--t-primary); }
.pdot-2{ background: var(--t-vibrant); box-shadow: 0 0 7px var(--t-vibrant); }
.pdot-3{ background: var(--t-surface); border: 1px solid rgba(255,255,255,.2); }

/* swatches legacy fallback */
.swatches{ display:flex; gap:8px; margin-top:22px; }
.swatches i{
  flex:1; height:38px; border-radius:9px; background:var(--c);
  box-shadow:0 5px 18px -6px var(--c);
  animation:swatch 3.6s var(--ease) infinite;
}
.swatches i:nth-child(n){ animation-delay:calc(var(--i,0) * .1s); }
.swatches i:nth-child(1){ animation-delay:0s } .swatches i:nth-child(2){ animation-delay:.09s }
.swatches i:nth-child(3){ animation-delay:.18s } .swatches i:nth-child(4){ animation-delay:.27s }
.swatches i:nth-child(5){ animation-delay:.36s } .swatches i:nth-child(6){ animation-delay:.45s }
.swatches i:nth-child(7){ animation-delay:.54s } .swatches i:nth-child(8){ animation-delay:.63s }
@keyframes swatch{ 0%,70%,100%{ transform:scaleY(1);} 82%{ transform:scaleY(1.28);} }

/* ═══════════ AI TRANSLATE & TRANSLITERATE CARD ═══════════ */
.card-ai{
  position:relative;
  overflow:hidden;
  border-color:var(--line);
  background:
    radial-gradient(ellipse at 80% 12%, rgba(255,107,114,.09) 0%, transparent 60%),
    linear-gradient(165deg, rgba(255,255,255,.05) 0%, rgba(20,8,12,.4) 55%, rgba(255,255,255,.015) 100%);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.card-ai:hover{
  border-color:rgba(255,31,46,.38);
  box-shadow:0 20px 50px -15px rgba(255,31,46,.25);
  transform:translateY(-4px);
}
.ai-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.badge-ai{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:0;
  padding:4px 11px;
  background:rgba(255,31,46,.10) !important;
  border-color:rgba(255,31,46,.28) !important;
  color:#ff9fa4 !important;
}
.ai-pulse-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 0 rgba(255,31,46,.6);
  animation:ping 2.2s infinite;
}
.ai-engine-tag{
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--fg-3);
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-soft);
}
.ai-grad-text{
  background:linear-gradient(135deg, #ffffff 15%, #ff8e95 70%, #ff3b4b 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700;
}

/* Studio Stage */
.ai-studio-stage{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ai-lang-tabs{
  display:flex;
  gap:5px;
  padding:3px;
  border-radius:12px;
  background:rgba(0,0,0,.45);
  border:1px solid var(--line-soft);
}
.ai-tab{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:5px 8px;
  border-radius:8px;
  background:transparent;
  border:none;
  cursor:pointer;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  color:var(--fg-3);
  transition:all .25s var(--ease);
}
.ai-tab:hover{
  color:var(--fg);
  background:rgba(255,255,255,.05);
}
.ai-tab.active{
  color:#fff;
  background:rgba(255,31,46,.18);
  border:1px solid rgba(255,31,46,.35);
  box-shadow:0 2px 8px -2px rgba(255,31,46,.3);
}
.tab-flag{ font-size:11px; }

/* Stream terminal window */
.ai-stream-window{
  position:relative;
  border-radius:14px;
  padding:14px 14px 12px;
  background:rgba(7,7,9,.85);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px -10px rgba(0,0,0,.7);
  overflow:hidden;
}
.ai-scan-beam{
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,31,46,.8) 50%, transparent 100%);
  animation:scanBeam 4s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes scanBeam{
  0%{ left:-100%; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}

.ai-stream-content{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:96px;
  transition:opacity .22s ease, transform .22s ease;
}
.ai-stream-content.animating{
  opacity:0;
  transform:translateY(4px);
}
.ai-stream-row{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.ai-row-label{
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--fg-3);
  width:58px;
  flex-shrink:0;
  text-transform:uppercase;
}

/* Original script with word-by-word karaoke glow */
.ai-text-native{
  font-size:15px;
  font-weight:600;
  color:var(--fg-2);
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  line-height:1.2;
}
.ai-word{
  display:inline-block;
  padding:1px 3px;
  border-radius:4px;
  transition:all .25s ease;
}
.ai-word.sung{
  color:#ff9fa4;
}
.ai-word.active-word{
  color:#ffffff;
  background:rgba(255,31,46,.32);
  box-shadow:0 0 12px rgba(255,31,46,.6);
  border-radius:4px;
}

/* Connecting neural flow */
.ai-connector{
  display:flex;
  align-items:center;
  gap:8px;
  margin:1px 0;
}
.conn-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.1) 30%, rgba(255,255,255,.1) 70%, transparent);
}
.conn-chip{
  font-family:var(--mono);
  font-size:7.5px;
  font-weight:600;
  letter-spacing:.1em;
  color:#ff9fa4;
  background:rgba(255,31,46,.10);
  border:1px solid rgba(255,31,46,.25);
  padding:1px 6px;
  border-radius:999px;
}

/* Phonetic & Meaning rows */
.ai-text-phonetic{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  color:#e2e8f0;
  letter-spacing:-.01em;
  line-height:1.3;
}
.ai-text-meaning{
  font-family:var(--body);
  font-size:12.5px;
  font-weight:400;
  color:#94a3b8;
  font-style:italic;
  line-height:1.3;
}

/* Footer telemetry */
.ai-stream-footer{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ai-latency{
  font-family:var(--mono);
  font-size:9.5px;
  color:#34d399;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.latency-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 6px #10b981;
}
.ai-providers-tag{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--fg-3);
}

/* ═══════════ TOGETHER / JAMS BENTO CARD ═══════════ */
.card-together{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(255, 31, 46, 0.12) 0%, transparent 60%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(20, 10, 14, 0.45) 55%, rgba(255, 255, 255, 0.015) 100%);
  border-color:var(--line);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.card-together:hover{
  border-color:rgba(255, 31, 46, 0.38);
  box-shadow:0 22px 50px -15px rgba(255, 31, 46, 0.25), 0 0 35px -10px rgba(255, 31, 46, 0.25);
  transform:translateY(-4px);
}
.together-ambient{
  position:absolute;
  top:-25%;
  right:-25%;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255, 31, 46, 0.22) 0%, transparent 70%);
  filter:blur(50px);
  pointer-events:none;
  z-index:0;
}
.together-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}
.badge-together{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  font-family:var(--display);
  font-size:12px;
  font-weight:600;
  color:#ff9fa4 !important;
  background:rgba(255, 31, 46, 0.1) !important;
  border:1px solid rgba(255, 31, 46, 0.22) !important;
}
.badge-together svg{ color:#ff5e68; }
.jam-live-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  color:#ff6b72;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255, 31, 46, 0.08);
  border:1px solid rgba(255, 31, 46, 0.2);
}
.jam-pulse-ring{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ff1f3d;
  box-shadow:0 0 8px #ff1f3d;
  animation:jamPulseDot 2s infinite ease-in-out;
}
@keyframes jamPulseDot{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.4); opacity:.6; }
}
.together-accent-text{
  background:linear-gradient(135deg, #ffffff 15%, #ff8e95 70%, #ff3b4b 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700;
}

/* ═══════════ JAM CONSOLE ═══════════ */
.jam-console{
  position:relative;
  z-index:1;
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(0, 0, 0, 0.38);
  border:1px solid rgba(255, 255, 255, 0.08);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px -10px rgba(0, 0, 0, 0.7);
}
.jam-console-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.jam-room-tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  color:var(--fg-2);
  padding:2px 7px;
  border-radius:6px;
  background:rgba(255, 255, 255, 0.04);
  border:1px solid rgba(255, 255, 255, 0.06);
}
.jam-room-tag svg{ color:#ff5e68; }
.jam-ping-stat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  color:#7ee0b0;
}
.ping-signal{
  display:inline-flex;
  align-items:flex-end;
  gap:1.5px;
  height:9px;
}
.ping-signal i{
  width:2px;
  background:#7ee0b0;
  border-radius:1px;
  animation:pingBar 1.4s ease-in-out infinite alternate;
}
.ping-signal i:nth-child(1){ height:4px; }
.ping-signal i:nth-child(2){ height:7px; animation-delay:.2s; }
.ping-signal i:nth-child(3){ height:9px; animation-delay:.4s; }
@keyframes pingBar{
  0%{ opacity:.4; transform:scaleY(.7); }
  100%{ opacity:1; transform:scaleY(1); }
}

/* Presence Row */
.jam-presence-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 2px 2px;
}
.jam-avatars-group{
  display:flex;
  align-items:center;
}
.jam-avatar-wrap{
  position:relative;
  margin-left:-8px;
  transition:transform .25s var(--ease), z-index .25s;
  cursor:pointer;
}
.jam-avatar-wrap:first-child{ margin-left:0; z-index:5; }
.jam-avatar-wrap:nth-child(2){ z-index:4; }
.jam-avatar-wrap:nth-child(3){ z-index:3; }
.jam-avatar-wrap:nth-child(4){ z-index:2; }
.jam-avatar-wrap:nth-child(5){ z-index:1; }
.jam-avatar-wrap:hover{
  transform:translateY(-3px) scale(1.12);
  z-index:10;
}
.jam-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-size:11.5px;
  font-weight:700;
  color:#fff;
  border:2px solid #0d0d10;
  box-shadow:0 4px 10px rgba(0, 0, 0, 0.6);
}
.av-host{ background:linear-gradient(135deg, #ff1f3d, #b91028); }
.av-1{ background:linear-gradient(135deg, #8b5cf6, #6d28d9); }
.av-2{ background:linear-gradient(135deg, #0ea5e9, #0284c7); }
.av-3{ background:linear-gradient(135deg, #f59e0b, #d97706); }
.av-more{ background:rgba(255, 255, 255, 0.08); font-size:10px; font-weight:600; color:var(--fg-2); }
.jam-host-crown{
  position:absolute;
  top:-5px;
  right:-3px;
  font-size:10px;
  line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}
.jam-sync-dot{
  position:absolute;
  bottom:0;
  right:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#7ee0b0;
  border:1px solid #0d0d10;
  box-shadow:0 0 5px #7ee0b0;
}
.jam-listeners-count{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  color:var(--fg-3);
}

/* Synchronized Track Ticket */
.jam-track-ticket{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255, 255, 255, 0.03);
  border:1px solid rgba(255, 255, 255, 0.06);
  transition:background .3s var(--ease), border-color .3s;
}
.jam-track-ticket:hover{
  background:rgba(255, 255, 255, 0.05);
  border-color:rgba(255, 31, 46, 0.25);
}
.jam-track-art{
  position:relative;
  width:42px;
  height:42px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 4px 10px rgba(0, 0, 0, 0.5);
}
.jam-track-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.jam-art-eq{
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.jam-art-eq i{
  width:2.5px;
  background:#ffffff;
  border-radius:1px;
  animation:artEq .8s ease-in-out infinite alternate;
}
.jam-art-eq i:nth-child(1){ height:10px; animation-delay:.1s; }
.jam-art-eq i:nth-child(2){ height:16px; animation-delay:.3s; }
.jam-art-eq i:nth-child(3){ height:8px; animation-delay:.2s; }
@keyframes artEq{
  0%{ transform:scaleY(.3); }
  100%{ transform:scaleY(1); }
}
.jam-track-details{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.jam-track-title-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
}
.jam-track-name{
  font-family:var(--display);
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.jam-badge-queued{
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  color:#ff8e95;
  background:rgba(255, 31, 46, 0.1);
  padding:1px 5px;
  border-radius:4px;
  white-space:nowrap;
  transition:all .3s;
}
.jam-track-artist{
  font-size:11px;
  color:var(--fg-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.jam-scrub-wrap{
  margin-top:3px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.jam-scrub-bar{
  width:100%;
  height:3px;
  border-radius:999px;
  background:rgba(255, 255, 255, 0.08);
  overflow:hidden;
}
.jam-scrub-progress{
  width:44%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #ff1f3d, #ff5e68);
  box-shadow:0 0 8px rgba(255, 31, 46, 0.6);
  animation:jamScrub 20s linear infinite;
}
@keyframes jamScrub{
  0%{ width:44%; }
  100%{ width:98%; }
}
.jam-scrub-times{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--fg-3);
}
.jam-sync-tag{
  color:#7ee0b0;
  font-weight:600;
}

/* Collab Dock */
.jam-collab-dock{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:2px;
}
.jam-btn-add{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:7px 11px;
  border-radius:9px;
  background:rgba(255, 255, 255, 0.04);
  border:1px solid rgba(255, 255, 255, 0.1);
  color:var(--fg-2);
  font-family:var(--display);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:all .25s var(--ease);
}
.jam-btn-add:hover{
  background:rgba(255, 31, 46, 0.12);
  border-color:rgba(255, 31, 46, 0.35);
  color:#fff;
  transform:translateY(-1px);
}
.jam-btn-add:active{ transform:scale(0.97); }
.jam-btn-add.queued-state{
  background:rgba(126, 224, 176, 0.12);
  border-color:rgba(126, 224, 176, 0.4);
  color:#7ee0b0;
}
.jam-sync-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 10px;
  border-radius:9px;
  background:rgba(0, 0, 0, 0.25);
  border:1px solid rgba(255, 255, 255, 0.06);
  font-family:var(--mono);
  font-size:10px;
  color:var(--fg-3);
  white-space:nowrap;
  transition:border-color .3s, background .3s;
}
.jam-lock-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7ee0b0;
  box-shadow:0 0 5px #7ee0b0;
}

/* ═══════════ LIQUID GLASS BENTO CARD ═══════════ */
.card-liquid-glass{
  position:relative;
  overflow:hidden;
  border-color:var(--line);
  background:
    radial-gradient(ellipse at 85% 15%, rgba(255,31,46,.10) 0%, transparent 60%),
    linear-gradient(165deg, rgba(255,255,255,.05) 0%, rgba(22,9,11,.45) 55%, rgba(255,255,255,.015) 100%);
  box-shadow:0 16px 45px -18px rgba(0,0,0,.7);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.card-liquid-glass:hover{
  border-color:rgba(255,31,46,.38);
  box-shadow:0 22px 50px -15px rgba(255,31,46,.25), 0 0 35px -10px rgba(255,31,46,.25);
  transform:translateY(-4px);
}
.badge-glass{
  background:rgba(255,31,46,.10) !important;
  border-color:rgba(255,31,46,.28) !important;
  color:#ff9fa4 !important;
}
.glass-accent-text{
  background:linear-gradient(135deg, #ffffff 20%, #ff8e95 70%, #ff4250 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700;
}
.glass-shot-stage{
  position:relative;
  z-index:1;
  margin-top:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.glass-shot-frame{
  position:relative;
  width:100%;
  aspect-ratio:1272 / 1019;
  border-radius:18px;
  overflow:hidden;
  background:#0d0607;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 36px -10px rgba(0,0,0,.92), 0 0 32px -10px rgba(255,31,46,.22);
  transition:transform .4s var(--ease), box-shadow .5s var(--ease);
}
.card-liquid-glass:hover .glass-shot-frame{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 22px 46px -10px rgba(0,0,0,.95), 0 0 45px -8px rgba(255,31,46,.35);
}
.glass-shot-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.glass-shot-shine{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 40%, transparent 100%);
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  z-index:2;
}

/* ═══════════ AUDIO, AUTOMIX & DISCORD ROW 3 CARDS ═══════════ */
.card-audio,
.card-automix,
.card-discord{
  grid-column:span 2;
  display:flex;
  flex-direction:column;
}
.card-audio .badge{
  align-self:flex-start;
  width:fit-content;
}
.card-audio .eq-mirrored{
  width:100%;
  margin-top:auto;
}

/* ── Automix Card ── */
.card-automix{
  position:relative;
  overflow:hidden;
  border-color:var(--line);
  background:
    radial-gradient(ellipse at 85% 15%, rgba(255, 122, 0, 0.14) 0%, transparent 60%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(28, 16, 10, 0.5) 55%, rgba(255, 255, 255, 0.015) 100%);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.card-automix:hover{
  border-color:rgba(255, 122, 0, 0.45);
  box-shadow:0 22px 50px -15px rgba(255, 122, 0, 0.25), 0 0 35px -10px rgba(255, 122, 0, 0.2);
  transform:translateY(-4px);
}
.automix-ambient{
  position:absolute;
  top:-25%;
  right:-20%;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255, 122, 0, 0.2) 0%, transparent 70%);
  filter:blur(50px);
  pointer-events:none;
  z-index:0;
}
.automix-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
.badge-automix{
  color:#ffb27d;
  background:rgba(255, 122, 0, 0.12);
  border-color:rgba(255, 122, 0, 0.3);
  margin-bottom:0;
}
.automix-beat-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.04em;
  color:#ffd2b3;
  background:rgba(255, 122, 0, 0.1);
  border:1px solid rgba(255, 122, 0, 0.22);
}
.automix-pulse-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ff7a00;
  box-shadow:0 0 6px #ff7a00;
  animation:ping 1.8s infinite;
}
.automix-accent-text{
  background:linear-gradient(135deg, #ffa26b 0%, #ff6200 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.automix-stage{
  margin-top:auto;
  margin-bottom:clamp(20px, 2.8vw, 36px);
  position:relative;
  width:100%;
}
.automix-card-frame{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.6);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.85);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.card-automix:hover .automix-card-frame{
  border-color:rgba(255, 138, 60, 0.45);
  box-shadow:0 18px 45px -12px rgba(255, 100, 30, 0.25), 0 0 24px -6px rgba(255, 100, 30, 0.15);
  transform:translateY(-2px);
}
.automix-card-frame img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:13px;
}
.automix-frame-shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  border-radius:inherit;
}
.card-discord{
  position:relative;
  overflow:hidden;
  border-color:var(--line);
  background:
    radial-gradient(ellipse at 85% 15%, rgba(88, 101, 242, 0.12) 0%, transparent 60%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(13, 15, 28, 0.5) 55%, rgba(255, 255, 255, 0.015) 100%);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.card-discord:hover{
  border-color:rgba(88, 101, 242, 0.45);
  box-shadow:0 22px 50px -15px rgba(88, 101, 242, 0.25), 0 0 35px -10px rgba(88, 101, 242, 0.25);
  transform:translateY(-4px);
}
.discord-ambient{
  position:absolute;
  top:-25%;
  right:-20%;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(88, 101, 242, 0.2) 0%, transparent 70%);
  filter:blur(50px);
  pointer-events:none;
  z-index:0;
}
.discord-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}
.badge-discord{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  font-family:var(--display);
  font-size:12px;
  font-weight:600;
  color:#949cf7 !important;
  background:rgba(88, 101, 242, 0.12) !important;
  border:1px solid rgba(88, 101, 242, 0.28) !important;
}
.badge-discord svg{ color:#7289da; }
.discord-rpc-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.03em;
  color:#7ee0b0;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(35, 165, 90, 0.1);
  border:1px solid rgba(35, 165, 90, 0.25);
}
.rpc-online-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#23a55a;
  box-shadow:0 0 6px #23a55a;
}
.discord-accent-text{
  background:linear-gradient(135deg, #ffffff 15%, #949cf7 60%, #5865F2 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700;
}

/* Discord Stage */
.discord-stage{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding-top:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}
.discord-card-frame{
  position:relative;
  width:100%;
  max-width:375px;
  aspect-ratio:335 / 137;
  margin:0 auto;
  border-radius:14px;
  overflow:hidden;
  background:#1e1f22;
  border:1px solid rgba(255, 255, 255, 0.1);
  box-shadow:0 14px 32px -10px rgba(0, 0, 0, 0.8), 0 0 25px -8px rgba(88, 101, 242, 0.2);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card-discord:hover .discord-card-frame{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 18px 40px -10px rgba(0, 0, 0, 0.9), 0 0 35px -6px rgba(88, 101, 242, 0.35);
}
.discord-card-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.discord-frame-shine{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 40%, transparent 100%);
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index:2;
}

/* ═══════════ COMMON LEAD TEXT ═══════════ */
.lead{ color:var(--fg-2); font-size:17px; font-weight:340; line-height:1.72; }
.lead strong{ color:var(--fg); font-weight:560; }

/* ═══════════ LOCALIZED SECTION MARQUEE ═══════════ */
#features{
  padding-bottom:clamp(44px, 5vw, 75px);
}
.section-languages{
  padding:clamp(16px, 2vw, 32px) 0 clamp(36px, 4.5vw, 64px);
}
.section-languages .lang-band{
  margin-top:0;
  padding-top:0;
  border-top:none;
  text-align:center;
}
.section-languages .lang-band h4{
  font-size:clamp(17px, 1.9vw, 21px);
  margin-bottom:clamp(24px, 3vw, 38px);
  letter-spacing:-.02em;
  color:var(--fg-2);
}
.lang-marquee{
  position:relative;
  overflow:hidden;
  padding:clamp(22px, 2.6vw, 30px) 0;
  width:100vw;
  margin:0 calc(50% - 50vw);
  border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(255,31,46,.08),transparent 35%,transparent 65%,rgba(255,31,46,.08));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.lang-track{ display:flex; width:max-content; animation:slide 48s linear infinite; }
.lang-row{ display:flex; align-items:center; gap:36px; padding-right:36px; }
.lang-row span{
  font-family:var(--display); font-size:clamp(17px,2.1vw,24px); font-weight:600;
  color:var(--fg-2); letter-spacing:-.02em; white-space:nowrap;
  transition:color .3s;
}
.lang-row span:hover{
  color:#fff;
}
.lang-row i{
  width:7px; height:7px; border-radius:50%; background:var(--red); flex-shrink:0;
  box-shadow:0 0 8px var(--glow);
}

/* ═══════════ SHOWCASE PINNED STICKY ═══════════ */
.showcase-pin-wrap{
  position:relative;
  height:440vh;
}
.section-showcase{
  position:sticky;
  top:0;
  height:100vh;
  max-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-block:clamp(10px, 1.6vh, 18px) clamp(8px, 1.2vh, 14px);
  background:var(--ink);
  box-sizing:border-box;
}
.section-showcase .sec-head{
  margin-bottom:0;
}
.section-showcase .sec-head h2{
  font-size:clamp(24px, 3.2vw, 38px);
  margin-bottom:0;
}
.section-showcase .kicker{
  margin-bottom:6px;
}
.showcase-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-family:var(--mono);
  font-size:12px;
  flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.showcase-counter{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.showcase-cur{
  color:var(--red-hot);
  font-weight:700;
  letter-spacing:.02em;
}
.showcase-sep, .showcase-total{
  color:var(--fg-3);
}
.showcase-tag{
  color:var(--fg);
  font-family:var(--sans);
  font-weight:550;
  padding-left:10px;
  border-left:1px solid var(--line);
  letter-spacing:-.01em;
}
.showcase-viewport{
  position:relative;
  width:100%;
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  overflow:visible;
  padding:clamp(20px, 3vh, 38px) 0 clamp(10px, 1.5vh, 18px);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.showcase-track{
  display:flex;
  align-items:center;
  gap:clamp(24px, 3.8vw, 56px);
  width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.showcase-slide{
  flex:0 0 auto;
  margin:0;
  padding-top:clamp(12px, 1.8vh, 22px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}
.showcase-phone{
  height:clamp(380px, 60vh, 690px);
  width:calc(clamp(380px, 60vh, 690px) * (1272 / 2800));
  max-width:80vw;
  aspect-ratio:1272 / 2800;
  border-radius:clamp(32px, 4.2vh, 46px);
  padding:clamp(6px, 0.8vh, 9px);
  transform:scale(0.88);
  opacity:0.34;
  filter:blur(1.5px);
  transform-origin:center center;
  transition:transform .5s cubic-bezier(.2,.9,.3,1), opacity .45s ease, filter .45s ease, box-shadow .5s ease;
}
.showcase-phone .phone-screen{
  border-radius:clamp(26px, 3.6vh, 38px);
}
.showcase-slide:hover .showcase-phone{
  opacity:0.65;
  filter:blur(0px);
  transform:scale(0.92);
}
.showcase-slide.active .showcase-phone{
  transform:scale(1.06);
  opacity:1;
  filter:none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2),
    0 40px 105px -18px rgba(0,0,0,.98),
    0 0 85px -10px rgba(255,31,46,.58);
  z-index:5;
}
.showcase-slide .phone-glow{
  opacity:0.22;
  transition:opacity .5s ease;
}
.showcase-slide.active .phone-glow{
  opacity:0.98;
}
.showcase-caption{
  margin-top:clamp(26px, 3.6vh, 44px);
  text-align:center;
  max-width:320px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease .05s, transform .4s ease .05s;
  pointer-events:none;
}
.showcase-slide.active .showcase-caption{
  opacity:1;
  transform:translateY(0);
}
.showcase-caption b{
  display:block;
  font-family:var(--display);
  font-size:clamp(16.5px, 1.4vw, 19px);
  font-weight:600;
  color:var(--fg);
  margin-bottom:5px;
  letter-spacing:-.02em;
}
.showcase-caption span{
  display:block;
  font-size:13.8px;
  color:var(--fg-3);
  line-height:1.5;
}
.showcase-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding-top:clamp(8px, 1.4vh, 16px);
}
.showcase-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  border:none;
  padding:0;
  cursor:pointer;
  transition:all .35s var(--ease);
}
.showcase-dot:hover{
  background:rgba(255,255,255,.45);
  transform:scale(1.2);
}
.showcase-dot.active{
  width:26px;
  background:var(--red);
  box-shadow:0 0 12px rgba(255,31,46,.65);
}

/* Fallback for non-JS */
html:not(.js) .showcase-pin-wrap{ height:auto; }
html:not(.js) .section-showcase{ position:static; height:auto; max-height:none; overflow:visible; }
html:not(.js) .showcase-viewport{ overflow-x:auto; }
html:not(.js) .showcase-slide{ opacity:1; }
html:not(.js) .showcase-phone{ transform:none !important; opacity:1 !important; filter:none !important; }
html:not(.js) .showcase-caption{ opacity:1 !important; transform:none !important; }
html:not(.js) .showcase-dots{ display:none; }

/* ═══════════ CARD: HOME SCREEN WIDGETS (Row 4, Span 6) ═══════════ */
.card-widget{
  grid-column:span 6;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:clamp(28px, 3.8vw, 52px);
  padding:clamp(32px, 4vw, 50px);
  background:
    radial-gradient(ellipse at 88% 18%, rgba(255,31,46,.12) 0%, transparent 60%),
    linear-gradient(170deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
  position:relative;
  overflow:hidden;
}
.card-widget:hover{
  border-color:rgba(255,31,46,.35);
  box-shadow:0 24px 60px -15px rgba(0,0,0,.9), 0 0 50px -12px rgba(255,31,46,.25);
}
.card-widget::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 45%, rgba(255,31,46,.2) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.widget-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  position:relative;
  z-index:2;
}
.widget-heading{
  font-size:clamp(24px, 3.2vw, 36px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.15;
  margin:0;
}
.widget-desc{
  font-size:15px;
  color:var(--fg-2);
  line-height:1.6;
  margin:0;
  max-width:540px;
}
.widget-dims-list{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-top:6px;
}
.widget-dim-item{
  display:flex;
  align-items:center;
  gap:15px;
  padding:13px 18px;
  border-radius:15px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  transition:all .3s var(--ease);
}
.widget-dim-item:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,31,46,.32);
  transform:translateX(4px);
}
.widget-dim-tag{
  font-family:var(--mono);
  font-size:13.5px;
  font-weight:700;
  color:var(--red-hot);
  background:rgba(255,31,46,.12);
  border:1px solid rgba(255,31,46,.32);
  border-radius:9px;
  padding:5px 12px;
  flex-shrink:0;
  letter-spacing:.02em;
}
.widget-dim-detail{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.widget-dim-detail b{
  font-family:var(--display);
  font-size:14.8px;
  font-weight:600;
  color:var(--fg);
}
.widget-dim-detail span{
  font-size:12.8px;
  color:var(--fg-3);
  line-height:1.4;
}

/* Visual Stage */
.widget-stage{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0;
}
.widget-stage-halo{
  position:absolute;
  inset:-20%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,31,46,.25) 0%, transparent 68%);
  filter:blur(55px);
  pointer-events:none;
}
.widget-shot-frame{
  position:relative;
  width:clamp(220px, 22vw, 290px);
  aspect-ratio:1160 / 2072;
  border-radius:14px;
  border:none;
  outline:none;
  box-shadow:0 24px 60px -15px rgba(0,0,0,.92), 0 0 50px -10px rgba(255,31,46,.3);
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card-widget:hover .widget-shot-frame{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 34px 80px -16px rgba(0,0,0,.98), 0 0 70px -8px rgba(255,31,46,.45);
}
.widget-shot-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  border-radius:14px;
  border:none;
  outline:none;
  display:block;
}

/* ═══════════ BEYOND: ANDROID AUTO ═══════════ */
.beyond-auto-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(18px, 2.2vw, 28px);
}
.frame-auto{
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  transition:border-color .4s var(--ease), transform .5s var(--ease), box-shadow .4s var(--ease);
}
.frame-auto:hover{
  border-color:rgba(255,31,46,.35);
  transform:translateY(-4px);
  box-shadow:0 20px 50px -14px rgba(0,0,0,.85), 0 0 40px -12px rgba(255,31,46,.2);
}
.frame-auto .frame-media{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#0a0a0c;
}
.frame-auto .frame-media img{
  width:100%;
  height:auto;
  display:block;
  border-bottom:1px solid var(--line-soft);
}
.frame-auto figcaption{
  padding:22px 26px 26px;
  font-size:13.8px;
  color:var(--fg-3);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.auto-kicker{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--red-hot);
  margin-bottom:2px;
}
.frame-auto figcaption b{
  font-family:var(--display);
  font-size:17.5px;
  font-weight:600;
  color:var(--fg);
  letter-spacing:-.02em;
}
.frame-auto figcaption span{
  line-height:1.55;
  color:var(--fg-2);
}

/* Fallback for generic frame */
.frame{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  transition:border-color .4s, transform .5s var(--ease);
}
.frame:hover{ border-color:rgba(255,31,46,.3); transform:translateY(-4px); }
.frame img{ width:100%; height:auto; display:block; }
.frame figcaption{ padding:18px 22px 22px; font-size:13.5px; color:var(--fg-3); }
.frame figcaption b{
  display:block; font-family:var(--display); font-size:16px; font-weight:600;
  color:var(--fg); margin-bottom:3px; letter-spacing:-.02em;
}

/* ═══════════ TABS ═══════════ */
.tab-bar{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px;
  padding-bottom:4px;
}
.tab{
  padding:9px 18px; border-radius:999px; font-size:13.8px; font-weight:450;
  color:var(--fg-2); border:1px solid var(--line); background:rgba(255,255,255,.022);
  transition:.3s var(--ease);
}
.tab:hover{ color:var(--fg); border-color:rgba(255,31,46,.34); }
.tab.active{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--red),var(--red-deep));
  box-shadow:0 8px 24px -10px var(--glow);
}
.tab-panels{ position:relative; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeUp .5s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }

.feat-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; }
.feat-list li{
  padding:22px 24px; background:var(--ink-2); font-size:14.2px; color:var(--fg-3);
  line-height:1.6; font-weight:340; transition:background .35s;
}
.feat-list li:hover{ background:var(--ink-3); }
.feat-list b{
  display:block; font-family:var(--display); font-size:15.5px; font-weight:600;
  color:var(--fg); margin-bottom:5px; letter-spacing:-.02em;
}

/* ═══════════ POWERED BY ═══════════ */
.section-powered{ padding-block:clamp(48px,6vw,84px); }
.powered{ text-align:center; }
.logos{ display:flex; flex-wrap:wrap; gap:clamp(12px, 1.8vw, 18px); justify-content:center; margin-top:36px; max-width:1120px; margin-inline:auto; }
.logos .pill{
  display:inline-flex; align-items:center; gap:clamp(10px, 1.4vw, 14px);
  padding:clamp(11px, 1.6vw, 14px) clamp(18px, 2.4vw, 26px) clamp(11px, 1.6vw, 14px) clamp(14px, 2vw, 18px);
  border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.025);
  font-family:var(--display); font-weight:600; font-size:clamp(14.5px, 1.6vw, 16.5px); color:var(--fg-2); letter-spacing:-0.01em;
  box-shadow:0 6px 20px rgba(0,0,0,.38);
  transition:color .25s, border-color .25s, transform .25s var(--ease), background .25s, box-shadow .25s;
  user-select:none; cursor:default;
}
.logos .pill:hover{
  color:#fff; border-color:rgba(255,74,54,.45); transform:translateY(-4px);
  background:rgba(255,255,255,.05); box-shadow:0 14px 32px -4px rgba(255,31,46,.22), 0 6px 20px rgba(0,0,0,.5);
}
.logos .pill svg, .logos .pill img{
  width:clamp(24px, 2.6vw, 28px); height:clamp(24px, 2.6vw, 28px); flex:none; display:block; object-fit:contain;
}

/* ═══════════ RELEASES & MILESTONES (NIVIO-STYLE) ═══════════ */
.releases-section{ position:relative; }
.releases-meta-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 20px; border-radius:var(--r); background:rgba(255,255,255,.025);
  border:1px solid var(--line); margin-bottom:34px;
}
.rmb-badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rmb-pill{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px;
  color:var(--fg-3); background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  padding:5px 11px; border-radius:999px; font-weight:500;
}
.rmb-pill svg{ width:13px; height:13px; color:var(--red-hot); }
.btn-gh-releases{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:13px;
  font-weight:600; color:var(--fg-2); padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  transition:background .2s, border-color .2s, transform .2s, color .2s;
}
.btn-gh-releases:hover{
  background:rgba(255,255,255,.09); border-color:rgba(255,74,54,.4); color:#fff; transform:translateY(-2px);
}
.btn-gh-releases svg{ width:15px; height:15px; }
.btn-gh-releases .arrow-ext{ color:var(--red-hot); font-size:13px; }

.releases-timeline{ display:flex; flex-direction:column; gap:22px; position:relative; }
.rel-item{ display:grid; grid-template-columns:36px 1fr; gap:20px; position:relative; }
.rel-spine{ display:flex; flex-direction:column; align-items:center; position:relative; }
.rel-dot{
  width:16px; height:16px; border-radius:50%; background:var(--ink);
  border:3px solid var(--red-hot); box-shadow:0 0 14px rgba(255,31,46,.6);
  flex:none; margin-top:22px; z-index:2;
}
.rel-item.current .rel-dot{
  background:linear-gradient(135deg,var(--red) 0%, var(--red-deep) 130%);
  border-color:#fff; box-shadow:0 0 20px rgba(255,31,46,.9);
  animation:relpulse 2s infinite;
}
@keyframes relpulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 14px rgba(255,31,46,.7); }
  50%{ transform:scale(1.22); box-shadow:0 0 24px rgba(255,31,46,1); }
}
.rel-line{
  flex:1; width:2px; background:linear-gradient(180deg, rgba(255,31,46,.4), rgba(255,255,255,.08));
  margin-top:6px;
}
.rel-item:last-child .rel-line{ display:none; }

.rel-card{
  background:linear-gradient(165deg, rgba(25,18,18,.85), rgba(12,10,11,.95));
  border:1px solid var(--line); border-radius:20px; padding:24px 28px;
  box-shadow:0 18px 45px -12px rgba(0,0,0,.7);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; position:relative;
}
.rel-item.current .rel-card{
  border-color:rgba(255,74,54,.4);
  background:radial-gradient(400px circle at 0% 0%, rgba(255,31,46,.12), transparent 70%), linear-gradient(165deg, #1c1314, #0f0a0b);
}
.rel-card:hover{
  transform:translateX(6px); border-color:rgba(255,74,54,.45);
  box-shadow:0 24px 60px -15px rgba(255,31,46,.25);
}
.rel-card-header{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px;
}
.rel-badge-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rel-tag{
  font-family:var(--display); font-size:13px; font-weight:800; color:#fff;
  padding:3px 10px; border-radius:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
}
.rel-tag.latest{
  background:linear-gradient(135deg,var(--red) 0%, var(--red-deep) 130%);
  color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(255,31,46,.45);
}
.rel-tag.desktop{
  background:linear-gradient(120deg, #0078d4, #005a9e); color:#fff; border-color:transparent;
}
.rel-tag.sync{
  background:linear-gradient(120deg, #3ecf8e, #1f8e5b); color:#052414; border-color:transparent;
}
.rel-tag.core{
  background:linear-gradient(120deg, #f59e0b, #d97706); color:#1f1300; border-color:transparent;
}
.rel-status-pill{
  font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.05em;
  padding:3px 8px; border-radius:999px; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.35); color:#4ade80;
}
.rel-status-pill.desktop{
  background:rgba(0,120,212,.16); border-color:rgba(0,120,212,.4); color:#60a5fa;
}
.rel-plat-pill{
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--fg-3);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:3px 9px;
}
.rel-date{ font-family:var(--mono); font-size:12px; color:var(--fg-3); }
.rel-date a{ color:var(--red-hot); font-weight:600; transition:color .2s; }
.rel-date a:hover{ color:#fff; text-decoration:underline; }
.rel-card h4{ font-family:var(--display); font-size:18.5px; font-weight:700; color:var(--fg); margin:0 0 8px; letter-spacing:-.015em; }
.rel-card p{ color:var(--fg-3); font-size:14px; line-height:1.6; margin:0 0 14px; font-weight:340; }
.rel-notes{ list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:7px; }
.rel-notes li{ position:relative; padding-left:18px; font-size:13.2px; color:var(--fg-2); line-height:1.55; }
.rel-notes li::before{
  content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--red-hot);
}
.rel-notes li b{ color:var(--fg); margin-right:4px; font-weight:600; }
.rel-notes li code{ font-family:var(--mono); font-size:12px; background:rgba(255,255,255,.08); padding:1px 5px; border-radius:4px; color:#ff9fa4; }
.rel-actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:12px; border-top:1px solid rgba(255,255,255,.06);
}
.rel-dl-btn{
  display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:999px;
  background:linear-gradient(135deg,var(--red) 0%, var(--red-deep) 130%); color:#fff; font-family:var(--display);
  font-size:12.5px; font-weight:700; box-shadow:0 4px 14px rgba(255,31,46,.35); transition:transform .2s, box-shadow .2s;
}
.rel-dl-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,31,46,.5); color:#fff; }
.rel-dl-btn svg{ width:13px; height:13px; }
.rel-sub-btn{
  font-family:var(--display); font-size:12.5px; font-weight:600; color:var(--fg-3); transition:color .2s;
}
.rel-sub-btn:hover{ color:#fff; }

@media(max-width:640px){
  .rel-item{ grid-template-columns:1fr; gap:0; }
  .rel-spine{ display:none; }
  .rel-card{ padding:18px 16px; }
  .rel-card h4{ font-size:16.5px; }
}

/* ═══════════ DOWNLOAD ═══════════ */
.section-download{ position:relative; overflow:hidden; text-align:center; }
.dl-bg{ position:absolute; inset:0; z-index:0; }
.dl-bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;
  transform:scaleX(-1);
}
.dl-fade{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 65% 70% at 50% 50%, rgba(5,5,6,.55), rgba(5,5,6,.95) 70%),
    linear-gradient(180deg,var(--ink),transparent 22%,transparent 78%,var(--ink));
}
.dl-inner{ position:relative; z-index:2; max-width:900px; margin-inline:auto; }
.dl-logo{ width:126px; margin:0 auto 12px; filter:drop-shadow(0 10px 40px rgba(255,31,46,.45)); }
.dl-inner h2{ font-size:clamp(40px,6.6vw,78px); letter-spacing:-.042em; margin-bottom:16px; }
.dl-inner .lead{ max-width:560px; margin:0 auto 34px; }

.dl-action-cards{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center; max-width:960px; margin:0 auto 36px;
}
.dl-btn-card{
  flex:1 1 260px; display:flex; align-items:center; gap:16px; padding:18px 24px;
  border-radius:var(--r); text-decoration:none; text-align:left;
  transition:all .3s var(--ease);
}
.dl-btn-card-primary{
  background:linear-gradient(135deg, rgba(255,31,46,.18), rgba(158,0,9,.25)), rgba(255,255,255,.03);
  border:1px solid rgba(255,31,46,.45); color:#fff;
  box-shadow:0 12px 32px -10px rgba(255,31,46,.3);
}
.dl-btn-card-primary:hover{
  transform:translateY(-3px); border-color:rgba(255,74,54,.8);
  box-shadow:0 18px 40px -8px rgba(255,31,46,.5);
  background:linear-gradient(135deg, rgba(255,31,46,.28), rgba(158,0,9,.35)), rgba(255,255,255,.05);
}
.dl-btn-card-universal{
  background:linear-gradient(135deg, rgba(168,85,247,.16), rgba(99,102,241,.2)), rgba(255,255,255,.03);
  border:1px solid rgba(168,85,247,.45); color:#fff;
  box-shadow:0 12px 32px -10px rgba(168,85,247,.25);
}
.dl-btn-card-universal:hover{
  transform:translateY(-3px); border-color:rgba(192,132,252,.8);
  box-shadow:0 18px 40px -8px rgba(168,85,247,.45);
  background:linear-gradient(135deg, rgba(168,85,247,.25), rgba(99,102,241,.3)), rgba(255,255,255,.05);
}
.dl-btn-card-universal .dl-btn-icon{ color:#c084fc; }
.dl-btn-card-secondary{
  background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--fg);
  box-shadow:0 10px 28px -10px rgba(0,0,0,.6);
}
.dl-btn-card-secondary:hover{
  transform:translateY(-3px); border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.06); color:#fff;
  box-shadow:0 16px 36px -10px rgba(0,0,0,.8);
}
.dl-btn-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.dl-btn-card-primary .dl-btn-icon{ color:var(--red-hot); }
.dl-btn-text{ display:flex; flex-direction:column; gap:3px; }
.dl-btn-title{ font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:-.02em; }
.dl-btn-sub{ font-size:12.5px; color:var(--fg-3); font-weight:400; }

.warn{
  display:flex; gap:14px; text-align:left; padding:20px 22px;
  border-radius:var(--r); border:1px solid rgba(255,31,46,.28);
  background:rgba(255,31,46,.06);
}
.warn svg{ flex-shrink:0; color:var(--red-hot); margin-top:2px; }
.warn p{ font-size:13.8px; color:var(--fg-2); line-height:1.65; font-weight:340; }
.warn b,.warn strong{ color:#fff; font-weight:600; }

/* ═══════════ SUPPORT ═══════════ */
.section-support{
  padding-top:clamp(60px, 8vw, 110px);
  padding-bottom:clamp(20px, 3vw, 36px);
}
.support-panel{
  display:grid; grid-template-columns:1fr auto; gap:clamp(30px,4vw,60px); align-items:center;
  padding:clamp(30px,4.4vw,58px); border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:
    radial-gradient(700px 400px at 12% 20%, rgba(255,31,46,.1), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.support-copy h2{ font-size:clamp(30px,4vw,46px); margin:0 0 16px; letter-spacing:-.034em; }
.support-cta{ display:flex; flex-wrap:wrap; gap:11px; margin-top:26px; }
.muted{ color:var(--fg-3); }
.small{ font-size:13px; margin-top:18px; }
.upi{ margin:0; text-align:center; }
.upi img{
  width:clamp(220px, 20vw, 260px); border-radius:var(--r); border:1px solid var(--line);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.9);
}
.upi figcaption{ margin-top:12px; font-size:12px; color:var(--fg-3); }

.btn-star-repo{
  display:inline-flex; align-items:center; gap:8px;
}
.btn-star-repo .gh-stars-pill{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:999px;
  background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.3);
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:#ffd700;
}

/* ═══════════ DISCLAIMER ═══════════ */
.section-disclaimer{
  padding-block:clamp(20px, 3vw, 36px);
}
.disclaimer-card{
  display:flex; gap:20px; padding:28px 32px; border-radius:var(--r-lg);
  border:1px solid rgba(255,31,46,.3);
  background:radial-gradient(ellipse at top left, rgba(255,31,46,.08), transparent 70%), rgba(18,14,14,.7);
  backdrop-filter:blur(12px);
}
.disclaimer-icon{ flex-shrink:0; color:var(--red-hot); margin-top:2px; }
.disclaimer-content h4{
  font-family:var(--display); font-size:16px; font-weight:700; color:var(--fg);
  margin-bottom:10px; letter-spacing:-.01em;
}
.disclaimer-content p{
  font-size:13.5px; color:var(--fg-3); line-height:1.7; font-weight:340; margin-bottom:10px;
}
.disclaimer-content p:last-child{ margin-bottom:0; }
.disclaimer-highlight{
  color:var(--fg-2) !important; padding:10px 14px; border-radius:8px;
  background:rgba(255,31,46,.08); border-left:3px solid var(--red-hot);
}
.disclaimer-highlight strong{ color:#fff; font-weight:600; }

/* ═══════════ FAQ & DOCS SPOTLIGHT ═══════════ */
.section-faq-docs{
  padding-top:clamp(20px, 3vw, 36px);
  padding-bottom:clamp(60px, 8vw, 110px);
}
.docs-spotlight{
  padding:clamp(32px,5vw,56px); border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:radial-gradient(circle at 100% 0%, rgba(255,31,46,.12), transparent 50%),
             linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.docs-spotlight-content h2{ font-size:clamp(30px,4.2vw,48px); margin:0 0 16px; letter-spacing:-.03em; }
.docs-quick-links{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px;
  margin:32px 0 36px;
}
.docs-quick-card{
  display:flex; flex-direction:column; gap:6px; padding:20px; border-radius:var(--r);
  border:1px solid var(--line); background:rgba(0,0,0,.35);
  text-decoration:none; transition:all .25s var(--ease);
}
.docs-quick-card:hover{
  transform:translateY(-3px); border-color:rgba(255,74,54,.4); background:rgba(255,31,46,.06);
}
.dqc-icon{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, rgba(255,31,46,.16), rgba(255,31,46,.05));
  box-shadow:inset 0 0 0 1px rgba(255,74,54,.28);
  display:flex; align-items:center; justify-content:center;
  color:var(--red-hot); margin-bottom:4px; flex-shrink:0;
  transition:all .25s var(--ease);
}
.docs-quick-card:hover .dqc-icon{
  transform:scale(1.06);
  box-shadow:inset 0 0 0 1px rgba(255,74,54,.45), 0 4px 14px -2px rgba(255,31,46,.3);
  background:linear-gradient(135deg, rgba(255,31,46,.25), rgba(255,31,46,.1));
}
.dqc-icon svg{ width:18px; height:18px; }
.docs-quick-card b{ font-family:var(--display); font-size:15.5px; color:var(--fg); font-weight:600; }
.docs-quick-card span{ font-size:12.8px; color:var(--fg-3); line-height:1.5; }
.docs-cta-wrap{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ═══════════ FOOTER ═══════════ */
.footer{
  position:relative; padding:clamp(56px,7vw,86px) 0 34px;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,transparent,rgba(255,31,46,.035));
}
.footer-top{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr); gap:clamp(34px,5vw,70px); }
.footer-brand p{ margin-top:16px; font-size:14px; color:var(--fg-3); max-width:290px; line-height:1.65; }
.footer-social{ display:flex; gap:9px; margin-top:20px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--fg-2); transition:.25s;
}
.footer-social a:hover{ color:#fff; border-color:rgba(255,31,46,.45); background:rgba(255,31,46,.1); transform:translateY(-2px); }

.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.footer-cols h5{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:14px; font-weight:500;
}
.footer-cols a{ display:block; font-size:13.8px; color:var(--fg-2); padding:5px 0; transition:color .25s, transform .25s; }
.footer-cols a:hover{ color:var(--red-hot); transform:translateX(3px); }

.footer-thanks{ margin-top:clamp(36px,4vw,54px); padding-top:26px; border-top:1px solid var(--line-soft); }
.footer-thanks h5{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:10px; font-weight:500;
}
.footer-thanks p{ font-size:13.2px; color:var(--fg-3); line-height:2; }
.footer-thanks a{ color:var(--fg-2); transition:color .25s; }
.footer-thanks a:hover{ color:var(--red-hot); }

.footer-bottom{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:12.5px; color:var(--fg-3);
}

/* ═══════════ REVEAL ═══════════ */
/* Only hidden when JS is running to reveal them again — without the `.js`
   guard a no-script visitor would get a page of invisible sections. */
.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.js .reveal.in{ opacity:1; transform:none; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ display:none; }
  .hero-copy{ max-width:720px; }
  .hero-backdrop{ right:-24%; opacity:.42; }
  .hero-fade{ background:
    linear-gradient(90deg, var(--ink) 0%, rgba(5,5,6,.78) 44%, rgba(5,5,6,.3) 80%),
    linear-gradient(180deg, rgba(5,5,6,.9) 0%, transparent 26%, transparent 60%, var(--ink) 99%); }

  .bento{ grid-template-columns:repeat(4,1fr); }
  .card{ grid-column:span 2; }
  .card-lyrics,.card-widget{ grid-column:span 4; grid-row:auto; }
  .card-together,.card-audio,.card-automix,.card-discord{ grid-column:span 2; grid-row:auto; }

  .footer-top{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .nav-links{ display:none; }
  .gh-btn .gh-label{ display:none; }
  .ghost-link{ padding:9px 11px; }
  .burger{ display:flex; }
  .nav-actions{ margin-left:auto; }

  .card-lyrics{ grid-template-columns:1fr; padding:28px 22px; gap:22px; }
  .art-lyrics-stage{ padding:10px 0 4px; }
  .phone-lyrics-card{ transform:none; width:clamp(165px, 40vw, 200px); }
  .card-lyrics:hover .phone-lyrics-card{ transform:translateY(-4px) scale(1.02); }

  .card-widget{ grid-template-columns:1fr; padding:30px 24px; gap:30px; }
  .card-widget .widget-shot-frame{ width:min(280px, 72vw); margin:0 auto; }

  .dl-cols{ grid-template-columns:1fr; }
  .support-panel{ grid-template-columns:1fr; text-align:center; }
  .support-copy .kicker{ display:block; }
  .support-cta{ justify-content:center; }
  .upi{ justify-self:center; }
  .small{ display:none; }
  .footer-cols{ grid-template-columns:repeat(2,1fr); }
  .sec-head-row{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:680px){
  .nav{ top:12px; }
  .nav-inner{ padding:8px var(--gut); gap:12px; }
  .brand{ gap:0; }
  .brand-mark,
  .brand-text-img{ display:none !important; }
  .brand-combined{
    display:block !important;
    height:clamp(46px, 11vw, 54px);
    width:auto;
    filter:drop-shadow(0 4px 16px rgba(255,31,46,.4));
    transition:transform .3s var(--ease);
  }
  .brand:hover .brand-combined{
    transform:scale(1.04);
    filter:drop-shadow(0 6px 20px rgba(255,31,46,.6));
  }
  .nav-actions{ gap:10px; }
  .docs-link{ padding:8px 15px; font-size:14.5px; }

  .gh-btn{ padding:8px 12px; gap:7px; font-size:14px; }
  .gh-btn .gh-icon{ width:18px; height:18px; }
  .gh-btn .gh-stars{ padding:3px 9px; font-size:12px; }

  /* Mobile Download Button: replace text with just the download icon */
  .nav-download-btn{
    width:42px;
    height:42px;
    min-width:42px;
    padding:0 !important;
    border-radius:50% !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .nav-download-btn .btn-text{
    padding:0;
    gap:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .nav-download-btn .nav-dl-text{
    display:none;
  }
  .nav-download-btn .nav-dl-icon{
    width:19px;
    height:19px;
    display:block;
  }
  .nav-download-btn .blob-btn__inner{
    border-radius:50% !important;
  }
}

@media (max-width:390px){
  .nav-inner{ padding:6px 10px; gap:7px; }
  .brand-combined{ height:40px; }
  .nav-actions{ gap:7px; }
  .docs-link{ padding:7px 11px; font-size:13px; }
  .gh-btn{ padding:7px 10px; }
  .gh-btn .gh-stars{ display:none; }
  .nav-download-btn{ width:38px; height:38px; min-width:38px; }
  .nav-download-btn .nav-dl-icon{ width:17px; height:17px; }
}

@media (max-width:620px){
  .bento{ grid-template-columns:1fr; }
  .card,.card-lyrics,.card-together,.card-audio,.card-automix,.card-discord,.card-widget{ grid-column:span 1; grid-row:auto; padding:24px; }
  .card-widget{ padding:22px 18px; }
  .widget-dim-item{ padding:12px 14px; gap:12px; }
  .beyond-auto-grid{ grid-template-columns:1fr; }
  .card-lyrics{ grid-template-columns:1fr; padding:22px 20px; gap:20px; }
  .lyrics-specs{ gap:7px; }
  .spec-cell{ padding:8px 10px; }
  .spec-cell-val{ font-size:18px; }
  .art-lyrics-stage{ padding:10px 0 0; }
  .phone-lyrics-card{ width:min(100% - 24px, 225px); }
  .card-art{ margin:22px -24px 0; }
  .art-lyrics{ padding:22px 24px 26px; }
  .beyond-grid{ grid-template-columns:1fr; }
  .frame-wide{ grid-column:span 1; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); gap:20px 16px; }
  .hero-cta{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    width:100%;
    margin-bottom:38px;
  }
  .hero-cta .btn{
    flex:1 1 0;
    min-width:0;
    padding:11px 12px;
    font-size:13.5px;
    white-space:nowrap;
    justify-content:center;
    height:46px;
    box-sizing:border-box;
  }
  .hero-cta .btn .btn-text{
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  .hero-cta .btn svg{
    width:15px;
    height:15px;
    flex-shrink:0;
  }
  .hero-cta .badge-link{
    flex:1 1 0;
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .hero-cta .badge-link img{
    height:46px;
    width:auto;
    max-width:100%;
    object-fit:contain;
  }
  .feat-list{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; gap:6px; }
  .tab-bar{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); }
  .tab-bar::-webkit-scrollbar{ display:none; }
  .tab{ flex-shrink:0; }
}

/* ═══════════ MOTION PREFERENCE ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
  .cursor-glow{ display:none; }
}