/* ==========================================================================
   ride2.biz — landing page (index.html)
   Builds on css/styles.css: tokens, Inter, .brand, .btn, .rule and the
   --u design unit (1 px of the 1447 × 1087 Ride2Biz artboard).
   ========================================================================== */

.page-landing { background: var(--navy-800); }

.landing {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh;
  display: flex; flex-direction: column;
  color: var(--white);
  --focus: var(--yellow);
}
@supports (height: 1svh) { .landing { min-height: 100svh; } }

/* Full-viewport photo; riders stay centre-right, open sky and sea on the left */
.landing-media { position: absolute; inset: 0; z-index: -2; }
.landing-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* Navy veil behind the copy for contrast (WCAG AA under the actual glyphs,
   including where "taking shape." crosses bright cloud); the riders on the
   right are left untouched. */
.landing::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 48% at 20% 54%,
      rgba(3, 30, 62, .58) 0%,
      rgba(3, 30, 62, .4) 45%,
      rgba(3, 30, 62, 0) 100%),
    linear-gradient(90deg,
      rgba(3, 30, 62, .46) 0%,
      rgba(3, 30, 62, .34) 24%,
      rgba(3, 30, 62, .14) 44%,
      rgba(3, 30, 62, 0) 62%),
    linear-gradient(180deg,
      rgba(3, 30, 62, .2) 0%,
      rgba(3, 30, 62, 0) 20%,
      rgba(3, 30, 62, 0) 72%,
      rgba(3, 30, 62, .22) 100%);
}

.landing-inner {
  flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding:
    max(96px, calc(113 * var(--u)))
    max(20px, calc(40 * var(--u)))
    max(48px, calc(80 * var(--u)))
    max(20px, calc(69 * var(--u)));
}
.landing-copy { max-width: max(320px, calc(720 * var(--u))); }

.landing-title {
  font-family: var(--fdisp);
  font-weight: 760;
  font-size: max(44px, calc(98 * var(--u)));
  line-height: .95;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.landing-title .line { display: block; }
.landing-title, .landing-lead { text-shadow: 0 2px 18px rgba(3, 30, 62, .45), 0 1px 3px rgba(3, 30, 62, .35); }

.landing .rule {
  width: max(54px, calc(82 * var(--u)));
  height: max(3px, calc(4 * var(--u)));
  margin-top: max(22px, calc(40 * var(--u)));
}

.landing-lead {
  margin-top: max(16px, calc(30 * var(--u)));
  font-size: max(17px, calc(25 * var(--u)));
  font-optical-sizing: none;
  line-height: 1.45;
  color: var(--white);
  max-width: 30em;
  text-wrap: balance;
}

/* A coordinated pair: equal widths, primary yellow + glass secondary */
.landing-actions {
  display: inline-grid; grid-template-columns: 1fr 1fr;
  gap: max(12px, calc(16 * var(--u)));
  margin-top: max(28px, calc(48 * var(--u)));
}
.btn-landing {
  min-height: 0;
  height: max(54px, calc(68 * var(--u)));
  padding: 0 max(22px, calc(34 * var(--u)));
  gap: max(12px, calc(16 * var(--u)));
  font-size: max(14px, calc(17 * var(--u)));
  font-weight: 800;
  letter-spacing: .1em;
  border-radius: max(5px, calc(6 * var(--u)));
  box-shadow: 0 16px 34px -18px rgba(0, 10, 25, .7);
}
.btn-landing .arrow { width: max(18px, calc(22 * var(--u))); height: max(18px, calc(22 * var(--u))); stroke-width: 2.1; }
.btn-primary.btn-landing { border-color: var(--yellow); }
.btn-primary.btn-landing:hover { border-color: var(--yellow-hover); }

.btn-glass {
  color: var(--white);
  background: rgba(4, 32, 63, .34);
  border: 1.5px solid rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
.btn-glass:hover { background: var(--white); border-color: var(--white); color: var(--navy-900); }

/* ---------- Portrait / narrow: copy over the sky, riders below ---------- */
@media (max-aspect-ratio: 11/10) {
  .landing { background: linear-gradient(180deg, #03305d 0%, #0a4f8c 48%, #1667a6 100%); }
  .landing::before {
    z-index: 0;
    background: linear-gradient(180deg, rgba(2, 22, 46, .35) 0%, rgba(2, 22, 46, 0) 32%);
  }
  .landing-inner {
    position: relative; z-index: 2; order: 1;
    justify-content: flex-start;
    padding: clamp(112px, 17vw, 170px) var(--gutter) 0;
  }
  .landing-copy { max-width: 640px; }
  .landing-title { font-size: clamp(46px, 13.2vw, 104px); line-height: .95; }
  .landing .rule { width: clamp(56px, 11vw, 82px); height: 4px; margin-top: clamp(20px, 4vw, 32px); }
  .landing-lead { font-size: clamp(17px, 3.4vw, 23px); margin-top: clamp(14px, 3vw, 24px); }
  .landing-actions { margin-top: clamp(26px, 5vw, 40px); }
  .btn-landing { height: clamp(54px, 8.4vw, 64px); font-size: clamp(14px, 2.2vw, 16px); }

  .landing-media {
    position: relative; inset: auto; z-index: 1; order: 2;
    flex: 0 0 auto;
    width: 168vw; max-width: none;
    margin-left: -64vw;
    margin-top: -20vw;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
  }
  .landing-media img { height: auto; aspect-ratio: 1446 / 1087; }
}

/* Phones: stack the buttons full width */
@media (max-width: 560px) {
  .landing-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
}

/* Short landscape screens (phones on their side) */
@media (max-height: 520px) and (orientation: landscape) {
  .landing-inner { padding-top: 72px; padding-bottom: 20px; }
  .landing-title { font-size: clamp(34px, 10vh, 48px); }
  .landing .rule { margin-top: 14px; }
  .landing-lead { font-size: 16px; margin-top: 10px; }
  .landing-actions { margin-top: 18px; }
  .btn-landing { height: 46px; font-size: 13px; }
}