:root{--sand:#fbf5e8;--mist:#e8f7f4;--teal:#19b5b0;--sea:#0f6e7c;--navy:#0b3c49;--coral:#f26b4f;--ink:#0b3c49}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--mist);line-height:1.6;overflow-x:hidden}
h1,h2,h3{font-family:'Bricolage Grotesque','DM Sans',sans-serif;line-height:1.05;font-weight:800}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.wrap{max-width:1160px;margin:auto}

nav{position:fixed;inset:0 0 auto;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:16px 5vw;transition:background .3s}
nav.solid{background:rgba(251,245,232,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(11,60,73,.1)}
.logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.25rem}
nav ul{display:flex;gap:26px;list-style:none;font-weight:500}
nav ul a:hover{color:var(--coral)}

/* hero */
.hero{position:relative;min-height:100vh;background:linear-gradient(180deg,#ffe7c2,var(--sand) 45%,#d3f1ec);overflow:hidden;display:flex;align-items:center;padding:0 5vw 24vh}
.hero h1{font-size:clamp(3rem,8.5vw,7rem);max-width:10ch;letter-spacing:-.02em}
.hero p{font-size:1.15rem;max-width:420px;margin:20px 0 28px}
.hero .in>*{animation:up .9s ease both}
.hero .in p{animation-delay:.2s}.hero .in .btns{animation-delay:.4s}
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.btn{display:inline-block;padding:14px 28px;border-radius:50px;font-weight:700;border:2px solid var(--navy);cursor:pointer;font:inherit;font-weight:700;transition:.25s;margin-right:8px;background:none;color:var(--navy)}
.btn.fill{background:var(--navy);color:var(--sand)}
.btn:hover{background:var(--coral);border-color:var(--coral);color:#fff;transform:translateY(-3px)}
.sea{position:absolute;inset:auto 0 0;height:24vh;display:flex;flex-direction:column}
.sea i{flex:1;position:relative;overflow:hidden}
.sea i:nth-child(1){background:#bfeee7}.sea i:nth-child(2){background:#8fdcd1}.sea i:nth-child(3){background:#5ccac2}.sea i:nth-child(4){background:var(--teal)}
.sea i::before{content:"";position:absolute;inset:35% -50% auto 0;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 70px,transparent 70px 190px);animation:flow 14s linear infinite}
.sea i:nth-child(even)::before{animation-duration:22s;animation-direction:reverse;inset-inline:-60px 0}
@keyframes flow{to{transform:translateX(-190px)}}
.hboat{position:absolute;bottom:calc(24vh - 40px);left:-460px;width:clamp(240px,34vw,460px);animation:sail 6s cubic-bezier(.25,.7,.3,1) .5s forwards}
@keyframes sail{to{left:calc(100% - clamp(280px,40vw,520px))}}
.hboat svg{display:block;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7px) rotate(-1deg)}}
.wake{position:absolute;height:3px;left:0;background:linear-gradient(90deg,transparent,#fff);right:100%;border-radius:3px}

/* products */
.showroom{padding:110px 5vw}
.showroom h2,.about h2,.contact h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:10px}
.sub{max-width:520px;margin-bottom:40px;opacity:.8}
.board{display:grid;grid-template-columns:260px 1fr;gap:28px}
.list{display:flex;flex-direction:column;gap:8px}
.list button{text-align:left;padding:16px 18px;border-radius:16px;border:2px solid transparent;background:#fff;color:var(--navy);font:inherit;cursor:pointer;transition:.25s;display:flex;justify-content:space-between;align-items:center;gap:8px}
.list button small{opacity:.6;font-size:.8rem}
.list button:hover{transform:translateX(6px);border-color:var(--teal)}
.list button[aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateX(10px)}
.stage{position:relative;overflow:hidden;border-radius:30px;background:linear-gradient(170deg,var(--sea),var(--navy));color:#fff;padding:36px;min-height:520px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.stage .art{grid-column:1/-1;position:relative;height:210px}
.stage .art svg{position:absolute;left:50%;top:0;width:min(440px,90%);translate:-50% 0}
.art .l{position:absolute;left:0;right:0;height:3px;border-radius:3px}
.l1{bottom:34px;background:rgba(255,255,255,.18)}.l2{bottom:18px;background:rgba(25,181,176,.55)}.l3{bottom:2px;background:rgba(255,255,255,.1)}
.swap .art svg{animation:glide .7s cubic-bezier(.2,.8,.3,1)}
.swap .info{animation:fadein .6s ease}
@keyframes glide{from{opacity:0;transform:translateX(-90px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tag{display:inline-block;background:var(--coral);color:#fff;font-size:.8rem;font-weight:700;padding:2px 14px;border-radius:20px;margin-bottom:10px}
.info h3{font-size:2.3rem;margin-bottom:10px}
.info p{opacity:.88;margin-bottom:20px}
.bars{display:grid;gap:14px;align-content:center}
.bar b{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:5px;font-weight:500}
.bar span{display:block;height:8px;border-radius:8px;background:rgba(255,255,255,.15);overflow:hidden}
.bar em{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),#bfeee7);border-radius:8px;transition:width 1s cubic-bezier(.2,.8,.3,1)}

/* about + contact */
.about{background:var(--sea);color:#fff;padding:110px 5vw}
.about .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.stats b{font-family:'Bricolage Grotesque',sans-serif;font-size:3rem;display:block;line-height:1;color:#bfeee7}
.stats div{border-left:3px solid var(--teal);padding-left:16px}
.contact{background:var(--navy);color:#fff;padding:110px 5vw}
form{display:grid;gap:14px;max-width:540px;margin-top:30px}
input,select,textarea{width:100%;padding:14px 18px;border-radius:14px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--teal);outline:none}
select option{color:#000}
form .btn{background:var(--coral);border-color:var(--coral);color:#fff;margin:0}
form .btn:hover{background:var(--teal);border-color:var(--teal)}
footer{background:#072a34;color:#fff;opacity:.9;text-align:center;padding:26px;font-size:.85rem}

/* depth gauge */
.gauge{position:fixed;right:18px;top:50%;translate:0 -50%;z-index:30;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.75rem;font-weight:700}
.gauge .t{width:3px;height:140px;background:rgba(11,60,73,.25);border-radius:3px;position:relative}
.gauge .t i{position:absolute;left:50%;top:0;width:14px;height:14px;border-radius:50%;background:var(--coral);translate:-50% -50%;border:2px solid #fff}
.gauge span{background:#fff;color:var(--navy);padding:2px 8px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.2)}

.rv{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s}
.rv.on{opacity:1;transform:none}
@media(max-width:860px){
 nav ul{display:none}.gauge{display:none}
 .board{grid-template-columns:1fr}
 .list{flex-direction:row;overflow-x:auto;padding-bottom:6px}.list button{flex:none}.list button:hover,.list button[aria-selected=true]{transform:none}
 .stage{grid-template-columns:1fr;padding:24px}.about .wrap{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.hboat{left:55%}}

.wafloat{position:fixed;left:18px;bottom:18px;z-index:45;background:#25d366;color:#073b1d;font-weight:700;padding:12px 20px;border-radius:40px;box-shadow:0 6px 20px rgba(0,0,0,.28);transition:.25s}
.wafloat:hover{transform:translateY(-3px)}
.btn.wa{background:#25d366;border-color:#25d366;color:#073b1d}
.btn.wa:hover{background:#1ebe5a;border-color:#1ebe5a;color:#fff}
.stage .art{height:240px}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:18px}
.swap #art>*{animation:glide .7s cubic-bezier(.2,.8,.3,1)}
.phero{padding:150px 5vw 70px;background:linear-gradient(180deg,#ffe7c2,#d3f1ec)}
.phero h1{font-size:clamp(2.4rem,6vw,4.6rem);max-width:16ch}
.story{padding:80px 5vw}.story p{white-space:pre-line;margin-bottom:1.1em;max-width:68ch;font-size:1.1rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:30px}
.steps div{background:#fff;border-radius:20px;padding:24px;border-top:4px solid var(--teal)}
.steps h3{font-size:1.3rem;margin-bottom:6px}
.crew{padding:30px 5vw 90px}
.contact .wrap>p{margin-bottom:22px}