:root {
  --bg:#0f0f14; --fg:#eaeaea; --muted:#a0a0a0; --brand:#ff2d55; --card:#15151c; --accent:#4d7cff;
  --border: rgba(255,255,255,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Kumbh Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--fg);
  overflow-x: clip; text-rendering: optimizeLegibility;
}

/* ---------- Nav ---------- */
.nav{ position: fixed; inset: 0 0 auto; height: 64px; z-index: 10; backdrop-filter: blur(8px) saturate(1.2); background: rgba(0,0,0,.35); border-bottom:1px solid rgba(255,255,255,.06); }
.nav__inner{ width:min(1100px,92%); margin:0 auto; height:100%; display:flex; align-items:center; gap:18px; }
.brand{ color:#fff; text-decoration:none; font-weight:700; }
.burger{ margin-left:auto; display:none; background:none; border:0; color:#fff; font-size:22px; }
.links{ margin-left:auto; display:flex; gap:18px; list-style:none; padding:0; }
.links a{ color:#fff; text-decoration:none; opacity:.9 }
.links a:hover{ opacity:1 }
.nav__btn .button{ padding:8px 12px; border:1px solid var(--border); border-radius:999px; }
@media (max-width: 820px){
  .burger{ display:inline-block; }
  .links{ display:none; position:absolute; right:12px; top:64px; flex-direction:column; background:#111; padding:12px; border:1px solid var(--border); border-radius:10px; }
  .nav.open .links{ display:flex; }
}

/* ---------- Hero + canvases ---------- */
.hero{ position: relative; min-height: 100svh; display:grid; place-items:center; padding-top:64px; overflow:hidden; }
.hero__inner{ text-align:center; width:min(980px,92%); }
.hero__title{ font-size: clamp(34px, 6vw, 80px); margin: 0 0 10px; line-height:1.05; }
.hero__subtitle{ color: var(--muted); font-size: clamp(16px, 2.2vw, 22px); margin: 0 0 20px; }
.cta{ display:inline-block; background: var(--brand); color:#fff; text-decoration:none; padding:12px 18px; border-radius: 10px; }
.hero__hint{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); color:var(--muted); font-size:12px; letter-spacing:.2em; text-transform:uppercase; }

#webgl-bg{
  position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: -2;
  background: radial-gradient(1000px 800px at 20% 10%, #1b1b2a, #0f0f15 60%, #0b0b0f 100%);
}
#webgl-hero{
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1;
  pointer-events: none;
}

/* ---------- Sections ---------- */
.section{ position:relative; padding:96px 0; }
.section--alt{ background: color-mix(in oklab, #fff 2%, transparent); }
.section--tight{ padding:56px 0; }
.section--bleed{ padding:0; }
.container{ width: min(1100px, 92%); margin: 0 auto; }
.lead{ color: var(--muted); }

/* ---------- Fallback cards ---------- */
.cards3d{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; margin-top:20px; }
.card3d{
  grid-column: span 12; position:relative; background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; transform-style: preserve-3d; will-change: transform;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card3d:hover{ border-color: rgba(255,255,255,.15); }
.card3d__shine{
  position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  background: radial-gradient(400px 200px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 60%);
  transform: translateZ(40px);
}
.card3d .bullets{ display:flex; gap:8px; flex-wrap:wrap; padding:0; list-style:none; }
.card3d .bullets li{ padding:4px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; opacity:.9; }
@media (min-width: 980px){ .card3d{ grid-column: span 3; } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: 600ms ease; will-change: transform, opacity; }
.reveal.is-in{ opacity:1; transform: translateY(0); }
.delay-1{ transition-delay:.08s } .delay-2{ transition-delay:.16s } .delay-3{ transition-delay:.24s }

/* ---------- Forms ---------- */
.form{ display:grid; gap:12px; max-width:560px; }
.input, .textarea{
  width:100%; background:#151515; color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; outline:none;
}
.input:focus,.textarea:focus{ border-color: var(--accent); box-shadow: 0 0 0 2px rgba(77,124,255,.15); }
.btn--primary{ background: var(--accent); border: none; color:#fff; }

/* ---------- Footer ---------- */
.footer{ padding:40px 0; border-top:1px solid rgba(255,255,255,.06); }
.footer .social{ display:flex; gap:14px; }

/* ---------- Scroll text canvas ---------- */
#webgl-scrolltext { width: 100%; height: 340px; display: block; }

/* ===== Services full-bleed stage ===== */
.services-stage{
  position: relative;
  min-height: clamp(640px, 82svh, 960px);
  width: 100%;
  overflow: hidden;

  /* ✅ background */
  background:
    radial-gradient(1200px 800px at 50% 5%, #141a2a 0%, #0e1322 55%, #0a0d16 100%);
}
.services-stage::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.30));
  mix-blend-mode: multiply;
}

#webgl-services{
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  z-index: 0;
}

/* Overlay content */
.stage-overlay{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 24px 0;
}
.stage-head h2{ margin:0 0 6px; }
.stage-head .lead{ margin:0; }

.service-info{
  background: rgba(0,0,0,.45);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: blur(8px) saturate(1.1);
  max-width: 560px;
}
.service-info h3{ margin:0 0 6px; }
.service-info .bullets{ display:flex; gap:8px; flex-wrap:wrap; padding:0; list-style:none; }
.service-info .bullets li{ padding:4px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; opacity:.95; }

/* Mobile fallback */
.mobile-fallback{ display:none; padding: 56px 0; }
@media (max-width: 900px){
  .services-stage{ display:none; }
  .mobile-fallback{ display:block; }
}

/* NoScript */
.noscript{
  position: fixed; inset: auto 12px 12px 12px; background: #222; padding: 12px;
  border-radius: 10px; border: 1px solid var(--border);
}






/* =========================
   Sliding Tickers
========================= */
/* =========================
   Sliding Tickers
========================= */
.ticker {
  --speed: 28s;
  --gap: 2.5rem;
  --alpha: 0.06;
  --stroke: 1px;

  position: relative;
  overflow: hidden;
  border-block: var(--stroke) solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));

  /* keep edge fade, but simplify overall rendering work */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);

  contain: layout paint;
  content-visibility: auto;
}

.ticker--alt {
  --speed: 32s;
  background: linear-gradient(180deg, rgba(100,150,255,0.06), rgba(100,150,255,0.03));
  border-block-color: rgba(120,160,255,0.18);
}

.ticker__track {
  display: inline-flex;
  gap: var(--gap);
  white-space: nowrap;
  will-change: transform;
  padding-block: 0.9rem;
  animation: ticker-scroll var(--speed) linear infinite;
  transform: translateZ(0);
}

.ticker:hover .ticker__track,
.ticker.ticker--paused .ticker__track {
  animation-play-state: paused;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(160,190,255,0.22);
  background: rgba(125, 155, 255, var(--alpha));
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;

  /* removed expensive blur */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}





/* Reveal: default visible; only hide during animate state */
.reveal { opacity: 1; transform: none; }
.reveal-animate .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal-animate .reveal.is-in { opacity: 1; transform: none; }

/* Canvases behind content */
.hero { position: relative; }
.hero canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__inner { position: relative; z-index: 1; }

.services-stage { position: relative; }
.services-stage canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stage-overlay { position: relative; z-index: 1; }

/* WebGL-off fallback */
.no-webgl #webgl-bg,
.no-webgl #webgl-hero,
.no-webgl #webgl-services { display: none !important; }
.no-webgl .mobile-fallback { display: block !important; }


/* ===== Mini Game Bar (responsive) ===== */

/* Full-bleed inner so canvas spans left→right */
.bar__inner{
  width: 100%;
  margin: 0;
  padding-inline: clamp(8px, 3vw, 16px);
  display: grid;
  align-items: center;
  row-gap: clamp(6px, 1.2vw, 10px);
}

/* Canvas playfield */
#bar-game{
  display:block;
  width:100%;
  height: clamp(44px, 6vw, 64px);        /* responsive height */
  background:#0b0f19;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

/* UI overlay (under canvas) */
.bar-game-ui{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.4vw, 12px);
  flex-wrap: wrap;                         /* wrap on small screens */
}

/* Controls row */
.controls{
  display:flex;
  align-items:center;
  gap: clamp(6px, 1.2vw, 10px);
  flex-wrap:wrap;
}

/* Buttons */
.btn{
  padding: clamp(7px, 1.2vw, 9px) clamp(10px, 2vw, 14px);
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:#eaeaea;
  font-weight:700;
  letter-spacing:.2px;
  font-size: clamp(12px, 1.6vw, 14px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); }
.btn:active{ transform: translateY(0); }
.btn[aria-pressed="true"]{ box-shadow: 0 0 0 2px rgba(126,227,255,.32), 0 8px 20px rgba(0,0,0,.25); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid #7ee3ff; outline-offset:2px; }

/* Difficulty select */
.diff{
  display:inline-flex; align-items:center; gap:8px;
  padding: clamp(5px, 1vw, 6px) clamp(7px, 1.4vw, 10px);
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.diff span{
  font-size: clamp(12px, 1.6vw, 13px);
  opacity:.85;
  white-space: nowrap;
}
.diff select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding: clamp(6px, 1.4vw, 8px) clamp(8px, 1.8vw, 10px);
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:#101624;
  color:#eaeaea;
  font-size: clamp(12px, 1.8vw, 14px);
  line-height:1.1;
}

/* Mobile Jump button: visible on touch devices */
.jump-btn{
  padding: clamp(10px, 2.6vw, 12px) clamp(14px, 3.2vw, 16px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(68,204,255,.32), rgba(68,204,255,.18));
  color:#0a0f18;
  font-weight:800;
  letter-spacing:.3px;
  font-size: clamp(12px, 1.8vw, 14px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
@media (hover:hover){
  .jump-btn{ display:none; } /* hide on non-touch */
}

/* ===== Layout tuning by breakpoint ===== */

/* Tight phones */
@media (max-width: 420px){
  .bar-game-ui{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .controls{
    order: 2;
    justify-content: center;
  }
  .diff{
    order: 1;
    justify-content: space-between;
  }
  .btn{
    flex: 1 1 auto;            /* let buttons stretch nicely */
    text-align: center;
  }
  #bar-game{
    height: clamp(48px, 9vw, 58px); /* a touch taller for thumb timing */
  }
}

/* Small tablets */
@media (min-width: 421px) and (max-width: 820px){
  .bar-game-ui{
    justify-content: space-between;
  }
  #bar-game{
    height: clamp(48px, 6.2vw, 60px);
  }
}

/* Reduced motion: keep it chill */
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}