/* ============================================================
   VacationPlanner one-pager — "Your vacation, now boarding."
   One page = one vacation day:
     hero morning sky → noon steps → golden-hour features → night build
   Palette:
     Sky #B7E0F2 · Navy #0B2A46 · Coral #FF6B4A · Sun #FFC940
     Palm #2E9E6B · Azure #1D6FB8 · Night #081A30 · Gold #FFD9A0
   Type: Archivo Black (display) · Instrument Sans (body)
         Spline Sans Mono (board, labels)
   Signatures: living split-flap departure board, banner plane,
               sun that sets as you scroll.
   ============================================================ */

:root {
  --sky: #b7e0f2;
  --sky-light: #d8eef9;
  --navy: #0b2a46;
  --navy-soft: #33506c;
  --coral: #ff6b4a;
  --coral-deep: #e04f2e;
  --sun: #ffc940;
  --palm: #2e9e6b;
  --azure: #1d6fb8;
  --night: #081a30;
  --gold: #ffd9a0;
  --paper: #ffffff;

  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", sans-serif;
  --font-mono: "Spline Sans Mono", "SF Mono", monospace;

  --shell: 1140px;
  --border: 3px solid var(--navy);
  --shadow: 7px 7px 0 var(--navy);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--sky);
  overflow-x: hidden;
}

.mono { font-family: var(--font-mono); }

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

a:focus-visible, .btn:focus-visible {
  outline: 4px solid var(--coral);
  outline-offset: 3px;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 48px;
}

.h2-tape {
  background: linear-gradient(transparent 12%, var(--sun) 12% 88%, transparent 88%);
  padding: 0 8px;
  margin-left: -8px;
}

/* ============ Header ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--sky) 90%, white);
  border-bottom: var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--navy);
}
/* The icon is taller than the 60px bar and hangs over its bottom edge;
   negative margins keep it from stretching the bar itself. */
.wordmark .mark {
  width: 78px;
  height: 78px;
  display: block;
  margin: -6px 0 -22px -8px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 6px 10px rgba(11, 42, 70, 0.35));
}
.wordmark span { color: var(--coral); }

.header-nav { display: flex; align-items: center; gap: 24px; }
.header-nav a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.header-nav a:hover { color: var(--coral-deep); }

.pill-link {
  background: var(--navy);
  color: var(--sun) !important;
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid var(--navy);
}
.pill-link:hover {
  background: var(--coral);
  color: var(--navy) !important;
}

/* ============ Hero: morning ============ */

.hero {
  position: relative;
  padding: 108px 0 120px;
  overflow: hidden;
  background: linear-gradient(var(--sky-light), var(--sky) 70%);
}

/* Poster sun with slowly rotating rays */
.sun {
  position: absolute;
  top: -230px;
  right: -170px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      var(--sun) 0 22%,
      transparent 22% 30%,
      color-mix(in srgb, var(--sun) 70%, transparent) 30% 36%,
      transparent 36% 44%,
      color-mix(in srgb, var(--sun) 45%, transparent) 44% 49%,
      transparent 49% 58%,
      color-mix(in srgb, var(--sun) 25%, transparent) 58% 62%,
      transparent 62%);
  pointer-events: none;
}
.sun::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    color-mix(in srgb, var(--sun) 30%, transparent) 0deg 5deg,
    transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 0 36%, #000 37% 60%, transparent 61%);
          mask: radial-gradient(circle, transparent 0 36%, #000 37% 60%, transparent 61%);
}
@media (prefers-reduced-motion: no-preference) {
  .sun { animation: sunrise 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .sun::after { animation: spin 90s linear infinite; }
  @keyframes sunrise {
    from { transform: translateY(90px) scale(0.9); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  @keyframes spin { to { transform: rotate(360deg); } }
}

/* Clouds */
.cloud {
  position: absolute;
  height: 30px;
  width: 96px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.9;
  pointer-events: none;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before { width: 44px; height: 44px; left: 14px; top: -22px; }
.cloud::after  { width: 30px; height: 30px; left: 48px; top: -14px; }
.c1 { top: 120px; left: -120px; scale: 1.15; }
.c2 { top: 320px; left: -180px; scale: 0.8; opacity: 0.7; }
.c3 { top: 60px;  left: -150px; scale: 0.6; opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .c1 { animation: drift 75s linear infinite; }
  .c2 { animation: drift 110s linear 18s infinite; }
  .c3 { animation: drift 95s linear 40s infinite; }
  @keyframes drift {
    to { transform: translateX(calc(100vw + 320px)); }
  }
}

/* Seagulls */
.gull {
  position: absolute;
  width: 34px;
  color: var(--navy-soft);
  pointer-events: none;
}
.g1 { top: 140px; left: 12%; }
.g2 { top: 220px; left: 26%; width: 24px; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .g1 { animation: bob 4.2s ease-in-out infinite alternate; }
  .g2 { animation: bob 3.4s ease-in-out 0.8s infinite alternate; }
  @keyframes bob {
    to { transform: translateY(-14px); }
  }
}

/* Banner plane */
.plane-run {
  position: absolute;
  top: 66px;
  left: 0;
  pointer-events: none;
  z-index: 3;
}
.plane-bob {
  display: flex;
  align-items: center;
}
.banner {
  background: var(--paper);
  border: 2px solid var(--navy);
  color: var(--navy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  box-shadow: 3px 3px 0 var(--navy);
}
.rope {
  width: 30px;
  height: 2px;
  background: var(--navy);
}
.plane {
  width: 60px;
  color: var(--navy);
  flex-shrink: 0;
}
.plane-run { transform: translateX(-50vw); }
@media (prefers-reduced-motion: no-preference) {
  .plane-run { animation: fly 21s linear 1.5s infinite; }
  .plane-bob { animation: bob 2.6s ease-in-out infinite alternate; }
  @keyframes fly {
    0%   { transform: translateX(-50vw); }
    100% { transform: translateX(115vw); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .plane-run { transform: none; left: auto; right: 8%; top: 84px; }
}

.hero-inner {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 9fr);
  gap: 56px;
  align-items: center;
}

.hero h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin-bottom: 28px;
}
.hero h1 span { display: block; }
.hero h1 .l1 {
  font-family: var(--font-body);
  font-size: 0.42em;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 0.2em;
}
.hero h1 .l1 i {
  display: inline-block;
  font-style: italic;
  background: var(--sun);
  border: 2px solid var(--navy);
  border-radius: 6px;
  padding: 0 14px 2px;
  transform: rotate(-2.5deg);
  box-shadow: 3px 3px 0 var(--navy);
}
.hero h1 .l2 {
  color: var(--coral);
  text-shadow: 6px 6px 0 var(--navy);
  transform: rotate(-1deg);
  white-space: nowrap;
}
.hero h1 .l3 {
  color: var(--sky-light);
  -webkit-text-stroke: 2.5px var(--navy);
  text-shadow: 6px 6px 0 var(--coral);
  transform: rotate(0.6deg);
}

.lede {
  font-size: 1.13rem;
  color: var(--navy);
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 15px 26px;
  border: var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--navy);
}
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--navy);
}
.btn.primary { background: var(--coral); color: var(--navy); }
.btn.ghost { background: var(--paper); color: var(--navy); }

/* ---- Departure board ---- */

.board {
  background: var(--night);
  border: var(--border);
  border-radius: 16px;
  box-shadow: 10px 10px 0 var(--navy);
  padding: 18px 18px 14px;
  color: #e8f1f8;
  transform: rotate(1.2deg);
}

.board-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.22);
}
.board-sun {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 3px rgba(255, 201, 64, 0.25);
}
@media (prefers-reduced-motion: no-preference) {
  .board-sun { animation: blink-slow 3s steps(1) infinite; }
  @keyframes blink-slow { 50% { background: var(--coral); } }
}
.board-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sun);
}
.board-day {
  margin-left: auto;
  font-size: 0.78rem;
  color: #7d94ab;
  letter-spacing: 0.12em;
}

.board-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: clamp(10px, 1.15vw, 14px);
}

.brow { display: flex; gap: 12px; align-items: center; }

.bf {
  display: inline-flex;
  gap: 2px;
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}
.bf.plan { flex: 1; }
.bf.status { justify-content: flex-end; }

.bf i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35ch;
  height: 1.9em;
  background: linear-gradient(#17395e 48%, #0f2b49 52%);
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.bf i.sp { background: transparent; box-shadow: none; width: 0.7ch; }

.st-green i:not(.sp)  { color: #43d17c; }
.st-yellow i:not(.sp) { color: var(--sun); }
.st-coral i:not(.sp)  { color: var(--coral); }
.st-gray i:not(.sp)   { color: #7d94ab; }

.board-foot {
  margin-top: 14px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #58718a;
  text-align: center;
}

/* ============ Ticker ============ */

.ticker {
  background: var(--sun);
  border-top: var(--border);
  border-bottom: var(--border);
  overflow: hidden;
  transform: rotate(-1.2deg) scale(1.03);
  position: relative;
  z-index: 5;
}
.ticker-track {
  display: flex;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 0;
}
.ticker-track span { flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 24s linear infinite; }
  @keyframes ticker {
    to { transform: translateX(-50%); }
  }
}

/* ============ How it works: high noon ============ */

.how {
  position: relative;
  padding: 110px 0 130px;
  background: var(--paper);
}

/* Real app screenshot. The capture carries its own transparent margin and
   window shadow, so it gets a drop-shadow filter rather than a box frame. */
.showcase {
  margin: 0 0 96px;
  text-align: center;
}
.showcase img {
  display: block;
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 18px 34px rgba(11, 42, 70, 0.34));
  transform: rotate(-0.5deg);
}
.showcase figcaption {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-soft);
}

/* Below this width the interface is too small to read, so the frame scrolls
   sideways and keeps the screenshot at a legible size. */
@media (max-width: 760px) {
  .showcase-frame {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .showcase-frame img {
    min-width: 700px;
    transform: none;
  }
  .showcase figcaption {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
  }
}

.flight-path {
  color: var(--azure);
  margin: -20px 0 -34px;
  opacity: 0.85;
}
.flight-path svg { width: 100%; height: 60px; display: block; }

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}

.step {
  position: relative;
  background: var(--paper);
  border: var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 30px 26px 26px;
  transition: transform 0.18s ease;
}
.step.card-a { transform: rotate(-1.6deg); }
.step.card-b { transform: rotate(1.1deg) translateY(18px); }
.step.card-c { transform: rotate(-0.8deg); }
.step:hover { transform: rotate(0deg) translateY(-4px); }

.stamp {
  position: absolute;
  top: -20px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 58px;
  background: var(--sun);
  border: 2px dashed var(--navy);
  border-radius: 6px;
  font-size: 1.6rem;
  font-weight: 600;
  transform: rotate(6deg);
  box-shadow: 3px 3px 0 var(--navy);
}
.card-b .stamp { background: var(--coral); transform: rotate(-5deg); }
.card-c .stamp { background: var(--palm); color: var(--paper); transform: rotate(4deg); }
@media (prefers-reduced-motion: no-preference) {
  .step:hover .stamp { animation: wobble 0.45s ease; }
  @keyframes wobble {
    25% { transform: rotate(12deg) scale(1.08); }
    60% { transform: rotate(-4deg); }
  }
}

.step h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.step p { color: var(--navy-soft); font-size: 0.97rem; }

.step-art {
  margin-top: 20px;
  height: 78px;
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: var(--sky-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  font-size: 0.85rem;
  color: var(--navy);
}

.caret {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: var(--coral);
  vertical-align: text-bottom;
  margin-left: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .caret { animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
}

.mini-block {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 88px; height: 46px;
  border-radius: 8px;
  border: 2px solid var(--navy);
  padding: 5px 7px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(160deg, #f6d8a7 0%, #d9a05b 45%, #7c5a36 100%);
  box-shadow: 3px 3px 0 var(--navy);
  transform: rotate(-4deg);
}
.mini-block::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(10, 20, 30, 0.5), rgba(10, 20, 30, 0.15));
}
.mini-block b { position: relative; font-size: 11px; font-weight: 600; }
.drag-arrow { width: 52px; color: var(--coral-deep); }

.art-week { gap: 8px; padding: 0 16px; }
.art-week .bar {
  flex: 1;
  border-radius: 6px;
  border: 2px solid var(--navy);
  height: 42px;
}
.g-louvre { background: linear-gradient(160deg, #f6d8a7 0%, #d9a05b 45%, #7c5a36 100%); height: 50px !important; }
.g-sea { background: linear-gradient(150deg, #c8dcea 0%, #7ba3c0 50%, #3c5a74 100%); height: 38px !important; }
.solid-coral { background: var(--coral); height: 30px !important; }
.solid-palm { background: var(--palm); height: 36px !important; }

/* ============ Features: golden hour ============ */

.features {
  position: relative;
  padding: 110px 0 210px;
  background: linear-gradient(180deg, var(--gold) 0%, #ffb27a 55%, #ff8f6b 100%);
  overflow: hidden;
}
/* Waves sit at the top of their section, flipped, filled with the color of
   the section ABOVE — sections have overflow:hidden, so they must live inside. */
.wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  display: block;
  transform: scaleY(-1);
}
.features .wave { fill: var(--paper); }
.features .shell { position: relative; z-index: 2; }

/* The sun again — setting behind the night wave, which cuts its lower edge */
.setting-sun {
  position: absolute;
  bottom: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8 0 40%, var(--sun) 60%, var(--coral) 100%);
  box-shadow: 0 0 120px 40px rgba(255, 201, 64, 0.55);
  z-index: 1;
}

/* The night sea, drawn inside the sunset section ABOVE the sun, so the
   wavy line is the sun's bottom border. The night section below starts
   in the same color, so the boundary is seamless. */
.night-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  display: block;
  fill: var(--night);
  z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .setting-sun { animation: glow 5s ease-in-out infinite alternate; }
  @keyframes glow {
    to { box-shadow: 0 0 160px 60px rgba(255, 160, 90, 0.7); }
  }
}

.tag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 32px;
}

.tag {
  position: relative;
  border: var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 30px 30px 28px 58px;
  transition: transform 0.18s ease;
}
.tag:hover { transform: translateY(-4px) rotate(0deg) !important; }

.tag-sun   { background: var(--sun);   transform: rotate(-1.1deg); }
.tag-coral { background: var(--coral); transform: rotate(0.9deg); }
.tag-palm  { background: var(--palm);  transform: rotate(0.8deg); color: #eafff3; }
.tag-azure { background: var(--azure); transform: rotate(-0.9deg); color: #e8f4ff; }
.tag-paper { background: var(--paper); transform: rotate(0.5deg); }
.tag-wide  { grid-column: 1 / -1; }
.tag-wide p { max-width: 72ch; }

.tag .hole {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--navy);
}

.tag h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 10px;
}
.tag-sun h3, .tag-coral h3 { color: var(--navy); }
.tag p { font-size: 0.97rem; }
.tag-sun p, .tag-coral p { color: var(--navy); }

/* ============ Get it: night ============ */

.get {
  position: relative;
  padding: 100px 0 130px;
  background: linear-gradient(var(--night), #04101f);
  color: var(--sky-light);
  overflow: hidden;
}
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, #cfe6f5 50%, transparent 51%),
    radial-gradient(2px 2px at 28% 12%, #ffc940 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 38%, #cfe6f5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 15%, #cfe6f5 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 32%, #ffc940 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 18%, #cfe6f5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 55%, #cfe6f5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 70%, #cfe6f5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 62%, #cfe6f5 50%, transparent 51%);
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .stars { animation: twinkle 4s ease-in-out infinite alternate; }
  @keyframes twinkle {
    from { opacity: 0.55; }
    to   { opacity: 1; }
  }
}

.moon {
  position: absolute;
  top: 90px;
  right: 9%;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  box-shadow: inset -20px -12px 0 0 #f2e8cf;
  transform: rotate(-18deg);
  pointer-events: none;
}

.shoot {
  position: absolute;
  width: 130px;
  height: 2px;
  background: linear-gradient(90deg, #ffffff, transparent);
  opacity: 0;
  pointer-events: none;
}
.s1 { top: 16%; left: 62%; transform: rotate(-32deg); }
.s2 { top: 34%; left: 18%; transform: rotate(-28deg); }
@media (prefers-reduced-motion: no-preference) {
  .s1 { animation: shoot 8s linear 2s infinite; }
  .s2 { animation: shoot 11s linear 6.5s infinite; }
  @keyframes shoot {
    0%   { opacity: 0; translate: 0 0; }
    3%   { opacity: 1; }
    9%   { opacity: 0; translate: -210px 130px; }
    100% { opacity: 0; translate: -210px 130px; }
  }
}

.get-inner {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  text-align: center;
}

.get h2 { color: #fff; }

.get-copy { position: relative; max-width: 560px; }
.get-copy > p {
  color: #a9c1d6;
  max-width: 44ch;
  margin: 0 auto 34px;
}

.btn.btn-big {
  font-size: 1.25rem;
  padding: 20px 40px;
  background: var(--sun);
}
.btn.btn-big:hover { background: var(--coral); }

.get-note {
  margin-top: 22px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f8ba3;
}

.download-hero {
  position: relative;
  width: 128px;
  margin: 0 auto 30px;
}
.download-hero img {
  display: block;
  width: 128px;
  height: 128px;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.5));
}
@media (prefers-reduced-motion: no-preference) {
  .download-hero img { animation: bob 3.4s ease-in-out infinite alternate; }
}
.download-hero .free-stamp {
  position: absolute;
  top: -18px;
  right: -74px;
  margin: 0;
  width: 84px;
  height: 84px;
  font-size: 0.9rem;
}

.free-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 96px; height: 96px;
  margin: 0 auto 26px;
  border: 3px dashed var(--coral);
  border-radius: 50%;
  color: var(--coral);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transform: rotate(12deg);
}
@media (prefers-reduced-motion: no-preference) {
  .free-stamp { animation: stamp-sway 4s ease-in-out infinite alternate; }
  @keyframes stamp-sway {
    from { transform: rotate(8deg); }
    to   { transform: rotate(16deg) scale(1.04); }
  }
}

/* ============ Footer ============ */

.site-footer {
  padding: 26px 0;
  background: #04101f;
  color: #8fa7bb;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer strong { color: #d5e4ef; }
.footer-links a {
  color: #d5e4ef;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.footer-links a:hover {
  color: var(--sun);
  border-bottom-color: var(--sun);
}

/* ============ Reveal on scroll ============ */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.55s ease, translate 0.55s ease;
  }
  .reveal.in { opacity: 1; translate: 0 0; }
  .step.reveal:nth-child(2) { transition-delay: 0.1s; }
  .step.reveal:nth-child(3) { transition-delay: 0.2s; }
  .tag.reveal:nth-child(2) { transition-delay: 0.08s; }
  .tag.reveal:nth-child(3) { transition-delay: 0.16s; }
  .tag.reveal:nth-child(4) { transition-delay: 0.24s; }
  .tag.reveal:nth-child(5) { transition-delay: 0.32s; }
}

/* ============ Responsive ============ */

@media (max-width: 960px) {
  .hero { padding: 76px 0 96px; }
  .hero-inner { grid-template-columns: 1fr; gap: 52px; }
  .sun { width: 500px; height: 500px; top: -200px; right: -180px; }
  .board { transform: rotate(0.6deg); }
  .flight-path { display: none; }
  .steps { grid-template-columns: 1fr; max-width: 520px; }
  .step.card-b { transform: rotate(1.1deg); }
  .tag-grid { grid-template-columns: 1fr; }
  .moon { top: 46px; right: 6%; width: 64px; height: 64px; box-shadow: inset -15px -9px 0 0 #f2e8cf; }
  .setting-sun { width: 260px; height: 260px; bottom: -100px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .header-nav a:not(.pill-link) { display: none; }
  .board-rows { font-size: 9.5px; }
  .board { padding: 14px 12px 10px; }
  .brow { gap: 8px; }
  .ticker-track { font-size: 0.95rem; }
  .banner { font-size: 9px; padding: 4px 8px; }
  .plane { width: 44px; }
}