:root { --ink:#f9fcff; --muted:#b9d2df; --deep:#031c31; --ocean:#075579; --aqua:#27bfd3; --coral:#ff8a50; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); font-family:ui-rounded, "SF Pro Rounded", "Avenir Next", Avenir, system-ui, sans-serif; background:radial-gradient(circle at 85% 9%, #126e8e 0, transparent 26rem),linear-gradient(155deg,#063a5e,#031c31 72%); }
a { color:inherit; }
main { max-width:1100px; margin:auto; padding:0 28px; }
nav { display:flex; justify-content:space-between; align-items:center; padding:28px 0; }
.brand { font-size:1.2rem; font-weight:800; text-decoration:none; letter-spacing:-.04em; }.brand span { color:var(--aqua); }
.nav-links { display:flex; gap:22px; }.nav-links a { color:var(--muted); font-size:.94rem; text-decoration:none; }.nav-links a:hover { color:white; }
.hero { position:relative; isolation:isolate; min-height:620px; padding:85px 0 30px; overflow:hidden; }
.eyebrow { color:#79e7ee; font-size:.82rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
h1 { max-width:690px; margin:16px 0; font-size:clamp(3rem,8vw,6.5rem); line-height:.91; letter-spacing:-.075em; } h1 em { color:#7de7e9; font-style:normal; }
.lede { max-width:470px; color:var(--muted); font-size:1.15rem; line-height:1.55; }
.button { display:inline-block; margin-top:20px; padding:15px 21px; border-radius:999px; background:var(--coral); color:#212b36; font-weight:800; text-decoration:none; box-shadow:0 10px 28px #01132366; }
.fish-card { position:absolute; z-index:-1; right:1%; top:92px; width:min(37vw,360px); aspect-ratio:.82; padding:27px; border:1px solid #a4e7ef55; border-radius:44% 44% 38% 38%; background:linear-gradient(160deg,#4ab8d0,#0b607e 62%,#06435f); box-shadow:inset 0 0 90px #baf8f144,0 28px 50px #01132355; overflow:hidden; }
.forecast-label { display:block; font-weight:800; font-size:clamp(.85rem,2vw,1.15rem); }.forecast-temp { display:block; margin-top:44%; font-size:clamp(3rem,10vw,6.8rem); font-weight:800; letter-spacing:-.08em; }.forecast-condition { color:#d9f4f5; font-size:1.15rem; }
.fish { position:absolute; right:20%; top:31%; width:52%; height:30%; transform:rotate(-8deg); }.body { position:absolute; width:85%; height:100%; border-radius:50% 55% 48% 48%; background:linear-gradient(130deg,#ffd94b,#ff783c 65%); box-shadow:inset -18px -13px #de4d3377; }.tail { position:absolute; left:-16%; top:22%; width:35%; height:58%; background:#ff883c; clip-path:polygon(100% 0,0 50%,100% 100%); }.eye { position:absolute; z-index:1; right:21%; top:25%; width:19%; aspect-ratio:1; border:5px solid white; border-radius:50%; background:#092f42; }
.bubble { position:absolute; z-index:-2; border:2px solid #9ae9ee55; border-radius:50%; }.bubble-one { width:85px; height:85px; right:47%; bottom:80px; }.bubble-two { width:22px; height:22px; right:40%; bottom:185px; }.bubble-three { width:44px; height:44px; right:3%; top:55px; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:40px 0 80px; }.features article { padding:25px; border:1px solid #b4e9ed28; border-radius:22px; background:#ffffff0b; }.features span { color:var(--aqua); font-weight:800; }.features h2 { margin:21px 0 9px; font-size:1.25rem; letter-spacing:-.03em; }.features p { margin:0; color:var(--muted); line-height:1.5; }
footer { display:flex; justify-content:space-between; gap:18px; padding:24px max(28px,calc((100vw - 1044px)/2)); color:#9dbac9; border-top:1px solid #ffffff18; font-size:.88rem; } footer a { text-decoration:none; }
.document { max-width:760px; margin:40px auto 90px; padding:0 28px; }.document h1 { font-size:clamp(2.6rem,7vw,4.4rem); }.document h2 { margin-top:38px; font-size:1.35rem; }.document p,.document li { color:#c4d8e2; line-height:1.7; }.document a { color:#80e7e8; }
@media (max-width:700px) { .hero { min-height:720px; padding-top:55px; }.fish-card { top:390px; right:9%; width:82%; }.features { grid-template-columns:1fr; }.nav-links { gap:14px; } footer { flex-direction:column; } }