/* ═══════════════════════════════════════════════════════════════════
   Playmeet Landing v3 — Professional, conversion-optimised
   Mobile-first · WCAG AA · Design-system aligned
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --lv3-bg:          #080810;
  --lv3-surface:     #0d0d1a;
  --lv3-surface2:    #111120;
  --lv3-surface3:    #161628;
  --lv3-border:      rgba(255,255,255,.07);
  --lv3-border2:     rgba(255,255,255,.12);

  /* Text */
  --lv3-text:        #eef1f8;
  --lv3-text2:       #9aa3b8;
  --lv3-text3:       #4e5a72;

  /* Brand accent (overridden per mode via data-landing-mode) */
  --lv3-accent:      #7c3aed;
  --lv3-accent2:     #a855f7;
  --lv3-glow:        #64d2ff;
  --lv3-glow-rgb:    100,210,255;
  --lv3-glow-soft:   rgba(100,210,255,.12);

  /* Mode colours */
  --lv3-video:  #64d2ff;
  --lv3-music:  #c084fc;
  --lv3-clip:   #fb7185;
  --lv3-draw:   #fbbf24;
  --lv3-game:   #34d399;
  --lv3-voice:  #a78bfa;

  /* Radii */
  --lv3-r-xs:  8px;
  --lv3-r-sm:  12px;
  --lv3-r-md:  16px;
  --lv3-r-lg:  22px;
  --lv3-r-xl:  30px;

  /* Shadows */
  --lv3-shadow-sm:  0 2px 12px rgba(0,0,0,.4);
  --lv3-shadow-md:  0 8px 32px rgba(0,0,0,.5);
  --lv3-shadow-lg:  0 20px 60px rgba(0,0,0,.6);

  /* Easing */
  --lv3-ease:       cubic-bezier(.22,1,.36,1);
  --lv3-ease-quick: cubic-bezier(.4,0,.2,1);
}

/* Per-mode glow overrides */
body[data-landing-mode="video"]  { --lv3-glow:#64d2ff; --lv3-glow-rgb:100,210,255; --lv3-glow-soft:rgba(100,210,255,.12); }
body[data-landing-mode="music"]  { --lv3-glow:#c084fc; --lv3-glow-rgb:192,132,252; --lv3-glow-soft:rgba(192,132,252,.14); }
body[data-landing-mode="clip"]   { --lv3-glow:#fb7185; --lv3-glow-rgb:251,113,133; --lv3-glow-soft:rgba(251,113,133,.12); }
body[data-landing-mode="draw"]   { --lv3-glow:#fbbf24; --lv3-glow-rgb:251,191,36;  --lv3-glow-soft:rgba(251,191,36,.11);  }
body[data-landing-mode="game"]   { --lv3-glow:#34d399; --lv3-glow-rgb:52,211,153;  --lv3-glow-soft:rgba(52,211,153,.11);  }
body[data-landing-mode="voice"]  { --lv3-glow:#a78bfa; --lv3-glow-rgb:167,139,250; --lv3-glow-soft:rgba(167,139,250,.12); }


/* ── Hide old body-level header when landing is showing ─────────── */
body:has(#join-screen.active) > header {
  display: none !important;
}

/* ── Shell / scroll container ──────────────────────────────────── */
#join-screen {
  background:
    radial-gradient(ellipse 90% 55% at 75% -8%,  rgba(var(--lv3-glow-rgb),.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at -10% 35%,  rgba(124,58,237,.09) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 105% 85%, rgba(34,197,94,.05) 0%, transparent 50%),
    var(--lv3-bg);
  transition: background 0.55s ease;
  /* Ensure join-screen fills the viewport and scrolls independently */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: flex-start;
  padding: 0;
}

/* ── Reset generic header styles on the lv3 nav ────────────────── */
header.lv3-nav {
  /* Override style.css's generic "header" rule */
  padding: 10px 0;
  background: transparent;
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.lv3-shell {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.lv3-shell *, .lv3-shell *::before, .lv3-shell *::after { box-sizing: border-box; }


/* ════════════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════════════ */
.lv3-nav {
  position: static;
  z-index: 300;
  padding: 16px 0 10px;
}

.lv3-nav-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--lv3-r-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

/* Brand */
.lv3-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 8px;
}

/* Mascot bubble — replaces the old document-style logo */
.lv3-brand-mascot {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 25%, rgba(var(--lv3-glow-rgb),.32), rgba(124,58,237,.22) 60%, rgba(0,0,0,.4) 100%);
  box-shadow:
    0 0 22px rgba(var(--lv3-glow-rgb),.22),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .3s var(--lv3-ease), box-shadow .3s;
  overflow: hidden;
}
.lv3-brand:hover .lv3-brand-mascot {
  transform: scale(1.06) rotate(-3deg);
  box-shadow:
    0 0 32px rgba(var(--lv3-glow-rgb),.34),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.lv3-brand-mascot-fallback,
.lv3-brand-mascot svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* If Lottie loads, hide the SVG fallback */
.lv3-brand-mascot.has-lottie .lv3-brand-mascot-fallback { display: none; }
.lv3-brand-mascot.has-lottie > div { width: 100%; height: 100%; }

/* Subtle floating animation so the mascot feels alive */
.lv3-brand-mascot { animation: lv3-mascot-bob 5.4s ease-in-out infinite; }
@keyframes lv3-mascot-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .lv3-brand-mascot { animation: none; }
}

/* Backwards-compat: keep old class names working if anything else references them */
.lv3-brand-icon { /* deprecated — use .lv3-brand-mascot */ display: none; }
.lv3-brand-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--lv3-text);
  letter-spacing: -.03em;
}
.lv3-brand-name em {
  font-style: normal;
  color: var(--lv3-glow);
  transition: color .3s;
}

/* Desktop nav links */
.lv3-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.lv3-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--lv3-r-xs);
  border: 1px solid transparent;
  background: transparent;
  color: var(--lv3-text2);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.lv3-nav-link:hover {
  color: var(--lv3-text);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}

.lv3-live-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(52,211,153,.13);
  border: 1px solid rgba(52,211,153,.22);
  color: #34d399;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1;
}

/* Nav actions */
.lv3-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lv3-auth-slot {
  display: flex;
  align-items: center;
}

.lv3-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--lv3-r-sm);
  border: 1px solid rgba(var(--lv3-glow-rgb),.35);
  background: linear-gradient(135deg, rgba(var(--lv3-glow-rgb),.2), rgba(124,58,237,.18));
  color: var(--lv3-glow);
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 28px rgba(var(--lv3-glow-rgb),.1), inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .2s, box-shadow .2s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.lv3-nav-cta:hover {
  background: linear-gradient(135deg, rgba(var(--lv3-glow-rgb),.3), rgba(124,58,237,.26));
  box-shadow: 0 0 40px rgba(var(--lv3-glow-rgb),.2), inset 0 1px 0 rgba(255,255,255,.1);
  transform: translateY(-1px);
}

/* Hamburger */
.lv3-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border-radius: var(--lv3-r-xs);
  border: 1px solid var(--lv3-border);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.lv3-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--lv3-text2);
  transition: transform .2s, opacity .2s;
}
.lv3-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lv3-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lv3-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile slide-in side drawer */
.lv3-mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 480;
  background: rgba(4,4,12,.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}
.lv3-mobile-menu-backdrop.is-open {
  display: block;
  opacity: 1;
}

.lv3-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 320px);
  z-index: 500;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  border-left: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #0e0e1c 0%, #0a0a14 100%);
  box-shadow: -16px 0 48px rgba(0,0,0,.6);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22,1,.36,1);
  will-change: transform;
  overflow-y: auto;
  visibility: hidden;
}
.lv3-mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}

body.lv3-menu-locked { overflow: hidden; }

.lv3-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.lv3-menu-head-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lv3-text3);
}
.lv3-menu-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--lv3-text2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.lv3-menu-close:hover { background: rgba(255,255,255,.08); color: var(--lv3-text); }

.lv3-menu-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  margin-top: 6px;
  border-radius: var(--lv3-r-md);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--lv3-text);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s;
}
.lv3-menu-secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.lv3-menu-secondary svg { stroke: var(--lv3-glow); flex-shrink: 0; }

.lv3-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--lv3-r-md);
  border: none;
  background: transparent;
  color: var(--lv3-text);
  font: inherit;
  font-size: .96rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: color .15s, background .15s;
}
.lv3-menu-link:hover { color: var(--lv3-text); background: rgba(255,255,255,.06); }
.lv3-menu-link svg { stroke: var(--lv3-text3); flex-shrink: 0; transition: stroke .15s; }
.lv3-menu-link:hover svg { stroke: var(--lv3-glow); }
.lv3-menu-divider { height: 1px; background: var(--lv3-border); margin: 10px 2px; }
.lv3-menu-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: var(--lv3-r-md);
  border: 1px solid rgba(var(--lv3-glow-rgb),.3);
  background: linear-gradient(135deg, rgba(var(--lv3-glow-rgb),.18), rgba(124,58,237,.15));
  color: var(--lv3-glow);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
}


/* ════════════════════════════════════════════════════════════════
   TOP-BAR LIVE TICKER (zone 2 of nav)
   ════════════════════════════════════════════════════════════════ */
.lv3-ticker-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 0;
  padding: 9px 16px;
  border-radius: var(--lv3-r-md);
  border: 1px solid rgba(255,255,255,.05);
  background:
    linear-gradient(90deg, rgba(52,211,153,.04) 0%, transparent 30%, rgba(124,58,237,.04) 100%),
    rgba(255,255,255,.018);
  font-size: .8rem;
  overflow: hidden;
}

.lv3-ticker-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  color: var(--lv3-text2);
  font-weight: 600;
}
.lv3-ticker-stat strong {
  color: #34d399;
  font-family: "Space Grotesk", sans-serif;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.lv3-ticker-stat-label { color: var(--lv3-text3); font-size: .77rem; }

.lv3-ticker-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.55);
  animation: lv3-ticker-pulse 2.2s ease-out infinite;
}
@keyframes lv3-ticker-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.lv3-ticker-sep {
  width: 1px; height: 18px;
  background: var(--lv3-border);
  flex-shrink: 0;
}

.lv3-ticker-stream {
  flex: 1;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.lv3-ticker-track {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  animation: lv3-ticker-scroll 36s linear infinite;
  will-change: transform;
}
.lv3-ticker-stream:hover .lv3-ticker-track { animation-play-state: paused; }
.lv3-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lv3-text2);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .005em;
}
@keyframes lv3-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════ */
.lv3-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr);
  gap: 20px;
  align-items: center;
  padding: 56px 0 52px;
  overflow: hidden;
}

/* ── Hero right: Lottie / orbit panel ── */
.lv3-hero-lottie {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lv3-lottie-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(var(--lv3-glow-rgb),.22) 0%, rgba(var(--lv3-glow-rgb),.06) 38%, transparent 70%),
    radial-gradient(circle, rgba(124,58,237,.18) 0%, transparent 65%);
  filter: blur(20px);
  animation: lv3-lottie-glow-pulse 6s ease-in-out infinite;
}
@keyframes lv3-lottie-glow-pulse {
  0%, 100% { transform: scale(1); opacity: .65; }
  50%      { transform: scale(1.08); opacity: .9; }
}
.lv3-lottie-mount {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.lv3-lottie-mount.lv3-lottie-loaded ~ .lv3-orbit,
.lv3-lottie-mount.lv3-lottie-loaded ~ .lv3-lottie-center {
  /* If a real Lottie loads, hide our fallback orbit ring */
  opacity: 0;
}

/* Center "LIVE" pulse */
.lv3-lottie-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}
.lv3-lottie-center-ring {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--lv3-glow-rgb),.35);
  box-shadow: 0 0 60px rgba(var(--lv3-glow-rgb),.18) inset;
}
.lv3-lottie-center-pulse {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(var(--lv3-glow-rgb),.45) 0%, rgba(var(--lv3-glow-rgb),.12) 60%, transparent 80%);
  animation: lv3-center-pulse 3.4s ease-in-out infinite;
}
@keyframes lv3-center-pulse {
  0%, 100% { transform: scale(.9); opacity: .55; }
  50%      { transform: scale(1.15); opacity: 1; }
}
.lv3-lottie-center-label {
  position: relative;
  z-index: 2;
  color: var(--lv3-glow);
  font-family: "Space Grotesk", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .25em;
  text-shadow: 0 0 12px rgba(var(--lv3-glow-rgb),.6);
}

/* Orbiting mode emojis */
.lv3-orbit {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 6px 18px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 1.1rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  will-change: transform;
}
.lv3-orbit span { line-height: 1; }
/* All orbits share the SAME duration so they never overtake each other.
   Phase separation is achieved via negative animation-delay (math: 18s / 5 = 3.6s). */
.lv3-orbit-1 { animation: lv3-orbit 18s linear infinite; animation-delay: 0s; }
.lv3-orbit-2 { animation: lv3-orbit 18s linear infinite; animation-delay: -3.6s; }
.lv3-orbit-3 { animation: lv3-orbit 18s linear infinite; animation-delay: -7.2s; }
.lv3-orbit-4 { animation: lv3-orbit 18s linear infinite; animation-delay: -10.8s; }
.lv3-orbit-5 { animation: lv3-orbit 18s linear infinite; animation-delay: -14.4s; }

@keyframes lv3-orbit {
  from { transform: rotate(0deg)   translateX(140px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(140px) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lv3-orbit { animation: none; }
  .lv3-lottie-center-pulse, .lv3-lottie-glow { animation: none; }
}

/* Ambient glows */
.lv3-hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: .35;
  transition: background .55s ease;
}
.lv3-hero-glow-a {
  width: 500px; height: 400px;
  top: -80px; left: -60px;
  background: radial-gradient(circle, rgba(var(--lv3-glow-rgb),.22) 0%, transparent 70%);
}
.lv3-hero-glow-b {
  width: 380px; height: 380px;
  bottom: 0; right: 0;
  background: radial-gradient(circle, rgba(124,58,237,.18) 0%, transparent 70%);
}

/* Hero left column */
.lv3-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 1;
}

/* Eyebrow */
.lv3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.2);
  color: #4ade80;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.lv3-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  will-change: opacity, scale;
  animation: lv3-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes lv3-dot-pulse {
  0%,100% { opacity: 1; scale: 1; }
  50%      { opacity: .55; scale: 1.4; }
}

/* H1 */
.lv3-h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.8rem, 5.5vw, 4.4rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.06em;
  color: var(--lv3-text);
  margin: 0;
}
.lv3-h1-gradient {
  display: block;
  background: linear-gradient(125deg, var(--lv3-glow) 0%, #a855f7 55%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity .25s ease, filter .22s ease;
  will-change: opacity, filter;
  animation: lv3-grad 7s linear infinite;
}
@keyframes lv3-grad {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(28deg); }
}
.lv3-h1-gradient.morph-out { opacity: 0; filter: blur(14px); }
.lv3-h1-gradient.morph-in  { opacity: 1; filter: blur(0); }

/* Sub */
.lv3-sub {
  margin: 0;
  color: var(--lv3-text2);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 52ch;
}

/* ── Mode selector row ── */
.lv3-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lv3-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 14px;
  min-width: 76px;
  border-radius: var(--lv3-r-md);
  border: 1px solid var(--lv3-border);
  background: rgba(255,255,255,.04);
  color: var(--lv3-text3);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.lv3-mode-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .15s, border-color .15s;
}
.lv3-mode-icon svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.lv3-mode-label {
  font-size: .8rem;
  font-weight: 700;
  color: inherit;
  letter-spacing: .01em;
  transition: color .15s;
}
.lv3-mode-sub {
  font-size: .68rem;
  font-weight: 500;
  color: var(--lv3-text3);
  transition: color .15s;
}
.lv3-mode-btn:hover {
  color: var(--lv3-text2);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-2px);
}
.lv3-mode-btn:hover .lv3-mode-sub { color: var(--lv3-text3); }
.lv3-mode-btn.active {
  color: var(--lv3-glow);
  background: rgba(var(--lv3-glow-rgb),.1);
  border-color: rgba(var(--lv3-glow-rgb),.35);
  box-shadow: 0 0 20px rgba(var(--lv3-glow-rgb),.15), 0 4px 12px rgba(0,0,0,.25);
}
.lv3-mode-btn.active .lv3-mode-icon {
  background: rgba(var(--lv3-glow-rgb),.14);
  border-color: rgba(var(--lv3-glow-rgb),.2);
}
.lv3-mode-btn.active .lv3-mode-sub { color: rgba(var(--lv3-glow-rgb),.7); }

/* ── CTA block ── */
.lv3-cta-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lv3-name-row { display: flex; }
.lv3-input {
  height: 52px;
  padding: 0 18px;
  border-radius: var(--lv3-r-md);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.055);
  color: var(--lv3-text);
  font: inherit;
  font-size: .92rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .18s, box-shadow .18s;
}
.lv3-input::placeholder { color: #3a4a62; }
.lv3-input:focus {
  border-color: rgba(var(--lv3-glow-rgb),.5);
  box-shadow: 0 0 0 3px rgba(var(--lv3-glow-rgb),.1), inset 0 1px 0 rgba(255,255,255,.04);
}
.lv3-input-name { width: 100%; max-width: 260px; }

.lv3-action-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.lv3-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--lv3-r-md);
  border: none;
  background: linear-gradient(135deg,
    var(--lv3-glow) 0%,
    color-mix(in srgb, var(--lv3-glow) 50%, #7c3aed) 100%
  );
  color: #03060a;
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .01em;
  box-shadow:
    0 6px 32px rgba(var(--lv3-glow-rgb),.42),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition: filter .18s, transform .12s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
}
.lv3-btn-primary svg { stroke: currentColor; flex-shrink: 0; }
.lv3-btn-primary:hover {
  filter: brightness(1.09) saturate(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(var(--lv3-glow-rgb),.52), inset 0 1px 0 rgba(255,255,255,.28);
}
.lv3-btn-primary:active { transform: translateY(0); filter: brightness(.95); transition-duration: 50ms; }

.lv3-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 52px;
  padding: 0 22px;
  border-radius: var(--lv3-r-md);
  border: 1px solid var(--lv3-border2);
  background: rgba(255,255,255,.06);
  color: var(--lv3-text);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.lv3-btn-secondary:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-1px);
}

/* Collapsible join panel */
.lv3-join-panel {
  display: none;
  gap: 8px;
  align-items: stretch;
}
.lv3-join-panel.is-open { display: flex; }
.lv3-input-room { flex: 1; }
.lv3-btn-join {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--lv3-r-md);
  border: 1px solid rgba(var(--lv3-glow-rgb),.3);
  background: rgba(var(--lv3-glow-rgb),.08);
  color: var(--lv3-glow);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.lv3-btn-join:hover { background: rgba(var(--lv3-glow-rgb),.14); transform: translateY(-1px); }

.lv3-trust-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--lv3-text3);
  font-size: .78rem;
  line-height: 1.4;
}
.lv3-trust-line svg { stroke: #34d399; flex-shrink: 0; }

/* ── Hero right panel ── */
.lv3-hero-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.lv3-preview-card {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: var(--lv3-r-xl);
  border: 1px solid rgba(var(--lv3-glow-rgb),.2);
  background:
    linear-gradient(155deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%),
    var(--lv3-surface2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    var(--lv3-shadow-lg),
    0 0 60px rgba(var(--lv3-glow-rgb),.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .35s, box-shadow .35s;
}

.lv3-preview-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 90% 65% at 92% 8%, rgba(var(--lv3-glow-rgb),.18) 0%, transparent 55%);
  pointer-events: none;
  transition: background .45s;
}

.lv3-preview-icon {
  width: 60px; height: 60px;
  border-radius: 18px;
  display: grid; place-items: center;
  color: var(--lv3-glow);
  background: rgba(var(--lv3-glow-rgb),.1);
  border: 1px solid rgba(var(--lv3-glow-rgb),.22);
  box-shadow: 0 0 32px rgba(var(--lv3-glow-rgb),.2), inset 0 1px 0 rgba(255,255,255,.08);
  transition: color .3s, background .3s, box-shadow .3s;
}
.lv3-preview-icon svg {
  width: 28px; height: 28px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.lv3-preview-body { display: flex; flex-direction: column; gap: 7px; }
.lv3-preview-kicker {
  color: var(--lv3-glow);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
  transition: color .3s;
}
.lv3-preview-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--lv3-text);
  line-height: 1.1;
}
.lv3-preview-note {
  margin: 0;
  color: var(--lv3-text2);
  font-size: .85rem;
  line-height: 1.6;
}
.lv3-preview-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.lv3-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(var(--lv3-glow-rgb),.1);
  border: 1px solid rgba(var(--lv3-glow-rgb),.22);
  color: var(--lv3-glow);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .3s, border-color .3s, color .3s;
}
.lv3-chip-dim { display: none; }

/* Advanced room wrap */
.lv3-adv-wrap { display: flex; flex-direction: column; gap: 6px; }

/* Online card */
.lv3-online-card {
  padding: 18px;
  border-radius: var(--lv3-r-lg);
  border: 1px solid rgba(244,114,182,.1);
  background:
    linear-gradient(155deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.01) 100%),
    var(--lv3-surface2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}
.lv3-online-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lv3-text2);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lv3-online-header svg { stroke: #f472b6; flex-shrink: 0; }
.lv3-refresh-btn {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--lv3-border);
  background: rgba(255,255,255,.04);
  color: var(--lv3-text3);
  cursor: pointer;
  margin-left: auto;
  transition: color .15s, background .15s, transform .15s;
}
.lv3-refresh-btn:hover { color: var(--lv3-text2); background: rgba(255,255,255,.08); transform: rotate(90deg); }
.lv3-refresh-btn svg { stroke: currentColor; }


/* ════════════════════════════════════════════════════════════════
   STATS STRIP
   ════════════════════════════════════════════════════════════════ */
.lv3-stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 18px 32px;
  border-radius: var(--lv3-r-lg);
  border: 1px solid var(--lv3-border);
  background:
    linear-gradient(90deg, rgba(var(--lv3-glow-rgb),.025) 0%, transparent 35%, rgba(124,58,237,.025) 100%),
    rgba(255,255,255,.025);
  box-shadow: 0 0 0 1px rgba(255,255,255,.025) inset;
  margin-bottom: 64px;
}
.lv3-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 36px;
}
.lv3-stat strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--lv3-text);
  letter-spacing: -.02em;
}
.lv3-stat span {
  color: var(--lv3-text3);
  font-size: .71rem;
  margin-top: 3px;
  letter-spacing: .02em;
}
.lv3-stat-sep {
  width: 1px; height: 32px;
  background: var(--lv3-border);
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════
   SECTIONS — shared skeleton
   ════════════════════════════════════════════════════════════════ */
.lv3-section {
  margin-bottom: 80px;
}
.lv3-section-header {
  text-align: center;
  margin-bottom: 40px;
}
.lv3-section-h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--lv3-text);
  margin: 0 0 10px;
  line-height: 1.1;
}
.lv3-section-sub {
  color: var(--lv3-text2);
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════
   MODE GRID (features section)
   ════════════════════════════════════════════════════════════════ */
.lv3-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.lv3-mode-card {
  padding: 26px 24px;
  border-radius: var(--lv3-r-xl);
  border: 1px solid var(--lv3-border);
  background:
    linear-gradient(155deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.01) 100%),
    var(--lv3-surface2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .2s, box-shadow .25s;
  box-shadow: var(--lv3-shadow-sm);
}
.lv3-mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .25s;
}
.lv3-mode-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lv3-shadow-lg);
}
.lv3-mode-card:hover::before { opacity: 1; }

.lv3-mode-card-video  { --mc: var(--lv3-video);  }
.lv3-mode-card-music  { --mc: var(--lv3-music);  }
.lv3-mode-card-draw   { --mc: var(--lv3-draw);   }
.lv3-mode-card-game   { --mc: var(--lv3-game);   }
.lv3-mode-card-voice  { --mc: var(--lv3-voice);  }

.lv3-mode-card:hover  { border-color: rgba(var(--lv3-glow-rgb, 100,210,255),.28); }
.lv3-mode-card-video:hover  { border-color: rgba(100,210,255,.3); }
.lv3-mode-card-music:hover  { border-color: rgba(192,132,252,.3); }
.lv3-mode-card-draw:hover   { border-color: rgba(251,191,36,.3);  }
.lv3-mode-card-game:hover   { border-color: rgba(52,211,153,.3);  }
.lv3-mode-card-voice:hover  { border-color: rgba(167,139,250,.3); }

.lv3-mode-card-icon {
  width: 48px; height: 48px;
  border-radius: 15px;
  display: grid; place-items: center;
  color: var(--mc, var(--lv3-glow));
  background: rgba(var(--lv3-glow-rgb,100,210,255),.09);
  border: 1px solid rgba(var(--lv3-glow-rgb,100,210,255),.15);
  transition: box-shadow .25s;
}
.lv3-mode-card-video  .lv3-mode-card-icon { background:rgba(100,210,255,.08); border-color:rgba(100,210,255,.16); color:var(--lv3-video); }
.lv3-mode-card-music  .lv3-mode-card-icon { background:rgba(192,132,252,.08); border-color:rgba(192,132,252,.16); color:var(--lv3-music); }
.lv3-mode-card-draw   .lv3-mode-card-icon { background:rgba(251,191,36,.08);  border-color:rgba(251,191,36,.16);  color:var(--lv3-draw);  }
.lv3-mode-card-game   .lv3-mode-card-icon { background:rgba(52,211,153,.08);  border-color:rgba(52,211,153,.16);  color:var(--lv3-game);  }
.lv3-mode-card-voice  .lv3-mode-card-icon { background:rgba(167,139,250,.08); border-color:rgba(167,139,250,.16); color:var(--lv3-voice); }
.lv3-mode-card-icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.lv3-mode-card-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--lv3-text);
  margin: 0;
}
.lv3-mode-card-desc {
  margin: 0;
  color: var(--lv3-text2);
  font-size: .84rem;
  line-height: 1.6;
  flex: 1;
}
.lv3-mode-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.lv3-mode-card-tags span {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--lv3-text3);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
}


/* ════════════════════════════════════════════════════════════════
   HOW IT WORKS
   ════════════════════════════════════════════════════════════════ */
.lv3-how {
  padding: 56px 48px;
  border-radius: var(--lv3-r-xl);
  border: 1px solid var(--lv3-border);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--lv3-glow-rgb),.04) 0%, transparent 60%),
    linear-gradient(155deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%),
    var(--lv3-surface2);
}
.lv3-how .lv3-section-header { margin-bottom: 44px; }

.lv3-steps {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.lv3-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  flex: 1;
  min-width: 180px;
  max-width: 260px;
}
.lv3-step-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--lv3-glow);
  background: rgba(var(--lv3-glow-rgb),.1);
  border: 2px solid rgba(var(--lv3-glow-rgb),.25);
  box-shadow: 0 0 24px rgba(var(--lv3-glow-rgb),.15);
  flex-shrink: 0;
}
.lv3-step-body { display: flex; flex-direction: column; gap: 6px; }
.lv3-step-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--lv3-text);
  margin: 0;
}
.lv3-step-desc {
  margin: 0;
  color: var(--lv3-text2);
  font-size: .85rem;
  line-height: 1.6;
}
.lv3-step-arrow {
  display: flex;
  align-items: center;
  padding-top: 16px;
  color: var(--lv3-text3);
  flex-shrink: 0;
}
.lv3-step-arrow svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
}


/* ════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════════════════════════════════════ */
.lv3-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.lv3-testimonial-mobile { display: none; }

.lv3-testimonial {
  padding: 26px;
  border-radius: var(--lv3-r-xl);
  border: 1px solid var(--lv3-border);
  background:
    linear-gradient(155deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.01) 100%),
    var(--lv3-surface2);
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}
.lv3-testimonial-quote {
  margin: 0;
  color: var(--lv3-text);
  font-size: .93rem;
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}
.lv3-testimonial-quote::before { content: '\201C'; }
.lv3-testimonial-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lv3-testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: .95rem;
  font-weight: 800;
  flex-shrink: 0;
  color: #0a0a10;
}
.lv3-avatar-a { background: linear-gradient(135deg, #64d2ff, #a855f7); }
.lv3-avatar-b { background: linear-gradient(135deg, #34d399, #3b82f6); }
.lv3-avatar-c { background: linear-gradient(135deg, #fb7185, #f97316); }
.lv3-testimonial-name {
  font-weight: 700;
  font-size: .88rem;
  color: var(--lv3-text);
}
.lv3-testimonial-role {
  font-size: .75rem;
  color: var(--lv3-text3);
  margin-top: 2px;
}
.lv3-testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.lv3-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--lv3-text3);
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.lv3-dot.active { background: var(--lv3-glow); transform: scale(1.3); }


/* ════════════════════════════════════════════════════════════════
   FINAL CTA
   ════════════════════════════════════════════════════════════════ */
.lv3-final-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 72px 48px;
  border-radius: var(--lv3-r-xl);
  border: 1px solid rgba(var(--lv3-glow-rgb),.18);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--lv3-glow-rgb),.1) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%),
    var(--lv3-surface2);
  margin-bottom: 64px;
  overflow: hidden;
}
.lv3-final-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--lv3-glow-rgb),.12) 0%, transparent 60%);
  pointer-events: none;
  transition: background .5s;
}
.lv3-final-h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.055em;
  color: var(--lv3-text);
  margin: 0;
  line-height: 1.1;
  position: relative;
}
.lv3-final-sub {
  color: var(--lv3-text2);
  font-size: 1rem;
  margin: 0;
  position: relative;
}
.lv3-final-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 36px;
  border-radius: var(--lv3-r-lg);
  border: none;
  background: linear-gradient(135deg,
    var(--lv3-glow) 0%,
    color-mix(in srgb, var(--lv3-glow) 50%, #7c3aed) 100%
  );
  color: #03060a;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .01em;
  box-shadow: 0 8px 36px rgba(var(--lv3-glow-rgb),.45), inset 0 1px 0 rgba(255,255,255,.28);
  transition: filter .18s, transform .12s, box-shadow .18s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.lv3-final-btn svg { stroke: currentColor; flex-shrink: 0; }
.lv3-final-btn:hover {
  filter: brightness(1.1) saturate(1.1);
  transform: translateY(-2px);
  box-shadow: 0 14px 48px rgba(var(--lv3-glow-rgb),.55), inset 0 1px 0 rgba(255,255,255,.3);
}


/* ════════════════════════════════════════════════════════════════
   LIVE ROOMS DIRECTORY
   ════════════════════════════════════════════════════════════════ */
.lv3-directory {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: var(--lv3-r-xl);
  border: 1px solid var(--lv3-border);
  background:
    linear-gradient(155deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%),
    var(--lv3-surface2);
  margin-bottom: 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.025) inset;
}
.lv3-directory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lv3-directory-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--lv3-text);
  margin: 0;
}
.lv3-directory-sub { margin: 4px 0 0; color: var(--lv3-text3); font-size: .8rem; }

.lv3-dir-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lv3-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.lv3-search-wrap svg {
  position: absolute;
  left: 11px;
  stroke: var(--lv3-text3);
  pointer-events: none;
  transition: stroke .15s;
}
.lv3-search-wrap:focus-within svg { stroke: var(--lv3-text2); }
.lv3-search-input {
  height: 38px;
  padding: 0 12px 0 33px;
  border-radius: var(--lv3-r-xs);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.05);
  color: var(--lv3-text);
  font: inherit;
  font-size: .81rem;
  width: 200px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lv3-search-input::placeholder { color: #38485e; }
.lv3-search-input:focus {
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}

.lv3-dir-filters { display: flex; gap: 6px; }
.lv3-select {
  height: 38px;
  padding: 0 28px 0 11px;
  border-radius: var(--lv3-r-xs);
  border: 1px solid rgba(255,255,255,.09);
  background:
    rgba(255,255,255,.05)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234e5e78' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 9px center;
  color: var(--lv3-text2);
  font: inherit;
  font-size: .79rem;
  cursor: pointer;
  outline: none;
  appearance: none;
  transition: border-color .15s;
}
.lv3-select:focus { border-color: rgba(255,255,255,.18); outline: none; }

.lv3-dir-count {
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(52,211,153,.09);
  border: 1px solid rgba(52,211,153,.2);
  color: #34d399;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  white-space: nowrap;
}

.lv3-refresh-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244,114,182,.22);
  background: rgba(244,114,182,.07);
  color: #f9a8d4;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.lv3-refresh-text-btn:hover { background: rgba(244,114,182,.14); }

.lv3-meet-mobile { display: none; }


/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
.lv3-footer {
  border-top: 1px solid var(--lv3-border);
  padding: 40px 0 32px;
  margin-top: 16px;
}
.lv3-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.lv3-footer-brand { display: flex; flex-direction: column; gap: 5px; }
.lv3-footer-logo {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--lv3-text);
  letter-spacing: -.03em;
}
.lv3-footer-logo em { font-style: normal; color: var(--lv3-glow); transition: color .3s; }
.lv3-footer-tagline { color: var(--lv3-text3); font-size: .78rem; }
.lv3-footer-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.lv3-footer-link {
  padding: 6px 12px;
  border-radius: var(--lv3-r-xs);
  color: var(--lv3-text2);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.lv3-footer-link:hover { color: var(--lv3-text); background: rgba(255,255,255,.05); }
.lv3-footer-copy { color: var(--lv3-text3); font-size: .75rem; margin: 0; }


/* ════════════════════════════════════════════════════════════════
   MOBILE BOTTOM ACTION BAR
   ════════════════════════════════════════════════════════════════ */
.lv3-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 400;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8,8,16,.55) 0%, rgba(8,8,16,.96) 60%);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 -10px 28px rgba(0,0,0,.5);
  gap: 8px;
  align-items: stretch;
}
.lv3-mobile-bar-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg,
    var(--lv3-glow) 0%,
    color-mix(in srgb, var(--lv3-glow) 50%, #7c3aed) 100%
  );
  color: #03060a;
  font: inherit;
  font-size: .96rem;
  font-weight: 800;
  letter-spacing: .005em;
  cursor: pointer;
  box-shadow:
    0 6px 22px rgba(var(--lv3-glow-rgb),.42),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition: filter .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.lv3-mobile-bar-primary:active { filter: brightness(.92); transform: scale(.985); }
.lv3-mobile-bar-secondary {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: var(--lv3-text);
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.lv3-mobile-bar-secondary:active { background: rgba(255,255,255,.1); }


/* ════════════════════════════════════════════════════════════════
   HIDE OLD LANDING ELEMENTS
   ════════════════════════════════════════════════════════════════ */
.landing-mode-grid              { display: none !important; }
.landing-mode-panel .landing-section-head { display: none !important; }
.landing-room-actions-row       { display: none !important; }
.landing-hero                   { display: none !important; }
.landing-main-grid              { display: none !important; }
.landing-directory-section:not(.lv3-directory) { display: none !important; }
/* Old lp-* proof strip and directory hidden — replaced by lv3-* */
.lp-proof-strip                 { display: none !important; }
.lp-directory                   { display: none !important; }
.lp-hero                        { display: none !important; }
.landing-topbar                 { display: none !important; }
#landing-mobile-nav             { display: none !important; }


/* ════════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════════ */
@keyframes lv3-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lv3-hero-inner  { animation: lv3-fade-in .55s var(--lv3-ease) both; will-change: opacity; }
.lv3-hero-panel  { animation: lv3-fade-in .6s .08s var(--lv3-ease) both; will-change: opacity; }
.lv3-stats-strip { animation: lv3-fade-in .5s .14s var(--lv3-ease) both; will-change: opacity; }

@media (prefers-reduced-motion: reduce) {
  .lv3-hero-inner, .lv3-hero-panel, .lv3-stats-strip { animation: none; }
  .lv3-live-dot { animation: none; }
  .lv3-h1-gradient { animation: none; transition: none; }
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .lv3-modes-grid { grid-template-columns: repeat(2, 1fr); }
  .lv3-modes-grid .lv3-mode-card:last-child { grid-column: 1 / -1; }
  .lv3-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .lv3-testimonial-grid .lv3-testimonial:last-child { grid-column: 1 / -1; }
  .lv3-stat { padding: 0 22px; }
}

@media (max-width: 900px) {
  .lv3-hero { grid-template-columns: 1fr; gap: 14px; }
  .lv3-hero-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .lv3-adv-wrap    { grid-column: 1 / -1; }
  .lv3-online-card { grid-column: 1 / -1; }
  .lv3-how { padding: 40px 32px; }
  /* Lottie panel: smaller orbit radius on tablet */
  .lv3-hero-lottie { max-width: 320px; aspect-ratio: 1 / 1; }
  .lv3-orbit-1, .lv3-orbit-2, .lv3-orbit-3, .lv3-orbit-4, .lv3-orbit-5 {
    animation-name: lv3-orbit-sm;
  }
  @keyframes lv3-orbit-sm {
    from { transform: rotate(0deg)   translateX(108px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(108px) rotate(-360deg); }
  }
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤640px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #join-screen { padding: 0; }

  .lv3-shell { padding: 0 14px 96px; gap: 0; }

  /* ── Nav: hamburger left · animated wordmark right ── */
  .lv3-nav { padding: 10px 0 4px; }
  .lv3-nav-inner {
    padding: 8px 12px;
    border-radius: 16px;
    gap: 10px;
    border-color: rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.05) inset,
      0 6px 18px rgba(0,0,0,.25);
  }
  .lv3-nav-links { display: none; }
  .lv3-nav-cta-desk { display: none !important; }
  .lv3-nav-actions { display: none; }

  /* Hamburger lives on the LEFT on mobile */
  .lv3-hamburger-left {
    display: flex;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    flex-shrink: 0;
    order: 1;
  }
  .lv3-hamburger span { width: 16px; height: 1.6px; }

  /* Brand pushed to the right; mascot hidden, wordmark animated */
  .lv3-brand {
    gap: 0;
    margin: 0 0 0 auto;
    order: 2;
    flex: 0 0 auto;
    min-width: 0;
  }
  .lv3-brand-mascot { display: none; }
  .lv3-brand-name {
    display: inline-block;
    font-size: 1.15rem;
    font-weight: 800;
    background: linear-gradient(110deg, #64d2ff 0%, #a855f7 50%, #38bdf8 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: lv3-brand-shimmer 5.6s linear infinite;
    will-change: background-position;
  }
  .lv3-brand-name em {
    font-style: normal;
    color: inherit;
  }
  @keyframes lv3-brand-shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lv3-brand-name { animation: none; }
  }

  /* Hide Lottie panel on mobile (too much real estate above fold) */
  .lv3-hero-lottie { display: none; }

  /* Activity slider on mobile — keep marquee like desktop, just compact */
  .lv3-ticker-bar {
    display: flex;
    margin-top: 6px;
    padding: 7px 12px;
    border-radius: 12px;
    gap: 10px;
    font-size: .74rem;
    overflow: hidden;
  }
  .lv3-ticker-stat {
    flex-shrink: 0;
  }
  .lv3-ticker-stat strong { font-size: .82rem; }
  .lv3-ticker-stat-label { font-size: .68rem; }
  .lv3-ticker-sep { display: block; }
  .lv3-ticker-stream {
    display: block;
    flex: 1;
    min-width: 0;
  }
  .lv3-ticker-track { gap: 24px; animation-duration: 32s; }
  .lv3-ticker-item { font-size: .74rem; }

  /* ── Hero (tight, above-the-fold focus) ── */
  .lv3-hero {
    padding: 18px 0 16px;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }
  .lv3-hero-glow-a { width: 240px; height: 200px; top: -30px; left: -30px; opacity: .22; }
  .lv3-hero-glow-b { display: none; }
  .lv3-hero-inner {
    gap: 16px;
    min-width: 0;
    max-width: 100%;
  }
  .lv3-h1 {
    font-size: clamp(1.85rem, 8.4vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  /* Reduce headline line-breaks on mobile — let text flow */
  .lv3-h1 br { display: none; }
  .lv3-h1-gradient {
    display: inline-block;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  .lv3-sub {
    font-size: .9rem;
    line-height: 1.5;
    max-width: 100%;
    word-break: break-word;
  }
  .lv3-eyebrow { font-size: .66rem; padding: 5px 11px; gap: 7px; max-width: 100%; }

  /* ── Mode row — swipeable horizontal scroll, snap, with edge fade ── */
  .lv3-mode-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 2px 14px 6px;
    margin: 0 -14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .lv3-mode-row::-webkit-scrollbar { display: none; }
  .lv3-mode-btn {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 12px 10px;
    gap: 6px;
    scroll-snap-align: start;
    transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
  }
  .lv3-mode-btn:active { transform: scale(.96); }
  .lv3-mode-icon { width: 32px; height: 32px; border-radius: 10px; }
  .lv3-mode-icon svg { width: 16px; height: 16px; }
  .lv3-mode-label { font-size: .78rem; }
  .lv3-mode-sub { display: none; }

  /* ── CTA block ── */
  .lv3-input-name { max-width: 100%; }
  .lv3-action-row { flex-direction: column; gap: 10px; }
  .lv3-btn-primary { width: 100%; height: 52px; font-size: .95rem; flex: unset; }
  .lv3-btn-secondary { width: 100%; height: 48px; }
  .lv3-join-panel.is-open { flex-direction: column; }
  .lv3-btn-join { width: 100%; justify-content: center; }
  .lv3-input { height: 50px; font-size: .95rem; }
  .lv3-trust-line { font-size: .75rem; flex-wrap: wrap; }

  /* ── Hero panel (removed from visible layout) ── */
  .lv3-hero-panel { grid-template-columns: 1fr; }
  .lv3-adv-wrap    { grid-column: auto; }
  .lv3-online-card { grid-column: auto; }

  /* ── Stats ── */
  .lv3-stats-strip { padding: 12px 14px; margin-bottom: 36px; flex-wrap: wrap; gap: 8px 0; }
  .lv3-stat { padding: 0 12px; }
  .lv3-stat strong { font-size: .86rem; }
  .lv3-stat-sep { height: 22px; }
  .lv3-stat-hide-sm { display: none; }
  .lv3-stat:nth-child(n+4), .lv3-stat-sep:nth-child(n+4) { display: none; }

  /* ── Sections ── */
  .lv3-section { margin-bottom: 44px; }
  .lv3-section-header { margin-bottom: 22px; }
  .lv3-section-h2 { font-size: clamp(1.45rem, 6vw, 1.9rem); }

  /* ── Mode grid ── */
  .lv3-modes-grid { grid-template-columns: 1fr; }
  .lv3-modes-grid .lv3-mode-card:last-child { grid-column: auto; }

  /* ── How ── */
  .lv3-how { padding: 26px 18px; border-radius: var(--lv3-r-lg); }
  .lv3-steps { flex-direction: column; align-items: stretch; gap: 8px; }
  .lv3-step-arrow { display: none; }
  .lv3-step { flex-direction: row; text-align: left; align-items: flex-start; max-width: 100%; gap: 14px; }

  /* ── Testimonials ── */
  .lv3-testimonial-grid { display: none; }
  .lv3-testimonial-mobile { display: block; }
  .lv3-meet-mobile { display: flex; }

  /* ── Final CTA ── */
  .lv3-final-cta { padding: 40px 22px; margin-bottom: 36px; border-radius: var(--lv3-r-xl); }
  .lv3-final-btn { height: 52px; padding: 0 28px; font-size: .95rem; width: 100%; }

  /* ── Directory ── */
  .lv3-directory { padding: 16px; border-radius: var(--lv3-r-lg); }
  .lv3-dir-controls { width: 100%; flex-wrap: wrap; }
  .lv3-search-wrap { width: 100%; }
  .lv3-search-input { width: 100%; }
  .lv3-dir-filters { width: 100%; }
  .lv3-select { flex: 1; }

  /* ── Footer ── */
  .lv3-footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lv3-footer-links { flex-wrap: wrap; gap: 12px; }

  /* ── Mobile bottom bar — bigger tap targets ── */
  .lv3-mobile-bar {
    display: flex;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .lv3-mobile-bar-primary {
    height: 54px;
    font-size: .97rem;
    border-radius: var(--lv3-r-md);
  }
  .lv3-mobile-bar-secondary {
    height: 54px;
    font-size: .9rem;
    padding: 0 18px;
    border-radius: var(--lv3-r-md);
  }

  /* ── Mobile drawer (side-sheet) ── */
  .lv3-menu-link { font-size: .96rem; }
  .lv3-menu-cta { font-size: .96rem; }

  /* ── Catch-all: prevent any mobile overflow issues ── */
  html, body { overflow-x: hidden; max-width: 100vw; }
  #join-screen { overflow-x: hidden; }
  .lv3-shell { overflow-x: hidden; }
  .lv3-section, .lv3-final-cta, .lv3-directory { max-width: 100%; }
  .lv3-directory { padding: 14px; }

  /* ── Live room cards: compact (avoid tall, empty-left layout) ── */
  .lp-rooms-grid { grid-template-columns: 1fr; gap: 10px; }
  .room-item {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    max-width: 100%;
  }
  .room-item-media {
    min-height: 0;
    height: 100%;
    min-height: 88px;
    border-radius: 14px;
  }
  .room-item-content { gap: 8px; min-width: 0; }
  .room-item-name {
    font-size: .96rem;
    line-height: 1.25;
    word-break: break-word;
  }
  .room-item-subtitle {
    font-size: .8rem;
    line-height: 1.4;
    word-break: break-word;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .room-item-meta { gap: 6px; flex-wrap: wrap; }
  .room-item-pill { font-size: .68rem; padding: 2px 8px; }
  .room-item-mode { font-size: .65rem; padding: 2px 7px; }
  .room-item-cta { padding: 6px 12px; font-size: .8rem; }
  .room-item-users { font-size: .76rem; }

  /* Tighten stats */
  .lv3-stats-strip { padding: 12px 10px; }
  .lv3-stat { padding: 0 10px; }
}

/* ── Seeded room media tile (per-mode gradient + emoji) ─────── */
.room-item-media-seed {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.1), transparent 55%), #131828;
}
.room-item-media-seed.mode-video { background: radial-gradient(circle at 30% 20%, rgba(100,210,255,.28), transparent 60%), linear-gradient(135deg, #0d1a2a 0%, #0a0f1d 100%); }
.room-item-media-seed.mode-music { background: radial-gradient(circle at 30% 20%, rgba(192,132,252,.28), transparent 60%), linear-gradient(135deg, #1c1029 0%, #110a1d 100%); }
.room-item-media-seed.mode-draw  { background: radial-gradient(circle at 30% 20%, rgba(251,191,36,.28),  transparent 60%), linear-gradient(135deg, #2a1f08 0%, #1a1505 100%); }
.room-item-media-seed.mode-game  { background: radial-gradient(circle at 30% 20%, rgba(52,211,153,.28),  transparent 60%), linear-gradient(135deg, #082416 0%, #051a10 100%); }
.room-item-media-seed.mode-voice { background: radial-gradient(circle at 30% 20%, rgba(167,139,250,.28), transparent 60%), linear-gradient(135deg, #1c1530 0%, #120e22 100%); }
.room-item-media-seed.mode-clip  { background: radial-gradient(circle at 30% 20%, rgba(251,113,133,.28), transparent 60%), linear-gradient(135deg, #2a0e16 0%, #1a070d 100%); }
.room-item-media-emoji {
  font-size: 2.4rem;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
  line-height: 1;
}

/* ── Very small (≤380px) ── */
@media (max-width: 380px) {
  .lv3-shell { padding: 0 10px 110px; }
  .lv3-mode-btn { min-width: 62px; padding: 10px 8px; }
  .lv3-mode-label { font-size: .72rem; }
  .lv3-action-row { gap: 8px; }
  .lv3-btn-primary { height: 50px; }
  .lv3-stat:nth-child(n+2), .lv3-stat-sep { display: none; }
  .lv3-h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  /* Even tighter rooms grid on tiny phones */
  .room-item { grid-template-columns: 72px minmax(0, 1fr); padding: 10px; gap: 10px; }
  .room-item-media { min-height: 76px; border-radius: 12px; }
  .room-item-media-emoji { font-size: 2rem; }
  .lv3-brand-name { font-size: 1.05rem; }
}