@font-face { font-family: "Lilita"; src: url("/fonts/lilita.ttf") format("truetype"); font-display: swap; }

:root {
  --navy: #0b2340;
  --yellow: #ffd23f;
  --sky-top: #7ec8f0;
  --sky-bottom: #cdeefb;
  --water-top: #35d0de;
  --water-mid: #0d86c4;
  --water-deep: #06305a;
  --card: rgba(255, 255, 255, 0.92);
  --tilt: 0deg;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--navy);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom) 70%);
  overflow-x: hidden;
}
h1, h2, h3, .btn, .pill, .tag, .eyebrow, .count, .tilt-hint { font-family: "Lilita", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.02em; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- background: clouds + a sea that tilts with the phone ---- */
.sky i {
  position: fixed; z-index: -2; border-radius: 50%; filter: blur(2px);
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0));
}
.sky i:nth-child(1) { width: 420px; height: 160px; top: 9%; left: -80px; }
.sky i:nth-child(2) { width: 360px; height: 130px; top: 24%; right: -60px; }
.sky i:nth-child(3) { width: 300px; height: 110px; top: 46%; left: 30%; opacity: 0.7; }
.sea {
  position: fixed; z-index: -1; left: -40vmax; right: -40vmax; bottom: -55vh; height: 85vh;
  transform: rotate(var(--tilt)); transform-origin: 50% 0;
}
.water {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--water-top), var(--water-mid) 28%, var(--water-deep));
}
.water::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24'%3E%3Cpath d='M0 14 Q30 0 60 14 T120 14 V24 H0Z' fill='%2335d0de'/%3E%3C/svg%3E") repeat-x;
  animation: drift 6s linear infinite;
}
@keyframes drift { to { background-position-x: 120px; } }

/* ---- layout ---- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1100px; margin: 0 auto; padding: 18px 20px 0;
}
.mark { display: block; border-radius: 12px; border: 3px solid var(--navy); box-shadow: 0 4px 0 var(--navy); }
.pill { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--navy); color: var(--yellow); }
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }

.hero { display: grid; gap: 28px; padding: 22px 0 10px; align-items: center; }
.eyebrow { margin: 0 0 6px; font-size: 18px; color: var(--navy); opacity: 0.85; }
h1 { margin: 0; line-height: 0.92; }
h1 span {
  display: block; font-size: clamp(56px, 15vw, 96px); color: #fff;
  -webkit-text-stroke: 12px var(--navy); paint-order: stroke fill; text-shadow: 0 7px 0 var(--navy);
}
h1 .big { font-size: clamp(76px, 22vw, 140px); color: var(--yellow); }
.lede { font-size: 19px; max-width: 34em; margin: 16px 0 18px; }

.card {
  background: var(--card); border: 4px solid var(--navy); border-radius: 22px;
  box-shadow: 0 7px 0 var(--navy);
}
.form { padding: 16px; display: grid; gap: 12px; max-width: 460px; }
.form input[type="email"] {
  width: 100%; font: inherit; font-size: 18px; padding: 14px 16px; border-radius: 14px;
  border: 3px solid var(--navy); background: #fff; color: var(--navy);
}
.form input[type="email"]:focus { outline: 4px solid var(--yellow); outline-offset: 1px; }
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips legend { float: left; width: 100%; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; }
.chips span {
  display: inline-block; padding: 7px 14px; border-radius: 999px; border: 3px solid var(--navy);
  font-weight: 700; font-size: 15px; background: #fff;
}
.chips input:checked + span { background: var(--navy); color: var(--yellow); }
.chips input:focus-visible + span { outline: 3px solid var(--yellow); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.btn {
  display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
  font-size: 24px; padding: 14px 22px; border-radius: 16px; border: 4px solid var(--navy);
  background: var(--yellow); color: var(--navy); box-shadow: 0 6px 0 var(--navy);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--navy); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.msg { margin: 0; min-height: 0; font-weight: 700; }
.msg:empty { display: none; }
.msg.err { color: #c2321b; }
.fine { margin: 0; font-size: 13px; opacity: 0.75; }
.form.done .chips, .form.done input[type="email"], .form.done .btn { display: none; }
.form.done .msg { font-family: "Lilita", sans-serif; font-weight: 400; font-size: 24px; line-height: 1.2; }
.count { margin: 14px 2px 0; font-size: 20px; color: #fff; -webkit-text-stroke: 5px var(--navy); paint-order: stroke fill; }

.phone {
  justify-self: center; width: min(78vw, 340px); aspect-ratio: 9 / 16; border-radius: 40px;
  background: var(--navy); padding: 12px; box-shadow: 0 10px 0 rgba(11, 35, 64, 0.35), 0 30px 60px rgba(11, 35, 64, 0.35);
  transform: rotate(calc(var(--tilt) * -0.4));
}
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; display: block; background: #0d86c4; }

section h2 {
  font-size: clamp(32px, 8vw, 50px); line-height: 1; margin: 46px 0 18px; color: #fff;
  -webkit-text-stroke: 9px var(--navy); paint-order: stroke fill; text-shadow: 0 5px 0 var(--navy);
}
.grid { display: grid; gap: 18px; }
.level { overflow: hidden; }
.level img { width: 100%; height: auto; display: block; border-bottom: 4px solid var(--navy); }
.level .tag { margin: 12px 16px 0; font-size: 15px; color: #0d86c4; }
.level h3 { margin: 0 16px; font-size: 30px; }
.level p:last-child { margin: 4px 16px 16px; }

.physics { padding: 6px 20px 18px; margin-top: 40px; }
.physics h2 { margin-top: 18px; }
.physics ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 18px; }

.end { text-align: center; padding: 10px 0 20px; }
.end h2 { font-size: clamp(44px, 12vw, 80px); color: var(--yellow); }
.end p { font-size: 19px; color: #fff; text-shadow: 0 2px 0 var(--navy); max-width: 30em; margin: 0 auto 22px; font-weight: 600; }

footer { max-width: 1100px; margin: 0 auto; padding: 10px 20px 90px; color: #e8f7ff; font-size: 13px; text-align: center; }
footer p { margin: 4px 0; }

.tilt-hint {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
  font-size: 18px; padding: 10px 18px; border-radius: 999px; border: 3px solid var(--navy);
  background: #fff; color: var(--navy); box-shadow: 0 5px 0 var(--navy); cursor: pointer;
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.15fr 0.85fr; padding-top: 40px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .phone { width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .water::before { animation: none; }
  .sea, .phone { transform: none; }
  html { scroll-behavior: auto; }
}