/* ============================================================
   Sailing Companion — sailing-companion.com
   Static landing page styles
   ============================================================ */

:root {
  --navy: #0F3B62;
  --navy-dark: #08243F;
  --navy-light: #1E5687;
  --accent: #4D9EE3;
  --ink: #0F1A2A;
  --muted: #5A6B82;
  --hairline: #E2E8EF;
  --surface: #FFFFFF;
  --surface-tint: #F5F8FB;
  --max-width: 1140px;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 26, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 26, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 26, 42, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ECF1F8;
    --muted: #9AAAC0;
    --hairline: #1B2A3D;
    --surface: #0A1422;
    --surface-tint: #0F1E33;
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 4.8vw, 3.6rem); line-height: 1.3; }
h2 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); line-height: 1.15; }
h3 { font-size: 1.18rem; line-height: 1.3; }

p { margin: 0; }

/* ────────────────────────────────────────────────────────────────
   Header
    ───────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
@media (prefers-color-scheme: dark) {
   .site-header { background: rgba(10, 20, 34, 0.8); }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.brand-name { font-size: 1.2rem; letter-spacing: -0.01em; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
}
.nav-links a.btn {
  color: #FFFFFF;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-ghost {
  background: var(--navy);
  color: #FFFFFF;
}
.btn-ghost:hover { background: var(--accent); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-secondary:hover { background: var(--surface-tint); }

/* ────────────────────────────────────────────────────────────────
   Hero
    ───────────────────────────────────────────────────────────────── */

.hero {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(77,158,227,0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 30%, rgba(15,59,98,0.10), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface));
  padding: 80px 0 100px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.hero-lead {
  margin-top: 22px;
  color: var(--muted);
  font-size: 1.18rem;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
  align-items: center;
}

.app-store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.app-store-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.app-store-badge--large img { width: 220px; height: auto; }

.hero-meta {
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.92rem;
}

.hero-visual {
  display: flex;
  justify-content: center;
}
.hero-logo {
  width: min(360px, 100%);
  height: auto;
  transition: transform 0.4s ease;
}
.hero-logo:hover { transform: scale(1.02) rotate(-1deg); }

/* ────────────────────────────────────────────────────────────────
   Section common
    ───────────────────────────────────────────────────────────────── */

section { padding: 90px 0; }

.section-title {
  text-align: center;
  margin-bottom: 12px;
}
.section-lead {
  text-align: center;
  color: var(--muted);
  font-size: 1.08rem;
  margin-bottom: 56px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ────────────────────────────────────────────────────────────────
   What it is / isn't / the deal  (accordion)
    ───────────────────────────────────────────────────────────────── */

.what-is {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-tint) 100%);
  position: relative;
  overflow: hidden;
}
.what-is::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 70% 50% at 20% 0%,  rgba(77,158,227,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(43,168,142,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.what-is::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('assets/harbour-sunset.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.what-is > .container { position: relative; z-index: 1; }

.what-is-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}

.what-is-row {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.what-is-row[open] {
  box-shadow: var(--shadow-md);
}
.what-is-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.what-is-row > summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  user-select: none;
  position: relative;
  border-radius: var(--radius);
  transition: background 0.2s ease;
}
.what-is-row > summary::-webkit-details-marker { display: none; }
.what-is-row > summary::marker { display: none; }
.what-is-row > summary:hover { background: var(--surface-tint); }
.what-is-row[open] > summary:hover { background: transparent; }
.what-is-row > summary:focus { outline: none; }
.what-is-row > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.what-is-num {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  background: linear-gradient(135deg, rgba(77,158,227,0.16), rgba(15,59,98,0.10));
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
  font-family: -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  line-height: 1;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
@media (prefers-color-scheme: dark) {
  .what-is-num { color: var(--accent); }
}
.what-is-row[open] .what-is-num {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.what-is-title {
  flex: 1 1 auto;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.what-is-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(77,158,227,0.10);
  position: relative;
  transition: background 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.what-is-icon::before,
.what-is-icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  border-radius: 2px;
  transition: background 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.what-is-icon::before {
  top: 50%; left: 8px; right: 8px;
  height: 2px;
  transform: translateY(-50%);
}
.what-is-icon::after {
  left: 50%; top: 8px; bottom: 8px;
  width: 2px;
  transform: translateX(-50%);
}
.what-is-row[open] .what-is-icon { background: var(--accent); }
.what-is-row[open] .what-is-icon::before,
.what-is-row[open] .what-is-icon::after { background: #fff; }
.what-is-row[open] .what-is-icon::after { transform: translateX(-50%) rotate(90deg); }

/* Wrapper: just clips content. The accordion is JS-driven (see script at
   bottom of index.html) because <details>'s synchronous [open] attribute
   change does not animate in some browsers. The script toggles a
   `.is-open` class on each row and animates max-height via the Web
   Animations API. */
.what-is-body-wrap {
  overflow: hidden;
}
.what-is-body {
  padding: 0 28px 26px 76px;   /* align under title, not under the number chip */
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  /* Closed default. JS sets a class on the row that swaps these values. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
}
.what-is-row.is-open .what-is-body {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
}
.what-is-body em { font-style: italic; color: #B0432A; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  /* Animation is driven by JS (see accordion script), which respects
     this media query. Nothing to override in CSS. */
  .what-is-icon { transition: none; }
  .what-is-icon::before, .what-is-icon::after { transition: none; }
  .carousel-item.is-active img { animation: none; }
}

@media (max-width: 640px) {
  .what-is-row > summary { padding: 18px 20px; gap: 14px; }
  .what-is-body         { padding: 0 20px 22px 20px; font-size: 0.96rem; }
  .what-is-title        { font-size: 1rem; }
}


/* ────────────────────────────────────────────────────────────────
   Features
    ───────────────────────────────────────────────────────────────── */

.features { background: var(--surface-tint); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature-card {
  background: var(--surface);
  padding: 28px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(77,158,227,0.16), rgba(15,59,98,0.10));
  color: var(--navy);
  margin-bottom: 18px;
}
@media (prefers-color-scheme: dark) {
   .feature-icon { color: var(--accent); }
}

.feature-card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.97rem;
}

.screenshots {
  /* The navy scrim is a separate background-image (above the photo) so the
     photo URL can be swapped via the --cockpit-image custom property in
     dark mode. Photo lives in its own layer below via background-image
     order. */
  background-image:
    linear-gradient(rgba(15, 59, 98, 0.40), rgba(15, 59, 98, 0.40)),
    var(--cockpit-image, url('assets/cockpit_landscape.jpg'));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: #fff;
}
.screenshots .section-title,
.screenshots .section-lead { color: #fff; }
@media (prefers-color-scheme: dark) {
  .screenshots {
    --cockpit-image: url('assets/cockpit_landscape_dark.png');
  }
}

/* ────────────────────────────────────────────────────────────────
   Screenshots carousel
    ───────────────────────────────────────────────────────────────── */

.carousel {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  /* One knob controls the phone size everywhere. The vh term caps the height
     on short/wide viewports so a tall portrait phone never overflows. */
  --shot-w: min(330px, 82vw, 34vh);
}

/* The stage IS the scroller. Centering is pure CSS (scroll-snap + symmetric
   inline padding), so the active phone is always perfectly centered at every
   width — no JS layout math, no drift. */
.carousel-stage {
  display: flex;
  align-items: center;
  gap: clamp(14px, 4vw, 40px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 10px calc(50% - var(--shot-w) / 2) 24px;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.carousel-stage::-webkit-scrollbar { display: none; }

.carousel-item {
  flex: 0 0 var(--shot-w);
  scroll-snap-align: center;
  margin: 0;
  display: flex;
  justify-content: center;
  opacity: 0.4;
  transform: scale(0.88);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.carousel-item.is-active {
  opacity: 1;
  transform: scale(1);
}
.carousel-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 2347;
  border-radius: clamp(22px, 6vw, 34px);
  -webkit-user-drag: none;
  user-select: none;
}

/* Prev/Next buttons — circular, overlaid at the sides */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 26, 42, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  z-index: 3;
}
.carousel-btn--prev { left: -72px; }
.carousel-btn--next { right: -72px; }
.carousel-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.05);
}
.carousel-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.carousel-btn:active { transform: translateY(-50%) scale(0.96); }

/* Meta row: dots + counter */
.carousel-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 720px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.28);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, width 0.25s ease;
}
.carousel-dot:hover { background: rgba(255, 255, 255, 0.55); }
.carousel-dot[aria-selected="true"] {
  background: var(--accent);
  width: 22px;
  border-radius: 4px;
}
.carousel-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.carousel-counter {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Phones: hide arrows (native swipe + dots are enough), shrink the phone */
@media (max-width: 640px) {
  .carousel { --shot-w: min(300px, 76vw, 58vh); }
  .carousel-btn { display: none; }
  .carousel-item { opacity: 0.55; transform: scale(0.92); }
  .carousel-item.is-active { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-stage { scroll-behavior: auto; }
  .carousel-item { transition: none; }
}

/* Existing mobile screenshot-row rule — keep as a no-op for back-compat */
.screenshot-row { display: none; }

/* ────────────────────────────────────────────────────────────────
   Social Video
    ───────────────────────────────────────────────────────────────── */
.social-video {
  background: var(--surface-tint);
}
.social-video .container {
  width: 100%;
}
.video-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

/* ────────────────────────────────────────────────────────────────
   Phone Frame
    ───────────────────────────────────────────────────────────────── */
.phone-frame {
  position: relative;
  display: inline-block;
  border-radius: 52px;
  border: 2px solid #0d0d0d;
  background: #000;
  padding: 14px 14px 14px 14px;
  box-shadow:
     0 0 0 1px rgba(0,0,0,0.4),
     0 24px 64px rgba(15,26,42,0.28);
  overflow: hidden;
}
.phone-frame img {
  display: block;
  width: 100%;
  max-width: none;
  border-radius: 0;
  filter: drop-shadow(none);
}
.phone-dynamic-island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  background: #000;
  border-radius: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.phone-camera {
  width: 14px;
  height: 14px;
  background: #111;
  border-radius: 50%;
  border: 1px solid #2a2a2a;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
}

/* ────────────────────────────────────────────────────────────────
   Languages
    ───────────────────────────────────────────────────────────────── */

#languages {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(77,158,227,0.15), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 30%, rgba(15,59,98,0.10), transparent 60%),
    var(--surface-tint);
}

.language-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.language-list li {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.language-list li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.flag-img {
  width: 28px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   User Reviews (marquee, App-Store style)
   ───────────────────────────────────────────────────────────────────────── */

.reviews {
  /* Sunset background image with dark overlay for legibility.
     Layers (top → bottom): dark scrim → photo.
     JPEG fallback first; @supports swaps in WebP for capable browsers. */
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(8, 18, 30, 0.45), rgba(8, 18, 30, 0.45)),
    url('assets/reviews-bg.jpg?v=22');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Give the sunset photo room to breathe. Padding bumped from
     155px → 205px (+50px vertical total) — fifth height bump. */
  padding: 205px 0;
}

/* Wide desktop: break the marquee out of the .container's 1140px
   cap so more cards are visible on big screens. The title/lead above
   stay within the container (better line-length for reading), but
   the scrolling band runs edge-to-edge of the viewport. */
@media (min-width: 1200px) {
  .reviews-marquee {
    /* Break out of the .container's 1140px cap on big screens.
       82vw = ~15% narrower than the previous 96vw setting. */
    width: 82vw;
    max-width: 82vw;
    margin-left: calc(50% - 41vw);
    margin-right: calc(50% - 41vw);
  }
}

@supports (background-image: image-set(url('a.webp') type('image/webp'))) {
  .reviews {
    background-image:
      linear-gradient(rgba(8, 18, 30, 0.45), rgba(8, 18, 30, 0.45)),
      image-set(
        url('assets/reviews-bg.webp?v=22') type('image/webp'),
        url('assets/reviews-bg.jpg?v=22')  type('image/jpeg')
      );
  }
}

/* Heading & lead text inside the reviews section become white so
   they stay legible over the dark sunset photo. Cards keep their
   existing styling. */
.reviews .section-title,
.reviews .section-lead { color: #fff; }

:root {
  /* Default card width (desktop). Overridden below for mobile. */
  --review-card-w: 320px;
}

@media (max-width: 560px) {
  :root { --review-card-w: 280px; }
}

/* Marquee: clip the visible window, track scrolls inside.
   NOTE: Do NOT put mask-image on the same element as overflow:hidden
   + an animating child — Windows Edge/Chrome drops the animation
   (well-known GPU compositing bug with masks + transforms). The
   mask lives on a dedicated inner wrapper (.reviews-fade) instead. */
.reviews-marquee {
  margin-top: 12px;
  overflow: hidden;
  position: relative;
}

.reviews-fade {
  /* Soft fade-out on the edges so cards don't clip abruptly.
     This wrapper is a separate compositing layer from .reviews-track. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.reviews-track {
  display: flex;
  gap: 20px;
  /* Explicit width so `width: max-content` can't collapse inside
     the (overflow:hidden) parent on narrow viewports. Total = 32
     cards * (card-width + 20px gap). */
  width: calc(32 * (var(--review-card-w) + 20px));
  padding: 12px 0 18px;
  animation: reviews-scroll 90s linear infinite;
  will-change: transform;
  /* GPU nudge: force a stable compositing layer so Windows Edge/Chrome
     doesn't drop the animation. Cheap to render. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track {
  animation-play-state: paused;
}

@keyframes reviews-scroll {
  from { transform: translateX(0); }
  /* Scroll exactly one "set" (= 8 cards) so the 2nd set slides into
     view exactly where the 1st set was. The 50% in calc() is "half
     of the 32 cards" = 16 cards, which equals 2 sets — but the
     actual seamlessness needs only 1 set. 50% guarantees we always
     land on an exact card boundary, regardless of any future width
     change. */
  to   { transform: translateX(calc(-100% / 4)); }
}

/* Card */
.review-card {
  flex: 0 0 var(--review-card-w);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
@media (max-width: 560px) {
  /* --review-card-w is already overridden to 280px above; this rule
     only tightens the padding on small viewports. */
  .review-card { padding: 18px 18px 14px; }
}

.review-stars {
  color: #F5A623;       /* App Store gold */
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

.review-text {
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  margin-top: 4px;
}
.review-author strong {
  display: block;
  font-size: 0.92rem;
  color: var(--ink);
}
.review-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Initial-letter avatar: small, no fake people */
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.review-avatar--blue   { background: linear-gradient(135deg, #4D9EE3, #1E5687); }
.review-avatar--teal   { background: linear-gradient(135deg, #3FB8AF, #1A7A75); }
.review-avatar--navy   { background: linear-gradient(135deg, #0F3B62, #08243F); }
.review-avatar--amber  { background: linear-gradient(135deg, #F5A623, #C97F0E); }
.review-avatar--coral  { background: linear-gradient(135deg, #E27B58, #B0432A); }
.review-avatar--violet { background: linear-gradient(135deg, #8B5CF6, #5B21B6); }
.review-avatar--sea   { background: linear-gradient(135deg, #2BA88E, #0E6B5C); }
.review-avatar--sky   { background: linear-gradient(135deg, #5BB6F0, #1E6B9E); }

@media (prefers-reduced-motion: reduce) {
  .reviews-track {
    animation: none;
    transform: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .review-card { scroll-snap-align: start; }
}



/* ────────────────────────────────────────────────────────────────
   CTA
    ───────────────────────────────────────────────────────────────── */

.cta {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #fff;
  padding: 90px 0;
}
.cta h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.cta-inner { text-align: center; }
.cta p { color: rgba(255,255,255,0.85); margin: 12px 0 28px; }
.cta-note { font-size: 0.88rem; opacity: 0.7; margin-top: 18px; }

/* ────────────────────────────────────────────────────────────────
   Footer
    ───────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 40px 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
}
.footer-links a:hover { color: #fff; text-decoration: none; }

/* Social Media Icons */
.footer-social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.social-icon:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}
.social-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: translateY(-2px);
}
.social-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ────────────────────────────────────────────────────────────────
   Legal pages
    ───────────────────────────────────────────────────────────────── */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 32px 120px;
}
.legal h1 { font-size: 2rem; margin-bottom: 8px; }
.legal .legal-eyebrow {
  color: var(--muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.legal h2 { font-size: 1.25rem; margin-top: 36px; margin-bottom: 12px; }
.legal p { margin-bottom: 14px; color: var(--ink); }
.legal address {
  font-style: normal;
  background: var(--surface-tint);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 18px 0 24px;
  border: 1px solid var(--hairline);
}
.legal a.back {
  display: inline-block;
  margin-top: 32px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ────────────────────────────────────────────────────────────────
   Responsive
    ───────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
   .hero-inner { grid-template-columns: 1fr; gap: 36px; }
   .hero-visual { order: -1; }
   .hero-logo { width: 220px; }
   .feature-grid { grid-template-columns: repeat(2, 1fr); }
   .nav-links { gap: 14px; }
   .nav-links a:not(.btn) { display: none; }
}

@media (max-width: 560px) {
  section { padding: 64px 0; }
   .hero { padding: 56px 0 72px; }
   .feature-grid { grid-template-columns: 1fr; }
   .container { padding: 0 20px; }
   .footer-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
   .footer-social { order: 2; margin-top: 8px; }
   .nav-links .btn { padding: 5px 12px; font-size: 0.82rem; }
   .header-inner { padding-top: 22px; padding-bottom: 22px; }
}

/* ============================================
   BLOG
   ============================================ */

.page-hero {
  background: linear-gradient(160deg, #0a2a4a 0%, #0F3B62 60%, #1a5c8a 100%);
  padding: 80px 0 72px;
  text-align: center;
  color: #fff;
}
.page-hero .hero-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 12px;
}
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 16px;
}
.page-hero .hero-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.blog-section {
  padding: 72px 0 96px;
  background: #f4f7fb;
}

.blog-post {
  background: #fff;
  border-radius: 16px;
  padding: 40px 48px;
  margin-bottom: 32px;
  box-shadow: 0 2px 12px rgba(15,59,98,0.08);
  border: 1px solid rgba(15,59,98,0.08);
}

.blog-post--featured {
  border: 2px solid #0F3B62;
}

.blog-post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.blog-post-meta time {
  font-size: 0.82rem;
  color: #7a8fa6;
  font-weight: 500;
}
.blog-tag {
  background: #e8f0fa;
  color: #0F3B62;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.blog-post h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  color: #0a2a4a;
  margin: 0 0 6px;
  line-height: 1.25;
}
.blog-post-author {
  font-size: 0.82rem;
  color: #7a8fa6;
  margin: 0 0 24px;
  font-weight: 500;
}
.blog-post-body {
  color: #3a4f63;
  line-height: 1.75;
  font-size: 1.02rem;
}
.blog-post-body p {
  margin: 0 0 16px;
}
.blog-post-body p:last-child {
  margin-bottom: 0;
}
.blog-post-body strong {
  color: #0a2a4a;
}
.blog-post-body em {
  color: #3a4f63;
}
.blog-cta {
  margin-top: 28px;
  display: inline-block;
}

.blog-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 40px 0 28px;
  color: #7a8fa6;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-divider::before,
.blog-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d0dce8;
}

/* ──────────────────────────────────────────────────────────────
   Cinematic image section (between hero and "Here is the deal")
   Static, no scroll effects. Just the photo, full-bleed.
    ────────────────────────────────────────────────────────────── */

.parallax-hero {
  position: relative;
  height: 60vh;
  min-height: 360px;
  max-height: 640px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-tint) 100%);
}
.parallax-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-image, url('assets/hero.png'));
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
@media (min-width: 1100px) {
  /* Wide screens: pull the focal point slightly right of center so the
     boat sits in the visual center, then on narrower screens the image
     crops from the left and the boat (right side) stays anchored. */
  .parallax-bg { background-position: 65% center; }
}
@media (prefers-color-scheme: dark) {
  .parallax-bg {
    --hero-image: url('assets/hero_dark.png');
  }
}
@media (max-width: 640px) {
  .parallax-hero { height: 50vh; min-height: 320px; }
}

@media (max-width: 640px) {
  .blog-post { padding: 28px 24px; }
  .page-hero { padding: 56px 0 52px; }
}