/* ==========================================================================
   OPTMZ design system
   Shared by the landing page, /privacy and /terms.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, self hosted.

   These were previously loaded from fonts.googleapis.com, which put two extra
   third party origins on the render blocking path: the browser had to resolve
   and connect to googleapis, fetch the CSS, and only then discover it needed
   gstatic as well. Declaring the faces here means the font files are
   discovered the moment this stylesheet parses, from our own origin.

   Bebas Neue and DM Sans are both under the SIL Open Font License 1.1.
   DM Sans is a variable font, so one file covers the whole 300 to 600 range.
   The unicode-range split is kept from Google's own CSS so a browser only
   downloads the latin-ext file when a page actually needs those glyphs.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bebas-neue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  /* Brand surfaces */
  --bg: #0E0E10;
  --surface: #141418;
  --surface-hi: #1c1c22;

  /* Brand gradient */
  --mint: #00F7C3;
  --blue: #3D7CFF;
  --purple: #B04DFF;
  --grad: linear-gradient(120deg, #00F7C3 0%, #3D7CFF 52%, #B04DFF 100%);

  /* Text */
  --text: #FFFFFF;
  --text-dim: rgba(255, 255, 255, 0.6);
  --text-mute: rgba(255, 255, 255, 0.46);

  /* Borders */
  --b1: rgba(255, 255, 255, 0.07);
  --b2: rgba(255, 255, 255, 0.12);
  --b3: rgba(255, 255, 255, 0.2);

  /* Module accents, used only inside their own module context */
  --gym: #E16236;
  --running: #3D9E6E;
  --reading: #C49A2A;
  --sleep: #6B5FBF;
  --food: #22C55E;
  --mma: #DC2626;

  --maxw: 1180px;
  --radius: 20px;
  --radius-lg: 28px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* Accessibility ---------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--mint); color: #04110e; font-weight: 600;
  padding: 10px 18px; border-radius: 10px; text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

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

/* Ambient background ----------------------------------------------------- */

/*
  These three ambient blobs used to be solid circles run through
  filter: blur(120px). That is the single most expensive thing on the page
  for a real phone, and it is invisible to Lighthouse because it costs
  GPU memory and compositing rather than load time or main-thread time.

  A filtered layer needs a backing store padded by roughly three sigma on
  every side, and blur(120px) is sigma 60, so 180px of padding per edge.
  At an iPhone's device pixel ratio of 3 that made:

    glow-1  640x640 css -> 3000x3000 device px = 34.3 MB
    glow-2  560x560 css -> 2760x2760 device px = 29.1 MB
    glow-3  420x420 css -> 2340x2340 device px = 20.9 MB
                                        total  = 84.3 MB

  84 MB of GPU surface, permanently resident because the elements are
  position: fixed, for decoration that is aria-hidden. Under memory
  pressure iOS Safari responds by discarding and reloading the tab, which
  is experienced as "slow" or "it didn't open".

  A gaussian-blurred flat circle is, by definition, a radial gradient. So
  the gradient is drawn directly instead of asking the GPU to compute it
  every composite. No filter, no padded backing store, no extra layer, and
  the same soft blob on screen. Each element grew by 2 x 180px, and its
  offsets moved by 180px, so the gradient occupies exactly the area the
  blur used to bleed into.
*/
.glow {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 0; opacity: .55;
}
.glow-1 {
  width: 1000px; height: 1000px; top: -440px; left: -380px;
  background: radial-gradient(closest-side circle, rgba(0, 247, 195, 0.10), rgba(0, 247, 195, 0) 100%);
}
.glow-2 {
  width: 920px; height: 920px; bottom: -400px; right: -360px;
  background: radial-gradient(closest-side circle, rgba(176, 77, 255, 0.09), rgba(176, 77, 255, 0) 100%);
}
.glow-3 {
  width: 780px; height: 780px; top: 46%; left: 52%; margin: -180px 0 0 -180px;
  background: radial-gradient(closest-side circle, rgba(61, 124, 255, 0.07), rgba(61, 124, 255, 0) 100%);
}

/* Typography ------------------------------------------------------------- */

h1, h2, h3, h4 { font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; letter-spacing: 1.5px; line-height: .96; }

.display {
  font-size: clamp(38px, 8.5vw, 104px);
  letter-spacing: 2px;
  line-height: .95;
}
.h2 { font-size: clamp(30px, 5.6vw, 68px); }
.h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 1px; }

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mint);
  background: rgba(0, 247, 195, 0.07);
  border: 1px solid rgba(0, 247, 195, 0.22);
  border-radius: 100px; padding: 7px 16px;
  margin-bottom: 22px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }

.lede {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-dim);
  font-weight: 300;
  line-height: 1.8;
  max-width: 60ch;
}

/* Layout ----------------------------------------------------------------- */

section { position: relative; z-index: 1; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(72px, 10vw, 132px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }
.section-head .h2 { margin-bottom: 18px; }

.divider { height: 1px; background: var(--b1); border: 0; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500;
  padding: 14px 26px; border-radius: 100px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary {
  background: var(--grad); color: #05130f; font-weight: 600;
  box-shadow: 0 8px 30px rgba(0, 247, 195, 0.16);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(0, 247, 195, 0.26); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.04); color: var(--text); border-color: var(--b2);
}
.btn-ghost:hover { border-color: var(--b3); background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 14px; }

/* Apple App Store badge. Rendered from Apple's own artwork proportions.
   Never restyled into a custom fake badge. */
.appstore-badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: #fff; color: #000;
  padding: 10px 20px 10px 17px; border-radius: 12px;
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
}
.appstore-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45); }
.appstore-badge svg { width: 24px; height: 24px; flex-shrink: 0; }
.appstore-badge .badge-copy { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.appstore-badge .badge-sm { font-size: 10px; letter-spacing: .3px; }
.appstore-badge .badge-lg { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }

/* Android status pill. Inert while ANDROID_LIVE is false. */
.android-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-mute);
  border: 1px dashed var(--b2); border-radius: 100px;
  padding: 11px 20px; background: rgba(255, 255, 255, 0.02);
  cursor: default;
}
.android-pill[data-live='true'] {
  cursor: pointer; border-style: solid; color: var(--text); text-decoration: none;
}

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* Navigation ------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 120;
  background: rgba(14, 14, 16, 0.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--b1);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* The logotype PNG is a 1024 square with wide transparent margins, so the
   artwork is displayed oversized inside a cropped box to make the wordmark
   read at a normal navigation size. */
/* The logotype is a square with wide transparent margins, so the artwork is
   cropped to the wordmark band. Cropping with object-fit instead of an
   overflow-hidden box lets the anchor itself grow to a 44px tap target while
   the visible mark stays 34px tall. */
.nav-logo {
  display: flex; align-items: center; justify-content: flex-start;
  text-decoration: none; flex-shrink: 0;
  width: 116px; min-height: 44px;
}
.nav-logo img {
  height: 34px; width: 116px; max-width: none;
  object-fit: cover; object-position: center;
}

.nav-links { display: flex; align-items: center; gap: 12px; }
/* Hit area is raised to 44px via padding rather than by growing the text, so
   the bar looks the same while the tappable region meets the 44px minimum.
   The horizontal gap drops from 26px to 12px to absorb the new side padding,
   keeping the visual spacing between labels roughly where it was. */
.nav-links a {
  font-size: 14px; color: var(--text-dim); text-decoration: none; transition: color .2s;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 7px;
}
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--b2); border-radius: 10px;
  width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--text); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--text);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* Hero ------------------------------------------------------------------- */

.hero { padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 110px); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 34px; }
.hero-note { font-size: 13px; color: var(--text-mute); margin-top: 18px; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px;
}
.hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--b1);
  border-radius: 100px; padding: 8px 15px; font-size: 12.5px; color: var(--text-dim);
}
.hero-chip .swatch { width: 7px; height: 7px; border-radius: 50%; }

/* Phone frame ------------------------------------------------------------ */

.phone-stage { position: relative; display: flex; justify-content: center; }

.phone {
  position: relative; width: min(300px, 78vw); aspect-ratio: 9 / 19.5;
  background: #000; border-radius: 42px;
  border: 1px solid var(--b3);
  padding: 9px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.phone::before {
  content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 24px; background: #000; border-radius: 100px; z-index: 3;
}
.phone-screen {
  position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
  background: var(--surface);
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }

/* Clearly marked slot awaiting a real app screenshot. */
.shot-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 26px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 247, 195, 0.09), transparent 62%),
    var(--surface);
  border: 1px dashed var(--b2);
  border-radius: 34px;
}
.shot-placeholder img { width: 46px; height: 46px; object-fit: contain; opacity: .5; }
.shot-placeholder .slot-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .5px; color: var(--mint);
  background: rgba(0, 247, 195, 0.08); border: 1px solid rgba(0, 247, 195, 0.2);
  border-radius: 6px; padding: 5px 9px; word-break: break-all;
}
.shot-placeholder .slot-desc { font-size: 12px; color: var(--text-mute); line-height: 1.5; }

/* Floating abstract progress cards. These are decorative brand motifs,
   not representations of real app screens. */
.float-card {
  position: absolute; z-index: 4;
  background: rgba(20, 20, 24, 0.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--b2); border-radius: 16px;
  padding: 13px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  animation: float 7s ease-in-out infinite;
}
.float-card .fc-label {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-mute);
  margin-bottom: 5px;
}
.float-card .fc-value { font-family: 'Bebas Neue', sans-serif; font-size: 25px; letter-spacing: 1px; line-height: 1; }
.float-xp { top: 11%; left: -8%; animation-delay: -1s; }
.float-streak { bottom: 20%; right: -8%; animation-delay: -3.5s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

.ring-track { width: 46px; height: 46px; }

/* Cards and grids -------------------------------------------------------- */

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--b1); border-radius: var(--radius);
  padding: 28px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--b2); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 14px; color: var(--text-dim); font-weight: 300; line-height: 1.7; }

.card-icon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--b1);
}
.card-icon svg { width: 20px; height: 20px; }

/* Feature rows ----------------------------------------------------------- */

.feature-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px); align-items: center;
  padding: clamp(48px, 7vw, 84px) 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--b1); }
.feature-row.flip .feature-media { order: -1; }
.feature-row h2 { margin-bottom: 16px; }
.feature-list { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 11px; }
.feature-list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px; color: var(--text-dim); font-weight: 300;
}
.feature-list .bullet {
  width: 5px; height: 5px; border-radius: 50%; background: var(--mint);
  flex-shrink: 0; margin-top: 9px;
}

.feature-media { position: relative; }

/* Scene art panels. These use genuine in-app world artwork. */
.scene {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--b2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.scene img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.scene::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 14, 16, 0.72), rgba(14, 14, 16, 0.05) 55%);
  pointer-events: none;
}
.scene-caption {
  position: absolute; left: 20px; bottom: 16px; z-index: 2;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-dim);
}
.scene-tall { aspect-ratio: 3 / 4; }
.scene-wide { aspect-ratio: 16 / 10; }

/* Characters ------------------------------------------------------------- */

.char-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.char {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--b1); border-radius: 18px;
  padding: 20px 12px 16px; text-align: center;
  transition: transform .3s ease, border-color .3s ease;
}
.char:hover { transform: translateY(-6px); border-color: var(--b2); }
.char img { height: 96px; width: auto; margin: 0 auto 14px; object-fit: contain; }
.char .char-name { font-size: 13px; font-weight: 500; }
.char .char-role { font-size: 11px; color: var(--text-mute); margin-top: 3px; line-height: 1.45; }

/* Steps ------------------------------------------------------------------ */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.step {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--b1); border-radius: var(--radius); padding: 28px 24px;
  position: relative; overflow: hidden;
}
.step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad);
  opacity: .5;
}
.step-num {
  font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 1px;
  line-height: 1; margin-bottom: 14px;
}
.step h3 { font-size: 20px; margin-bottom: 9px; }
.step p { font-size: 13.5px; color: var(--text-dim); font-weight: 300; line-height: 1.65; }

/* Pro -------------------------------------------------------------------- */

.pro-panel {
  border: 1px solid var(--b2); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0, 247, 195, 0.10), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(176, 77, 255, 0.10), transparent 55%),
    var(--surface);
  padding: clamp(32px, 5vw, 60px);
}
.pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.pro-benefits { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.pro-benefits li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--text-dim); font-weight: 300; }
.pro-benefits svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; }
.pro-pricing-note { font-size: 13px; color: var(--text-mute); margin-top: 18px; line-height: 1.6; }

/* Screenshot showcase ---------------------------------------------------- */

/* The rail sits outside .wrap so it can bleed to the screen edge on phones,
   which is the right feel for a horizontal scroller. Left unconstrained it
   also bled on desktop, reaching 2545px on an ultrawide monitor and leaving
   the scroll track visibly wider than every other section. Capping it at the
   same --maxw as .wrap keeps it edge to edge on mobile (where the cap is
   larger than the viewport) while aligning it with the rest of the page on
   anything wider. */
.shot-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(228px, 62vw);
  gap: 18px; overflow-x: auto; padding: 6px 24px 24px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  max-width: var(--maxw);
  margin-inline: auto;
}
.shot-rail > * { scroll-snap-align: center; }
.shot-rail .phone { width: 100%; border-radius: 34px; padding: 7px; }
.shot-rail .phone::before { width: 62px; height: 18px; top: 15px; }
.shot-rail .phone-screen, .shot-rail .shot-placeholder { border-radius: 28px; }
.shot-item { display: flex; flex-direction: column; gap: 12px; }
.shot-item .shot-label { font-size: 12.5px; color: var(--text-dim); text-align: center; }

/* FAQ -------------------------------------------------------------------- */

.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--b1); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; text-align: left;
  font-family: 'DM Sans', sans-serif; font-size: 16.5px; font-weight: 500; color: var(--text);
}
.faq-q .chev { width: 18px; height: 18px; flex-shrink: 0; transition: transform .3s ease; color: var(--text-mute); }
.faq-q[aria-expanded='true'] .chev { transform: rotate(180deg); color: var(--mint); }
.faq-a { display: none; padding: 0 4px 24px; }
.faq-a p { font-size: 14.5px; color: var(--text-dim); font-weight: 300; line-height: 1.75; }
.faq-item.open .faq-a { display: block; }
/* Without JavaScript every answer stays visible and readable. */
.no-js .faq-a { display: block; }
.no-js .faq-q .chev { display: none; }

/* Final CTA -------------------------------------------------------------- */

.final { text-align: center; padding: clamp(80px, 11vw, 150px) 0; position: relative; overflow: hidden; }
.final::before {
  content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 760px; height: 560px; max-width: 130vw;
  background: radial-gradient(ellipse, rgba(0, 247, 195, 0.09), transparent 68%);
  pointer-events: none;
}
.final .cta-row { justify-content: center; }

/* Footer ----------------------------------------------------------------- */

.footer { border-top: 1px solid var(--b1); padding: clamp(48px, 6vw, 72px) 0 40px; position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-logo { height: 34px; width: 116px; overflow: hidden; display: flex; align-items: center; margin-bottom: 18px; }
.footer-logo img { height: 108px; width: auto; max-width: none; }
.footer-about { font-size: 13.5px; color: var(--text-dim); font-weight: 300; max-width: 40ch; line-height: 1.7; }
.footer h3 { font-size: 15px; letter-spacing: 1.4px; margin-bottom: 16px; color: var(--text); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0; }
.footer-links a, .footer-links span {
  font-size: 13.5px; color: var(--text-dim); text-decoration: none; transition: color .2s;
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer-links a:hover { color: var(--mint); }
.footer-bottom {
  border-top: 1px solid var(--b1); padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
}
.footer-bottom p { font-size: 12.5px; color: var(--text-mute); }
.footer-bottom .footer-links { flex-direction: row; gap: 20px; }

/* Support page ----------------------------------------------------------- */

.support-hero { padding-bottom: clamp(48px, 7vw, 86px); }
.support-hero-card {
  max-width: 900px; margin: 0 auto; padding: clamp(32px, 5vw, 52px);
  border: 1px solid var(--b2); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 247, 195, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.32);
}
.support-intro {
  max-width: 72ch; margin-bottom: 0;
}
.support-visible-email {
  margin-top: 22px; font-size: 1.05rem; font-weight: 600; color: var(--text);
}
.support-visible-email a { color: var(--mint); text-decoration: none; }
.support-visible-email a:hover { color: var(--text); }
.support-note { margin-top: 10px; font-size: 0.95rem; color: var(--text-dim); }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.support-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--b1); border-radius: var(--radius); padding: 28px;
}
.support-card .h3 { margin-bottom: 14px; }
.support-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.support-list li { font-size: 14.5px; color: var(--text-dim); line-height: 1.8; }
.support-list strong { color: var(--text); }
.support-contact {
  max-width: 880px; margin: 0 auto; padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--b2); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
}
.support-contact p { max-width: 68ch; margin: 16px auto 0; color: var(--text-dim); }
.support-legal-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 24px;
  padding: 6px 0 12px;
}
.support-legal-links a {
  color: var(--text-dim); text-decoration: none; font-weight: 500;
}
.support-legal-links a:hover { color: var(--mint); }

/* Legal pages ------------------------------------------------------------ */

.legal { max-width: 780px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) 24px clamp(64px, 8vw, 110px); }
.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text-dim); text-decoration: none; margin-bottom: 22px;
  min-height: 44px;
}
.legal-back:hover { color: var(--mint); }
.legal h1 { font-size: clamp(38px, 6vw, 60px); margin-bottom: 14px; }
.legal .updated {
  display: inline-block; font-size: 12.5px; color: var(--mint);
  background: rgba(0, 247, 195, 0.07); border: 1px solid rgba(0, 247, 195, 0.2);
  border-radius: 100px; padding: 6px 15px; margin-bottom: 30px;
}
.legal .intro { font-size: 15.5px; color: var(--text-dim); font-weight: 300; line-height: 1.8; }
.legal h2 {
  font-size: clamp(24px, 3vw, 32px); margin: 48px 0 16px;
  padding-top: 32px; border-top: 1px solid var(--b1);
}
.legal h3 { font-size: 19px; margin: 28px 0 10px; color: var(--text); }
.legal p { font-size: 15px; color: var(--text-dim); font-weight: 300; line-height: 1.8; margin-bottom: 15px; }
.legal ul { margin: 0 0 18px 0; padding-left: 20px; }
.legal li { font-size: 15px; color: var(--text-dim); font-weight: 300; line-height: 1.8; margin-bottom: 8px; }
.legal strong { color: var(--text); font-weight: 500; }
.legal a { color: var(--mint); }
.legal .table-scroll { overflow-x: auto; margin-bottom: 20px; border: 1px solid var(--b1); border-radius: 14px; }
.legal table { width: 100%; border-collapse: collapse; min-width: 520px; }
.legal th, .legal td {
  text-align: left; padding: 13px 16px; font-size: 14px; font-weight: 300;
  color: var(--text-dim); border-bottom: 1px solid var(--b1);
}
.legal th { color: var(--text); font-weight: 500; background: rgba(255, 255, 255, 0.025); }
.legal tr:last-child td { border-bottom: 0; }
.legal .callout {
  background: var(--surface); border: 1px solid var(--b2); border-left: 3px solid var(--mint);
  border-radius: 12px; padding: 20px 22px; margin-bottom: 20px;
}
.legal .callout p:last-child { margin-bottom: 0; }

/* Skeleton loaders --------------------------------------------------------

   Image-heavy blocks reserve their space and show a pulsing surface tile
   until the image decodes, so a slow connection sees the page's shape
   rather than empty holes.

   The skeleton lives on the wrapper, behind the image. main.js adds
   .is-loaded once each image finishes, which fades the image in and stops
   the animation. If JavaScript never runs, the img still paints normally
   on top of the tile, so nothing is ever permanently hidden.
   -------------------------------------------------------------------------- */

.skel { position: relative; background: var(--surface); overflow: hidden; }

.skel::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    var(--surface) 30%,
    var(--surface-hi) 50%,
    var(--surface) 70%
  );
  background-size: 260% 100%;
  pointer-events: none;
  z-index: 0;
}

/*
  The sweep animates background-position, which repaints every frame and
  cannot be handed to the GPU. There are 32 .skel tiles on this page, so
  leaving it on by default meant 32 elements repainting continuously,
  including every one that was off screen. Gating on .in-view keeps the
  repaint to the two or three tiles actually on screen.

  Animating transform instead would composite, but promoting 32 tiles to
  their own layers costs far more GPU memory than the repaint saves, so
  the cheap property stays and the element count comes down instead.

  If the observer never runs the tile is simply static, which is a purely
  cosmetic downgrade. The image underneath still loads and still fades in.
*/
.skel.in-view::before {
  animation: skel-sweep 1.5s ease-in-out infinite;
}

/* Once loaded, retire the tile and reveal the image. */
.skel.is-loaded { background: transparent; }
.skel.is-loaded::before { animation: none; opacity: 0; }

.skel > img { opacity: 0; transition: opacity .45s ease; position: relative; z-index: 1; }
.skel.is-loaded > img { opacity: 1; }

/* Without JavaScript nothing can flip .is-loaded, so never hide the image. */
.no-js .skel > img { opacity: 1; }
.no-js .skel::before { animation: none; opacity: 0; }

@keyframes skel-sweep {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Static tile, no sweep, and no fade in. Must match the specificity of
     .skel.in-view::before or it would lose to it and animate anyway. */
  .skel::before, .skel.in-view::before { animation: none; }
  .skel > img { transition: none; }
}

/* Scroll reveal ---------------------------------------------------------- */

/* Shorter and shallower than before (was .7s / 26px). A faster fade narrows
   the window in which a section could be perceived as blank, and less travel
   means less apparent lag if the transition does start slightly late. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.reveal.visible { opacity: 1; transform: none; }
/* Content must never be hidden when JavaScript is unavailable. */
.no-js .reveal { opacity: 1; transform: none; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1000px) {
  .char-grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(14, 14, 16, 0.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--b1); padding: 8px 24px 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--b1); font-size: 15px; }
  .nav-toggle { display: flex; }
  .nav .btn-primary { display: none; }

  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero .cta-row, .hero-stats { justify-content: center; }
  .phone-stage { margin-top: 12px; }
  .float-xp { left: -2%; }
  .float-streak { right: -2%; }

  .feature-row { grid-template-columns: 1fr; }
  .feature-row.flip .feature-media { order: 0; }
  .pro-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { max-width: none; }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4, .steps { grid-template-columns: 1fr; }
  .char-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .support-grid { grid-template-columns: 1fr; }
  .support-card, .support-contact { padding: 24px; }
  .legal h2 { margin-top: 36px; padding-top: 26px; }
  .float-card { padding: 10px 13px; }
  .float-card .fc-value { font-size: 21px; }
}

@media (max-width: 380px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row > * { justify-content: center; }
}

/* Motion preferences ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}