:root {
  --water: #14394a;
  --deep: #09232f;
  --foam: #edf5ef;
  --ink: #17303b;
  --muted: #52717b;
  --coral: #e77248;
  --gold: #f2bd55;
  --line: #bed0d0;
  --paper: #fbfcf7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.wrap { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.site-header { padding: 18px 0; background: var(--deep); color: var(--foam); }
.header-inner, .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { font-weight: 750; text-decoration: none; letter-spacing: -0.03em; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.92rem; }
.nav a { color: var(--foam); text-decoration: none; }
.hero { position: relative; min-height: 590px; overflow: hidden; background: radial-gradient(circle at 77% 15%, #396d75 0, var(--water) 34%, var(--deep) 100%); color: var(--foam); }
.hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 54px; min-height: 590px; align-items: center; padding: 64px 0; }
.eyebrow, .section-tag { display: block; margin-bottom: 12px; color: var(--coral); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.06; letter-spacing: -0.045em; }
h1 { margin: 0; font-size: clamp(3rem, 7vw, 5.5rem); max-width: 680px; }
h2 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { margin: 0 0 8px; font-size: 1.15rem; }
.hero-copy { max-width: 540px; margin: 26px 0 34px; color: #d3e2df; font-size: 1.15rem; }
.button { display: inline-block; padding: 13px 20px; border-radius: 999px; background: var(--coral); color: white; font-weight: 750; text-decoration: none; }
.button.secondary { margin-left: 10px; background: transparent; border: 1px solid #87a8a9; }
.hero-swim-field { position: absolute; inset: 0; pointer-events: none; }
.hero-swim-field::before { content: ""; position: absolute; inset: 16% 0; background: linear-gradient(102deg, transparent 0 10%, rgba(237, 245, 239, .07) 10.1% 10.2%, transparent 10.3% 100%), linear-gradient(96deg, transparent 0 48%, rgba(237, 245, 239, .06) 48.1% 48.2%, transparent 48.3% 100%); opacity: .85; }
.hero-device { position: relative; width: min(268px, 58vw); aspect-ratio: 886 / 1920; padding: 9px; border-radius: 44px; background: linear-gradient(158deg, #2b5060 0, #0b2530 62%, #061a23 100%); box-shadow: 0 34px 64px -20px rgba(0, 0, 0, .62), 0 0 0 1px rgba(237, 245, 239, .16), inset 0 1px 0 rgba(237, 245, 239, .22); }
.hero-device::after { content: ""; position: absolute; left: 50%; top: 19px; width: 66px; height: 18px; border-radius: 999px; background: #061a23; transform: translateX(-50%); }
.device-screen, .device-still { display: block; width: 100%; height: 100%; border-radius: 36px; object-fit: cover; background: var(--paper); }
.device-still { display: none; }

.section { padding: 88px 0; }.section.tinted { background: #eaf0ea; }
.section-intro { max-width: 620px; margin-bottom: 40px; }.section-intro p { color: var(--muted); font-size: 1.08rem; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.card { padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: white; }.card p { margin: 0; color: var(--muted); }
.is-not { background: #eaf0ea; }.not-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 24px; align-items: stretch; }.not-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--gold); }.not-list li { display: grid; gap: 5px; min-height: 130px; padding: 24px; background: #f8fbf6; }.not-list strong { font-size: 1.08rem; }.not-list span { color: var(--muted); font-size: .94rem; }.not-reason { padding: 30px; background: var(--deep); color: var(--foam); }.not-reason .section-tag { color: var(--gold); }.not-reason p { margin: 0; font-size: 1.05rem; line-height: 1.55; }.not-reason p + p { margin-top: 24px; color: #bcd2cf; }
.page-main { padding: 74px 0 94px; }.page-shell { max-width: 760px; }.lead { margin: 0 0 25px; color: var(--muted); font-size: 1.22rem; }.callout { margin: 32px 0; padding: 20px 22px; border-left: 5px solid var(--coral); background: #fff4ec; }.page-shell h2 { margin-top: 46px; font-size: 1.75rem; }.page-shell h3 { margin-top: 27px; }.page-shell li { margin: 9px 0; }.meta { color: var(--muted); font-size: .92rem; }
.support-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 38px; }.support-actions .button.secondary { margin-left: 0; color: var(--ink); border-color: var(--line); }
footer { padding: 28px 0; background: var(--deep); color: #c6d9d6; font-size: .9rem; } footer a { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .device-screen { display: none; }.device-still { display: block; }}
@media (max-width: 720px) { .hero, .hero-content { min-height: 0; }.hero-content { grid-template-columns: 1fr; justify-items: center; gap: 40px; padding: 64px 0 72px; }.hero-content > div:first-child { justify-self: stretch; }.hero-device { width: min(240px, 62vw); }.hero-grid, .cards, .not-grid { grid-template-columns: 1fr; }.not-list { grid-template-columns: 1fr; }.not-list li { min-height: auto; }.header-inner, .footer-inner { align-items: flex-start; flex-direction: column; }.button.secondary { margin-left: 0; margin-top: 10px; } }