:root {
  color-scheme: light dark;
  --page: #f8fafc;
  --page-2: #eef3fb;
  --text: #10141c;
  --text-soft: rgba(16, 20, 28, .70);
  --text-faint: rgba(16, 20, 28, .52);
  --line: rgba(10, 20, 35, .12);
  --accent: #ff8a00;
  --accent-2: #ffbd59;
  --blue: #1e5bff;
  --deep-blue: #10141c;
  --warm-blue: #1f2a44;
  --glass: rgba(255,255,255,.56);
  --glass-edge: rgba(255,255,255,.72);
  --shadow: 0 30px 90px rgba(23, 38, 68, .14);
  --shadow-soft: 0 16px 44px rgba(23, 38, 68, .10);
  --radius-xl: 40px;
  --max: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #10141c;
    --page-2: #151b27;
    --text: #eef3fb;
    --text-soft: rgba(238, 243, 251, .72);
    --text-faint: rgba(238, 243, 251, .52);
    --line: rgba(255,255,255,.12);
    --accent: #ff9a22;
    --accent-2: #ffd28a;
    --glass: rgba(255,255,255,.09);
    --glass-edge: rgba(255,255,255,.24);
    --shadow: 0 34px 110px rgba(0,0,0,.38);
    --shadow-soft: 0 18px 48px rgba(0,0,0,.28);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--page); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% -8%, rgba(255,138,0,.22), transparent 30rem),
    radial-gradient(circle at 92% 4%, rgba(30,91,255,.16), transparent 34rem),
    radial-gradient(circle at 50% 52%, rgba(255,138,0,.055), transparent 40rem),
    linear-gradient(180deg, var(--page), var(--page-2) 54%, var(--page));
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.22), transparent 18rem),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.18), transparent 20rem);
  opacity: .54;
  z-index: -2;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.22), transparent 65%);
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
p { color: var(--text-soft); margin: 0; }
.container { width: min(var(--max), calc(100% - 34px)); margin: 0 auto; }
.small-label {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 13px;
  border-radius: 999px; color: var(--text-soft); font-weight: 760; font-size: 13px;
  border: 1px solid var(--line); background: rgba(255,255,255,.22);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
}
.small-label::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 7px rgba(255,138,0,.13); }
h1,h2,h3 { margin: 0; letter-spacing: -.032em; text-wrap: balance; }
h1 { font-size: clamp(52px, 8.4vw, 118px); line-height: .91; }
h2 { font-size: clamp(34px, 5vw, 70px); line-height: .98; }
h3 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.05; }

.glass-panel {
  position: relative; overflow: hidden; border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.28)), var(--glass);
  backdrop-filter: blur(30px) saturate(190%) brightness(1.03);
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.03);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.10);
}
.glass-panel::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 16% 0%, rgba(255,255,255,.46), transparent 18rem),
              radial-gradient(circle at 88% 100%, rgba(255,138,0,.16), transparent 19rem);
  opacity:.46;
}
.glass-panel::after {
  content:""; position:absolute; inset:1px; pointer-events:none; border-radius:inherit;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.45), inset -1px -1px 0 rgba(255,255,255,.08);
}
.glass-panel > * { position:relative; z-index:1; }
@media (prefers-color-scheme: dark) {
  .glass-panel { background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.055)), var(--glass); }
  .glass-panel::before { opacity:.22; }
}

.site-header { position: sticky; top: 0; z-index: 50; isolation: isolate; }
.nav-glass {
  position: absolute; inset: 0; height: 140%;
  background: linear-gradient(to bottom, rgba(255,255,255,.30), rgba(255,255,255,.075)), rgba(255,255,255,.075);
  backdrop-filter: blur(46px) saturate(235%) brightness(1.08);
  -webkit-backdrop-filter: blur(46px) saturate(235%) brightness(1.08);
  border-bottom: 1px solid rgba(255,255,255,.20);
  mask-image: linear-gradient(to bottom, black 0 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0 72%, transparent 100%);
  z-index: -1;
}
.nav-glass::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,138,0,.18), transparent 19rem),
    radial-gradient(circle at 86% 0%, rgba(56,189,248,.12), transparent 19rem),
    linear-gradient(to bottom, rgba(255,255,255,.10), transparent 58%);
}
@media (prefers-color-scheme: dark) {
  .nav-glass { background: linear-gradient(to bottom, rgba(17,22,31,.30), rgba(17,22,31,.085)), rgba(17,22,31,.10); border-bottom:1px solid rgba(255,255,255,.075); }
  .nav-glass::after { background: radial-gradient(circle at 16% 0%, rgba(255,138,0,.13), transparent 18rem), radial-gradient(circle at 86% 0%, rgba(56,189,248,.09), transparent 18rem), linear-gradient(to bottom, rgba(255,255,255,.035), transparent 58%); }
}
.nav-inner { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:25px; font-weight:860; letter-spacing:-.04em; }
.brand-icon { width:44px; height:44px; border-radius:14px; object-fit:cover; box-shadow:0 12px 32px rgba(255,138,0,.18); }
.nav-links {
  display:flex; align-items:center; gap:7px; padding:7px; border-radius:999px;
  background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(28px) saturate(220%); -webkit-backdrop-filter: blur(28px) saturate(220%);
}
.nav-links a { color:var(--text-soft); padding:10px 15px; border-radius:999px; font-size:14px; font-weight:720; transition:180ms ease; }
.nav-links a:hover,
.nav-links a.active,
.nav-links a[aria-current="page"] {
  color:var(--text);
  background:rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 10px 24px rgba(10,20,35,.08);
}
@media (prefers-color-scheme: dark) {
  .nav-links { background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.07); }
  .nav-links a:hover,
  .nav-links a.active,
  .nav-links a[aria-current="page"] {
    background:rgba(255,255,255,.115);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 10px 24px rgba(0,0,0,.16);
  }
}
.nav-store { min-height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border-radius:999px; color:white; font-weight:820; background:linear-gradient(135deg,#111827,#394150); box-shadow:0 14px 34px rgba(0,0,0,.18); }
.nav-toggle { display:none; width:42px; height:42px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.22); }
.nav-toggle span { display:block; width:18px; height:2px; margin:5px auto; border-radius:99px; background:var(--text); }

.hero { padding:128px 0 104px; }
.hero-grid { display:grid; grid-template-columns: 1fr .86fr; gap:54px; align-items:center; }
.hero-copy { margin-top:26px; max-width:665px; font-size:clamp(18px,2vw,24px); line-height:1.48; }
.gradient-text { background:linear-gradient(135deg,var(--text),var(--accent) 44%,#7dd3fc 86%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-actions,.action-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.button {
  min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 20px;
  border-radius:999px; font-weight:830; border:1px solid var(--line); background:rgba(255,255,255,.30); color:var(--text);
  backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 12px 30px rgba(0,0,0,.08); transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.button:hover { transform:translateY(-2px); background:rgba(255,255,255,.48); box-shadow:0 18px 42px rgba(0,0,0,.12); }
.button.primary { color:#15100a; background:linear-gradient(135deg,#ffe1a8,#ff9500 72%,#ff6a00); border-color:rgba(255,138,0,.44); }
.hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:34px; max-width:640px; }
.stat-pill { padding:16px; border-radius:22px; }
.stat-pill strong { display:block; font-size:21px; letter-spacing:-.03em; }
.stat-pill span { color:var(--text-soft); font-size:13px; }


.phone-stage { position:relative; min-height:660px; display:grid; place-items:center; perspective:1200px; }
.phone-aura {
  position:absolute; width:min(580px,96vw); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,138,0,.16), transparent 56%),
    conic-gradient(from 180deg, rgba(255,138,0,.10), rgba(56,189,248,.22), rgba(139,92,246,.22), rgba(255,138,0,.10));
  filter:blur(12px); opacity:.9; transform:translateY(22px);
}
.phone-model {
  position:relative; width:min(324px,82vw); height:654px; border-radius:56px; padding:14px;
  transform:rotateY(-16deg) rotateX(7deg) rotateZ(1.5deg);
  background:linear-gradient(145deg,#303746,#0c0f15 46%,#566070);
  box-shadow:48px 58px 88px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.18), inset 10px 0 18px rgba(255,255,255,.10);
  animation:floatPhone 7s ease-in-out infinite;
}
.phone-screen {
  height:100%; border-radius:43px; overflow:hidden; position:relative; color:white; padding:20px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,149,0,.42), transparent 18rem),
    radial-gradient(circle at 86% 72%, rgba(56,189,248,.30), transparent 17rem),
    linear-gradient(180deg,#141a25,#0b111b);
}
.phone-screen::before {
  content:""; position:absolute; left:50%; top:11px; transform:translateX(-50%);
  width:92px; height:27px; border-radius:999px; background:#05070b; z-index:5;
}
.phone-ui { position:relative; z-index:2; padding-top:42px; padding-bottom:86px; }
.phone-ui h3 { font-size:31px; margin-bottom:4px; letter-spacing:-.04em; }
.phone-ui p { color:rgba(255,255,255,.62); font-size:13px; }
.concept-badge {
  display:inline-flex; align-items:center; min-height:28px; padding:0 10px; margin:0 0 18px;
  border-radius:999px; font-size:11px; font-weight:760; letter-spacing:.02em; text-transform:uppercase;
  color:rgba(255,255,255,.70); background:rgba(255,255,255,.095); border:1px solid rgba(255,255,255,.12);
}
.concept-panel {
  margin:22px 0 16px; padding:18px; border-radius:26px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(170%);
}
.concept-panel-header { display:grid; grid-template-columns:54px 1fr; gap:13px; align-items:center; margin-bottom:17px; }
.app-mini-icon { width:54px; height:54px; border-radius:16px; object-fit:cover; box-shadow:0 12px 30px rgba(0,0,0,.22); }
.concept-lines { display:grid; gap:8px; }
.concept-line { height:10px; border-radius:999px; background:rgba(255,255,255,.18); }
.concept-line.short { width:64%; }
.concept-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.concept-tile {
  min-height:78px; border-radius:20px; padding:13px;
  background:linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.065));
  border:1px solid rgba(255,255,255,.10);
}
.concept-tile strong { display:block; font-size:14px; color:white; }
.concept-tile span { display:block; margin-top:4px; color:rgba(255,255,255,.52); font-size:11px; }
.phone-dock {
  position:absolute; left:22px; right:22px; bottom:8px; height:64px; border-radius:28px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(18px) saturate(170%);
  display:grid; grid-template-columns:repeat(4,1fr); place-items:center;
}
.phone-dock span { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.64); }
.phone-shadow { position:absolute; bottom:5px; width:360px; height:36px; border-radius:50%; background:rgba(0,0,0,.22); filter:blur(20px); transform:rotateX(70deg); }

.section { padding:112px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:36px; margin-bottom:40px; }
.section-head p { max-width:520px; font-size:18px; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.feature-card,.category-card,.game-card,.link-card { border-radius:34px; padding:36px; transition:transform .22s ease, box-shadow .22s ease; }
.feature-card:hover,.category-card:hover,.game-card:hover,.link-card:hover { transform:translateY(-7px); box-shadow:var(--shadow); }
.icon-bubble { width:58px; height:58px; display:grid; place-items:center; border-radius:21px; background:radial-gradient(circle at 28% 18%, rgba(255,255,255,.60), transparent 34%), linear-gradient(135deg, rgba(255,138,0,.28), rgba(16,20,28,.18)); color:var(--accent); margin-bottom:22px; font-size:18px; font-weight:830; letter-spacing:-.02em; }
.category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.category-card { min-height:300px; display:flex; flex-direction:column; justify-content:space-between; }
.category-orb { width:72px; height:72px; border-radius:25px; display:block; background:
  radial-gradient(circle at 30% 20%, rgba(255,255,255,.72), transparent 32%),
  linear-gradient(135deg, rgba(255,138,0,.92), rgba(16,20,28,.86) 64%, rgba(30,91,255,.62)); }
.category-meta p { font-weight:750; color:var(--text-faint); margin-top:3px; }
.card-arrow { margin-top:18px; color:var(--text); font-weight:820; }
.link-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.link-card { min-height:190px; }
.link-card p { margin-top:8px; }
.cta-band { border-radius:42px; padding:54px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; }
.cta-band p { margin-top:12px; max-width:620px; }

.page-hero { padding:104px 0 54px; }
.page-hero p { max-width:760px; margin-top:18px; font-size:20px; }
.games-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:32px 0 72px; }
.game-card { min-height:190px; display:block; }
.game-card h3 { font-size:21px; }
.game-card p { margin-top:8px; font-size:15px; }
.game-dot { width:12px; height:12px; border-radius:50%; display:block; margin-bottom:20px; background:linear-gradient(135deg,var(--accent),var(--blue)); box-shadow:0 0 0 8px rgba(255,138,0,.10); }
.text-card { max-width:860px; border-radius:34px; padding:34px; }
.text-card h2 { font-size:clamp(26px,3vw,34px); margin-top:28px; }
.text-card h2:first-child { margin-top:0; }
.text-card p { margin-top:8px; }
.faq-list { display:grid; gap:14px; }
.faq-item { border-radius:26px; padding:24px; }

.site-footer { padding:60px 0 32px; }
.footer-shell { border-radius:38px; padding:42px; display:grid; grid-template-columns:.9fr 1.5fr; gap:40px; }
.footer-brand p { margin-top:13px; max-width:320px; }
.subtle-link { display:inline-flex; margin-top:16px; color:var(--text-soft); font-weight:740; }
.footer-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer-columns h3 { font-size:15px; margin-bottom:12px; color:var(--text); letter-spacing:-.01em; }
.footer-columns a { display:block; color:var(--text-soft); padding:4px 0; }
.footer-bottom { padding-top:18px; text-align:center; color:var(--text-faint); font-size:13px; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes floatPhone {
  0%,100% { transform:rotateY(-16deg) rotateX(7deg) rotateZ(1.5deg) translateY(0); }
  50% { transform:rotateY(-13deg) rotateX(5deg) rotateZ(.5deg) translateY(-13px); }
}
@media (max-width:980px) {
  .hero-grid { grid-template-columns:1fr; }
  .phone-stage { min-height:590px; }
  .card-grid,.link-grid,.games-grid,.category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cta-band { grid-template-columns:1fr; }
  .footer-shell { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .container { width:min(100% - 26px, var(--max)); }
  .nav-inner { min-height:70px; }
  .nav-toggle { display:inline-block; }
  .nav-store { display:none; }
  .nav-links { position:fixed; top:78px; left:14px; right:14px; display:none; flex-direction:column; align-items:stretch; border-radius:26px; padding:12px; box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:13px 15px; }
  h1 { font-size:clamp(44px,14vw,72px); }
  .hero { padding:62px 0 42px; }
  .hero-stats { grid-template-columns:1fr; }
  .phone-model { width:min(286px,78vw); height:590px; transform:none; }
  .phone-stage { min-height:610px; }
  .card-grid,.category-grid,.link-grid,.games-grid { grid-template-columns:1fr; }
  .section-head { display:block; }
  .section-head p { margin-top:14px; }
  .footer-columns { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:1ms !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}


/* v7 cleanup: remove decorative blob objects and make the card surface carry the gradient itself */
.category-card {
  min-height: 320px;
  justify-content: flex-end;
  gap: 28px;
  color: #ffffff;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .46), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .22), transparent 38%),
    linear-gradient(135deg, rgba(255, 138, 0, .30), rgba(24, 31, 48, .76) 42%, rgba(10, 14, 22, .92));
  border-color: rgba(255, 255, 255, .20);
  box-shadow: 0 28px 74px rgba(5, 10, 20, .20), inset 0 1px 0 rgba(255,255,255,.18);
}
.category-card::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 38%),
    radial-gradient(circle at 92% 14%, rgba(255,255,255,.10), transparent 18rem);
  opacity: .55;
}
.category-card::after {
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.24),
    inset -1px -1px 0 rgba(255,255,255,.06);
}
.category-card .category-orb {
  display: none;
}
.category-card h3 {
  color: #ffffff;
}
.category-card p,
.category-card .category-meta p {
  color: rgba(255,255,255,.72);
}
.category-card .card-arrow {
  color: #ffffff;
  margin-top: 26px;
}

/* The cards should look like large calm surfaces, not objects placed on top of surfaces. */
.feature-card,
.link-card,
.game-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,.22));
}
@media (prefers-color-scheme: dark) {
  .feature-card,
  .link-card,
  .game-card {
    background:
      radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .16), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.115), rgba(255,255,255,.045));
  }
}
.icon-bubble,
.game-dot {
  display: none;
}
.feature-card h3,
.link-card h3,
.game-card h3 {
  margin-bottom: 14px;
}

/* More premium breathing room after removing decorative objects. */
.feature-card,
.link-card,
.game-card,
.category-card {
  padding: 42px;
}
.card-grid,
.link-grid {
  gap: 30px;
}
.category-grid {
  gap: 32px;
}
.games-grid {
  gap: 26px;
}

/* Keep the same orange to dark-blue design language across the phone preview. */
.concept-panel,
.concept-tile,
.phone-dock {
  background:
    linear-gradient(135deg, rgba(255,138,0,.14), rgba(255,255,255,.07));
}
.phone-screen {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,138,0,.46), transparent 17rem),
    radial-gradient(circle at 96% 92%, rgba(30,91,255,.28), transparent 17rem),
    linear-gradient(180deg,#161d29,#0a101a);
}

/* Tone down global noise so the gradient cards become the main visual element. */
body::after {
  opacity: .28;
}
@media (prefers-color-scheme: dark) {
  body::after {
    opacity: .18;
  }
}

/* On small screens, keep the minimal premium feel. */
@media (max-width:720px) {
  .feature-card,
  .link-card,
  .game-card,
  .category-card {
    padding: 32px;
  }
  .category-card {
    min-height: 280px;
  }
}


/* v8 polish pass: one consistent orange-to-deep-blue visual system,
   fewer separate objects, and a smoothly animated navigation selector. */

/* Animated navigation selector */
.nav-links {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --nav-pill-x: 7px;
  --nav-pill-w: 0px;
}

.nav-links::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 7px;
  left: 0;
  width: var(--nav-pill-w);
  height: calc(100% - 14px);
  border-radius: 999px;
  transform: translateX(var(--nav-pill-x));
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.40), rgba(255,255,255,.15)),
    rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 12px 28px rgba(10,20,35,.10);
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  transition:
    transform 460ms cubic-bezier(.22, 1, .36, 1),
    width 460ms cubic-bezier(.22, 1, .36, 1),
    opacity 220ms ease,
    background 220ms ease;
}

.nav-links.has-indicator::before {
  opacity: 1;
}

.nav-links a {
  position: relative;
  z-index: 1;
}

.nav-links.has-indicator a:hover,
.nav-links.has-indicator a.active,
.nav-links.has-indicator a[aria-current="page"] {
  background: transparent;
  box-shadow: none;
}

@media (prefers-color-scheme: dark) {
  .nav-links::before {
    background:
      linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.045)),
      rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.11);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 14px 34px rgba(0,0,0,.22);
  }
}

@media (max-width:720px) {
  .nav-links::before {
    display: none;
  }

  .nav-links.has-indicator a.active,
  .nav-links.has-indicator a[aria-current="page"] {
    background: rgba(255,255,255,.16);
  }
}

/* Make large cards themselves the visual object. No separate blobs, dots or badges. */
.category-card,
.feature-card,
.link-card,
.game-card,
.cta-band,
.text-card,
.faq-item {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,138,0,.30), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(30,91,255,.14), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.16));
  border-color: rgba(255,255,255,.28);
}

.category-card {
  min-height: 330px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,138,0,.46), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(30,91,255,.22), transparent 42%),
    linear-gradient(135deg, rgba(255,138,0,.30), rgba(31,42,68,.78) 44%, rgba(10,14,22,.94));
  color: #fff;
}

.category-card .category-orb,
.icon-bubble,
.game-dot {
  display: none !important;
}

.category-card h3,
.category-card .card-arrow {
  color: #fff;
}

.category-card p,
.category-card .category-meta p {
  color: rgba(255,255,255,.72);
}

@media (prefers-color-scheme: dark) {
  .feature-card,
  .link-card,
  .game-card,
  .cta-band,
  .text-card,
  .faq-item {
    background:
      radial-gradient(circle at 0% 0%, rgba(255,138,0,.20), transparent 36%),
      radial-gradient(circle at 100% 100%, rgba(30,91,255,.16), transparent 42%),
      linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.040));
  }

  .category-card {
    background:
      radial-gradient(circle at 0% 0%, rgba(255,138,0,.40), transparent 36%),
      radial-gradient(circle at 100% 100%, rgba(30,91,255,.20), transparent 42%),
      linear-gradient(135deg, rgba(255,138,0,.22), rgba(31,42,68,.72) 44%, rgba(9,12,20,.94));
  }
}

/* More spacious, less crowded layouts. */
.hero-grid {
  gap: 74px;
}

.section {
  padding: 124px 0;
}

.section-head {
  margin-bottom: 46px;
}

.card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}

.category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
}

.link-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.games-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 34px 0 82px;
}

.feature-card,
.category-card,
.link-card,
.game-card {
  padding: 46px;
}

.feature-card h3,
.category-card h3,
.link-card h3,
.game-card h3 {
  margin-bottom: 16px;
}

.category-card .card-arrow {
  margin-top: 32px;
}

/* Phone preview: lower dock, cleaner lower spacing, less app-screenshot illusion. */
.phone-ui {
  padding-bottom: 104px;
}

.phone-dock {
  bottom: 7px;
  height: 58px;
  left: 28px;
  right: 28px;
  background:
    linear-gradient(135deg, rgba(255,138,0,.13), rgba(255,255,255,.055));
}

.concept-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,138,0,.18), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}

.concept-tile {
  background:
    linear-gradient(135deg, rgba(255,138,0,.10), rgba(255,255,255,.055));
}

.concept-badge {
  color: rgba(255,255,255,.68);
}

/* Reduce decorative page noise so the cards and nav feel more deliberate. */
body::after {
  opacity: .16;
}

body::before {
  opacity: .36;
}

@media (prefers-color-scheme: dark) {
  body::after {
    opacity: .10;
  }

  body::before {
    opacity: .18;
  }
}

@media (max-width: 980px) {
  .card-grid,
  .category-grid,
  .link-grid,
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-grid {
    gap: 54px;
  }
}

@media (max-width: 720px) {
  .section {
    padding: 88px 0;
  }

  .card-grid,
  .category-grid,
  .link-grid,
  .games-grid {
    grid-template-columns: 1fr;
  }

  .feature-card,
  .category-card,
  .link-card,
  .game-card {
    padding: 34px;
  }

  .category-card {
    min-height: 290px;
  }

  .phone-ui {
    padding-bottom: 96px;
  }
}


/* v9 full-system cleanup
   Goal: no grey placeholder-looking panels, no floating decorative blobs,
   one calm orange-to-deep-blue material language across the whole site. */

/* Global design language: calmer, more exclusive, less object clutter. */
:root {
  --brand-gradient:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .36), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .20), transparent 44%),
    linear-gradient(135deg, rgba(255, 138, 0, .22), rgba(31, 42, 68, .72) 46%, rgba(10, 14, 22, .92));
  --brand-gradient-soft:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .22), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .13), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,.18));
}

/* Stop the background grid from fighting the cards. */
body::after {
  opacity: .08 !important;
}
body::before {
  opacity: .26 !important;
}

/* Every glass surface now uses the same visual language, instead of grey panels. */
.glass-panel,
.stat-pill,
.feature-card,
.category-card,
.link-card,
.game-card,
.cta-band,
.text-card,
.faq-item,
.footer-shell,
.download-inner,
.explore-item {
  background: var(--brand-gradient-soft) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow:
    0 30px 90px rgba(5, 10, 20, .15),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.06) !important;
}

/* Dark mode uses the same gradient direction, just with lower brightness. */
@media (prefers-color-scheme: dark) {
  .glass-panel,
  .stat-pill,
  .feature-card,
  .category-card,
  .link-card,
  .game-card,
  .cta-band,
  .text-card,
  .faq-item,
  .footer-shell,
  .download-inner,
  .explore-item {
    background:
      radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .24), transparent 38%),
      radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .16), transparent 44%),
      linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
    border-color: rgba(255,255,255,.13) !important;
  }
}

/* Category cards are the most important surfaces, so they get the strongest version. */
.category-card {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  min-height: 340px !important;
}
.category-card h3,
.category-card .card-arrow {
  color: #ffffff !important;
}
.category-card p,
.category-card .category-meta p {
  color: rgba(255,255,255,.74) !important;
}

/* Remove all decorative micro-objects. The gradient belongs to the large surface. */
.category-orb,
.icon-bubble,
.game-dot,
.small-label::before {
  display: none !important;
}
.small-label {
  padding: 0 15px !important;
}

/* Give all cards a more editorial, premium amount of breathing room. */
.section {
  padding: 132px 0 !important;
}
.page-hero {
  padding: 118px 0 64px !important;
}
.section-head {
  margin-bottom: 54px !important;
}
.hero-grid {
  gap: 90px !important;
}
.card-grid,
.link-grid,
.category-grid,
.games-grid {
  gap: 38px !important;
}
.feature-card,
.category-card,
.link-card,
.game-card {
  padding: 48px !important;
  border-radius: 38px !important;
}
.text-card,
.faq-item,
.cta-band,
.footer-shell {
  border-radius: 40px !important;
}
.game-card {
  min-height: 210px !important;
}
.link-card {
  min-height: 205px !important;
}

/* Layout: fewer panels per row makes it calmer and more exclusive. */
.category-grid,
.link-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.games-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Larger surfaces should not look like buttons with objects. Keep hover subtle. */
.feature-card:hover,
.category-card:hover,
.game-card:hover,
.link-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 36px 110px rgba(5, 10, 20, .20),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* Smooth moving selector in nav. This is the only moving “object” that is intentionally interactive. */
.nav-links {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  --nav-pill-x: 7px;
  --nav-pill-w: 0px;
}
.nav-links::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 7px !important;
  left: 0 !important;
  width: var(--nav-pill-w) !important;
  height: calc(100% - 14px) !important;
  border-radius: 999px !important;
  transform: translateX(var(--nav-pill-x)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .22), transparent 50%),
    linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.14)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 12px 30px rgba(10, 20, 35, .11) !important;
  backdrop-filter: blur(24px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(210%) !important;
  transition:
    transform 520ms cubic-bezier(.22, 1, .36, 1),
    width 520ms cubic-bezier(.22, 1, .36, 1),
    opacity 220ms ease !important;
}
.nav-links.has-indicator::before {
  opacity: 1 !important;
}
.nav-links a {
  position: relative !important;
  z-index: 1 !important;
}
.nav-links.has-indicator a:hover,
.nav-links.has-indicator a.active,
.nav-links.has-indicator a[aria-current="page"] {
  background: transparent !important;
  box-shadow: none !important;
}
@media (prefers-color-scheme: dark) {
  .nav-links::before {
    background:
      radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .18), transparent 50%),
      linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04)) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 14px 34px rgba(0,0,0,.24) !important;
  }
}

/* Phone preview: keep it clearly a visual preview, not a screenshot. */
.phone-screen {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,138,0,.46), transparent 17rem),
    radial-gradient(circle at 96% 92%, rgba(30,91,255,.24), transparent 17rem),
    linear-gradient(180deg,#161d29,#0a101a) !important;
}
.concept-panel,
.concept-tile,
.phone-dock {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,138,0,.18), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.055)) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.phone-ui {
  padding-bottom: 114px !important;
}
.phone-dock {
  bottom: 6px !important;
  height: 58px !important;
  left: 30px !important;
  right: 30px !important;
}

/* Responsive calmness */
@media (max-width: 980px) {
  .hero-grid {
    gap: 64px !important;
  }
  .card-grid,
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .category-grid,
  .link-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 720px) {
  .section {
    padding: 92px 0 !important;
  }
  .page-hero {
    padding: 86px 0 46px !important;
  }
  .card-grid,
  .link-grid,
  .category-grid,
  .games-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .feature-card,
  .category-card,
  .link-card,
  .game-card {
    padding: 34px !important;
    border-radius: 30px !important;
  }
  .category-card {
    min-height: 300px !important;
  }
  .nav-links::before {
    display: none !important;
  }
  .nav-links.has-indicator a.active,
  .nav-links.has-indicator a[aria-current="page"] {
    background: rgba(255,255,255,.14) !important;
  }
}


/* v10 phone preview fixes: real Juvo wording, correct category counts,
   and a bottom segmented bar using matching category glyphs. */
.concept-panel {
  margin-top: 24px !important;
}

.concept-tile {
  min-height: 82px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.concept-tile strong {
  font-size: 13.5px !important;
  line-height: 1.05 !important;
}

.concept-tile span {
  font-size: 10.5px !important;
}

.phone-dock {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
  align-items: center !important;
  place-items: stretch !important;
  padding: 5px !important;
  bottom: 6px !important;
  height: 76px !important;
  left: 18px !important;
  right: 18px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.055)),
    rgba(255,255,255,.08) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
}

.phone-dock .dock-item {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: 30px 1fr !important;
  place-items: center !important;
  gap: 2px !important;
  border-radius: 22px !important;
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
}

.phone-dock .dock-item.active {
  color: var(--accent-2) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.19), rgba(255,255,255,.055)) !important;
}

.phone-dock svg {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  fill: currentColor !important;
}

.phone-dock b {
  display: block !important;
  max-width: 100% !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
  letter-spacing: -.02em !important;
}

.phone-dock span {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Keep enough lower padding so the dock never overlaps the concept cards. */
.phone-ui {
  padding-bottom: 122px !important;
}


/* v11 refinement:
   Make the full top navigation layer more transparent, less blurry,
   and fade more smoothly into the page. The rounded selector remains
   readable, but the whole bar no longer feels like a heavy blurred sheet. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
}

.nav-glass {
  height: 185% !important;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.075) 42%,
      rgba(255,255,255,.025) 68%,
      rgba(255,255,255,0) 100%
    ) !important;
  backdrop-filter: blur(18px) saturate(160%) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(1.02) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 48%,
    rgba(0,0,0,.62) 68%,
    transparent 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 48%,
    rgba(0,0,0,.62) 68%,
    transparent 100%
  ) !important;
}

.nav-glass::after {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,138,0,.105), transparent 18rem),
    radial-gradient(circle at 84% 0%, rgba(30,91,255,.075), transparent 18rem),
    linear-gradient(to bottom, rgba(255,255,255,.055), transparent 65%) !important;
}

@media (prefers-color-scheme: dark) {
  .nav-glass {
    background:
      linear-gradient(
        to bottom,
        rgba(15,19,28,.24) 0%,
        rgba(15,19,28,.105) 42%,
        rgba(15,19,28,.035) 68%,
        rgba(15,19,28,0) 100%
      ) !important;
    backdrop-filter: blur(18px) saturate(160%) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(1.02) !important;
    border-bottom-color: rgba(255,255,255,.055) !important;
  }

  .nav-glass::after {
    background:
      radial-gradient(circle at 18% 0%, rgba(255,138,0,.075), transparent 18rem),
      radial-gradient(circle at 84% 0%, rgba(30,91,255,.055), transparent 18rem),
      linear-gradient(to bottom, rgba(255,255,255,.025), transparent 65%) !important;
  }
}

/* The inner rounded nav container also becomes lighter and less blurred. */
.nav-links {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.13) !important;
  backdrop-filter: blur(14px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(165%) !important;
}

@media (prefers-color-scheme: dark) {
  .nav-links {
    background: rgba(255,255,255,.020) !important;
    border-color: rgba(255,255,255,.060) !important;
  }
}

/* The animated selector stays glassy but uses less blur so it feels crisp. */
.nav-links::before {
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,138,0,.16), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.10)) !important;
  border-color: rgba(255,255,255,.18) !important;
}

@media (prefers-color-scheme: dark) {
  .nav-links::before {
    background:
      radial-gradient(circle at 0% 0%, rgba(255,138,0,.13), transparent 48%),
      linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
    border-color: rgba(255,255,255,.085) !important;
  }
}

/* Smooth transition below the navigation so it fades into the page instead of ending abruptly. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  height: 86px;
  pointer-events: none;
  z-index: -2;
  background:
    linear-gradient(to bottom, rgba(248,250,252,.18), rgba(248,250,252,0)),
    radial-gradient(circle at 20% 0%, rgba(255,138,0,.055), transparent 22rem),
    radial-gradient(circle at 82% 0%, rgba(30,91,255,.040), transparent 22rem);
}

@media (prefers-color-scheme: dark) {
  .site-header::after {
    background:
      linear-gradient(to bottom, rgba(16,20,28,.18), rgba(16,20,28,0)),
      radial-gradient(circle at 20% 0%, rgba(255,138,0,.040), transparent 22rem),
      radial-gradient(circle at 82% 0%, rgba(30,91,255,.032), transparent 22rem);
  }
}

/* Keep all major panels on the orange-to-deep-blue system; no grey fallback panels. */
.glass-panel,
.stat-pill,
.feature-card,
.category-card,
.link-card,
.game-card,
.cta-band,
.text-card,
.faq-item,
.footer-shell {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .24), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .14), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.16)) !important;
}

@media (prefers-color-scheme: dark) {
  .glass-panel,
  .stat-pill,
  .feature-card,
  .category-card,
  .link-card,
  .game-card,
  .cta-band,
  .text-card,
  .faq-item,
  .footer-shell {
    background:
      radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .20), transparent 38%),
      radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .14), transparent 44%),
      linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  }
}

.category-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .42), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .22), transparent 44%),
    linear-gradient(135deg, rgba(255,138,0,.26), rgba(31,42,68,.74) 46%, rgba(10,14,22,.92)) !important;
}


/* v12: cleaner iPhone glyphs and truly apply the gradient system to every text-like panel. */

/* Make the bottom dock icons cleaner and closer to iOS/SF-symbol style. */
.phone-dock {
  padding: 6px !important;
  gap: 5px !important;
}

.phone-dock .dock-item {
  grid-template-rows: 31px 14px !important;
  gap: 3px !important;
}

.phone-dock svg {
  width: 30px !important;
  height: 30px !important;
  fill: currentColor !important;
  stroke: none !important;
  filter: none !important;
}

.phone-dock .dock-item.active {
  color: var(--accent-2) !important;
}

.phone-dock .dock-item:not(.active) {
  color: rgba(255,255,255,.70) !important;
}

.phone-dock b {
  font-size: 9.8px !important;
  font-weight: 760 !important;
}

/* Correct the small dark cutouts inside the gamepad for dark blue screens. */
.phone-dock .glyph-gamepad path[fill],
.phone-dock .glyph-gamepad circle[fill] {
  fill: rgba(9, 12, 20, .92) !important;
}

/* Global gradient pass for every text panel / card surface, including any leftover grey boxes.
   This intentionally targets common content containers too, so nothing falls back to grey. */
.glass-panel,
.stat-pill,
.feature-card,
.category-card,
.link-card,
.game-card,
.cta-band,
.text-card,
.faq-item,
.footer-shell,
.concept-panel,
.concept-tile,
.continue-card,
.phone-dock,
.support-inner,
.privacy-inner,
.screenshots-inner,
.download-inner,
.explore-item {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .25), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .14), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.16)) !important;
  border-color: rgba(255,255,255,.22) !important;
}

@media (prefers-color-scheme: dark) {
  .glass-panel,
  .stat-pill,
  .feature-card,
  .category-card,
  .link-card,
  .game-card,
  .cta-band,
  .text-card,
  .faq-item,
  .footer-shell,
  .concept-panel,
  .concept-tile,
  .continue-card,
  .phone-dock,
  .support-inner,
  .privacy-inner,
  .screenshots-inner,
  .download-inner,
  .explore-item {
    background:
      radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .20), transparent 40%),
      radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .14), transparent 44%),
      linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
    border-color: rgba(255,255,255,.13) !important;
  }
}

/* Text pages without obvious card styling still get proper rounded gradient surfaces. */
.support-inner,
.privacy-inner,
.screenshots-inner,
.download-inner,
.explore-item {
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 38px !important;
  padding: 42px !important;
  backdrop-filter: blur(28px) saturate(185%) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(28px) saturate(185%) brightness(1.02) !important;
  box-shadow:
    0 30px 90px rgba(5, 10, 20, .14),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Category cards remain the strongest brand gradient. */
.category-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .42), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .22), transparent 44%),
    linear-gradient(135deg, rgba(255,138,0,.26), rgba(31,42,68,.74) 46%, rgba(10,14,22,.92)) !important;
}

/* If a page still has a simple paragraph-only container, it should not visually read as grey. */
.text-card p,
.faq-item p,
.feature-card p,
.link-card p,
.game-card p,
.cta-band p {
  color: var(--text-soft);
}

.category-card p,
.category-card .category-meta p {
  color: rgba(255,255,255,.74) !important;
}

@media (max-width:720px) {
  .support-inner,
  .privacy-inner,
  .screenshots-inner,
  .download-inner,
  .explore-item {
    padding: 32px !important;
    border-radius: 30px !important;
  }
}


/* v13: final gradient sweep + cleaner iPhone tab symbols */

/* Apply the orange-to-deep-blue material to every text/card panel on the site.
   This is intentionally broad so no text card falls back to grey. */
:is(
  .glass-panel,
  .stat-pill,
  .feature-card,
  .category-card,
  .link-card,
  .game-card,
  .cta-band,
  .text-card,
  .faq-item,
  .footer-shell,
  .concept-panel,
  .concept-tile,
  .phone-dock,
  .support-inner,
  .privacy-inner,
  .screenshots-inner,
  .download-inner,
  .explore-item,
  .continue-card
) {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .28), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .16), transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.15)) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow:
    0 30px 90px rgba(5, 10, 20, .15),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.055) !important;
}

@media (prefers-color-scheme: dark) {
  :is(
    .glass-panel,
    .stat-pill,
    .feature-card,
    .category-card,
    .link-card,
    .game-card,
    .cta-band,
    .text-card,
    .faq-item,
    .footer-shell,
    .concept-panel,
    .concept-tile,
    .phone-dock,
    .support-inner,
    .privacy-inner,
    .screenshots-inner,
    .download-inner,
    .explore-item,
    .continue-card
  ) {
    background:
      radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .22), transparent 40%),
      radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .16), transparent 46%),
      linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
    border-color: rgba(255,255,255,.13) !important;
  }
}

/* Stronger brand treatment for the main category cards. */
.category-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .44), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .24), transparent 46%),
    linear-gradient(135deg, rgba(255,138,0,.27), rgba(31,42,68,.74) 46%, rgba(10,14,22,.92)) !important;
  color: #fff !important;
}

/* Support / privacy containers should look like cards even if the page markup is simple. */
.support-inner,
.privacy-inner,
.screenshots-inner,
.download-inner,
.explore-item {
  border-radius: 38px !important;
  padding: 42px !important;
  backdrop-filter: blur(26px) saturate(180%) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.02) !important;
}

/* Clean phone dock: simple, balanced glyphs instead of over-detailed/scuffed icons. */
.phone-dock {
  height: 78px !important;
  left: 17px !important;
  right: 17px !important;
  bottom: 6px !important;
  padding: 6px !important;
  gap: 5px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  place-items: stretch !important;
  border-radius: 29px !important;
}

.phone-dock .dock-item {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: 32px 14px !important;
  place-items: center !important;
  gap: 3px !important;
  padding: 5px 2px 4px !important;
  border-radius: 22px !important;
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
}

.phone-dock .dock-item.active {
  color: var(--accent-2) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 138, 0, .22), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.050)) !important;
}

.phone-dock .dock-icon {
  width: 31px !important;
  height: 31px !important;
  display: block !important;
  overflow: visible !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 5.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
}

.phone-dock .dock-club {
  fill: currentColor !important;
  stroke: none !important;
}

.phone-dock .dock-people {
  fill: currentColor !important;
  stroke: none !important;
}

.phone-dock b {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9.7px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
}

/* Override any legacy dot styles that still target phone-dock spans. */
.phone-dock > span {
  width: auto !important;
  height: auto !important;
  border-radius: 22px !important;
}

/* The preview needs enough lower padding for the bigger, cleaner tab bar. */
.phone-ui {
  padding-bottom: 126px !important;
}

@media (max-width:720px) {
  .support-inner,
  .privacy-inner,
  .screenshots-inner,
  .download-inner,
  .explore-item {
    padding: 32px !important;
    border-radius: 30px !important;
  }
}


/* v14 interaction polish:
   Phone preview elements react to the mouse.
   Existing hover elements no longer lift upward; they glow or subtly scale instead. */

/* Universal interaction tuning */
.feature-card,
.category-card,
.game-card,
.link-card,
.stat-pill,
.faq-item,
.text-card,
.cta-band,
.footer-shell,
.button,
.nav-store,
.store-button,
.concept-panel,
.concept-tile,
.phone-dock .dock-item,
.app-mini-icon {
  transition:
    transform 260ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 260ms cubic-bezier(.22, 1, .36, 1),
    border-color 260ms ease,
    background 260ms ease,
    filter 260ms ease,
    opacity 260ms ease !important;
}

/* Cards and panels: no more jump upward. Use subtle scale + glow instead. */
.feature-card:hover,
.category-card:hover,
.game-card:hover,
.link-card:hover,
.stat-pill:hover,
.faq-item:hover,
.text-card:hover,
.cta-band:hover {
  transform: scale(1.012) !important;
  border-color: rgba(255, 255, 255, .36) !important;
  box-shadow:
    0 34px 105px rgba(5, 10, 20, .20),
    0 0 0 1px rgba(255, 138, 0, .08),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

@media (prefers-color-scheme: dark) {
  .feature-card:hover,
  .category-card:hover,
  .game-card:hover,
  .link-card:hover,
  .stat-pill:hover,
  .faq-item:hover,
  .text-card:hover,
  .cta-band:hover {
    border-color: rgba(255, 255, 255, .20) !important;
    box-shadow:
      0 34px 105px rgba(0, 0, 0, .34),
      0 0 0 1px rgba(255, 138, 0, .10),
      inset 0 1px 0 rgba(255,255,255,.14) !important;
  }
}

/* Buttons: press/premium glow instead of moving upward. */
.button:hover,
.nav-store:hover,
.store-button:hover {
  transform: scale(1.025) !important;
  filter: saturate(1.06) brightness(1.03);
  box-shadow:
    0 18px 48px rgba(5, 10, 20, .16),
    0 0 0 1px rgba(255, 138, 0, .10) !important;
}

/* Phone preview: make the fake UI feel semi-interactive. */
.concept-panel {
  cursor: default;
}

.concept-tile,
.phone-dock .dock-item,
.app-mini-icon {
  cursor: pointer;
}

.concept-panel:hover {
  transform: scale(1.006) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.concept-tile:hover {
  transform: scale(1.035) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .30), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.075)) !important;
  border-color: rgba(255, 255, 255, .20) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.phone-dock .dock-item:hover {
  transform: scale(1.055) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 138, 0, .22), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.045)) !important;
}

.phone-dock .dock-item.active:hover {
  color: var(--accent-2) !important;
  transform: scale(1.06) !important;
}

.phone-dock .dock-item:hover svg {
  filter: drop-shadow(0 0 10px rgba(255, 138, 0, .26));
}

.app-mini-icon:hover {
  transform: scale(1.06) !important;
  filter: saturate(1.08) brightness(1.04);
}

/* Make the phone preview itself gently react without breaking the 3D orientation. */
.phone-model {
  transition:
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 420ms cubic-bezier(.22, 1, .36, 1) !important;
}

.phone-stage:hover .phone-model {
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg) scale(1.012) !important;
  box-shadow:
    54px 66px 98px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 10px 0 18px rgba(255,255,255,.10) !important;
}

/* Disable float animation while hovering so the pointer response feels intentional. */
.phone-stage:hover .phone-model {
  animation-play-state: paused;
}

/* Any legacy upward hover transforms should be neutralized. */
.feature-card:hover,
.category-card:hover,
.game-card:hover,
.link-card:hover {
  translate: 0 0 !important;
}

/* Keyboard focus should also feel interactive. */
.feature-card:focus-visible,
.category-card:focus-visible,
.game-card:focus-visible,
.link-card:focus-visible,
.button:focus-visible,
.nav-store:focus-visible {
  outline: 2px solid rgba(255, 138, 0, .58);
  outline-offset: 4px;
  transform: scale(1.012) !important;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card:hover,
  .category-card:hover,
  .game-card:hover,
  .link-card:hover,
  .stat-pill:hover,
  .faq-item:hover,
  .text-card:hover,
  .cta-band:hover,
  .button:hover,
  .nav-store:hover,
  .store-button:hover,
  .concept-panel:hover,
  .concept-tile:hover,
  .phone-dock .dock-item:hover,
  .app-mini-icon:hover,
  .phone-stage:hover .phone-model {
    transform: none !important;
    animation: none !important;
  }
}


/* v15 hero refinement:
   The top hero label no longer appears as a heavy “cap” above the title.
   It is now a flat editorial eyebrow that supports the headline instead
   of visually sitting on top of it. */

.hero-eyebrow {
  display: block;
  width: fit-content;
  margin: 0 0 28px;
  padding: 0;
  color: var(--text-faint);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  display: none !important;
  content: none !important;
}

/* Give the title enough air now that the pill is gone. */
.hero h1 {
  margin-top: 0;
}

/* Keep the supporting stats, but make them feel separate from the headline,
   not like a second title cap. */
.hero-stats {
  margin-top: 40px !important;
}

/* On smaller screens the eyebrow should stay discreet and not form another
   visual block above the headline. */
@media (max-width: 720px) {
  .hero-eyebrow {
    margin-bottom: 22px;
    font-size: 12px;
    letter-spacing: .11em;
  }
}


/* v16 spacing refinement:
   Keep the exclusive/minimal feeling, but reduce overly large vertical gaps.
   The goal is tighter rhythm, not a cramped layout. */

.hero {
  padding-top: 104px !important;
  padding-bottom: 82px !important;
}

.hero-grid {
  gap: 64px !important;
}

.section {
  padding-top: 86px !important;
  padding-bottom: 86px !important;
}

.page-hero {
  padding-top: 88px !important;
  padding-bottom: 42px !important;
}

.section-head {
  margin-bottom: 34px !important;
}

.card-grid,
.category-grid,
.link-grid {
  gap: 26px !important;
}

.games-grid {
  gap: 22px !important;
  margin-top: 26px !important;
  margin-bottom: 50px !important;
}

.feature-card,
.category-card,
.link-card,
.game-card {
  padding: 38px !important;
}

.category-card {
  min-height: 286px !important;
}

.game-card {
  min-height: 176px !important;
}

.link-card {
  min-height: 176px !important;
}

.cta-band {
  padding: 42px !important;
}

.site-footer {
  padding-top: 42px !important;
  padding-bottom: 28px !important;
}

.footer-shell {
  padding: 34px !important;
}

.text-card,
.faq-item {
  padding: 32px !important;
}

.hero-stats {
  margin-top: 30px !important;
}

.hero-actions {
  margin-top: 28px !important;
}

/* Category section directly after the hero should feel connected, not detached. */
.hero + .section {
  padding-top: 70px !important;
}

/* Keep page sections compact but still premium on smaller screens. */
@media (max-width: 980px) {
  .hero {
    padding-top: 86px !important;
    padding-bottom: 66px !important;
  }

  .section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .page-hero {
    padding-top: 74px !important;
    padding-bottom: 34px !important;
  }

  .hero-grid {
    gap: 46px !important;
  }
}

@media (max-width: 720px) {
  .hero {
    padding-top: 70px !important;
    padding-bottom: 54px !important;
  }

  .section {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  .page-hero {
    padding-top: 60px !important;
    padding-bottom: 28px !important;
  }

  .section-head {
    margin-bottom: 24px !important;
  }

  .card-grid,
  .category-grid,
  .link-grid,
  .games-grid {
    gap: 18px !important;
  }

  .feature-card,
  .category-card,
  .link-card,
  .game-card {
    padding: 30px !important;
  }

  .category-card {
    min-height: 250px !important;
  }
}


/* v17 eyebrow cleanup:
   Remove the remaining rounded “roof/cap” pills from all pages.
   Page labels are now flat editorial text, so they support the headline
   instead of visually sitting on top of it. */

.page-eyebrow,
.hero-eyebrow {
  display: block !important;
  width: fit-content !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: var(--text-faint) !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.page-eyebrow::before,
.page-eyebrow::after,
.hero-eyebrow::before,
.hero-eyebrow::after {
  display: none !important;
  content: none !important;
}

/* Keep old small-label harmless if any future page still uses it. */
.small-label {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  color: var(--text-faint) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.small-label::before,
.small-label::after {
  display: none !important;
  content: none !important;
}

.cta-band .page-eyebrow,
.cta-band .small-label {
  margin-bottom: 18px !important;
}

/* Balance the tighter eyebrow with the reduced page spacing from v16. */
.page-hero h1,
.hero h1 {
  margin-top: 0 !important;
}


/* v19 FORCE BRAND GRADIENT ON EVERY CARD SURFACE */
:root {
  --juvo-card-gradient:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .46), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .26), transparent 46%),
    linear-gradient(135deg, rgba(255, 138, 0, .28), rgba(31, 42, 68, .76) 46%, rgba(8, 12, 20, .94));
  --juvo-card-gradient-hover:
    radial-gradient(circle at 0% 0%, rgba(255, 155, 34, .54), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(43, 110, 255, .30), transparent 48%),
    linear-gradient(135deg, rgba(255, 138, 0, .32), rgba(31, 42, 68, .78) 46%, rgba(8, 12, 20, .95));
}

/* Exact high-specificity sweep:
   every box with the same card/background language is forced onto the
   orange-to-deep-blue system. This catches all game-list boxes too. */
html body main .glass-panel,
html body main .stat-pill,
html body main .feature-card,
html body main .category-card,
html body main .game-card,
html body main .link-card,
html body main .faq-item,
html body main .text-card,
html body main .cta-band,
html body main .concept-panel,
html body main .concept-tile,
html body main .phone-dock,
html body main .download-inner,
html body main .explore-item,
html body main .support-inner,
html body main .privacy-inner,
html body footer .footer-shell,
html body .games-grid > .game-card,
html body .card-grid > .feature-card,
html body .link-grid > .link-card,
html body .category-grid > .category-card {
  color: #f5f8ff !important;
  background: var(--juvo-card-gradient) !important;
  background-color: #0b101a !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow:
    0 30px 88px rgba(4, 8, 16, .24),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.055) !important;
}

html body main .glass-panel:hover,
html body main .stat-pill:hover,
html body main .feature-card:hover,
html body main .category-card:hover,
html body main .game-card:hover,
html body main .link-card:hover,
html body main .faq-item:hover,
html body main .text-card:hover,
html body main .cta-band:hover,
html body main .concept-panel:hover,
html body main .concept-tile:hover,
html body .games-grid > .game-card:hover,
html body .card-grid > .feature-card:hover,
html body .link-grid > .link-card:hover,
html body .category-grid > .category-card:hover {
  background: var(--juvo-card-gradient-hover) !important;
  background-color: #0b101a !important;
  border-color: rgba(255, 255, 255, .32) !important;
  box-shadow:
    0 36px 104px rgba(4, 8, 16, .30),
    0 0 0 1px rgba(255, 138, 0, .10),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Text inside the forced-gradient cards must stay readable. */
html body main .glass-panel h2,
html body main .glass-panel h3,
html body main .stat-pill strong,
html body main .feature-card h3,
html body main .category-card h3,
html body main .game-card h3,
html body main .link-card h3,
html body main .faq-item h3,
html body main .text-card h2,
html body main .cta-band h2,
html body footer .footer-shell h3 {
  color: #f5f8ff !important;
}

html body main .glass-panel p,
html body main .glass-panel span,
html body main .stat-pill span,
html body main .feature-card p,
html body main .category-card p,
html body main .category-card .category-meta p,
html body main .game-card p,
html body main .link-card p,
html body main .faq-item p,
html body main .text-card p,
html body main .cta-band p,
html body footer .footer-shell p,
html body footer .footer-shell a {
  color: rgba(245, 248, 255, .74) !important;
}

/* Keep the strongest treatment for category cards and CTA surfaces. */
html body main .category-card,
html body main .cta-band {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .56), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(30, 91, 255, .28), transparent 48%),
    linear-gradient(135deg, rgba(255, 138, 0, .34), rgba(31, 42, 68, .78) 46%, rgba(8, 12, 20, .95)) !important;
}

/* Remove leftovers that made some game cards look like grey glass objects. */
html body main .game-card::before,
html body main .game-card::after,
html body main .feature-card::before,
html body main .feature-card::after,
html body main .link-card::before,
html body main .link-card::after,
html body main .faq-item::before,
html body main .faq-item::after,
html body main .text-card::before,
html body main .text-card::after {
  opacity: .34 !important;
}

/* Explicitly target pages that showed grey cards in lists. */
html body .allgames-page .game-card,
html body .puzzles-page .game-card,
html body .games-category-page .game-card,
html body .cardgames-page .game-card,
html body .partygames-page .game-card,
html body .games-list .game-card {
  background: var(--juvo-card-gradient) !important;
  background-color: #0b101a !important;
}

html body .allgames-page .game-card:hover,
html body .puzzles-page .game-card:hover,
html body .games-category-page .game-card:hover,
html body .cardgames-page .game-card:hover,
html body .partygames-page .game-card:hover,
html body .games-list .game-card:hover {
  background: var(--juvo-card-gradient-hover) !important;
  background-color: #0b101a !important;
}


/* v20 navbar height fix:
   The global navbar layer should only be as tall as the actual header content.
   The long downward blur/fade has been removed and replaced by a short, soft edge. */

.site-header {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.nav-inner {
  min-height: 76px !important;
}

/* This was previously visually extending far below the real navigation.
   It now covers only the navigation height. */
.nav-glass {
  inset: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.060) 100%
    ) !important;
  backdrop-filter: blur(14px) saturate(155%) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(14px) saturate(155%) brightness(1.02) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.nav-glass::after {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,138,0,.085), transparent 16rem),
    radial-gradient(circle at 84% 0%, rgba(30,91,255,.055), transparent 16rem),
    linear-gradient(to bottom, rgba(255,255,255,.045), transparent 100%) !important;
}

/* Short edge only, not a long header extension. */
.site-header::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  height: 18px !important;
  pointer-events: none !important;
  z-index: -2 !important;
  background:
    linear-gradient(to bottom, rgba(248,250,252,.10), rgba(248,250,252,0)) !important;
}

@media (prefers-color-scheme: dark) {
  .nav-glass {
    background:
      linear-gradient(
        to bottom,
        rgba(15,19,28,.18) 0%,
        rgba(15,19,28,.065) 100%
      ) !important;
    backdrop-filter: blur(14px) saturate(155%) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(14px) saturate(155%) brightness(1.02) !important;
    border-bottom-color: rgba(255,255,255,.055) !important;
  }

  .nav-glass::after {
    background:
      radial-gradient(circle at 18% 0%, rgba(255,138,0,.065), transparent 16rem),
      radial-gradient(circle at 84% 0%, rgba(30,91,255,.045), transparent 16rem),
      linear-gradient(to bottom, rgba(255,255,255,.020), transparent 100%) !important;
  }

  .site-header::after {
    background:
      linear-gradient(to bottom, rgba(16,20,28,.12), rgba(16,20,28,0)) !important;
  }
}

/* Mobile header should also not create a tall visual sheet. */
@media (max-width: 720px) {
  .nav-inner {
    min-height: 66px !important;
  }

  .nav-glass {
    height: 100% !important;
    max-height: 100% !important;
  }

  .site-header::after {
    height: 12px !important;
  }
}


/* v21 iPhone tab bar: taller dock + interactive category game list */
.phone-dock {
  height: 116px !important;
  left: 15px !important;
  right: 15px !important;
  bottom: 8px !important;
  padding: 9px !important;
  gap: 7px !important;
  border-radius: 34px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  place-items: stretch !important;
}

.phone-dock .dock-item {
  grid-template-rows: 38px 17px !important;
  gap: 6px !important;
  padding: 11px 4px 8px !important;
  border-radius: 25px !important;
  cursor: pointer !important;
}

.phone-dock .dock-icon {
  width: 38px !important;
  height: 38px !important;
}

.phone-dock b {
  font-size: 10.7px !important;
  line-height: 1 !important;
}

.phone-dock .dock-item.active {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 138, 0, .34), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.06)) !important;
}

.phone-game-panel {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 138px;
  z-index: 4;
  min-height: 118px;
  padding: 14px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .18), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  backdrop-filter: blur(18px) saturate(175%);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  box-shadow:
    0 18px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
  transition:
    transform 260ms cubic-bezier(.22,1,.36,1),
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.phone-game-panel:hover {
  transform: scale(1.018);
  border-color: rgba(255,255,255,.20);
  box-shadow:
    0 22px 58px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.phone-game-panel-label {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.phone-game-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.phone-game-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  font-size: 11px;
  font-weight: 730;
  background:
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.10);
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.phone-game-pill:hover {
  transform: scale(1.055);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,138,0,.24), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.19), rgba(255,255,255,.070));
  border-color: rgba(255,255,255,.19);
}

.phone-ui {
  padding-bottom: 266px !important;
}

@media (max-width:720px) {
  .phone-dock {
    height: 108px !important;
  }

  .phone-game-panel {
    bottom: 130px;
    min-height: 108px;
  }

  .phone-ui {
    padding-bottom: 250px !important;
  }
}


/* v22 phone edge + floating fix:
   The phone no longer snaps on hover. The base, hover and keyframe transforms
   use the same 3D angle and only vary translate/scale slightly.
   The frame is thinner and black, with pseudo-elements that imply physical side edges. */

.phone-model {
  width: min(306px, 82vw) !important;
  height: 636px !important;
  padding: 8px !important;
  border-radius: 48px !important;
  transform:
    rotateY(-16deg)
    rotateX(7deg)
    rotateZ(1deg)
    translateY(0)
    scale(1) !important;
  background:
    linear-gradient(145deg, #232833 0%, #05070b 46%, #171c25 100%) !important;
  box-shadow:
    42px 54px 84px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 5px 0 10px rgba(255,255,255,.08),
    inset -7px 0 13px rgba(0,0,0,.65) !important;
  animation: phoneFloatStable 7.5s ease-in-out infinite !important;
  transform-style: preserve-3d !important;
  will-change: transform;
}

.phone-model::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 54px;
  left: -9px;
  width: 12px;
  border-radius: 14px 0 0 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.86) 40%, rgba(255,255,255,.06));
  transform: translateZ(-12px) rotateY(78deg);
  transform-origin: right center;
  box-shadow: inset 1px 0 1px rgba(255,255,255,.16);
  pointer-events: none;
}

.phone-model::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 58px;
  right: -10px;
  width: 13px;
  border-radius: 0 15px 15px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.90) 38%, rgba(255,255,255,.04));
  transform: translateZ(-14px) rotateY(-78deg);
  transform-origin: left center;
  box-shadow: inset -1px 0 1px rgba(255,255,255,.12);
  pointer-events: none;
}

.phone-screen {
  border-radius: 40px !important;
}

.phone-screen::before {
  width: 84px !important;
  height: 24px !important;
  top: 9px !important;
}

/* Do not pause or replace the float on hover; only add a tiny scale via the same angle. */
.phone-stage:hover .phone-model {
  transform:
    rotateY(-16deg)
    rotateX(7deg)
    rotateZ(1deg)
    translateY(-4px)
    scale(1.008) !important;
  animation-play-state: running !important;
  box-shadow:
    46px 60px 92px rgba(0,0,0,.36),
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 5px 0 10px rgba(255,255,255,.08),
    inset -7px 0 13px rgba(0,0,0,.66) !important;
}

@keyframes phoneFloatStable {
  0%, 100% {
    transform:
      rotateY(-16deg)
      rotateX(7deg)
      rotateZ(1deg)
      translateY(0)
      scale(1);
  }
  50% {
    transform:
      rotateY(-16deg)
      rotateX(7deg)
      rotateZ(1deg)
      translateY(-12px)
      scale(1.002);
  }
}

/* The side shadow follows the thinner black frame. */
.phone-shadow {
  width: 324px !important;
  height: 30px !important;
  bottom: 4px !important;
  background: rgba(0,0,0,.28) !important;
}

/* Make sure the taller tab bar still fits after the thinner frame. */
.phone-ui {
  padding-bottom: 266px !important;
}

@media (max-width:720px) {
  .phone-model {
    width: min(288px, 80vw) !important;
    height: 598px !important;
    padding: 7px !important;
    border-radius: 44px !important;
  }

  .phone-screen {
    border-radius: 37px !important;
  }

  .phone-model::before,
  .phone-model::after {
    top: 42px;
    bottom: 50px;
  }

  .phone-stage:hover .phone-model {
    transform:
      rotateY(-16deg)
      rotateX(7deg)
      rotateZ(1deg)
      translateY(-3px)
      scale(1.006) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-model,
  .phone-stage:hover .phone-model {
    animation: none !important;
    transform:
      rotateY(-16deg)
      rotateX(7deg)
      rotateZ(1deg)
      translateY(0)
      scale(1) !important;
  }
}