:root {
  --bg: #121925;
  --blue-dark: #00163a;
  --blue-mid: #022561;
  --blue: #1952ff;
  --blue-soft: #3360ac;
  --text: #eeeeee;
  --text-strong: #f5f6f6;
  --muted: #d9dce3;
  --max: 1280px;
  --radius: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.container {
  width: min(calc(100% - 80px), var(--max));
  margin-inline: auto;
}
.narrow { max-width: 940px; }
.center { text-align: center; }

.announcement {
  height: 31px;
  display: grid;
  place-items: center;
  padding-inline: 20px;
  background: var(--blue);
  color: white;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .085em;
  text-align: center;
}

.site-header {
  height: 90px;
  background: var(--bg);
  position: relative;
  z-index: 20;
}
.nav-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.brand img { width: 255px; height: auto; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 48px;
  font-size: 16px;
  font-weight: 600;
}
.main-nav > a:not(.button) {
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.main-nav > a:not(.button):hover { opacity: .72; }
.menu-toggle { display: none; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 294px;
  min-height: 50px;
  padding: 12px 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue);
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
  transition: transform .18s ease, filter .18s ease;
}
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button-small { min-width: 227px; min-height: 47px; }

.section-gradient {
  background: linear-gradient(180deg, var(--bg) 0%, var(--blue-mid) 100%);
}
.hero {
  min-height: 690px;
  padding: 60px 0 75px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, .95fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "heading media"
    "points media"
    "button media"
    "badges media";
  column-gap: 76px;
  align-items: start;
}
.hero h1 {
  grid-area: heading;
  margin: 36px 0 34px;
  color: var(--text-strong);
  font-size: clamp(46px, 4.1vw, 64px);
  line-height: 1.08;
  letter-spacing: .08em;
  font-weight: 800;
}
.hero-media {
  grid-area: media;
  align-self: center;
  justify-self: end;
  width: min(100%, 600px);
  margin-top: -24px;
}
.hero-media img { width: 100%; }
.hero-points {
  grid-area: points;
  list-style: none;
  margin: 0 0 35px;
  padding: 0;
  display: grid;
  gap: 20px;
  font-size: 18px;
  font-weight: 500;
}
.hero-points li {
  position: relative;
  padding-left: 30px;
}
.hero-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--blue);
  font-weight: 700;
}
.hero-button { grid-area: button; justify-self: start; margin-bottom: 48px; }
.store-badges {
  grid-area: badges;
  display: flex;
  align-items: center;
  gap: 34px;
}
.store-badges a { display: block; }
.store-badges img { width: auto; height: 47px; }

.how-section {
  min-height: 590px;
  display: flex;
  align-items: center;
  padding: 92px 0 102px;
  position: relative;
  isolation: isolate;
  background: var(--bg);
  overflow: hidden;
}
.wave-section::before,
.wave-section::after {
  content: "";
  position: absolute;
  width: 470px;
  height: 260px;
  opacity: .55;
  background:
    radial-gradient(120% 120% at 0 100%, transparent 60%, #255ebc 60.4% 60.8%, transparent 61.2%),
    radial-gradient(120% 120% at 0 100%, transparent 70%, #255ebc 70.4% 70.8%, transparent 71.2%),
    radial-gradient(120% 120% at 0 100%, transparent 80%, #255ebc 80.4% 80.8%, transparent 81.2%);
  pointer-events: none;
  z-index: -1;
}
.wave-section::before { left: -210px; bottom: 45px; transform: rotate(6deg); }
.wave-section::after { right: -205px; bottom: 26px; transform: scaleX(-1) rotate(7deg); }
.how-section h2,
.boats-section > .container > h2,
.visual-copy h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: .13em;
  font-weight: 800;
}
.how-section p {
  margin: 55px auto 47px;
  max-width: 930px;
  font-size: 18px;
  line-height: 1.8;
}
.how-section strong { font-weight: 800; }

.section-gradient-long {
  background: linear-gradient(180deg, var(--bg) 0%, var(--blue-mid) 53%, var(--bg) 100%);
}
.boats-section {
  padding: 42px 0 110px;
  min-height: 1000px;
}
.boats-section > .container > h2 {
  text-align: center;
  margin-bottom: 60px;
}
.boat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
}
.boat-card {
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.boat-image {
  width: 100%;
  height: 350px;
  display: grid;
  place-items: center;
  position: relative;
}
.boat-image::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 25px;
  height: 42px;
  opacity: .55;
  background:
    linear-gradient(175deg, transparent 44%, #255ebc 45% 47%, transparent 48%) 0 7px / 100% 12px,
    linear-gradient(185deg, transparent 44%, #255ebc 45% 47%, transparent 48%) 0 18px / 100% 13px;
}
.boat-image img {
  max-width: 94%;
  max-height: 345px;
  position: relative;
  z-index: 1;
  object-fit: contain;
}
.boat-card h3 {
  margin: 13px 0 24px;
  color: white;
  font-size: 14px;
  font-weight: 600;
}
.maker-logo { object-fit: contain; height: 46px; width: auto; }
.rs-logo { height: 54px; }
.hobie-logo { height: 43px; }
.weta-logo { height: 38px; }

.mid-cta {
  margin-top: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 40px;
}
.mid-logo { width: 225px; justify-self: start; }
.mid-cta p {
  margin: 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.2;
}
.mid-cta .button { justify-self: end; }

.visual-section {
  padding: 95px 0 120px;
  background: var(--bg);
}
.visual-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(500px, 1.22fr);
  align-items: center;
  gap: 55px;
}
.visual-copy { max-width: 520px; }
.visual-copy h2 { margin-bottom: 56px; }
.visual-copy h3 {
  margin: 0 0 26px;
  font-size: 17px;
  font-weight: 700;
}
.visual-copy p {
  margin: 0 0 28px;
  line-height: 1.65;
  font-size: 17px;
}
.visual-badges { margin-top: 65px; }
.visual-media img { width: 100%; }

.section-gradient-bottom {
  background: linear-gradient(180deg, var(--bg) 0%, var(--blue-mid) 100%);
}
.learning-section { padding: 90px 0 95px; }
.learning-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.learning-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 55px;
}
.learning-brand img { width: 245px; }
.learning-brand .button { min-width: 245px; }
.accordions { display: grid; gap: 19px; }
details {
  border: 1px solid var(--blue);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(8, 30, 69, .11);
}
summary {
  min-height: 62px;
  padding: 0 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: white;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
}
summary::-webkit-details-marker { display: none; }
.chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
details[open] .chevron { transform: rotate(225deg) translate(-2px,-2px); }
details p {
  margin: 0;
  padding: 0 29px 25px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.mobile-download-strip { display: none; }
.site-footer {
  min-height: 180px;
  display: grid;
  align-items: center;
  background: var(--blue-dark);
}
.footer-inner {
  text-align: center;
  font-size: 13px;
}
.footer-inner p { margin: 0; }
.legal-links {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 22px;
  font-size: 12px;
}
.legal-links a { text-decoration: none; opacity: .78; }
.legal-links a:hover { opacity: 1; }

@media (max-width: 1100px) {
  .container { width: min(calc(100% - 48px), var(--max)); }
  .main-nav { gap: 25px; }
  .brand img { width: 220px; }
  .button-small { min-width: 185px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(400px, .9fr); gap: 40px; }
  .boat-grid { gap: 18px; }
  .boat-image { height: 290px; }
  .visual-grid { grid-template-columns: minmax(0, .8fr) minmax(440px, 1.2fr); }
}

@media (max-width: 820px) {
  body { font-size: 15px; }
  .container { width: min(calc(100% - 34px), 680px); }
  .announcement {
    height: 23px;
    padding-inline: 6px;
    font-size: 7.5px;
    letter-spacing: .075em;
  }
  .site-header { height: 63px; }
  .brand img { width: 127px; }
  .menu-toggle {
    width: 38px;
    height: 38px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle span { display: block; height: 2px; background: white; border-radius: 2px; }
  .main-nav {
    position: absolute;
    top: 63px;
    left: 0;
    right: 0;
    padding: 20px 18px 24px;
    background: rgba(18,25,37,.98);
    border-top: 1px solid rgba(255,255,255,.08);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    box-shadow: 0 20px 45px rgba(0,0,0,.25);
  }
  .main-nav.open { display: flex; }
  .main-nav > a:not(.button) { padding: 10px 6px; }
  .main-nav .button { margin-top: 6px; width: 100%; }

  .button { min-width: 0; width: 100%; min-height: 43px; font-size: 12px; }

  .hero {
    min-height: 0;
    padding: 26px 0 60px;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "media"
      "points"
      "button"
      "badges";
    gap: 0;
  }
  .hero h1 {
    margin: 4px 0 13px;
    text-align: center;
    font-size: 23px;
    line-height: 1.12;
    letter-spacing: .09em;
  }
  .hero-media {
    width: min(100%, 355px);
    margin: -14px auto 0;
    justify-self: center;
  }
  .hero-points {
    margin: 0 auto 25px;
    width: min(100%, 365px);
    gap: 12px;
    font-size: 13px;
  }
  .hero-points li { padding-left: 22px; }
  .hero-button { margin: 0 auto 24px; width: min(100%, 328px); justify-self: center; }
  .store-badges {
    justify-content: space-between;
    width: 100%;
    gap: 18px;
  }
  .store-badges img { height: 31px; max-width: 145px; }

  .how-section {
    min-height: 0;
    padding: 67px 0 66px;
  }
  .how-section h2,
  .boats-section > .container > h2,
  .visual-copy h2 {
    font-size: 15px;
    letter-spacing: .11em;
  }
  .how-section p {
    margin: 31px auto 32px;
    font-size: 13px;
    line-height: 1.55;
  }
  .how-section .button { width: min(100%, 328px); }
  .wave-section::before,
  .wave-section::after { width: 230px; height: 150px; opacity: .45; }
  .wave-section::before { left: -132px; bottom: 8px; }
  .wave-section::after { right: -135px; bottom: 6px; }

  .boats-section { padding: 56px 0 72px; }
  .boats-section > .container > h2 {
    max-width: 300px;
    margin: 0 auto 34px;
    line-height: 1.45;
  }
  .boat-grid { grid-template-columns: 1fr; gap: 34px; }
  .boat-image { height: 350px; }
  .boat-image img { max-height: 340px; max-width: 88%; }
  .boat-image::after { left: 8%; right: 8%; bottom: 18px; }
  .boat-card h3 { margin: 10px 0 15px; font-size: 11px; }
  .maker-logo { height: 34px; }
  .rs-logo { height: 39px; }
  .hobie-logo { height: 31px; }
  .weta-logo { height: 29px; }
  .mid-cta {
    margin-top: 65px;
    grid-template-columns: 1fr;
    gap: 22px;
    justify-items: center;
  }
  .mid-logo { display: none; }
  .mid-cta p { font-size: 12px; }
  .mid-cta .button { justify-self: center; width: min(100%, 328px); }

  .visual-section { padding: 67px 0 78px; }
  .visual-grid { grid-template-columns: 1fr; gap: 35px; }
  .visual-copy { max-width: none; }
  .visual-copy h2 { margin-bottom: 30px; text-align: center; }
  .visual-copy h3 { margin-bottom: 20px; font-size: 12px; }
  .visual-copy p { margin-bottom: 17px; font-size: 12px; line-height: 1.52; }
  .visual-badges { display: none; }
  .visual-media { width: calc(100% + 10px); margin-left: -5px; }

  .learning-section { padding: 0 0 60px; }
  .learning-grid { grid-template-columns: 1fr; gap: 50px; }
  .learning-brand { order: 2; align-items: center; gap: 28px; }
  .learning-brand img { width: 205px; }
  .learning-brand .button { width: min(100%, 328px); }
  .accordions { order: 1; gap: 14px; }
  details { border-radius: 6px; }
  summary { min-height: 44px; padding: 0 15px; font-size: 12px; }
  details p { padding: 0 15px 18px; font-size: 11.5px; line-height: 1.5; }

  .mobile-download-strip {
    display: block;
    padding: 0 0 35px;
    background: var(--blue-mid);
  }
  .mobile-download-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 17px;
  }
  .mobile-download-row p { margin: 0; font-size: 11px; line-height: 1.2; }
  .round-mark {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: var(--blue);
    display: grid;
    place-items: center;
    color: white;
    font-size: 27px;
    line-height: 1;
  }
  .mobile-download-strip .button { width: min(100%, 328px); margin: 0 auto 18px; display: flex; }
  .mobile-download-strip .store-badges { width: min(100%, 340px); margin-inline: auto; }

  .site-footer { min-height: 170px; }
  .footer-inner { font-size: 9px; }
  .legal-links {
    margin: 0 auto 30px;
    max-width: 330px;
    display: grid;
    gap: 8px;
    font-size: 10px;
  }
}

@media (max-width: 430px) {
  .container { width: calc(100% - 30px); }
  .boat-image { height: 330px; }
  .hero-media { width: 330px; max-width: 100%; }
  .store-badges img { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}