:root{--ocean:#64c9ef;--ocean-deep:#075e9f;--ocean-dark:#072c48;--ease-water:cubic-bezier(.22,1,.36,1)}
body{background:#11171e}
header{position:sticky;top:0;z-index:20;background:rgba(17,23,30,.9);backdrop-filter:blur(18px);border-bottom-color:rgba(100,201,239,.16)}
html{scroll-padding-top:92px}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(var(--read-progress,0));transform-origin:left;background:linear-gradient(90deg,#075e9f,#64c9ef,#c5a477);z-index:35;pointer-events:none}
.navlinks a{position:relative;transition:color .25s,background .25s,border-color .25s}
.navlinks a:not(.navcontact)::after{content:'';position:absolute;bottom:0;left:0;height:2px;width:100%;background:var(--ocean);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-water)}
.navlinks a:hover,.navlinks a[aria-current="location"]{color:var(--ocean)}
.navlinks a:hover::after,.navlinks a[aria-current="location"]::after{transform:scaleX(1)}
.navcontact:hover{border-color:var(--ocean);background:rgba(100,201,239,.07)}
.hero{position:relative;isolation:isolate}
.hero::before{content:'';position:absolute;z-index:-1;inset:-70px -30px -20px;background:radial-gradient(ellipse at 88% 20%,rgba(6,93,154,.24),transparent 53%),radial-gradient(ellipse at 12% 63%,rgba(64,171,219,.1),transparent 54%);pointer-events:none}
.hero h1 span{color:var(--ocean)}
.hero h1{position:relative}
.eyebrow::before{content:'';display:inline-block;width:21px;height:2px;background:var(--ocean);vertical-align:middle;margin-right:12px;box-shadow:0 0 15px rgba(100,201,239,.25)}
.hero .eyebrow{color:var(--ocean)}
.hero-intro{position:relative;z-index:2}
.water-lines{position:absolute;top:35px;right:-20px;width:66%;height:400px;z-index:-1;overflow:hidden;pointer-events:none;opacity:.48}
.water-lines svg{width:120%;height:100%;overflow:visible}
.water-lines path{fill:none;stroke:var(--ocean);stroke-width:1;vector-effect:non-scaling-stroke;transform-origin:center;animation:water-drift 12s ease-in-out infinite}
.water-lines path:nth-child(2){opacity:.45;animation-delay:-4s;animation-duration:16s}
.water-lines path:nth-child(3){opacity:.2;animation-delay:-8s;animation-duration:19s}
@keyframes water-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,20px)}}
.hero-art{position:relative;border:1px solid rgba(100,201,239,.28);box-shadow:0 25px 75px rgba(0,0,0,.3),0 0 60px rgba(7,94,159,.13);transition:box-shadow .7s var(--ease-water),border-color .7s}
.hero-art:hover{border-color:rgba(100,201,239,.65);box-shadow:0 28px 80px rgba(0,0,0,.35),0 0 70px rgba(7,94,159,.22)}
.hero-note a,.source-link,.product a,.socials a{color:var(--ocean)}
.btn{position:relative;overflow:hidden;transition:transform .35s var(--ease-water),box-shadow .35s,background .3s,border-color .3s}
.btn-gold{background:var(--ocean);color:#081c2c;box-shadow:0 6px 25px rgba(7,94,159,.2)}
.btn-gold:hover{background:#9bdeff;box-shadow:0 10px 32px rgba(7,94,159,.34);transform:translateY(-3px)}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.23) 50%,transparent 70%);transform:translateX(-130%);transition:transform .65s var(--ease-water)}
.btn:hover::before{transform:translateX(130%)}
.btn .arrow,.btn>span{transition:transform .35s var(--ease-water)}
.btn:hover>span{transform:translate(3px,-3px)}
.btn-outline:hover{border-color:var(--ocean);background:rgba(100,201,239,.06);transform:translateY(-2px)}
.category-strip{position:relative;background:linear-gradient(90deg,#11171e,#072c48,#11171e);border-color:rgba(100,201,239,.2)}
.category-strip span::before{color:var(--ocean)}
.light{background:#f0f3f3}
.light .eyebrow{color:var(--ocean-deep)}
.category-grid{background:#d0dbe0;border-color:#d0dbe0;box-shadow:0 15px 45px rgba(17,36,48,.04)}
.category{position:relative;background:#f5f7f6;transition:background .45s,box-shadow .45s}
.category::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--ocean-deep),var(--ocean));transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-water)}
.category:hover{background:#e8f1f6;box-shadow:inset 0 0 40px rgba(100,201,239,.06)}
.category:hover::after{transform:scaleX(1)}
.category svg{transition:transform .6s var(--ease-water);color:#163d53}
.category:hover svg{transform:translateY(-6px) rotate(-2deg)}
.category-number{color:var(--ocean-deep)}
.category .tag{border-color:#b8cfdc;color:#315c72;background:rgba(100,201,239,.06)}
.product{transition:border-color .35s,transform .5s var(--ease-water)}
.product:hover{border-color:var(--ocean);transform:translateY(-4px)}
.product small,.course small{color:var(--ocean)}
.product a:hover,.source-link:hover,.socials a:hover{color:#a3e6ff}
.support{position:relative;overflow:hidden;background:radial-gradient(ellipse at 100% 0,rgba(7,94,159,.3),transparent 65%),#17242d;border-color:rgba(100,201,239,.22);box-shadow:0 18px 65px rgba(0,0,0,.14)}
.support::after{content:'';position:absolute;width:220px;height:220px;border:1px solid rgba(100,201,239,.13);border-radius:50%;right:-100px;bottom:-130px;box-shadow:0 0 0 25px rgba(100,201,239,.025),0 0 0 55px rgba(100,201,239,.02);pointer-events:none}
.support-steps li::before,.story-row .num{color:var(--ocean)}
.story-row{transition:background .4s,padding-left .4s var(--ease-water)}
.story-row:hover{background:rgba(100,201,239,.025);padding-left:12px}
.course{background:linear-gradient(120deg,#15212a,#11171e);border-color:rgba(100,201,239,.15)}
.course article{transition:border-color .4s}
.course article:hover{border-left-color:var(--ocean)}
.contact{position:relative;isolation:isolate}
.contact::before{content:'';position:absolute;z-index:-1;inset:0 -20px;background:radial-gradient(ellipse at 15% 70%,rgba(7,94,159,.2),transparent 65%);pointer-events:none}
.contact h2 span{color:var(--ocean)}
.contact-details a{transition:color .3s}.contact-details a:hover{color:var(--ocean)}
.motion-ready .reveal{opacity:0;transform:translateY(25px);transition:opacity .85s var(--ease-water),transform .85s var(--ease-water);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.visible{opacity:1;transform:translateY(0)}
.scene-transition{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;visibility:hidden;background:linear-gradient(145deg,rgba(4,23,40,.96),rgba(7,64,99,.97));display:flex;align-items:center;justify-content:center;overflow:hidden}
.scene-transition::before,.scene-transition::after{content:'';position:absolute;width:150vmax;height:150vmax;top:40%;left:-25%;border:1px solid rgba(100,201,239,.3);border-radius:44%;transform:rotate(-15deg)}
.scene-transition::after{top:46%;left:-23%;border-color:rgba(100,201,239,.15)}
.scene-label{color:#d8f2ff;font-size:clamp(24px,4vw,44px);font-weight:600;letter-spacing:-1px;text-align:center;padding:25px;position:relative}
.scene-label::before{content:'';display:block;width:45px;height:2px;margin:0 auto 22px;background:var(--ocean)}
@media(max-width:640px){html{scroll-padding-top:85px}.water-lines{width:95%;right:0;height:360px;top:10px;opacity:.26}.hero::before{inset:-30px -20px 0}.eyebrow::before{width:15px;margin-right:9px}.navlinks a:not(.navcontact)::after{width:35px;left:10px}.hero-art{box-shadow:0 12px 35px rgba(0,0,0,.2)}.story-row:hover{padding-left:0}.contact::before{inset:0 -20px}.scene-label{font-size:27px}}
.hero-note{align-items:center;flex-wrap:wrap}.motion-toggle{font-size:10px;letter-spacing:.3px;background:transparent;border:1px solid rgba(100,201,239,.3);color:var(--ocean);padding:5px 9px;border-radius:4px;cursor:pointer;white-space:nowrap}.motion-toggle:hover{background:rgba(100,201,239,.08)}
html[data-motion="off"]{scroll-behavior:auto}html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}html[data-motion="off"] .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html:not([data-motion="on"]){scroll-behavior:auto}html:not([data-motion="on"]) *,html:not([data-motion="on"]) *::before,html:not([data-motion="on"]) *::after{animation:none!important;transition:none!important}html:not([data-motion="on"]) .reveal{opacity:1;transform:none}html:not([data-motion="on"]) .scene-transition{display:none!important}}