/* ================================================================
   speedwatch.css — scoped under body[data-page="speedwatch"]
   Dark Cyber design system. Accent: cyan (--accent = var(--c-cyan)).
   Thin supplement — layout, device mockup, page-specific details.
   All tokens, reveals, tilt, glass from base.css.
   ================================================================ */

/* ── PAGE-LOCAL TOKENS ─────────────────────────────────────── */
body[data-page="speedwatch"] {
  --sw-ring-circ: 553;        /* 2πr for r=88 */
  --sw-ease:      var(--gl-ease);
}

/* ── KEYFRAMES ─────────────────────────────────────────────── */
@keyframes sw-pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(1.6); }
}
@keyframes sw-rec-blink {
  0%,100% { opacity:1; }
  50%      { opacity:0; }
}
@keyframes sw-island-breathe {
  0%,100% { transform:scaleX(1); }
  50%      { transform:scaleX(1.14); }
}
@keyframes sw-glow {
  0%,100% { box-shadow:0 0 28px color-mix(in srgb,var(--accent) 18%,transparent),0 0 56px color-mix(in srgb,var(--accent) 8%,transparent); }
  50%      { box-shadow:0 0 48px color-mix(in srgb,var(--accent) 32%,transparent),0 0 96px color-mix(in srgb,var(--accent) 14%,transparent); }
}

/* ================================================================
   HERO
   ================================================================ */
body[data-page="speedwatch"] .sw-hero { overflow:hidden; }

body[data-page="speedwatch"] .sw-hero__inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
@media (max-width:860px) {
  body[data-page="speedwatch"] .sw-hero__inner {
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  body[data-page="speedwatch"] .sw-hero__sub { margin-inline:auto; }
  body[data-page="speedwatch"] .sw-hero__ctas { justify-content:center; }
}

body[data-page="speedwatch"] .sw-hero__title {
  font-size:clamp(3rem,7.5vw,6rem);
  font-weight:800;
  line-height:.92;
  margin:.75rem 0 1.25rem;
}
body[data-page="speedwatch"] .sw-hero__sub {
  font-size:clamp(1rem,1.8vw,1.15rem);
  line-height:1.65;
  color:var(--gl-muted);
  max-width:44ch;
  margin:0 0 2rem;
}
body[data-page="speedwatch"] .sw-hero__ctas {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
}
body[data-page="speedwatch"] .sw-hero__notice {
  font-size:.8rem;
  color:var(--gl-muted);
  margin:1rem 0 0;
}

/* ── App Store button ─────────────────────────────────────── */
body[data-page="speedwatch"] .sw-appstore-btn {
  gap:.7rem;
  background:#fff;
  color:#030712;
  padding:.7rem 1.4rem;
}
body[data-page="speedwatch"] .sw-appstore-btn--lg {
  padding:.9rem 2rem;
}
body[data-page="speedwatch"] .sw-appstore-icon {
  width:1.6rem; height:1.6rem; flex-shrink:0;
}
body[data-page="speedwatch"] .sw-appstore-btn--lg .sw-appstore-icon {
  width:2rem; height:2rem;
}
body[data-page="speedwatch"] .sw-appstore-text {
  display:flex; flex-direction:column; line-height:1.1;
}
body[data-page="speedwatch"] .sw-appstore-sub {
  font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; opacity:.65;
  font-family:var(--gl-font-body); font-weight:400;
}
body[data-page="speedwatch"] .sw-appstore-name {
  font-size:1rem; font-weight:700;
}
body[data-page="speedwatch"] .sw-appstore-btn--lg .sw-appstore-name {
  font-size:1.2rem;
}

/* ── DEVICE MOCKUP ────────────────────────────────────────── */
body[data-page="speedwatch"] .sw-hero__device-wrap {
  display:flex;
  justify-content:center;
  align-items:center;
}
body[data-page="speedwatch"] .sw-device {
  position:relative;
  width:min(260px,54vw);
  border-radius:3rem;
  animation:sw-glow 4.5s ease-in-out infinite;
}
body[data-page="speedwatch"] .sw-device__shell {
  position:relative;
  background:linear-gradient(155deg,#1e2130 0%,#0e1018 100%);
  border-radius:3rem;
  border:1.5px solid rgba(255,255,255,.1);
  padding:1.1rem .45rem .9rem;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 40px 100px rgba(0,0,0,.65);
}
body[data-page="speedwatch"] .sw-device__notch {
  display:flex; justify-content:center; margin-bottom:.65rem;
}
body[data-page="speedwatch"] .sw-device__island {
  width:5.5rem; height:1.1rem;
  background:#000; border-radius:999px;
  animation:sw-island-breathe 3s ease-in-out infinite;
}
body[data-page="speedwatch"] .sw-device__screen {
  background:#07090f;
  border-radius:1.35rem;
  overflow:hidden;
  aspect-ratio:9/17;
  position:relative;
}
body[data-page="speedwatch"] .sw-device__home {
  width:32%; height:4px;
  background:rgba(255,255,255,.22); border-radius:999px;
  margin:.65rem auto 0;
}
body[data-page="speedwatch"] .sw-device__btn {
  position:absolute;
  background:linear-gradient(to right,#1e2130,#0e1018);
  border-radius:3px;
}
body[data-page="speedwatch"] .sw-device__btn--vol-up  { left:-3px; top:23%; width:3px; height:8%; }
body[data-page="speedwatch"] .sw-device__btn--vol-dn  { left:-3px; top:33%; width:3px; height:8%; }
body[data-page="speedwatch"] .sw-device__btn--power   { right:-3px; top:25%; width:3px; height:12%; }

/* ── APP UI INSIDE SCREEN ─────────────────────────────────── */
body[data-page="speedwatch"] .sw-app {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:1rem .7rem .9rem;
  background:radial-gradient(ellipse 70% 55% at 50% 25%,color-mix(in srgb,var(--accent) 9%,transparent) 0%,transparent 70%),
             #07090f;
}
body[data-page="speedwatch"] .sw-app__top {
  width:100%; display:flex; justify-content:space-between; align-items:center;
}
body[data-page="speedwatch"] .sw-app__label {
  font-size:.42rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(156,163,175,.6); font-family:var(--gl-font-body);
}
body[data-page="speedwatch"] .sw-app__unit {
  font-size:.42rem; letter-spacing:.08em; color:var(--accent);
  font-family:var(--gl-font-body); font-weight:700;
}
body[data-page="speedwatch"] .sw-app__speed-ring {
  position:relative; width:68%; aspect-ratio:1;
}
body[data-page="speedwatch"] .sw-app__ring-svg { width:100%; height:100%; }
body[data-page="speedwatch"] .sw-app__ring-bg  { stroke:rgba(255,255,255,.05); }
body[data-page="speedwatch"] .sw-app__ring-fill {
  stroke:var(--accent);
  transition:stroke-dashoffset .6s var(--sw-ease);
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 60%,transparent));
}
body[data-page="speedwatch"] .sw-app__speed-num {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--gl-font-display); font-size:1.5rem; font-weight:800;
  color:#e5e7eb; letter-spacing:-.04em;
}
body[data-page="speedwatch"] .sw-app__stats {
  width:100%; display:grid; grid-template-columns:1fr auto 1fr; gap:.2rem; text-align:center;
}
body[data-page="speedwatch"] .sw-app__stat          { display:flex; flex-direction:column; align-items:flex-start; }
body[data-page="speedwatch"] .sw-app__stat--mid      { align-items:center; border-left:1px solid rgba(255,255,255,.07); border-right:1px solid rgba(255,255,255,.07); padding:0 .4rem; }
body[data-page="speedwatch"] .sw-app__stat:last-child{ align-items:flex-end; }
body[data-page="speedwatch"] .sw-app__stat-val { font-family:var(--gl-font-display); font-size:.62rem; font-weight:700; color:#e5e7eb; }
body[data-page="speedwatch"] .sw-app__stat-lbl { font-size:.32rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(156,163,175,.55); font-family:var(--gl-font-body); }
body[data-page="speedwatch"] .sw-app__location {
  font-size:.38rem; color:rgba(156,163,175,.5); font-family:var(--gl-font-body);
  text-align:center; max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body[data-page="speedwatch"] .sw-app__rec {
  display:inline-flex; align-items:center; gap:.22rem;
  font-size:.36rem; font-family:var(--gl-font-body); font-weight:700;
  letter-spacing:.1em; color:var(--c-pink);
}
body[data-page="speedwatch"] .sw-app__rec-dot {
  width:4px; height:4px; border-radius:50%; background:var(--c-pink);
  animation:sw-rec-blink 1.2s ease-in-out infinite;
}

/* ================================================================
   SHARED SECTION LABELS
   ================================================================ */
body[data-page="speedwatch"] .sw-section-title {
  font-size:clamp(1.9rem,4.2vw,3.2rem);
  font-weight:800; line-height:1.05;
  margin:0 0 2.5rem;
  color:var(--gl-fg);
}

/* ================================================================
   FEATURES GRID
   ================================================================ */
body[data-page="speedwatch"] .sw-features { border-top:1px solid var(--gl-border); }

body[data-page="speedwatch"] .sw-feat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:1.1rem;
}
body[data-page="speedwatch"] .sw-feat-card {
  padding:1.75rem;
}
body[data-page="speedwatch"] .sw-feat-card__icon {
  width:2.25rem; height:2.25rem; margin-bottom:1.1rem; color:var(--accent);
}
body[data-page="speedwatch"] .sw-feat-card h3 {
  font-size:1.05rem; margin:0 0 .45rem;
}
body[data-page="speedwatch"] .sw-feat-card p {
  font-size:.9rem; line-height:1.6; color:var(--gl-muted); margin:0;
  font-family:var(--gl-font-body);
}
body[data-page="speedwatch"] .sw-pro {
  display:inline-block; font-size:.6rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  background:color-mix(in srgb,var(--c-purple) 30%,transparent);
  color:var(--c-purple); border:1px solid color-mix(in srgb,var(--c-purple) 40%,transparent);
  padding:.12em .45em; border-radius:999px; vertical-align:middle;
  margin-left:.3rem; font-family:var(--gl-font-body);
}

/* ================================================================
   HOW IT WORKS
   ================================================================ */
body[data-page="speedwatch"] .sw-how { border-top:1px solid var(--gl-border); }

body[data-page="speedwatch"] .sw-steps {
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:2rem 2.5rem;
}
body[data-page="speedwatch"] .sw-step {
  position:relative; padding-top:1.25rem;
}
body[data-page="speedwatch"] .sw-step::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--accent) 0%,transparent 100%);
}
body[data-page="speedwatch"] .sw-step__num {
  font-family:var(--gl-font-display); font-size:3rem; font-weight:800;
  line-height:1; color:var(--accent); opacity:.18; display:block; margin-bottom:.4rem;
}
body[data-page="speedwatch"] .sw-step__title {
  font-size:1.2rem; font-weight:700; margin:0 0 .4rem; color:var(--gl-fg);
}
body[data-page="speedwatch"] .sw-step__body {
  font-family:var(--gl-font-body); font-size:.9rem; line-height:1.6;
  color:var(--gl-muted); margin:0;
}

/* ================================================================
   CTA BAND
   ================================================================ */
body[data-page="speedwatch"] .sw-cta {
  border-top:1px solid var(--gl-border);
  text-align:center;
  position:relative; overflow:hidden;
}
body[data-page="speedwatch"] .sw-cta::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 50% 100%,color-mix(in srgb,var(--accent) 10%,transparent) 0%,transparent 70%);
}
body[data-page="speedwatch"] .sw-cta__inner {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
body[data-page="speedwatch"] .sw-cta__title {
  font-size:clamp(2rem,4.5vw,3.25rem); font-weight:800; line-height:1.05;
  margin:0;
}
body[data-page="speedwatch"] .sw-cta__sub {
  font-family:var(--gl-font-body); font-size:1.05rem; color:var(--gl-muted); margin:0;
}

/* ================================================================
   SUPPORT LINKS
   ================================================================ */
body[data-page="speedwatch"] .sw-links { border-top:1px solid var(--gl-border); }
body[data-page="speedwatch"] .sw-links__inner {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1rem;
}
body[data-page="speedwatch"] .sw-link-card {
  display:flex; align-items:center; gap:1.1rem;
  padding:1.4rem 1.6rem;
  text-decoration:none; color:var(--gl-fg);
  transition:transform .3s var(--sw-ease),border-color .3s;
}
body[data-page="speedwatch"] .sw-link-card:hover {
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--gl-border));
}
body[data-page="speedwatch"] .sw-link-card__icon {
  flex-shrink:0; width:2.25rem; height:2.25rem; color:var(--accent);
}
body[data-page="speedwatch"] .sw-link-card__icon svg { width:100%; height:100%; }
body[data-page="speedwatch"] .sw-link-card__body {
  flex:1; display:flex; flex-direction:column; gap:.18rem;
}
body[data-page="speedwatch"] .sw-link-card__body strong {
  font-family:var(--gl-font-display); font-size:1rem; font-weight:700;
}
body[data-page="speedwatch"] .sw-link-card__body span {
  font-family:var(--gl-font-body); font-size:.85rem; color:var(--gl-muted);
}
body[data-page="speedwatch"] .sw-link-card__arrow {
  font-size:1.2rem; color:var(--accent);
  transition:transform .3s var(--sw-ease);
}
body[data-page="speedwatch"] .sw-link-card:hover .sw-link-card__arrow { transform:translateX(4px); }