@font-face {
  font-family: "Playstation";
  src: url("Playstation.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
/* Gaming display font for the brand wordmark next to the logo. */
@font-face {
  font-family: "Audiowide";
  src: url("Audiowide.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* Armenian-aware fallback stack: Playstation/Inter don't ship Armenian
   glyphs, so without explicit Armenian fonts the browser substitutes a
   random system font whose metrics blow up the line-height and cause
   neighbouring lines to collide. */
:root {
  --font-arm: "Noto Sans Armenian", "Sylfaen", "DejaVu Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[lang="hy"] body { font-family: var(--font-arm); }
html[lang="hy"] .hero-title {
  font-family: var(--font-arm);
  font-size: clamp(30px, 5.2vw, 60px);
  letter-spacing: 0;
  line-height: 1.18;
  word-break: break-word;
  overflow-wrap: anywhere;
}
html[lang="hy"] .section-head h2 {
  font-family: var(--font-arm);
  font-size: clamp(26px, 3.8vw, 46px);
  letter-spacing: 0;
  line-height: 1.22;
  word-break: break-word;
  overflow-wrap: anywhere;
}
html[lang="hy"] .mobile-text h2 {
  font-family: var(--font-arm);
  font-size: clamp(26px, 3.8vw, 44px);
  letter-spacing: 0;
  line-height: 1.22;
}
html[lang="hy"] .platform-card h3,
html[lang="hy"] .dl-block-head h3 {
  font-family: var(--font-arm);
  font-size: 19px;
  letter-spacing: 0;
}
html[lang="hy"] .feature h3 {
  font-family: var(--font-arm);
  font-size: 17px;
  line-height: 1.3;
}
html[lang="hy"] .platform-feat li,
html[lang="hy"] .bullet,
html[lang="hy"] .contact-list li,
html[lang="hy"] .contact-form span,
html[lang="hy"] .stat-label,
html[lang="hy"] .eyebrow,
html[lang="hy"] .kicker {
  font-family: var(--font-arm);
}
html[lang="hy"] .nav-brand-text,
html[lang="hy"] .footer-brand,
html[lang="hy"] .phone-brand {
  font-family: "Audiowide", sans-serif; /* brand name stays Latin */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  /* Combined with the per-element width caps below, this makes
     `documentElement.scrollWidth` exactly equal to `window.innerWidth`
     on every viewport and language — no horizontal scroll, ever. */
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
/* Last-line-of-defence belt: never let any direct child of body grow
   wider than the viewport. `position: relative` containers (the hero, the
   sections, the footer) sometimes report a sub-pixel wider scrollWidth
   on Chromium because of `transform` or `box-shadow` overflow boxes. */
body > * {
  max-width: 100vw;
  overflow-x: clip;
}

body {
  margin: 0;
  background: #020514;
  color: #e6edf6;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Long Armenian words ("ԿԱՌԱՎԱՐՎՈՂ ՀԱՄԱԿԱՐԳԻՉՆԵՐ") combined with uppercase
   transform + 1.5px letter-spacing on `.stat-label` push the hero stats card
   ~3px past a 375px viewport. Soft-wrap inside the label and let the row
   itself wrap (already enabled by the @media 540px rule). */
.stat-label {
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  max-width: 100%;
}
.kicker {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============ Reveal animation ============ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: rgba(2, 5, 20, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(7, 221, 241, 0.08);
  transition: padding 200ms ease, background 200ms ease;
}
.nav.scrolled { padding: 12px 40px; background: rgba(2, 5, 20, 0.88); }

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-logo {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(7, 221, 241, 0.35));
  transition: filter 220ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-brand:hover .nav-logo {
  filter: drop-shadow(0 0 18px rgba(7, 221, 241, 0.6));
  transform: rotate(-4deg);
}
.nav-brand-text {
  font-family: "Audiowide", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  background: linear-gradient(120deg, #07ddf1, #32aff7 45%, #d152fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* soft, eye-comfortable neon halo */
  filter: drop-shadow(0 0 2px rgba(7, 221, 241, 0.5)) drop-shadow(0 0 8px rgba(49, 175, 247, 0.3));
}

/* Brand wordmark animation: neon "switch-on" once on load, then a gentle,
   eye-comfortable glow pulse. Applies to every place the brand sits next to
   the logo (nav / footer / phone mock-up). */
.nav-brand-text,
.footer-brand,
.phone-brand {
  /* --flicker-every: how often the neon flickers. Set 5s / 8s / 10s to taste. */
  --flicker-every: 8s;
  animation: brandFlicker var(--flicker-every) ease-in-out infinite,
             brandGlow 5s ease-in-out infinite;
}
/* Short neon "flicker" burst at the start of every cycle, then steady glow.
   The burst lives in the first ~11% of the cycle (~0.9s at 8s), so the text
   reads calmly the rest of the time and only blinks once per period. */
@keyframes brandFlicker {
  0%   { opacity: .4; }
  2%   { opacity: 1; }
  3.5% { opacity: .35; }
  5%   { opacity: 1; }
  6.5% { opacity: .2; }
  8%   { opacity: .95; }
  9.5% { opacity: .55; }
  11%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes brandGlow {
  /* clearly visible "breathing": dim soft halo -> fuller neon (still comfy) */
  0%, 100% { filter: drop-shadow(0 0 1px rgba(7, 221, 241, 0.40))
                     drop-shadow(0 0 4px rgba(49, 175, 247, 0.22)); }
  50%      { filter: drop-shadow(0 0 5px rgba(7, 221, 241, 0.85))
                     drop-shadow(0 0 16px rgba(49, 175, 247, 0.55))
                     drop-shadow(0 0 28px rgba(209, 82, 250, 0.40)); }
}
/* Respect users who prefer less motion — hold the calm resting state. */
@media (prefers-reduced-motion: reduce) {
  .nav-brand-text,
  .footer-brand,
  .phone-brand { animation: none; }
}
@media (max-width: 720px) {
  /* Reclaim horizontal space on small screens — keep just the logo +
     wordmark, drop the icon glow that costs no perceptible value at
     phone size. */
  .nav-logo { width: 26px; height: 26px; }
  .nav-brand-text { font-size: 16px; letter-spacing: 0.5px; }
  /* Footer logo follows the nav at the same breakpoint so both
     brand marks shrink in lockstep — no visual mismatch on phones. */
  .footer-logo { width: 26px; height: 26px; }
}

.nav-links {
  display: flex; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  font-size: 14px; font-weight: 500; color: #94a3b8;
  transition: color 160ms ease;
}
.nav-links a:hover { color: #07ddf1; }

.lang-switch {
  display: inline-flex;
  background: rgba(7, 221, 241, 0.06);
  border: 1px solid rgba(7, 221, 241, 0.18);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-btn {
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.lang-btn:hover { color: #cfe9ee; }
.lang-btn.active {
  background: linear-gradient(90deg, #07ddf1, #32aff7 50%, #d152fa);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

@media (max-width: 720px) {
  .nav { padding: 14px 20px; }
  .nav-links { display: none; }
  .lang-switch { padding: 2px; }
  .lang-btn { padding: 4px 8px; font-size: 10px; }
}

/* ============ HERO — pure video viewport ============ */
/* The hero is now exactly one viewport tall and contains nothing but the
   gaming video, the gradient overlays, and the bouncing scroll cue. The
   text content lives in `.hero-text` (the section right below) so the
   visitor sees an immersive scene on first paint, then scrolls down to
   the headline. */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #020514;
}

/* ============ HERO-TEXT — section right after .hero ============ */
.hero-text {
  /* Same dark bedrock as the rest of the page; the brand-tinted blooms
     give it a smooth visual handoff from the bottom of the video. */
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(7, 221, 241, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 82%, rgba(209, 82, 250, 0.08) 0%, transparent 55%),
    #020514;
  padding: 80px 40px 90px;
}
.hero-text .hero-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .hero-text { padding: 60px 22px 70px; }
}

/* ============ HERO-TEXT --lead variant ============ */
/* Used when the animated hero is disabled and `.hero-text` is the
   first screen. Adds a tall top inset so the headline clears the
   fixed nav, plus three static blur orbs for brand atmosphere. */
.hero-text--lead {
  padding-top: 180px;
  padding-bottom: 120px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 720px) {
  .hero-text--lead {
    padding-top: 130px;
    padding-bottom: 80px;
    min-height: auto;
  }
}

.hero-text-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-text-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  /* Static — no animation. Gives the same brand glow the animated hero
     used to provide, but doesn't repaint a single pixel after layout. */
}
.hero-text-orb--cyan {
  width: 60vmin; height: 60vmin;
  top: -12vmin; left: -10vmin;
  background: radial-gradient(circle, rgba(7, 221, 241, 0.85) 0%, rgba(7, 221, 241, 0.20) 50%, transparent 75%);
}
.hero-text-orb--magenta {
  width: 55vmin; height: 55vmin;
  bottom: -14vmin; right: -10vmin;
  background: radial-gradient(circle, rgba(209, 82, 250, 0.75) 0%, rgba(209, 82, 250, 0.18) 50%, transparent 75%);
}
.hero-text-orb--blue {
  width: 40vmin; height: 40vmin;
  top: 38%; left: 52%;
  background: radial-gradient(circle, rgba(50, 175, 247, 0.55) 0%, rgba(50, 175, 247, 0.15) 50%, transparent 75%);
}

/* ============ Hero animation layers ============ */
/* Three composed layers — adapted from AnimVault (Particle Flow,
   Abstract Motion orbs, Animated Grid) and recoloured to the brand
   palette. Stacking order inside `.hero`, back → front:
     -3  .hero-canvas + .hero-orbs   particles + drifting blooms
     -2  .hero-bg                    brand-tinted gradient overlay
     -1  .hero-grid                  pulsing cyber grid lines */

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* No negative z-index here — `.hero` has a solid background, and a
     negatively-stacked child paints BEHIND that solid background and
     becomes invisible. We keep the canvas in the default stacking
     order so the hero's bg paints first, then the canvas, then the
     other layers in DOM order. */
  pointer-events: none;
  display: block;
  background: #020514;
}

/* Two ambient orbs floating slowly behind the gradient overlay. The
   blur + low opacity makes them read as glow, not solid shapes. */
.hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.85;
  will-change: transform;
}
.hero-orb--cyan {
  width: 70vmin; height: 70vmin;
  top: -15vmin; left: -15vmin;
  background: radial-gradient(circle, rgba(7, 221, 241, 0.85) 0%, rgba(7, 221, 241, 0.25) 45%, transparent 75%);
  animation: orb-drift-a 22s ease-in-out infinite;
}
.hero-orb--magenta {
  width: 60vmin; height: 60vmin;
  bottom: -15vmin; right: -15vmin;
  background: radial-gradient(circle, rgba(209, 82, 250, 0.75) 0%, rgba(209, 82, 250, 0.20) 45%, transparent 75%);
  animation: orb-drift-b 28s ease-in-out infinite;
}
.hero-orb--blue {
  width: 45vmin; height: 45vmin;
  top: 35%; left: 55%;
  background: radial-gradient(circle, rgba(50, 175, 247, 0.55) 0%, rgba(50, 175, 247, 0.15) 50%, transparent 75%);
  animation: orb-drift-c 35s ease-in-out infinite;
}
@keyframes orb-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(15vmin, 8vmin) scale(1.1); }
  50%      { transform: translate(8vmin, 18vmin) scale(0.95); }
  75%      { transform: translate(-6vmin, 10vmin) scale(1.05); }
}
@keyframes orb-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-12vmin, -10vmin) scale(1.08); }
  66%      { transform: translate(-4vmin, -16vmin) scale(0.92); }
}
@keyframes orb-drift-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20vmin, -8vmin) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
}

.hero-bg {
  position: absolute; inset: 0;
  /* Light overlay above the canvas + orbs — just a bottom-fade so the
     hero-text section below blends in cleanly. No centre vignette so
     the animation can fully shine. */
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 75%,
      rgba(2, 5, 20, 0.85) 100%);
  pointer-events: none;
}

/* Hero-text content sits on its own dark section now (not on top of the
   video), so we no longer need a frosted-glass plate behind it. The
   subtle radial blooms on `.hero-text` provide the visual texture. */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(7, 221, 241, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 221, 241, 0.10) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
  animation:
    grid-drift 30s linear infinite,
    grid-pulse 4s ease-in-out infinite;
}
@keyframes grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}
@keyframes grid-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1;    }
}
@media (prefers-reduced-motion: reduce) {
  .hero-grid { animation: grid-drift 60s linear infinite; }
}
.hero-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(180deg, transparent 0%, #020514 100%);
  pointer-events: none;
}

.hero-inner {
  max-width: 980px;
  text-align: center;
  position: relative;
}

.kicker {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: #07ddf1;
  background: rgba(7, 221, 241, 0.08);
  border: 1px solid rgba(7, 221, 241, 0.25);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 28px;
  animation: cp-fadein 800ms ease-out 100ms both;
}

.hero-title {
  font-family: "Playstation", "Inter", sans-serif;
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 0 24px;
  animation: cp-fadein 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}

.gradient-text {
  background: linear-gradient(90deg, #07ddf1, #32aff7 50%, #d152fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: #cbd5e1;
  max-width: 760px;
  margin: 0 auto 40px;
  animation: cp-fadein 800ms ease-out 350ms both;
  /* The 4-paragraph hero copy lives in a single text node with `\n\n`
     between paragraphs (so the i18n dictionary stays one key per language).
     `pre-line` preserves the newlines while still allowing soft-wrap inside
     a paragraph, giving us paragraph spacing without extra DOM. */
  white-space: pre-line;
  line-height: 1.65;
  text-align: center;
}
@media (max-width: 720px) {
  .hero-sub {
    text-align: left;
    font-size: 15px;
    line-height: 1.55;
  }
}

.hero-cta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 70px;
  animation: cp-fadein 800ms ease-out 500ms both;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  border: none; cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
  font-family: inherit;
}
.btn-primary {
  background: linear-gradient(90deg, #07ddf1, #32aff7 55%, #d152fa);
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 10px 30px rgba(7, 221, 241, 0.25);
}
.btn-primary svg { color: #ffffff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(7, 221, 241, 0.4); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #e6edf6;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.btn-ghost:hover { background: rgba(7, 221, 241, 0.08); border-color: rgba(7, 221, 241, 0.4); }

.hero-stats {
  display: inline-flex; align-items: center; gap: 36px;
  padding: 18px 30px;
  background: rgba(11, 18, 36, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(7, 221, 241, 0.15);
  border-radius: 20px;
  animation: cp-fadein 800ms ease-out 700ms both;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat-num { font-size: 28px; font-weight: 800; color: #07ddf1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #94a3b8; }
.stat-sep { width: 1px; height: 32px; background: rgba(255, 255, 255, 0.1); }

@keyframes cp-fadein {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ============ SECTIONS ============ */
.section { padding: 110px 40px; position: relative; }
.section-alt {
  background:
    linear-gradient(180deg, rgba(2, 5, 20, 0.92) 0%, rgba(7, 221, 241, 0.04) 50%, rgba(2, 5, 20, 0.92) 100%);
}
.container { max-width: 1180px; margin: 0 auto; }

.section-head { max-width: 740px; margin: 0 auto 70px; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: #07ddf1;
  margin-bottom: 14px;
}
.section-head h2 {
  font-family: "Playstation", "Inter", sans-serif;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 800; line-height: 1.1; letter-spacing: -1px;
  margin: 0 0 18px;
}
.lead {
  color: #94a3b8;
  font-size: clamp(15px, 1.2vw, 17px);
  margin: 0;
}
.muted { color: #94a3b8; }

/* ============ FEATURES ============ */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
@media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr; } }

.feature {
  background: rgba(11, 18, 36, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(7, 221, 241, 0.14);
  border-radius: 18px;
  padding: 28px 26px;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.feature:hover {
  transform: translateY(-4px);
  border-color: rgba(7, 221, 241, 0.4);
  box-shadow: 0 20px 50px rgba(7, 221, 241, 0.1);
}
.feature-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(7, 221, 241, 0.15), rgba(209, 82, 250, 0.15));
  border: 1px solid rgba(7, 221, 241, 0.3);
  border-radius: 12px;
  color: #07ddf1;
  margin-bottom: 18px;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: #fff; }
.feature p { color: #94a3b8; font-size: 14px; margin: 0; }

.bullets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 30px;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 720px) { .bullets { grid-template-columns: 1fr; } }
.bullet {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: #cbd5e1;
}
.bullet-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #07ddf1;
  box-shadow: 0 0 12px #07ddf1;
  flex-shrink: 0;
}

/* ============ PLATFORM ============ */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) { .platform-grid { grid-template-columns: 1fr; } }

.platform-card {
  background:
    linear-gradient(180deg, rgba(11, 18, 36, 0.85) 0%, rgba(2, 5, 20, 0.85) 100%);
  border: 1px solid rgba(7, 221, 241, 0.15);
  border-radius: 20px;
  padding: 32px 28px;
  position: relative;
  transition: transform 280ms ease, border-color 280ms ease;
}
.platform-card:hover { transform: translateY(-6px); border-color: rgba(7, 221, 241, 0.45); }
.platform-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(7, 221, 241, 0.4), transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0; transition: opacity 280ms ease;
}
.platform-card:hover::before { opacity: 1; }
.platform-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #07ddf1;
  background: rgba(7, 221, 241, 0.1);
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 16px;
}
.platform-card h3 {
  font-family: "Playstation", "Inter", sans-serif;
  font-size: 22px; margin: 0 0 12px; font-weight: 700;
}
.platform-card p { color: #94a3b8; font-size: 14px; margin: 0 0 18px; }
.platform-feat { list-style: none; padding: 0; margin: 0; }
.platform-feat li {
  font-size: 13px; color: #cbd5e1; padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative; padding-left: 18px;
}
.platform-feat li::before {
  content: "→"; position: absolute; left: 0; color: #07ddf1;
}
.platform-feat li:first-child { border-top: 0; }

/* ============ DOWNLOAD ============ */
.dl-block { margin-bottom: 56px; }
.dl-block-head { margin-bottom: 22px; }
.dl-block-head h3 {
  font-family: "Playstation", "Inter", sans-serif;
  font-size: 22px; font-weight: 700; margin: 0 0 4px;
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px) { .dl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .dl-grid { grid-template-columns: 1fr; } }

.dl-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px;
  background: rgba(11, 18, 36, 0.65);
  border: 1px solid rgba(7, 221, 241, 0.12);
  border-radius: 14px;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  cursor: pointer;
}
.dl-card:hover {
  transform: translateY(-3px);
  border-color: #07ddf1;
  box-shadow: 0 14px 40px rgba(7, 221, 241, 0.18);
}
.dl-card.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.dl-card.disabled:hover {
  transform: none; border-color: rgba(7, 221, 241, 0.12); box-shadow: none;
}

.os-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.os-badge.linux   { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.3); }
.os-badge.windows { color: #60a5fa; background: rgba(96, 165, 250, 0.12); border: 1px solid rgba(96, 165, 250, 0.3); }
.os-badge.mac     { color: #cbd5e1; background: rgba(203, 213, 225, 0.12); border: 1px solid rgba(203, 213, 225, 0.3); }

.dl-os { font-size: 18px; font-weight: 700; color: #fff; }
.dl-meta { font-size: 12px; color: #94a3b8; }
.dl-meta.soon { color: #f59e0b; font-weight: 600; }

/* ============ MOBILE SECTION ============ */
.mobile-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: center;
}
@media (max-width: 880px) { .mobile-wrap { grid-template-columns: 1fr; } }

.mobile-text h2 {
  font-family: "Playstation", "Inter", sans-serif;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800; line-height: 1.1;
  margin: 14px 0 18px;
}

.store-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: #0b1224;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.store-badge svg { width: 26px; height: 26px; color: #fff; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge .small { font-size: 10px; color: #94a3b8; letter-spacing: 0.5px; }
.store-badge .big   { font-size: 16px; font-weight: 700; color: #fff; }
.store-badge:hover { transform: translateY(-2px); border-color: #07ddf1; background: #101a35; }
.store-badge.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(40%);
}

.mobile-note { color: #f59e0b; font-size: 12px; margin-top: 14px; }

.mobile-art {
  display: flex; justify-content: center;
  position: relative;
}
.phone-frame {
  position: relative;
  width: 280px; height: 560px;
  background: linear-gradient(180deg, #0b1224, #020514);
  border: 2px solid rgba(7, 221, 241, 0.3);
  border-radius: 36px;
  padding: 18px 14px;
  box-shadow:
    0 30px 80px rgba(7, 221, 241, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.phone-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at center, rgba(7, 221, 241, 0.25) 0%, transparent 70%);
  z-index: -1;
  filter: blur(40px);
  animation: glow-pulse 4s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
.phone-screen {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
}
.phone-screen::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 5, 20, 0.82) 0%, rgba(2, 5, 20, 0.92) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(7, 221, 241, 0.18) 0%, transparent 60%),
    url("bg-section.jpg") center/cover no-repeat;
  z-index: 0;
}
.phone-screen > * { position: relative; z-index: 1; }
.phone-bar {
  height: 4px; width: 60px; background: rgba(255, 255, 255, 0.2);
  border-radius: 2px; margin: 6px auto 12px;
}
.phone-brand {
  font-family: "Audiowide", sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: 0.5px;
  text-align: center;
  background: linear-gradient(120deg, #07ddf1, #32aff7 45%, #d152fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 2px rgba(7, 221, 241, 0.5)) drop-shadow(0 0 7px rgba(49, 175, 247, 0.3));
  margin-bottom: 14px;
}
.phone-tile {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(7, 221, 241, 0.06);
  border: 1px solid rgba(7, 221, 241, 0.2);
  border-radius: 10px;
  font-size: 12px;
  animation: tile-slide 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  /* Without min-width:0 a flex child cannot shrink below its content size,
     so longer translations (e.g. "Cyber Arena · ..." in EN/RU) overflow the
     phone mockup horizontally on small viewports. */
  min-width: 0;
}
.phone-tile:nth-child(3) { animation-delay: 100ms; }
.phone-tile:nth-child(4) { animation-delay: 200ms; }
.phone-tile:nth-child(5) { animation-delay: 300ms; }
.phone-tile .phone-tile-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-tile b {
  color: #07ddf1; font-weight: 700;
  flex: 0 0 auto;          /* never shrink the "free seats" badge */
  white-space: nowrap;
}
@keyframes tile-slide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
.phone-cta {
  margin-top: auto; margin-bottom: 6px;
  padding: 12px;
  background: linear-gradient(90deg, #07ddf1, #d152fa);
  color: #020514;
  text-align: center;
  font-weight: 700; font-size: 13px;
  border-radius: 10px;
}

/* ============ CONTACT ============ */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 880px) { .contact-wrap { grid-template-columns: 1fr; } }

.contact-list {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-direction: column; gap: 12px;
}
.contact-list li {
  /* Stack label and value vertically — label on top (small, uppercase,
     muted), value below (cyan link or plain). The previous flex-row
     layout had a fixed 90 px label width that was too narrow for the
     Armenian "Աշխատանքային ժամեր" string and the value fell against
     the label with no visible gap. Vertical stacking is consistent
     across all three languages and looks cleaner anyway. */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.contact-list li:first-child { border-top: 0; }
.contact-list span:first-child {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #94a3b8;
  width: auto;
}
.contact-list a,
.contact-list li > span:last-child:not(:first-child) {
  color: #07ddf1;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.contact-list a:hover { text-decoration: underline; }
/* The "hours" row uses two spans (label + .muted value); the second one
   should be readable (not cyan-bright like a link), but still bigger
   than the label. */
.contact-list span.muted {
  color: #cbd5e1;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.contact-form {
  background: rgba(11, 18, 36, 0.6);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(7, 221, 241, 0.15);
  border-radius: 18px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.contact-form label { display: flex; flex-direction: column; gap: 6px; }
.contact-form span {
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  color: #94a3b8;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: rgba(2, 5, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  color: #e6edf6;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  resize: vertical;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #07ddf1;
  box-shadow: 0 0 0 3px rgba(7, 221, 241, 0.12);
}
/* Custom <select> chrome — premium glass treatment. The native control
   chrome on Chrome / Firefox / Safari is crude and breaks the brand
   palette; we draw our own caret (a clean cyan chevron via SVG data-URL)
   and frame the field in subtle glass so it sits naturally with the
   .contact-form glass card around it. */
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-color: rgba(11, 18, 36, 0.55);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2307ddf1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  border: 1px solid rgba(7, 221, 241, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0.2px;
  transition:
    border-color 200ms ease,
    box-shadow 220ms ease,
    background-color 200ms ease,
    transform 160ms ease;
}
.contact-form select:hover {
  border-color: rgba(7, 221, 241, 0.45);
  background-color: rgba(11, 18, 36, 0.7);
}
.contact-form select:focus {
  border-color: #07ddf1;
  /* layered focus ring — outer cyan halo + inner soft tint = bigger
     visible focus without a hard double-ring look */
  box-shadow:
    0 0 0 3px rgba(7, 221, 241, 0.18),
    0 0 24px rgba(7, 221, 241, 0.25);
  background-color: rgba(11, 18, 36, 0.75);
}
/* Restore default text colour for the placeholder option even though it
   is `disabled` (browsers grey it out by default). */
.contact-form select:invalid {
  color: #94a3b8;
}
.contact-form select option {
  background: #0b1224;
  color: #e6edf6;
  padding: 10px;
}
.contact-form select option:disabled {
  color: #64748b;
}
.contact-form select.invalid {
  border-color: #ef4444;
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.18),
    0 0 24px rgba(239, 68, 68, 0.20);
  animation: cp-shake 360ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes cp-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* Form submit button — premium hover treatment. Idle state stays solid
   cyan with dark text (12.6:1 contrast, AAA). On hover a cyan→magenta
   gradient sweeps from left to right *behind* the label, the arrow icon
   slides forward, and a halo glow expands. The whole composition reads
   as "this button is alive and ready". */
.btn-submit {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px;
  border-radius: 999px;
  border: 1px solid rgba(7, 221, 241, 0.6);
  font-size: 15px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: #07ddf1;
  color: #020514;
  text-shadow: none;
  box-shadow:
    0 6px 20px rgba(7, 221, 241, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  overflow: hidden;
  isolation: isolate; /* keeps the ::before sweep clipped to the button */
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 240ms ease,
    border-color 200ms ease;
}
/* Sweep layer — sits at z-index 0 between the solid cyan plate and the
   text/icon (which we lift to z-index 1). On hover it slides right and
   reveals the gradient. */
.btn-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #07ddf1 0%,
    #32aff7 45%,
    #d152fa 100%);
  transform: translateX(-100%);
  transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 0;
}
.btn-submit > span,
.btn-submit > svg {
  position: relative;
  z-index: 1;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The form's label spans (.contact-form span) set color:#94a3b8 +
   font-size:12px which would normally win over .btn-submit because the
   selector is more specific (.contact-form span beats .btn-submit). We
   reset the inner span here at higher specificity so the label inherits
   the button's strong dark colour and font weight. */
.contact-form .btn-submit > span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0.2px;
}
.btn-submit svg { color: #020514; }
.btn-submit:hover {
  transform: translateY(-2px);
  border-color: rgba(209, 82, 250, 0.55);
  box-shadow:
    0 14px 38px rgba(7, 221, 241, 0.42),
    0 6px 18px rgba(209, 82, 250, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-submit:hover::before { transform: translateX(0); }
.btn-submit:hover > svg { transform: translateX(4px); }
.btn-submit:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}
.btn-submit:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.contact-form button { align-self: flex-start; margin-top: 4px; }
.form-status { font-size: 13px; min-height: 18px; color: #22c55e; }
.form-status.error { color: #ef4444; }

/* Footer domain link — keep the chip look from the previous span and add
   subtle hover affordance because it's now a real link to cyberplace.pro. */
.footer-domain {
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.footer-domain:hover {
  background: rgba(7, 221, 241, 0.16);
  border-color: rgba(7, 221, 241, 0.5);
  color: #2be4f5;
}

/* ============ FOOTER ============ */
.footer {
  padding: 40px 40px;
  border-top: 1px solid rgba(7, 221, 241, 0.1);
  background: #020514;
}
/* Footer is a 2-column flex: brand block (left), meta block (right).
   Previously copy + tag were 2nd and 3rd flex children of the row,
   so mid-width viewports wrapped them onto separate lines and broke
   the visual grouping. Wrapping both into .footer-meta keeps them
   stacked on the same vertical baseline ("aligned") regardless of
   viewport width. */
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 18px;
}
/* Footer brand block — logo, wordmark and domain chip in a single
   flex row. `gap: 14px` replaces the old `margin-right: 14px` on
   .footer-brand so all three children sit on the same rhythm
   (logo → wordmark → domain), rather than one custom margin and
   nothing for the new logo. */
.footer-brand-block {
  display: flex; align-items: center; gap: 14px;
}
/* Mirrors .nav-logo dimensions exactly (32px desktop, 26px ≤720px)
   so the footer brand mark sits at the same size as the navbar.
   Glow is a touch quieter (10px / 0.3 vs nav's 12px / 0.35) and
   no hover-rotate, because footers should feel calmer than the
   primary nav. object-fit:contain preserves logo.png's 134:116
   aspect ratio inside the square box. */
.footer-logo {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(7, 221, 241, 0.3));
}
.footer-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; text-align: right;
}
.footer-meta .muted { line-height: 1.45; }
@media (max-width: 720px) {
  .footer-inner { justify-content: center; }
  .footer-meta { align-items: center; text-align: center; }
}
.footer-brand {
  font-family: "Audiowide", "Inter", sans-serif;
  font-weight: 400; letter-spacing: 1px;
  background: linear-gradient(120deg, #07ddf1, #32aff7 45%, #d152fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 2px rgba(7, 221, 241, 0.5)) drop-shadow(0 0 8px rgba(49, 175, 247, 0.3));
  /* margin-right removed — spacing now handled uniformly by
     .footer-brand-block { gap: 14px } so logo / wordmark / domain
     all sit on the same rhythm. */
}
.footer-domain {
  display: inline-block;
  font-size: 12px;
  color: #07ddf1;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  background: rgba(7, 221, 241, 0.08);
  border: 1px solid rgba(7, 221, 241, 0.25);
  border-radius: 999px;
  vertical-align: middle;
}

/* ============ Responsive nav ============ */
@media (max-width: 720px) {
  .section { padding: 80px 22px; }
  .hero { padding: 100px 20px 60px; }
  .hero-stats { gap: 18px; padding: 14px 18px; }
  .stat-sep { display: none; }
}

/* On very narrow viewports the longer Armenian / Russian stat labels
   ("Կառավարվող համակարգիչներ", "Управляемых ПК") would otherwise
   horizontally overflow the rounded stats card. Allowing the row to wrap
   keeps everything inside the viewport without shrinking text. */
@media (max-width: 540px) {
  .hero-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    padding: 12px 16px;
  }
  .hero-cta .btn { padding: 12px 20px; font-size: 14px; }
  .contact-form { padding: 22px 18px; }
}

/* Tablet — keep platform/feature grid responsive without losing the
   3-column desktop layout above 980px. */
@media (min-width: 880px) and (max-width: 980px) {
  .platform-grid { grid-template-columns: 1fr 1fr; }
}

/* ============ Hero scroll-cue ============ */
/* Animated double-chevron prompt pinned to the bottom-centre of the
   viewport so it stays visible regardless of the hero's actual height
   (the bottom-aligned 4-paragraph copy can push the hero past 100 vh).
   Hides itself as soon as the user has scrolled more than 120 px,
   driven by the .is-hidden class toggled in app.js. */
.hero-scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(7, 221, 241, 0.85);
  text-decoration: none;
  cursor: pointer;
  /* Defer entry until everything else is in place — feels like a "now
     scroll" invitation rather than competing with the headline. */
  animation: scroll-cue-fade 900ms ease-out 1700ms both;
  transition: color 200ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 400ms ease;
}
.hero-scroll-cue:hover {
  color: #07ddf1;
  transform: translateX(-50%) translateY(-3px);
}
.hero-scroll-chevron {
  /* Continuous gentle bounce + opacity pulse — long enough (2.4s) that
     it doesn't feel anxious, short enough that it reads as "alive". */
  animation: scroll-cue-bounce 2.4s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
  filter: drop-shadow(0 0 8px rgba(7, 221, 241, 0.45));
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  35%      { transform: translateY(6px); opacity: 1; }
  70%      { transform: translateY(-1px); opacity: 0.85; }
}
@keyframes scroll-cue-fade {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Hide the cue once the user has clearly engaged with the page (handled
   in app.js by toggling .scrolled on the nav; we reuse that signal). */
.nav.scrolled ~ * .hero-scroll-cue,
.nav.scrolled + * .hero-scroll-cue {
  /* Selector won't match the actual DOM tree (nav + header siblings),
     so we fall back to a JS-toggled class — see `.is-scrolled` rule
     below applied to the cue itself. */
}
.hero-scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 400ms ease, transform 400ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-chevron { animation: none; }
  .hero-scroll-cue { animation: none; }
}

/* ============ Section reveal — premium polish ============ */
/* The base .reveal rule (top of file) handles a single fade-in-up. Add
   directional variants and a stagger so feature cards / platform cards /
   bullets enter in sequence rather than all at once — gives the page a
   choreographed feel without being slow. */
.reveal {
  /* Slightly more dramatic than the base — longer duration, tighter
     easing curve, larger initial offset. */
  transition:
    opacity 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(36px);
}
.reveal.in {
  transform: none;
}

/* Stagger nested children inside grid sections for a "wave" reveal. The
   IntersectionObserver still adds .in to the parent; nth-child here
   spaces the transitions visually. */
.grid-3 > .feature.reveal,
.platform-grid > .platform-card.reveal,
.bullets > .bullet.reveal,
.dl-grid > .dl-card.reveal {
  transition-delay: 0ms;
}
.grid-3 > .feature.reveal:nth-child(2),
.platform-grid > .platform-card.reveal:nth-child(2) { transition-delay: 120ms; }
.grid-3 > .feature.reveal:nth-child(3),
.platform-grid > .platform-card.reveal:nth-child(3) { transition-delay: 240ms; }
.bullets > .bullet.reveal:nth-child(2) { transition-delay: 80ms; }
.bullets > .bullet.reveal:nth-child(3) { transition-delay: 160ms; }
.bullets > .bullet.reveal:nth-child(4) { transition-delay: 240ms; }
.bullets > .bullet.reveal:nth-child(5) { transition-delay: 320ms; }
.bullets > .bullet.reveal:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; opacity: 1; }
  .reveal.in { transform: none; }
}

/* ============ Toast (top-right) ============ */
/* Single shared element re-used for success and error states. JS sets
   .toast.show and adds .toast--success | .toast--error for colour.
   Position: fixed top-right with safe-area inset so it floats above
   the iOS notch when the landing is opened from a webclip / PWA. */
.toast {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: 20px;
  z-index: 9999;
  min-width: 240px;
  max-width: min(380px, calc(100vw - 40px));
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  border: 1px solid transparent;
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.toast--success {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.96), rgba(5, 150, 105, 0.96));
  border-color: rgba(16, 185, 129, 0.55);
}
.toast--error {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.96), rgba(185, 28, 28, 0.96));
  border-color: rgba(239, 68, 68, 0.55);
}
@media (max-width: 540px) {
  .toast {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 120ms linear; transform: none; }
}