/* =========================================================
   HassounCube — Global Design System
   Type:  Space Grotesk (display) + Inter (body)
   Base:  deep amethyst night #0B0714
   Accent: amethyst #A855F7 / lilac #C4A2FF
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Surfaces */
  --void: #07040D;
  --ink: #0B0714;
  --ink-2: #120B1F;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --line: rgba(196, 162, 255, 0.14);
  --line-strong: rgba(196, 162, 255, 0.28);

  /* Text */
  --text: #F4F0FA;
  --text-soft: #B5A8CC;
  --text-faint: #7D7192;

  /* Amethyst scale */
  --am-100: #EEE3FF;
  --am-300: #C4A2FF;
  --am-500: #A855F7;
  --am-600: #8B33E0;
  --am-700: #6B21A8;
  --am-900: #2A0B4A;
  --am-glow: rgba(168, 85, 247, 0.45);

  /* Product identity hues */
  --mw: #3FD8B6;
  --mw-deep: #06423A;
  --kv: #A855F7;
  --kv-deep: #2A0B4A;
  --nv: #FF8A4C;
  --nv-deep: #4A2409;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 30px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-s: 220ms;
  --dur-m: 420ms;
  --dur-l: 720ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient amethyst field behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(70rem 40rem at 78% -10%, rgba(168, 85, 247, 0.20), transparent 62%),
    radial-gradient(50rem 35rem at 0% 18%, rgba(107, 33, 168, 0.22), transparent 60%),
    radial-gradient(60rem 40rem at 50% 120%, rgba(139, 51, 224, 0.14), transparent 60%);
}
body > * { position: relative; z-index: 1; }

body.nav-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

::selection { background: var(--am-500); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--am-300);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 300;
  background: var(--am-500);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  transition: top var(--dur-s) var(--ease);
}
.skip-link:focus { top: 12px; }

/* =========================================================
   Cube loader
   The overlay fades itself out with CSS so the page is never
   blocked if JavaScript fails to run. JS only shortens it.
   ========================================================= */
.cube-loader {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  gap: 26px;
  background: radial-gradient(60rem 40rem at 50% 40%, #150B26, var(--void) 70%);
  animation: loaderOut 620ms var(--ease) 1500ms forwards;
}
.cube-loader.is-done { animation: loaderOut 480ms var(--ease) forwards; }
/* Set by the inline head script on every page after the first of a session,
   so moving between pages never shows the loader again. */
html.no-loader .cube-loader { display: none; }
@keyframes loaderOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.cube-stage {
  perspective: 900px;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
}
/* One size variable drives both the face size and the translation distance,
   so every face lands exactly on the cube's surface and the twelve edges meet
   as a closed cube. Never set a face size and a translateZ independently. */
.cube {
  --cube-size: 78px;
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  animation: cubeSpin 4.2s linear infinite;
}
.cube-face {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: var(--cube-size);
  height: var(--cube-size);
  border: 1.5px solid var(--am-300);
  background: linear-gradient(140deg, rgba(168, 85, 247, 0.30), rgba(168, 85, 247, 0.05));
  box-shadow: inset 0 0 26px rgba(196, 162, 255, 0.28);
}
.cube-face.f-front  { transform: translateZ(calc(var(--cube-size) / 2)); }
.cube-face.f-back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face.f-right  { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face.f-left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face.f-top    { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

@keyframes cubeSpin {
  from { transform: rotateX(-24deg) rotateY(0deg); }
  to   { transform: rotateX(-24deg) rotateY(360deg); }
}

.cube-loader-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--am-300);
  opacity: 0.85;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cube-loader { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease),
              background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--am-500), var(--am-600));
  color: #fff;
  box-shadow: 0 10px 30px -10px var(--am-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px var(--am-glow); }
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--line-strong);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--am-300); transform: translateY(-2px); }
.btn-on-dark { background: #fff; color: #16091F; }
.btn-on-dark:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(0,0,0,0.7); }
.btn svg { width: 16px; height: 16px; }
[dir="rtl"] .btn svg { transform: scaleX(-1); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 7, 20, 0.72);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.site-header.is-nav-open { background: var(--ink); }
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(11, 7, 20, 0.9);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
  gap: 24px;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand-mark {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--am-500), var(--am-700));
  position: relative;
  box-shadow: 0 6px 18px -6px var(--am-glow);
  transition: transform var(--dur-m) var(--ease);
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  transform: rotate(0deg);
}
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.05); }

.main-nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
}
.main-nav-links a {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.main-nav-links a:hover { background: var(--surface-2); color: var(--text); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switch {
  display: flex;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  background: var(--surface);
}
.lang-switch button {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--text-faint);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.is-active {
  background: linear-gradient(135deg, var(--am-500), var(--am-600));
  color: #fff;
}

.nav-toggle {
  display: none;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line);
  background: var(--surface);
}
.nav-toggle-bars { position: relative; width: 18px; height: 12px; }
.nav-toggle-bars span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav-menu { display: none; }

@media (max-width: 900px) {
  .main-nav-links { display: none; }
  .header-actions > .btn-primary { display: none; }
  .nav-toggle { display: flex; }

  /* The sheet is positioned against the header, not the viewport. The header
     uses backdrop-filter, which makes it the containing block for fixed
     descendants, so `position: fixed` here would resolve against the header
     box and the panel would land in the wrong place. Absolute at top: 100%
     is correct in both cases and needs no hard-coded header height. */
  .mobile-nav-menu {
    display: block;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease),
                visibility 0s linear var(--dur-m);
    z-index: 95;
    padding: 20px var(--gutter) 34px;
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .mobile-nav-menu a {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav-menu a:last-of-type { border-bottom: none; }
  .mobile-nav-menu .btn-primary {
    margin-top: 22px;
    width: 100%;
    border-bottom: none;
    font-size: 1rem;
  }
}

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 10vw, 136px); }
.section-head { max-width: 660px; margin-bottom: clamp(36px, 6vw, 64px); }
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--am-300);
  margin-bottom: 16px;
  display: inline-block;
}
.section-title { font-size: clamp(1.95rem, 4.2vw, 2.9rem); }
.section-sub {
  margin-top: 16px;
  font-size: 1.08rem;
  color: var(--text-soft);
  max-width: 54ch;
}

.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  border: 0;
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(64px, 11vw, 132px) clamp(40px, 7vw, 84px);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(2.5rem, 6vw, 4.3rem);
  letter-spacing: -0.035em;
}
.hero-copy h1 .accent {
  background: linear-gradient(120deg, var(--am-300), var(--am-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy p {
  margin-top: 22px;
  font-size: 1.15rem;
  color: var(--text-soft);
  max-width: 48ch;
}
.hero-actions {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-copy .eyebrow, .hero-copy h1, .hero-copy p, .hero-actions {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
.hero-copy h1 { transition-delay: 90ms; }
.hero-copy p { transition-delay: 180ms; }
.hero-actions { transition-delay: 270ms; }
[data-hero].is-revealed .eyebrow,
[data-hero].is-revealed h1,
[data-hero].is-revealed p,
[data-hero].is-revealed .hero-actions { opacity: 1; transform: translateY(0); }

/* Hero visual: floating amethyst cube */
.hero-visual {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.30), transparent 62%),
    linear-gradient(160deg, #150C26, #0A0613);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  transition: opacity var(--dur-l) var(--ease) 140ms, transform var(--dur-l) var(--ease) 140ms;
}
[data-hero].is-revealed .hero-visual { opacity: 1; transform: translateY(0) scale(1); }
.hero-visual-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196, 162, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 162, 255, 0.07) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 78%);
}
.hero-cube-stage {
  perspective: 1100px;
  width: 55%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
}
.hero-cube {
  --cube-size: clamp(108px, 17vw, 172px);
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  animation: heroCube 16s linear infinite;
}
.hero-cube .cube-face {
  width: var(--cube-size);
  height: var(--cube-size);
  border-color: rgba(196, 162, 255, 0.55);
  background: linear-gradient(140deg, rgba(168, 85, 247, 0.26), rgba(168, 85, 247, 0.04));
  box-shadow: inset 0 0 40px rgba(196, 162, 255, 0.22);
}
@keyframes heroCube {
  from { transform: rotateX(-22deg) rotateY(0deg) rotateZ(4deg); }
  to   { transform: rotateX(-22deg) rotateY(360deg) rotateZ(4deg); }
}
.hero-visual-halo {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--am-glow), transparent 68%);
  filter: blur(28px);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 380px; margin-inline: auto; width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
}

/* ---------- Product cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease),
              border-color var(--dur-m) var(--ease);
}
.product-card:hover {
  transform: translateY(-8px);
  border-color: var(--line-strong);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(196,162,255,0.08);
}
.product-card-media {
  aspect-ratio: 16 / 11;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.product-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,7,20,0.55), transparent 55%);
}
.product-card-media[data-tone="mw"] { background: linear-gradient(155deg, #05332C, #0C7C6B 60%, #3FD8B6); }
.product-card-media[data-tone="kv"] { background: linear-gradient(155deg, #2A0B4A, #8B33E0 60%, #C4A2FF); }
.product-card-media[data-tone="nv"] { background: linear-gradient(155deg, #3B1B08, #C25A22 60%, #FF8A4C); }

.media-placeholder {
  position: relative;
  z-index: 1;
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.28);
  border: 1px dashed rgba(255,255,255,0.4);
  padding: 7px 14px;
  border-radius: 999px;
}
.media-shape {
  position: absolute;
  inset: 0;
}
.media-shape.grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 26px 26px;
}
.media-shape.orb {
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.4), transparent 58%);
}
.media-shape.glass {
  inset: 22% 24% auto;
  height: 45%;
  border-radius: 18px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(6px);
}

.product-card-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.product-card-name { font-size: 1.35rem; }
.product-card-tagline { color: var(--text-soft); font-size: 0.98rem; flex-grow: 1; }
.product-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.platform-tag {
  font-size: 0.74rem;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--am-300);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
}
.product-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.92rem;
  font-family: var(--font-display);
  color: var(--text);
}
.product-card-link svg { width: 15px; height: 15px; transition: transform var(--dur-s) var(--ease); }
[dir="rtl"] .product-card-link svg { transform: scaleX(-1); }
.product-card:hover .product-card-link svg { transform: translateX(4px); }
[dir="rtl"] .product-card:hover .product-card-link svg { transform: scaleX(-1) translateX(4px); }

/* ---------- PWA / iPhone ---------- */
.pwa-section {
  border-radius: var(--radius-l);
  margin-inline: var(--gutter);
  padding: clamp(44px, 7vw, 92px) clamp(26px, 6vw, 76px);
  border: 1px solid var(--line);
  background:
    radial-gradient(40rem 30rem at 85% 0%, rgba(168,85,247,0.22), transparent 65%),
    linear-gradient(160deg, #170D28, #0A0613);
  overflow: hidden;
}
.pwa-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 940px) { .pwa-grid { grid-template-columns: 1fr; } }

.pwa-steps {
  margin-top: 34px;
  counter-reset: step;
  display: flex;
  flex-direction: column;
}
.pwa-step {
  counter-increment: step;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding-block: 11px;
  border-bottom: 1px solid rgba(196,162,255,0.10);
}
.pwa-step:last-child { border-bottom: none; }
.pwa-step::before {
  content: counter(step);
  flex-shrink: 0;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: rgba(168,85,247,0.18);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--am-300);
  margin-top: 2px;
}
.pwa-step-text { font-size: 0.98rem; color: var(--text-soft); }

.iphone-frame {
  width: min(100%, 292px);
  margin-inline: auto;
  aspect-ratio: 9 / 19.2;
  border-radius: 46px;
  background: linear-gradient(160deg, #2B2340, #0A0810);
  padding: 11px;
  position: relative;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(196,162,255,0.18);
}
.iphone-notch {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 22px;
  background: #07050C;
  border-radius: 14px;
  z-index: 2;
}
/* When a real recording is playing it already contains the phone's own status
   bar and island, so the drawn notch would sit on top of it. The drawn one is
   only there for the placeholder state. */
.iphone-frame:has(video) .iphone-notch { display: none; }

.iphone-screen {
  width: 100%; height: 100%;
  border-radius: 36px;
  background: linear-gradient(170deg, #1C1230, #0A0613);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
/* The screen's padding and flex centering are for the placeholder button, not
   the video. The video is taken out of that flow so it fills the glass edge to
   edge, with the frame's own radius clipping it. */
.iphone-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: #000;
}
.iphone-play-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-align: center;
}
.iphone-play {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(168,85,247,0.22);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.iphone-play svg { width: 16px; height: 16px; fill: var(--am-100); margin-inline-start: 3px; }
.iphone-play-wrap:hover .iphone-play { background: rgba(168,85,247,0.4); transform: scale(1.06); }

/* ---------- Platform section ---------- */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.platform-badge {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  transition: border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease),
              background var(--dur-s) var(--ease);
}
.platform-badge:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-4px);
}
.platform-badge-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(168,85,247,0.16);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--am-300);
}
.platform-badge-icon svg { width: 20px; height: 20px; }
.platform-badge-label { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.platform-badge-desc { font-size: 0.92rem; color: var(--text-soft); }

/* ---------- About ---------- */
.about-block {
  display: grid;
  grid-template-columns: 0.62fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 820px) { .about-block { grid-template-columns: 1fr; } }
.about-block .section-title { font-size: clamp(1.85rem, 3.8vw, 2.5rem); }
.about-body { font-size: 1.12rem; color: var(--text-soft); max-width: 58ch; }
.about-body + .about-body { margin-top: 18px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 60px 34px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 34px;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
.footer-col-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.footer-col a, .footer-col span {
  display: block;
  font-size: 0.94rem;
  padding-block: 6px;
  color: var(--text-soft);
  transition: color var(--dur-s) var(--ease);
}
.footer-col a:hover { color: var(--am-300); }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { color: var(--text-soft); font-size: 0.93rem; max-width: 36ch; }
.footer-bottom {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* ---------- Placeholder blocks ---------- */
.placeholder-block {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--surface);
  text-align: center;
  padding: 14px;
}