/* Cairo — self-hosted so the strict CSP (default-src 'self') keeps holding.
   Downloaded from Google Fonts; SIL Open Font License 1.1. */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/home/fonts/cairo-arabic-0.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/home/fonts/cairo-latin-ext-1.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: "Cairo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/home/fonts/cairo-latin-2.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: "Cairo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/home/fonts/cairo-arabic-0.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/home/fonts/cairo-latin-ext-1.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: "Cairo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/home/fonts/cairo-latin-2.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: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/home/fonts/cairo-arabic-0.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/home/fonts/cairo-latin-ext-1.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: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/home/fonts/cairo-latin-2.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: "Cairo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/home/fonts/cairo-arabic-0.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/home/fonts/cairo-latin-ext-1.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: "Cairo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/home/fonts/cairo-latin-2.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;
}

/* ==========================================================================
   Media Home — landing page, dark + purple glow (matches /watch and panel).
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg: #07060d;
  --bg-2: #0c0a16;
  --bg-3: #120f1f;
  --surface: #171327;
  --surface-2: #1e1933;
  --border: #2a2340;
  --border-soft: #211a38;

  --primary: #8b5cf6;
  --primary-2: #7c3aed;
  --primary-3: #6d28d9;
  --primary-light: #c4a7ff;

  --ink: #e9e6f5;
  --text: #e9e6f5;
  --muted: #a69fc0;
  --faint: #6f6890;

  --ok: #34d399;

  --grad: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c4a7ff 100%);
  --surface-grad: linear-gradient(160deg, rgba(30,25,51,.92) 0%, rgba(18,15,31,.92) 100%);
  --shadow-glow: 0 0 0 1px rgba(139,92,246,.25), 0 0 24px -4px rgba(139,92,246,.45);
  --shadow-glow-lg: 0 0 0 1px rgba(139,92,246,.30), 0 0 60px -6px rgba(139,92,246,.55);
  --shadow-soft: 0 8px 40px -12px rgba(124,58,237,.35);

  --font: Cairo, Tajawal, "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
  --mono: "Space Grotesk", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.65;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(124,58,237,.20), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(168,85,247,.14), transparent 55%),
    radial-gradient(700px 400px at 50% 40%, rgba(139,92,246,.06), transparent 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

.shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  height: 84px;
  display: flex;
  align-items: center;
  gap: 34px;
  border-bottom: 1px solid var(--border-soft);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; color: var(--text); }
.brand strong { font-weight: 800; }
.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  color: #fff;
  background: var(--grad);
  font: 700 12px/1 var(--mono);
  letter-spacing: -.08em;
  box-shadow: var(--shadow-glow);
}
.top-nav { display: flex; align-items: center; gap: 28px; margin-inline: auto; color: var(--muted); font-size: 13px; }
.top-nav a { transition: color .2s; }
.top-nav a:hover, .text-link:hover, .site-footer a:hover { color: var(--primary-light); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: 12px;
  padding: 14px 22px;
  color: #fff;
  background: var(--grad);
  font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow-glow);
  transition: transform .2s, box-shadow .2s, filter .2s;
  cursor: pointer;
}
.button:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-lg); filter: brightness(1.08); }
.button-small { padding: 10px 16px; font-size: 12px; border-radius: 10px; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  align-items: center;
  gap: 50px;
  min-height: 570px;
  padding-block: 60px 55px;
}
.hero-copy { padding-top: 10px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--primary-light);
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 6px 12px;
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 999px;
  background: rgba(139,92,246,.08);
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(52,211,153,.15), 0 0 12px rgba(52,211,153,.6);
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin: 20px 0 18px;
  font-size: clamp(46px, 5.7vw, 76px);
  line-height: 1.12;
  letter-spacing: -.06em;
  font-weight: 800;
  color: #fff;
}
h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(139,92,246,.45));
}
.hero-lede { max-width: 500px; color: var(--muted); font-size: 16px; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.text-link { color: var(--text); font-size: 12px; font-weight: 700; transition: color .2s; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 28px; color: var(--faint); font-size: 11px; }
.hero-note span { color: var(--primary-light); font-size: 20px; }

/* ---------- hero art (dark glass card) ---------- */
.hero-art { position: relative; min-height: 410px; display: grid; place-items: center; }
.art-glow {
  position: absolute; inset: 4% 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.45) 0, rgba(124,58,237,.20) 40%, transparent 70%);
  filter: blur(12px);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

.player-card {
  position: relative; z-index: 1;
  width: min(465px, 100%);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface-grad);
  box-shadow: var(--shadow-glow-lg), 0 30px 80px rgba(0,0,0,.55);
  transform: rotate(2deg);
  backdrop-filter: blur(10px);
}
.player-top, .player-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 17px;
  color: var(--muted);
  font: 600 10px var(--mono);
  direction: ltr;
}
.player-dots { letter-spacing: 3px; color: var(--faint); }
.live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  color: #fff;
  background: rgba(139,92,246,.25);
  border: 1px solid rgba(139,92,246,.45);
  border-radius: 20px;
  padding: 4px 9px;
  font-size: 9px;
}
.live-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.player-screen {
  position: relative;
  height: 250px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(139,92,246,.35), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(168,85,247,.25), transparent 55%),
    linear-gradient(135deg, #1a1230 0%, #2a1a4a 55%, #120f1f 100%);
}
.player-screen:before, .player-screen:after {
  content: ""; position: absolute; border-radius: 50%;
}
.player-screen:before {
  width: 270px; height: 270px; top: -105px; right: -50px;
  background: radial-gradient(circle, rgba(196,167,255,.20), transparent 70%);
}
.player-screen:after {
  width: 210px; height: 210px; bottom: -120px; left: -36px;
  background: radial-gradient(circle, rgba(124,58,237,.25), transparent 70%);
}
.play-ring {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 62px; height: 62px;
  padding-right: 2px;
  border: 1px solid rgba(196,167,255,.6);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  background: rgba(139,92,246,.25);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 30px rgba(139,92,246,.6);
}
.screen-label { position: absolute; bottom: 15px; right: 17px; color: rgba(255,255,255,.7); font-size: 10px; }
.timeline { width: 135px; height: 3px; margin: 0 10px; border-radius: 3px; background: rgba(255,255,255,.12); }
.timeline i { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--grad); box-shadow: 0 0 8px var(--primary); }

.float-card {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-grad);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
}
.float-history { top: 16%; right: 0; }
.float-users { bottom: 9%; left: 1%; }
.float-card small, .float-card strong { display: block; line-height: 1.4; }
.float-card small { color: var(--faint); font-size: 9px; }
.float-card strong { color: var(--text); font-size: 10px; }
.float-icon {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  color: #fff;
  background: var(--grad);
  font-size: 17px;
  box-shadow: var(--shadow-glow);
}
.avatar-stack { display: flex; direction: ltr; }
.avatar-stack i {
  width: 24px; height: 24px;
  margin-left: -6px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
}
.avatar-stack i:nth-child(2) { background: var(--primary-light); }
.avatar-stack i:nth-child(3) { background: var(--primary-3); }

/* ---------- stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-block: 1px solid var(--border-soft);
  background: rgba(23,19,39,.5);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.stats div { display: flex; align-items: center; gap: 14px; padding: 22px 20px; border-left: 1px solid var(--border-soft); }
.stats div:last-child { border-left: 0; }
.stats strong {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font: 700 24px var(--mono);
  filter: drop-shadow(0 0 12px rgba(139,92,246,.35));
}
.stats span { color: var(--muted); font-size: 11px; }

/* ---------- sections ---------- */
.section { padding-block: 112px; }
.section-heading { max-width: 630px; }
.section-heading h2 {
  margin: 16px 0 13px;
  font-size: clamp(30px,4vw,48px);
  line-height: 1.25;
  letter-spacing: -.055em;
  color: #fff;
}
.section-heading p { color: var(--muted); font-size: 14px; }

/* ---------- features ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 48px; }
.feature-card {
  min-height: 263px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-grad);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  backdrop-filter: blur(6px);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139,92,246,.5);
  box-shadow: var(--shadow-glow);
}
.feature-card.feature-dark {
  background: linear-gradient(160deg, rgba(124,58,237,.28) 0%, rgba(30,25,51,.9) 100%);
  border-color: rgba(139,92,246,.45);
  box-shadow: var(--shadow-glow);
}
.feature-number { float: left; color: var(--faint); direction: ltr; font: 600 11px var(--mono); }
.feature-icon {
  display: grid; place-items: center;
  clear: both;
  width: 44px; height: 44px;
  margin-top: 44px;
  border-radius: 12px;
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.30);
  color: var(--primary-light);
  font-size: 22px;
}
.feature-icon.accent { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }
.feature-dark .feature-icon { background: rgba(196,167,255,.18); color: #fff; border-color: rgba(196,167,255,.35); }
.feature-card h3 { margin: 18px 0 8px; font-size: 15px; color: #fff; }
.feature-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.feature-dark p { color: #d6cff0; }

/* ---------- steps ---------- */
.steps-section {
  padding-block: 92px 110px;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(139,92,246,.10), transparent 70%),
    var(--bg-2);
  border-block: 1px solid var(--border-soft);
}
/* auto-fit, not a fixed 3: a step card holds a heading plus a sentence, and at
   tablet widths three fixed columns squeeze it to one word per line. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 48px; }
.step {
  display: flex; gap: 19px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-grad);
  transition: border-color .25s, box-shadow .25s;
}
.step:hover { border-color: rgba(139,92,246,.5); box-shadow: var(--shadow-glow); }
.step > span {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: #fff;
  background: var(--grad);
  font: 700 13px var(--mono);
  box-shadow: var(--shadow-glow);
}
.step h3 { margin: 4px 0 8px; font-size: 15px; color: #fff; }
.step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }

/* ---------- devices ---------- */
.device-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 48px; }
.device-card {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-grad);
  transition: border-color .25s, box-shadow .25s;
}
.device-card:hover { border-color: rgba(139,92,246,.4); box-shadow: var(--shadow-soft); }
.device-title {
  display: flex; align-items: center; gap: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.device-symbol {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  color: #fff;
  background: var(--grad);
  font-size: 22px;
  box-shadow: var(--shadow-glow);
}
.device-symbol.android { background: linear-gradient(135deg, #34d399 0%, #059669 100%); font-size: 18px; box-shadow: 0 0 24px -4px rgba(52,211,153,.45); }
.device-title h3 { margin: 0 0 2px; font-size: 16px; color: #fff; }
.device-title small { color: var(--muted); font-size: 10px; }
.device-card ol { margin: 21px 0; padding: 0 20px 0 0; color: var(--muted); font-size: 12px; line-height: 2.25; }
.device-card li { padding-right: 4px; }
.device-card li::marker { color: var(--primary-light); }
.device-tip {
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--muted);
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.20);
  font-size: 11px;
  line-height: 1.9;
}
.app-note {
  display: flex; align-items: flex-start; gap: 13px;
  margin-top: 18px;
  padding: 17px 20px;
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(139,92,246,.06);
  font-size: 12px;
}
.app-note p { margin: 0; }
.app-note strong { color: #fff; }
.app-note a { color: var(--primary-light); font-weight: 700; }
.app-note-icon {
  display: grid; flex: none; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff;
  background: var(--grad);
  font: 700 12px var(--mono);
  box-shadow: var(--shadow-glow);
}

/* ---------- connection box ---------- */
.connection-box {
  display: grid; grid-template-columns: .65fr 1.35fr; gap: 22px;
  align-items: center;
  margin-top: 18px;
  padding: 24px 26px;
  border: 1px solid rgba(139,92,246,.30);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(124,58,237,.15) 0%, rgba(23,19,39,.9) 100%);
  box-shadow: var(--shadow-soft);
}
.connection-box h3 { margin: 7px 0 0; font-size: 18px; color: #fff; }
.connection-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; direction: ltr; }
.connection-fields span {
  display: block;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(12,10,22,.6);
}
.connection-fields small, .connection-fields code { display: block; }
.connection-fields small { color: var(--faint); font: 10px var(--font); }
.connection-fields code {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--primary-light);
  font: 600 11px var(--mono);
}
.connection-box p { grid-column: 1/-1; margin: 0; color: var(--muted); font-size: 11px; }

/* ---------- cta ---------- */
.cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px;
  margin-bottom: 80px;
  padding: 42px 46px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(196,167,255,.25), transparent 60%),
    linear-gradient(135deg, #2a1a4a 0%, #1a1230 100%);
  border: 1px solid rgba(139,92,246,.40);
  box-shadow: var(--shadow-glow-lg);
}
.cta h2 { margin: 10px 0 0; font-size: 32px; letter-spacing: -.04em; color: #fff; }
.cta .eyebrow { color: var(--primary-light); background: rgba(196,167,255,.10); border-color: rgba(196,167,255,.35); }

/* ---------- footer ---------- */
.site-footer {
  display: flex; align-items: center; gap: 25px;
  min-height: 82px;
  border-top: 1px solid var(--border-soft);
  color: var(--faint);
  font-size: 11px;
}
.site-footer .brand { margin-left: auto; color: var(--text); }
.site-footer > a:last-child { color: var(--primary-light); font-weight: 700; }

/* ---------- player tour ---------- */
.tour-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 48px; }
.tour-card {
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-grad);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.tour-card:hover { transform: translateY(-3px); border-color: rgba(139,92,246,.45); box-shadow: var(--shadow-glow); }
.tour-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  color: var(--primary-light);
  background: rgba(139,92,246,.14);
  border: 1px solid rgba(139,92,246,.28);
  font-size: 19px;
}
.tour-card h3 { margin: 16px 0 8px; font-size: 15px; color: #fff; }
.tour-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.95; }
.tour-card b { color: var(--primary-light); font-weight: 700; }
kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(12,10,22,.7);
  color: var(--text);
  font: 600 11px var(--mono);
  text-align: center;
}

/* ---------- faq ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 44px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-grad);
  overflow: hidden;
  transition: border-color .25s;
}
.faq-item[open] { border-color: rgba(139,92,246,.45); box-shadow: var(--shadow-soft); }
.faq-item summary {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 22px;
  color: #fff;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+";
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  color: var(--primary-light);
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.3);
  font: 600 14px var(--mono);
  transition: transform .25s, background .25s;
}
.faq-item[open] summary::before { content: "−"; background: var(--grad); color: #fff; border-color: transparent; }
.faq-item summary:hover { color: var(--primary-light); }
.faq-item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.faq-item p {
  margin: 0;
  padding: 0 22px 19px 56px;
  color: var(--muted);
  font-size: 12px;
  line-height: 2;
}
.faq-item p b { color: var(--text); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- multi-page chrome ---------- */
.top-nav a[aria-current="page"] { color: var(--primary-light); font-weight: 700; }
.top-nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--grad);
  box-shadow: 0 0 10px rgba(139,92,246,.7);
}

.page-head { padding-block: 64px 8px; max-width: 780px; }
.page-head h1 {
  margin: 16px 0 14px;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.2;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.page-head p { margin: 0; color: var(--muted); font-size: 15px; max-width: 62ch; }

.section-tight { padding-block: 44px 96px; }
.steps-section > .steps:first-child { margin-top: 0; }

/* Where to go next — a real path through the site, not decoration. */
.next-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 46px; }
.next-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-grad);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.next-link:hover { transform: translateY(-3px); border-color: rgba(139,92,246,.5); box-shadow: var(--shadow-glow); }
.next-link span { color: #fff; font-size: 14px; font-weight: 700; }
.next-link span::after { content: " ←"; color: var(--primary-light); }
.next-link small { color: var(--muted); font-size: 11.5px; line-height: 1.7; }

.foot-nav { display: flex; flex-wrap: wrap; gap: 20px; margin-inline: auto; }
.foot-nav a { color: var(--muted); transition: color .2s; }
.foot-nav a:hover { color: var(--primary-light); }

/* ---------- responsive ---------- */
@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; padding-top: 42px; }
  .hero-copy { text-align: center; }
  .hero-lede { margin-inline: auto; }
  .hero-actions, .hero-note { justify-content: center; }
  .hero-art { min-height: 370px; max-width: 600px; width: 100%; margin: auto; }
  .feature-grid, .tour-grid { grid-template-columns: repeat(2,1fr); }
  .top-nav { display: none; }
  .site-header { justify-content: space-between; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .stats div:nth-child(2) { border-left: 0; }
  .stats div:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
}
@media (max-width: 580px) {
  .shell, .site-header { width: min(100% - 30px, 1160px); }
  .site-header { height: 70px; }
  .site-header .button { padding: 9px 14px; font-size: 10px; }
  .hero { min-height: 0; padding-block: 42px 38px; gap: 20px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: 46px; }
  .hero-lede { font-size: 13px; line-height: 1.9; }
  .hero-actions { flex-direction: column; gap: 14px; }
  .hero-note { font-size: 10px; }
  .hero-art { min-height: 295px; }
  .player-card { border-radius: 16px; }
  .player-screen { height: 170px; }
  .player-top, .player-bottom { padding: 9px 10px; font-size: 8px; }
  .timeline { width: 75px; }
  .float-card { padding: 8px 9px; }
  .float-history { top: 2%; right: -3px; }
  .float-users { bottom: 0; left: -3px; }
  .float-card strong { font-size: 8px; }
  .float-card small { font-size: 7px; }
  .float-icon { width: 24px; height: 24px; font-size: 14px; }
  .stats span { font-size: 10px; }
  .section { padding-block: 75px; }
  .section-heading h2 { font-size: 32px; }
  .feature-grid, .steps, .device-grid, .tour-grid { grid-template-columns: 1fr; }
  .faq-item summary { padding: 15px 18px; font-size: 13px; }
  .faq-item p { padding: 0 18px 17px 50px; }
  .feature-card { min-height: 220px; }
  .steps-section { padding-block: 70px 78px; }
  .device-card { padding: 24px; }
  .connection-box { grid-template-columns: 1fr; gap: 17px; padding: 22px; }
  .connection-fields { grid-template-columns: 1fr; }
  .connection-box p { grid-column: auto; }
  .cta { align-items: flex-start; flex-direction: column; margin-bottom: 50px; padding: 28px 26px; }
  .cta h2 { font-size: 26px; }
  .site-footer { flex-wrap: wrap; padding-block: 20px; }
  .site-footer .brand { width: 100%; margin-left: 0; }
  .site-footer span { margin-left: auto; }
}