/* Palette: dry sand, Monterey Bay blues, sun and taco shell. */
:root {
  --sand: #fbf6ec;
  --sand-2: #f3e9d6;
  --ink: #0e3446;
  --ink-soft: #3f5f6d;
  --sea: #1488c7;
  --sea-deep: #0b5f8e;
  --foam: #e3f5f8;
  --sun: #ffd166;
  --coral: #ff7a59;
  --kelp: #2f7d4a;
  --tidemark-ink: #071a22;
  --display: "Fraunces", Georgia, serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font: 18px/1.6 var(--body);
}

a {
  color: var(--sea);
}

img {
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.5em;
}
h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
}
h3 {
  font-size: 1.4rem;
  font-weight: 600;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 20px;
}

section {
  padding-block: 64px;
}

/* Header */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font: 800 1.3rem var(--display);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand,
.btn {
  white-space: nowrap;
}

/* Buttons and links. Every button carries a 2px border, filled or not, so
   a ghost button (plain text in a button-sized box) lines up with a filled
   one next to it. */
.btn {
  display: inline-block;
  background: var(--coral);
  border: 2px solid var(--coral);
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn:hover {
  background: #f2603c;
  border-color: #f2603c;
}
.btn.small {
  padding: 8px 18px;
  font-size: 0.95rem;
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}
.btn.ghost:hover {
  background: transparent;
  border-color: transparent;
  color: var(--sea);
}
.text-link {
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 4px;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 48px;
  padding-top: 32px;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--sea);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.lede {
  color: var(--ink-soft);
  font-size: 1.15rem;
  max-width: 34em;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 28px;
}
.scene {
  width: 100%;
  height: auto;
  display: block;
}

/* Hero animation. The rider bobs down the face, spray peels off the board,
   the gulls glide, and every few seconds the taco's sunglasses slip to show
   its eyes. Units inside the SVG are its viewBox units. Nothing moves for
   anyone who asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .scene .rider {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ride 3.2s ease-in-out infinite;
  }
  .scene .spray circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: spray 1.1s ease-out infinite;
  }
  .scene .spray circle:nth-child(2) {
    animation-delay: 0.35s;
  }
  .scene .spray circle:nth-child(3) {
    animation-delay: 0.7s;
  }
  .scene .shades {
    animation: peek 7s ease-in-out infinite;
  }
  .scene .gull {
    animation: glide 9s ease-in-out infinite alternate;
  }
  .scene .gull:nth-child(2) {
    animation-duration: 7s;
    animation-delay: -3s;
  }
  .scene .streak {
    animation: drift 5s ease-in-out infinite alternate;
  }
  .scene .streak:nth-child(2) {
    animation-delay: -2.5s;
  }
  .scene .sun {
    transform-box: fill-box;
    transform-origin: center;
    animation: glow 6s ease-in-out infinite;
  }
}
@keyframes ride {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(3px, -5px) rotate(-3deg);
  }
  50% {
    transform: translate(6px, -1px) rotate(1.5deg);
  }
  75% {
    transform: translate(2px, -6px) rotate(2deg);
  }
}
@keyframes spray {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-16px, -12px) scale(0.3);
  }
}
@keyframes peek {
  0%,
  82%,
  100% {
    transform: translateY(0);
  }
  86%,
  94% {
    transform: translateY(6px);
  }
}
@keyframes glide {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(26px, -8px);
  }
}
@keyframes drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-18px);
  }
}
@keyframes glow {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Products */
.products {
  background: var(--foam);
  border-block: 1px solid #cbe9ef;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 12px;
}
.section-lede {
  color: var(--ink-soft);
  margin: -8px 0 28px;
}
/* The whole card is the link's hit area: the card link's ::after stretches
   over the card, so a tap anywhere on the card opens the product. */
.card {
  position: relative;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  padding: 28px;
  box-shadow:
    0 1px 0 #cbe9ef,
    0 12px 32px -18px rgba(14, 52, 70, 0.35);
}
.card p {
  color: var(--ink-soft);
  margin: 0 0 20px;
  flex: 1;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.logo {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
}
.logo.light {
  background: var(--foam);
}
.logo.dark {
  background: var(--tidemark-ink);
}
.tag {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.tag.live {
  background: #dff3e4;
  color: var(--kelp);
}
.tag.soon {
  background: #fff1cc;
  color: #8a5a00;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 #cbe9ef,
    0 18px 40px -18px rgba(14, 52, 70, 0.45);
}
.card-link {
  font-weight: 700;
  text-underline-offset: 4px;
}
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Contact */
.contact {
  text-align: center;
  padding-block: 88px;
}
.contact p {
  color: var(--ink-soft);
  max-width: 32em;
  margin: 0 auto 28px;
}
/* A hand-drawn underline under "every email". Where the browser supports
   scroll-driven animation, the line draws itself as the section scrolls into
   view; elsewhere it is simply there. */
.scribble {
  position: relative;
  white-space: nowrap;
  color: var(--ink);
}
.scribble svg {
  position: absolute;
  left: -3%;
  bottom: -0.45em;
  width: 106%;
  height: 0.6em;
  overflow: visible;
}
.scribble path {
  fill: none;
  stroke: var(--coral);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scribble path {
      animation: scribble-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
  }
}
@keyframes scribble-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.email {
  display: inline-block;
  font: 800 clamp(1.5rem, 4.5vw, 2.6rem) var(--display);
  color: var(--ink);
  text-decoration-color: var(--sun);
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.12em;
  overflow-wrap: anywhere;
}
.email:hover {
  color: var(--sea);
}

/* Footer */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 28px 40px;
  border-top: 1px solid var(--sand-2);
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.foot p {
  margin: 0;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 20px;
}
.foot-links a {
  color: var(--ink-soft);
  font-weight: 500;
}
.foot-links a:hover {
  color: var(--sea);
}

/* Small phones: the hero button already jumps to the products, so the
   nav keeps only the brand and the contact button. */
@media (max-width: 480px) {
  .nav-links > .ghost {
    display: none;
  }
}

/* Phones: stack the hero and the cards. */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  section {
    padding-block: 48px;
  }
}