:root{--foam:#e9ffff;--aqua:#a7f0e9;--muted:#bcd7df}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#020b13;color:var(--foam);font-family:Inter,system-ui,Arial,sans-serif;overflow-x:hidden}
a{color:inherit}
.ocean{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#176b85 0%,#13556e 8%,#0b3a53 23%,#082c42 38%,#062137 57%,#041626 77%,#020b14 100%)}
.ocean:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 100% 20% at 50% 0,rgba(183,253,255,.33),transparent 75%),radial-gradient(ellipse 55% 14% at 15% 14%,rgba(51,161,183,.13),transparent 100%),radial-gradient(ellipse 55% 19% at 90% 33%,rgba(40,132,155,.10),transparent 100%)}
.topbar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:25px clamp(22px,6vw,90px);background:linear-gradient(#03233266,transparent);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.logo{font-weight:800;text-decoration:none}
.topbar .right{opacity:.73;font-size:10px}
.surface{position:absolute;top:87px;left:-8%;width:116%;height:160px;z-index:2;opacity:.94;filter:drop-shadow(0 11px 12px #a6faff20);pointer-events:none}
.surface svg{width:100%;height:100%;overflow:visible}
.water-sheet{animation:drift 12s ease-in-out infinite alternate;transform-origin:center}
.water-sheet.two{animation-duration:17s;animation-direction:alternate-reverse;opacity:.7}
.water-sheet.three{animation-duration:22s;opacity:.44}
@keyframes drift{to{transform:translateX(-3.5%) scaleY(1.05)}}
.caustics{position:absolute;left:-15%;top:178px;width:130%;height:540px;z-index:0;opacity:.52;pointer-events:none;filter:blur(9px);background:repeating-linear-gradient(113deg,transparent 0 9%,rgba(205,255,255,.085) 10%,transparent 12% 19%);mask-image:linear-gradient(#000 0%,transparent 100%);animation:sway 16s ease-in-out infinite alternate}
.caustics.second{top:174px;transform:scaleX(-1);opacity:.3;animation-duration:25s}
@keyframes sway{to{transform:translateX(4%) skewX(-5deg)}}
.shafts{position:absolute;top:165px;left:0;right:0;height:1000px;pointer-events:none;background:linear-gradient(102deg,transparent 19%,rgba(194,252,255,.08) 29%,transparent 40%),linear-gradient(77deg,transparent 44%,rgba(202,251,255,.095) 54%,transparent 63%),linear-gradient(116deg,transparent 68%,rgba(168,234,243,.05) 79%,transparent 88%);mask-image:linear-gradient(#000,transparent 87%);animation:lights 20s ease-in-out infinite alternate}
@keyframes lights{to{transform:translateX(3%);opacity:.7}}
.bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,#d8ffff52 1px,transparent 2px),radial-gradient(circle,#d8ffff39 1px,transparent 2px);background-size:190px 280px,260px 430px;background-position:40px 110px,130px 200px;opacity:.19;mask-image:linear-gradient(transparent 0%,#000 17%,#000 70%,transparent 100%)}
.hero{min-height:105vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:270px 22px 130px;position:relative;z-index:3}
.hero-inner{max-width:1000px}
.overline{color:#bcf2ea;letter-spacing:.38em;text-transform:uppercase;font-size:11px;font-weight:700}
.hero h1{font:normal clamp(59px,9.5vw,136px)/1 Georgia,serif;letter-spacing:-.065em;margin:24px auto 26px;text-shadow:0 18px 54px #011823aa}
.hero h1 em{font-style:italic;color:#befff1}
.hero p{font:italic clamp(19px,2.5vw,28px)/1.45 Georgia,serif;color:#daeff1;margin:0 auto 28px;max-width:680px}
.cta{display:inline-flex;gap:13px;align-items:center;padding:13px 24px;border:1px solid #dafcf870;border-radius:100px;color:#f0ffff;text-decoration:none;background:#041d2c45;backdrop-filter:blur(8px);font-size:13px;font-weight:650;transition:background .2s}
.cta:hover{background:#b3f5e331;color:white}
.hint{display:block;margin-top:50px;letter-spacing:.20em;font-size:10px;text-transform:uppercase;color:#c6e5e5;opacity:.85}
.hint i{display:block;font-style:normal;font-size:24px;margin-top:6px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px)}}
.depth{letter-spacing:.29em;text-transform:uppercase;color:#93d6da;font-size:11px;font-weight:700}
.foot{font-size:12px;color:#8bb3bd;padding:24px;text-align:center;position:relative;z-index:2}
.return{position:fixed;bottom:20px;right:20px;z-index:15;background:#041a28d9;border:1px solid #d4ffff40;border-radius:99px;padding:12px 16px;text-decoration:none;font-size:12px;opacity:0;pointer-events:none;transition:opacity .25s}
.return.show{opacity:1;pointer-events:auto}
@media(max-width:700px){.surface{top:76px;height:105px}.caustics{top:135px}.shafts{top:110px}.hero{padding-top:200px}.topbar .right{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
*,*:before,*:after{box-sizing:border-box}
.ocean{min-height:100vh}
.topbar{align-items:center}
.topbar .right{display:none}
.splash-frame{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:190px 24px 85px;position:relative;z-index:3}
.splash-frame .hero-inner{max-width:940px}
.splash-frame h1{font:normal clamp(56px,9vw,120px)/1.03 Georgia,serif;letter-spacing:-.065em;margin:16px auto 17px}
.splash-frame h1 em{color:#befff1}
.splash-frame p{font:italic clamp(19px,2.4vw,29px) Georgia,serif;color:#dceff0;margin:0 auto 27px}
.splash .ocean{min-height:100svh;background:linear-gradient(180deg,#176b85 0%,#104f69 19%,#0a3951 42%,#062338 73%,#041523 100%)}
.splash .surface{top:65px}
.splash .caustics{top:145px;height:410px}
.splash .shafts{top:120px;height:600px}
.splash .hint{margin-top:44px}
.quiet{font-size:11px;color:#acd7dc;letter-spacing:.14em;text-transform:uppercase;margin-top:28px}
@media(max-width:700px){.splash-frame{padding-top:185px}}
.splash-reveal{position:relative;z-index:3;min-height:32svh;padding:8svh 24px 8svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.reveal-rule{width:min(250px,52vw);height:1px;background:linear-gradient(90deg,transparent,rgba(194,247,246,.46),transparent);margin-bottom:33px}
.splash-reveal p{margin:0;font:italic clamp(25px,3.1vw,42px)/1.2 Georgia,serif;color:#d2f7f1;text-shadow:0 8px 28px #0005}
.splash .ocean{background:linear-gradient(180deg,#176b85 0%,#104f69 15%,#0a3951 37%,#062338 66%,#03111e 100%)}
/* Three-beat scroll: each line gets its own stretch of ocean and fades up as it enters view (CSS only). */
.beat{min-height:72svh}
.beat em{color:#befff1}
.tagline{min-height:46svh}
.tagline p{font:normal clamp(15px,1.6vw,19px)/1.6 Inter,system-ui,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#bcf2ea;text-shadow:none}
@supports (animation-timeline:view()){
  .beat>*{animation:surface-up linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
}
@keyframes surface-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.splash-reveal p{text-wrap:balance}
@supports (animation-timeline:view()){
  .tagline>*{animation-range:entry 0% entry 100%}
}
@media(max-width:700px){.foot{padding-bottom:84px}}
.payoff{min-height:90svh}
.payoff p{font:italic clamp(56px,9vw,120px)/1.03 Georgia,serif;letter-spacing:-.05em}
.payoff p{font:normal clamp(52px,9vw,124px)/1 Georgia,serif;letter-spacing:.08em;color:#e9ffff;text-shadow:0 18px 54px #011823aa}