:root {
  /* =========================================================
     SPORTSJURNI BRAND — WCAG 2.2 AA
  ========================================================== */

  --navy-950: #07111F;
  --navy-900: #0D1B2A;
  --navy-800: #13243A;
  --navy-700: #173153;

  /* Primary accessible interaction colors */
  --blue-900: #0B2F91;
  --blue-800: #1239AE;
  --blue-700: #1746D1;
  --blue-600: #1459F5;
  --blue-500: #007BFF;

  /* Brand accents — decorative/highlight use */
  --cyan-500: #00C2FF;
  --cyan-400: #39D0FF;

  --teal-500: #1ED3C6;
  --teal-400: #35E0C9;

  --lime-500: #7CFF3D;
  --lime-400: #9BFF67;

  /* Accessible text */
  --ink: #0F172A;
  --text-primary: #0F172A;
  --text-secondary: #42516A;
  --text-tertiary: #58677D;

  --surface: #FFFFFF;
  --surface-soft: #F8FAFC;
  --background: #F4F6FA;

  --soft-blue: #E7EDFF;
  --soft-cyan: #E5F8FF;
  --soft-green: #E9FFF4;

  /* Stronger borders for meaningful controls */
  --line: #CBD5E1;
  --line-strong: #94A3B8;
  --line-dark: #40516A;

  --white: #FFFFFF;

  --success: #166534;
  --warning: #854D0E;
  --error: #B91C1C;

  /*
     Dedicated focus color.
     Dark blue gives clear contrast against light surfaces.
  */
  --focus: #0B4ACB;
  --focus-dark: #67D8FF;

  --max: 1180px;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-xxl: 36px;

  --shadow-sm:
    0 10px 30px rgba(15, 23, 42, .08);

  --shadow:
    0 24px 64px rgba(15, 23, 42, .12);

  --shadow-brand:
    0 28px 80px rgba(20, 89, 245, .18);

  /*
     Gradient remains part of the brand,
     but is no longer used underneath critical white text.
  */
  --brand-gradient:
    linear-gradient(
      135deg,
      #1459F5 0%,
      #00C2FF 35%,
      #1ED3C6 68%,
      #7CFF3D 100%
    );

  --brand-gradient-soft:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #F1F7FF 42%,
      #E7FCFB 72%,
      #F3FFE9 100%
    );
}


/* =========================================================
   RESET / GLOBAL
========================================================== */

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

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

body {
  margin: 0;

  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text-primary);
  background: var(--background);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--blue-700);
  text-underline-offset: .18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

p,
li {
  max-width: 75ch;
}


/* =========================================================
   ACCESSIBILITY
========================================================== */

.skip-link {
  position: fixed;

  left: 16px;
  top: -100px;

  background: var(--white);
  color: var(--navy-950);

  padding: 12px 18px;

  z-index: 1000;

  border:
    2px solid var(--focus);

  border-radius: var(--radius-sm);

  box-shadow: var(--shadow-sm);

  font-weight: 700;

  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
}


/*
  Highly visible focus treatment.
  Never remove focus outlines without an equivalent.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline:
    3px solid var(--focus);

  outline-offset: 4px;
}


/*
  Improve forced-colors / Windows High Contrast support.
*/
@media (forced-colors: active) {
  a,
  button {
    forced-color-adjust: auto;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline:
      3px solid Highlight;
  }
}


/* =========================================================
   LAYOUT
========================================================== */

.container {
  width:
    min(
      calc(100% - 40px),
      var(--max)
    );

  margin:
    0 auto;
}

.section-pad {
  padding:
    110px 0;
}

.section-pad.compact {
  padding:
    72px 0;
}

.centered {
  max-width: 850px;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}

.centered p {
  margin-left: auto;
  margin-right: auto;
}

.centered-text {
  text-align: center;
}


/* =========================================================
   HEADER / NAVIGATION
========================================================== */

.site-header {
  position: sticky;

  top: 0;

  z-index: 100;

  background:
    rgba(255, 255, 255, .96);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  border-bottom:
    1px solid var(--line);
}

.nav-wrap {
  min-height: 78px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 28px;
}

.brand {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  font-family:
    Manrope,
    sans-serif;

  font-weight: 800;

  text-decoration: none;

  letter-spacing: -.025em;

  color:
    var(--navy-950);
}

.brand img {
  width: 46px;
  height: 46px;

  border-radius: 13px;

  object-fit: cover;
}

.site-menu {
  display: flex;

  align-items: center;

  gap: 28px;
}

.site-menu a {
  color: #253650;

  text-decoration: none;

  font-weight: 700;

  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.site-menu a:hover {
  color:
    var(--blue-800);

  text-decoration: underline;
}


/*
  IMPORTANT:
  Changed from gradient because white text over
  cyan/lime sections does not reliably meet contrast.
*/
.nav-cta {
  color:
    var(--white) !important;

  padding:
    12px 20px;

  border-radius: 999px;

  background:
    var(--blue-700);

  box-shadow:
    0 8px 24px rgba(23, 70, 209, .24);

  text-decoration: none !important;
}

.nav-cta:hover {
  background:
    var(--blue-800);

  transform:
    translateY(-1px);
}

.menu-button {
  display: none;

  min-width: 44px;
  min-height: 44px;

  border:
    2px solid var(--line-strong);

  background:
    var(--white);

  color:
    var(--navy-950);

  padding:
    10px 14px;

  border-radius:
    var(--radius-sm);

  font-weight: 700;

  cursor: pointer;
}


/* =========================================================
   TYPOGRAPHY
========================================================== */

.eyebrow {
  margin:
    0 0 16px;

  /*
    Darker blue than before for reliable contrast
    against light surfaces.
  */
  color:
    var(--blue-800);

  text-transform:
    uppercase;

  letter-spacing:
    .12em;

  font-weight:
    800;

  font-size:
    .875rem;
}

h1,
h2,
h3 {
  font-family:
    Manrope,
    sans-serif;

  letter-spacing:
    -.035em;

  line-height:
    1.12;

  margin-top:
    0;

  color:
    var(--navy-950);
}

h1 {
  font-size:
    clamp(
      3.2rem,
      6vw,
      5.85rem
    );

  margin-bottom:
    24px;
}

h2 {
  font-size:
    clamp(
      2.3rem,
      4vw,
      4rem
    );

  margin-bottom:
    20px;
}

h3 {
  font-size:
    1.4rem;

  margin-bottom:
    12px;
}


/* =========================================================
   HERO
========================================================== */

.hero {
  position:
    relative;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 80% 24%,
      rgba(0, 194, 255, .14),
      transparent 31%
    ),
    radial-gradient(
      circle at 86% 67%,
      rgba(124, 255, 61, .08),
      transparent 30%
    ),
    var(--brand-gradient-soft);
}

.hero::before {
  content: "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,.34) 45%,
      transparent 68%
    );
}

.hero-grid {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    .92fr
    1.08fr;

  align-items:
    center;

  gap:
    64px;

  min-height:
    700px;
}

.hero-copy {
  position:
    relative;

  z-index:
    2;
}


/*
  Removed gradient-clipped headline text.
  Solid dark text is much easier to read and
  meets contrast requirements more reliably.
*/
.hero-copy h1 {
  color:
    var(--navy-950);

  background:
    none;

  -webkit-background-clip:
    initial;

  background-clip:
    initial;
}


/*
  Optional brand accent applied only to <strong>
  or .brand-accent if you use one in the headline.
*/
.hero-copy h1 strong,
.brand-accent {
  color:
    var(--blue-700);
}

.hero-lede {
  font-size:
    1.2rem;

  color:
    var(--text-secondary);

  max-width:
    660px;

  margin-bottom:
    30px;
}


/* =========================================================
   STORE BUTTONS
========================================================== */

.store-row {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    14px;

  margin:
    30px 0 24px;
}

.store-button {
  min-width:
    210px;

  min-height:
    66px;

  border-radius:
    var(--radius-md);

  padding:
    10px 17px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

  text-decoration:
    none;

  border:
    2px solid transparent;

  box-shadow:
    0 12px 30px rgba(15, 23, 42, .12);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.store-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 16px 36px rgba(15, 23, 42, .16);
}

.store-button.apple {
  background:
    #05080D;

  color:
    var(--white);

  border-color:
    #05080D;
}

.store-button.apple:hover {
  background:
    #1B1E23;
}

.store-button.google {
  background:
    var(--white);

  color:
    var(--navy-950);

  border-color:
    var(--line-strong);
}

.store-button.google:hover {
  background:
    #F1F5F9;
}

.store-button small,
.store-button strong {
  display:
    block;

  line-height:
    1.15;
}

.store-button small {
  font-size:
    .75rem;

  font-weight:
    600;
}

.store-button strong {
  font-size:
    1.18rem;

  margin-top:
    4px;
}

.store-icon {
  font-size:
    1.6rem;
}

.play-mark {
  width:
    28px;

  height:
    30px;

  display:
    inline-block;

  clip-path:
    polygon(
      0 0,
      100% 50%,
      0 100%
    );

  background:
    linear-gradient(
      180deg,
      #34A853 0 35%,
      #FBBC04 35% 65%,
      #EA4335 65%
    );
}


/* =========================================================
   TRUST LINE
========================================================== */

.trust-line {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px 22px;

  color:
    #34445C;

  font-size:
    .95rem;

  font-weight:
    700;
}

.trust-line span {
  display:
    inline-flex;

  align-items:
    center;
}

.trust-line span::before {
  content:
    "✓";

  display:
    inline-grid;

  place-items:
    center;

  width:
    22px;

  height:
    22px;

  margin-right:
    8px;

  color:
    var(--navy-950);

  /*
    Lime is acceptable here because text inside
    the indicator is dark.
  */
  background:
    var(--lime-500);

  border-radius:
    50%;

  font-size:
    .8rem;

  font-weight:
    900;
}


/* =========================================================
   HERO VISUAL
========================================================== */

.hero-visual {
  position:
    relative;

  isolation:
    isolate;
}

.hero-visual > img {
  position:
    relative;

  z-index:
    2;

  border-radius:
    var(--radius-xxl);

  box-shadow:
    var(--shadow-brand);

  transform:
    rotate(.6deg);
}

.visual-glow {
  position:
    absolute;

  inset:
    6% -10% -10% 8%;

  z-index:
    0;

  border-radius:
    50%;

  filter:
    blur(70px);

  background:
    linear-gradient(
      140deg,
      rgba(20, 89, 245, .22),
      rgba(0, 194, 255, .16),
      rgba(30, 211, 198, .13),
      rgba(124, 255, 61, .08)
    );
}

.floating-card {
  position:
    absolute;

  z-index:
    4;

  max-width:
    230px;

  padding:
    15px 18px;

  background:
    rgba(255,255,255,.97);

  border:
    1px solid var(--line);

  border-radius:
    18px;

  box-shadow:
    0 18px 44px rgba(15, 23, 42, .15);
}

.floating-card strong,
.floating-card span {
  display:
    block;
}

.floating-card strong {
  color:
    var(--navy-950);
}

.floating-card span {
  color:
    var(--text-secondary);

  font-size:
    .9rem;
}

.card-top {
  top:
    5%;

  right:
    -4%;
}

.card-bottom {
  bottom:
    5%;

  left:
    -5%;
}

.hero-orb {
  position:
    absolute;

  border-radius:
    999px;

  filter:
    blur(3px);

  opacity:
    .65;
}

.orb-one {
  width:
    290px;

  height:
    290px;

  background:
    radial-gradient(
      circle,
      rgba(0,194,255,.23),
      transparent 68%
    );

  top:
    60px;

  left:
    -100px;
}

.orb-two {
  width:
    440px;

  height:
    440px;

  background:
    radial-gradient(
      circle,
      rgba(124,255,61,.10),
      transparent 70%
    );

  right:
    -170px;

  bottom:
    -150px;
}


/* =========================================================
   PROBLEM SECTION
========================================================== */

.problem {
  position:
    relative;

  overflow:
    hidden;

  background:
    var(--navy-950);

  color:
    var(--white);
}

.problem::after {
  content:
    "";

  position:
    absolute;

  width:
    420px;

  height:
    420px;

  right:
    -170px;

  bottom:
    -250px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0,194,255,.12),
      transparent 70%
    );

  pointer-events:
    none;
}

.problem h2 {
  color:
    var(--white);
}

.problem .eyebrow {
  /*
    Brighter accent can be used on very dark background.
  */
  color:
    #67D8FF;
}

.problem p:last-child {
  color:
    #D6E0EE;

  font-size:
    1.12rem;

  margin-left:
    auto;

  margin-right:
    auto;
}


/* =========================================================
   SECTION HEADINGS
========================================================== */

.section-heading {
  max-width:
    760px;

  margin-bottom:
    46px;
}

.section-heading > p:last-child,
.feature-copy > p,
.story-copy p {
  color:
    var(--text-secondary);

  font-size:
    1.08rem;
}


/* =========================================================
   STEPS
========================================================== */

.steps {
  background:
    var(--background);
}

.step-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    22px;
}

.step-card {
  min-height:
    290px;

  padding:
    34px;

  border:
    1px solid var(--line-strong);

  border-radius:
    var(--radius-xl);

  background:
    var(--white);

  box-shadow:
    var(--shadow-sm);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.step-card:hover {
  transform:
    translateY(-4px);

  border-color:
    var(--blue-700);

  box-shadow:
    0 20px 50px rgba(20, 89, 245, .12);
}


/*
  Solid accessible blue instead of gradient.
  White text on lime/cyan failed accessibility.
*/
.step-number {
  display:
    inline-flex;

  width:
    56px;

  height:
    56px;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--white);

  background:
    var(--blue-700);

  border-radius:
    var(--radius-md);

  font-weight:
    800;

  margin-bottom:
    34px;

  box-shadow:
    0 10px 28px rgba(23, 70, 209, .20);
}

.step-card p {
  color:
    var(--text-secondary);
}


/* =========================================================
   FEATURES
========================================================== */

.features {
  background:
    linear-gradient(
      180deg,
      #F5F9FF,
      #FFFFFF
    );
}

.feature-grid {
  display:
    grid;

  grid-template-columns:
    1fr
    .9fr;

  gap:
    74px;

  align-items:
    center;
}

.check-list {
  list-style:
    none;

  padding:
    0;

  margin:
    32px 0 0;

  display:
    grid;

  gap:
    22px;
}

.check-list li {
  position:
    relative;

  padding-left:
    44px;
}


/*
  Use accessible solid blue and white check mark.
*/
.check-list li::before {
  content:
    "✓";

  position:
    absolute;

  left:
    0;

  top:
    1px;

  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    var(--white);

  background:
    var(--blue-700);

  font-weight:
    900;
}

.check-list strong,
.check-list span {
  display:
    block;
}

.check-list strong {
  color:
    var(--navy-950);
}

.check-list span {
  color:
    var(--text-secondary);

  margin-top:
    3px;
}


/* =========================================================
   FEATURE PANEL
========================================================== */

.feature-panel {
  border-radius:
    var(--radius-xxl);

  padding:
    27px;

  background:
    var(--navy-950);

  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    18px;

  box-shadow:
    var(--shadow-brand);
}

.mini-card {
  min-height:
    185px;

  border-radius:
    var(--radius-lg);

  padding:
    24px;

  background:
    #122D50;

  color:
    var(--white);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border:
    1px solid #40516A;
}


/*
  Increased contrast from previous pale blue.
*/
.mini-card span {
  color:
    #D6E4F7;

  font-size:
    .875rem;

  text-transform:
    uppercase;

  letter-spacing:
    .1em;

  font-weight:
    800;
}

.mini-card strong {
  font-family:
    Manrope,
    sans-serif;

  font-size:
    1.35rem;

  line-height:
    1.3;
}


/*
  IMPORTANT:
  Cyan gradient removed because white text loses contrast.
*/
.mini-card.accent {
  background:
    var(--blue-700);
}

.mini-card.accent span {
  color:
    #FFFFFF;
}

.mini-card.premium {
  background:
    #FFFFFF;

  color:
    var(--navy-950);

  border-color:
    var(--line-strong);
}

.mini-card.premium span {
  color:
    var(--blue-800);
}


/* =========================================================
   SPORTS
========================================================== */

.sports {
  background:
    var(--white);
}

.sport-list {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    12px;
}

.sport-list span {
  padding:
    11px 18px;

  border:
    1px solid var(--line-strong);

  border-radius:
    999px;

  font-weight:
    700;

  color:
    #263650;

  background:
    #FFFFFF;

  transition:
    border-color .2s ease,
    color .2s ease,
    background .2s ease;
}

.sport-list span:hover {
  border-color:
    var(--blue-700);

  background:
    var(--soft-blue);

  color:
    var(--blue-800);
}


/* =========================================================
   STORY
========================================================== */

.story {
  position:
    relative;

  overflow:
    hidden;

  background:
    var(--navy-950);

  color:
    var(--white);
}

.story::before {
  content:
    "";

  position:
    absolute;

  width:
    560px;

  height:
    560px;

  left:
    -280px;

  bottom:
    -260px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0,194,255,.12),
      transparent 72%
    );
}

.story-grid {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  grid-template-columns:
    .75fr
    1.25fr;

  gap:
    80px;

  align-items:
    center;
}

.story h2 {
  color:
    var(--white);
}

.story .eyebrow {
  color:
    #67D8FF;
}

.story-copy p {
  color:
    #D6E0EE;
}

.story-copy strong {
  color:
    #FFFFFF;
}

.story-visual {
  min-height:
    420px;

  display:
    grid;

  place-items:
    center;

  position:
    relative;
}

.story-visual img {
  width:
    260px;

  border-radius:
    56px;

  position:
    relative;

  z-index:
    2;

  box-shadow:
    0 30px 90px rgba(20, 89, 245, .32);
}

.story-ring {
  position:
    absolute;

  width:
    380px;

  height:
    380px;

  border:
    2px solid rgba(103, 216, 255, .55);

  border-radius:
    50%;

  box-shadow:
    0 0 0 58px rgba(103,216,255,.05),
    0 0 0 120px rgba(124,255,61,.02);
}


/* =========================================================
   PRIVACY
========================================================== */

.privacy-strip {
  background:
    #EAF2FF;
}

.privacy-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    30px;
}

.privacy-grid > div {
  padding-left:
    22px;

  /*
    Darker accessible visual indicators.
  */
  border-left:
    5px solid var(--blue-700);
}

.privacy-grid > div:nth-child(2) {
  border-left-color:
    #087568;
}

.privacy-grid > div:nth-child(3) {
  border-left-color:
    #4A6B00;
}

.privacy-grid strong,
.privacy-grid span {
  display:
    block;
}

.privacy-grid strong {
  color:
    var(--navy-950);
}

.privacy-grid span {
  color:
    var(--text-secondary);

  margin-top:
    4px;
}


/* =========================================================
   CALL TO ACTION
========================================================== */

.cta-card {
  position:
    relative;

  overflow:
    hidden;

  color:
    var(--white);

  border-radius:
    42px;

  padding:
    60px;

  display:
    grid;

  grid-template-columns:
    1.4fr
    .6fr;

  gap:
    44px;

  align-items:
    center;

  background:
    var(--navy-950);

  box-shadow:
    var(--shadow-brand);
}

.cta-card::after {
  content:
    "";

  position:
    absolute;

  width:
    480px;

  height:
    480px;

  right:
    -220px;

  top:
    -250px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0,194,255,.13),
      transparent 68%
    );

  pointer-events:
    none;
}

.cta-card > * {
  position:
    relative;

  z-index:
    1;
}

.cta-card h2 {
  color:
    var(--white);
}

.cta-card .eyebrow {
  color:
    #67D8FF;
}

.cta-card p:last-child {
  color:
    #D6E0EE;
}

.cta-actions {
  display:
    grid;

  gap:
    14px;
}

.primary-button,
.secondary-button {
  min-height:
    56px;

  min-width:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    var(--radius-md);

  padding:
    14px 20px;

  font-weight:
    800;

  text-decoration:
    none;

  border:
    2px solid transparent;

  cursor:
    pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


/*
  Simple white button with dark text:
  very high contrast.
*/
.primary-button {
  color:
    var(--navy-950);

  background:
    var(--white);

  border-color:
    var(--white);
}

.primary-button:hover {
  background:
    #EEF2F7;

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 26px rgba(0,0,0,.18);
}


/*
  Stronger border than previous version.
*/
.secondary-button {
  color:
    var(--white);

  background:
    transparent;

  border-color:
    #AFC1D8;
}

.secondary-button:hover {
  transform:
    translateY(-2px);

  background:
    #173153;
}


/* =========================================================
   FOOTER
========================================================== */

footer {
  background:
    #030A14;

  color:
    var(--white);

  padding:
    65px 0 28px;
}

.footer-grid {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    40px;

  align-items:
    flex-start;
}

.footer-brand p {
  /*
    Brighter than previous #98ABC7.
  */
  color:
    #C7D4E7;
}

.footer-links {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    18px 28px;
}

.footer-links a {
  color:
    #E2E8F0;

  text-decoration:
    underline;

  text-decoration-color:
    transparent;

  text-underline-offset:
    4px;

  font-weight:
    600;

  transition:
    color .2s ease,
    text-decoration-color .2s ease;
}

.footer-links a:hover {
  color:
    #FFFFFF;

  text-decoration-color:
    currentColor;
}

.footer-bottom {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  /*
    Previous #6F84A5 was unnecessarily faint.
  */
  color:
    #B4C3D7;

  border-top:
    1px solid #40516A;

  padding-top:
    24px;

  margin-top:
    45px;

  font-size:
    .9rem;
}


/* =========================================================
   MODAL
========================================================== */

.modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    200;

  background:
    rgba(2,8,18,.80);

  display:
    grid;

  place-items:
    center;

  padding:
    20px;
}

.modal[hidden] {
  display:
    none;
}

.modal-card {
  position:
    relative;

  width:
    min(560px, 100%);

  background:
    var(--white);

  color:
    var(--navy-950);

  border:
    1px solid var(--line-strong);

  border-radius:
    var(--radius-xl);

  padding:
    42px;

  box-shadow:
    0 30px 100px rgba(0,0,0,.38);
}


/*
  Again: no gradient behind white button text.
*/
.modal-card .primary-button {
  background:
    var(--blue-700);

  color:
    var(--white);

  border-color:
    var(--blue-700);

  margin-top:
    16px;
}

.modal-card .primary-button:hover {
  background:
    var(--blue-800);

  border-color:
    var(--blue-800);
}

.modal-close {
  position:
    absolute;

  top:
    14px;

  right:
    14px;

  width:
    44px;

  height:
    44px;

  border:
    2px solid var(--line-strong);

  border-radius:
    50%;

  background:
    #E9EEF7;

  color:
    var(--navy-950);

  font-size:
    1.5rem;

  cursor:
    pointer;
}


/* =========================================================
   ANIMATION
========================================================== */

.reveal {
  opacity:
    0;

  transform:
    translateY(24px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.visible {
  opacity:
    1;

  transform:
    translateY(0);
}

.delay-one {
  transition-delay:
    .12s;
}

.delay-two {
  transition-delay:
    .24s;
}


/* =========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

    scroll-behavior:
      auto !important;
  }

  .reveal {
    opacity:
      1;

    transform:
      none;
  }

}


/* =========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

  .section-pad {
    padding:
      78px 0;
  }

  .hero-grid,
  .feature-grid,
  .story-grid,
  .cta-card {
    grid-template-columns:
      1fr;
  }

  .hero-grid {
    min-height:
      auto;
  }

  .hero-copy {
    text-align:
      center;
  }

  .hero-lede {
    margin-left:
      auto;

    margin-right:
      auto;
  }

  .store-row,
  .trust-line {
    justify-content:
      center;
  }

  .hero-visual {
    max-width:
      720px;

    margin:
      0 auto;
  }

  .step-grid,
  .privacy-grid {
    grid-template-columns:
      1fr;
  }

  .story-copy {
    text-align:
      center;
  }

  .story-copy p {
    margin-left:
      auto;

    margin-right:
      auto;
  }

  .cta-card {
    padding:
      44px 32px;
  }

  .footer-grid,
  .footer-bottom {
    flex-direction:
      column;
  }

  .menu-button {
    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;
  }

  .site-menu {
    display:
      none;

    position:
      absolute;

    top:
      68px;

    right:
      20px;

    width:
      min(
        320px,
        calc(100vw - 40px)
      );

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      4px;

    background:
      var(--white);

    border:
      1px solid var(--line-strong);

    padding:
      14px;

    border-radius:
      18px;

    box-shadow:
      var(--shadow);
  }

  .site-menu.open {
    display:
      flex;
  }

  .site-menu a {
    min-height:
      44px;

    display:
      flex;

    align-items:
      center;

    padding:
      11px 12px;
  }

}


/* =========================================================
   MOBILE
========================================================== */

@media (max-width: 620px) {

  .container {
    width:
      min(
        calc(100% - 28px),
        var(--max)
      );
  }

  .section-pad {
    padding:
      64px 0;
  }

  .section-pad.compact {
    padding:
      52px 0;
  }

  h1 {
    font-size:
      clamp(
        2.65rem,
        13vw,
        4.2rem
      );
  }

  h2 {
    font-size:
      clamp(
        2rem,
        10vw,
        3rem
      );
  }

  .hero-lede {
    font-size:
      1.05rem;
  }

  .store-button {
    width:
      100%;

    min-height:
      64px;

    justify-content:
      center;
  }

  .feature-panel {
    grid-template-columns:
      1fr;

    padding:
      18px;
  }

  .floating-card {
    display:
      none;
  }

  .hero-visual > img {
    border-radius:
      22px;
  }

  .story-visual {
    min-height:
      320px;
  }

  .story-visual img {
    width:
      190px;
  }

  .story-ring {
    width:
      270px;

    height:
      270px;
  }

  .cta-card {
    border-radius:
      var(--radius-xl);

    padding:
      34px 24px;
  }

  .primary-button,
  .secondary-button {
    width:
      100%;
  }

}


/* =========================================================
   DARK MODE
========================================================== */

@media (prefers-color-scheme: dark) {

  :root {
    --text-primary:
      #F8FAFC;

    --text-secondary:
      #D3DCE9;

    --text-tertiary:
      #B9C6D8;
  }

  body {
    background:
      #07111F;

    color:
      var(--text-primary);
  }


  a {
    color:
      #8FCBFF;
  }


  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline-color:
      var(--focus-dark);
  }


  .site-header {
    background:
      rgba(7, 17, 31, .97);

    border-bottom:
      1px solid var(--line-dark);
  }


  .brand {
    color:
      #FFFFFF;
  }


  .site-menu a {
    color:
      #E2E8F0;
  }


  .site-menu a:hover {
    color:
      #FFFFFF;
  }


  .menu-button {
    color:
      #FFFFFF;

    background:
      #13243A;

    border-color:
      #64748B;
  }


  .hero {
    background:
      radial-gradient(
        circle at 80% 24%,
        rgba(0, 194, 255, .10),
        transparent 31%
      ),
      radial-gradient(
        circle at 86% 67%,
        rgba(124, 255, 61, .05),
        transparent 30%
      ),
      #07111F;
  }


  /*
    Solid light headline in dark mode.
  */
  .hero-copy h1 {
    color:
      #FFFFFF;

    background:
      none;
  }


  .hero-copy h1 strong,
  .brand-accent {
    color:
      #8FCBFF;
  }


  .hero-lede,
  .section-heading > p:last-child,
  .feature-copy > p {
    color:
      var(--text-secondary);
  }


  h1,
  h2,
  h3 {
    color:
      #FFFFFF;
  }


  .eyebrow {
    color:
      #8FCBFF;
  }


  .trust-line {
    color:
      #E2E8F0;
  }


  .steps,
  .sports {
    background:
      #07111F;
  }


  .step-card {
    background:
      #0D1B2A;

    border-color:
      #52647C;
  }


  .step-card p,
  .check-list span {
    color:
      var(--text-secondary);
  }


  .check-list strong {
    color:
      #FFFFFF;
  }


  .features {
    background:
      #0A1626;
  }


  .sport-list span {
    color:
      #F1F5F9;

    background:
      #0D1B2A;

    border-color:
      #52647C;
  }


  .sport-list span:hover {
    color:
      #FFFFFF;

    background:
      #173153;

    border-color:
      #8FCBFF;
  }


  .privacy-strip {
    background:
      #0D1B2A;
  }


  .privacy-grid strong {
    color:
      #FFFFFF;
  }


  .privacy-grid span {
    color:
      var(--text-secondary);
  }


  .store-button.google {
    background:
      #FFFFFF;

    color:
      #07111F;

    border-color:
      #FFFFFF;
  }


  .site-menu {
    background:
      #0D1B2A;

    border-color:
      #52647C;
  }


  .floating-card {
    background:
      #FFFFFF;
  }


  .floating-card strong {
    color:
      #07111F;
  }


  .floating-card span {
    color:
      #42516A;
  }


  .mini-card.premium {
    background:
      #FFFFFF;

    color:
      #07111F;
  }

}