:root{
  --navy:#0a2a5c;--navy-2:#06173a;--aqua:#12a4ee;--aqua-2:#0b86cc;--ice:#f1f8fe;--white:#fff;
  --ink:#0c1b33;--muted:#5a6b84;--line:rgba(10,42,92,.12);--max:1200px;
  --grad:linear-gradient(135deg,#12a4ee 0%,#0a2a5c 100%);
  --shadow:0 18px 50px rgba(10,42,92,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3{font-family:'Oxanium','Poppins',sans-serif;line-height:1.05;text-transform:uppercase}
mark{background:none;color:transparent;background-image:var(--grad);-webkit-background-clip:text;background-clip:text}
i[data-lucide],svg.lucide{width:1.1em;height:1.1em;stroke-width:2.2}

/* top bar */
.top-info-bar{background:var(--navy);color:#cfe3f7;font-size:.78rem}
.top-info-wrap{max-width:var(--max);margin:auto;padding:8px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.top-info-left{display:flex;gap:22px;flex-wrap:wrap}
.top-info-left span,.top-info-right a{display:inline-flex;align-items:center;gap:7px}
.top-info-right a:hover{color:#fff}

/* header */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-wrap{max-width:var(--max);margin:auto;padding:10px 22px;display:flex;align-items:center;gap:28px}
.brand img{height:46px;width:auto}
.main-nav{display:flex;gap:6px;margin-left:auto}
.main-nav a{padding:8px 14px;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);position:relative}
.main-nav a:after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--aqua);transform:scaleX(0);transition:.25s}
.main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
.nav-buttons{display:flex;gap:10px}
.btn-nav{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;font-size:.75rem;font-weight:800;letter-spacing:.05em;transition:.25s}
.btn-nav.primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(18,164,238,.3)}
.btn-nav.outline{border:1.5px solid var(--navy);color:var(--navy)}
.btn-nav:hover{transform:translateY(-2px)}
.menu-button{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.menu-button span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;transition:.3s}
.menu-button[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-button[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-button[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:12px;font-weight:800;font-size:.85rem;letter-spacing:.05em;cursor:pointer;border:0;font-family:inherit;transition:.25s}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 12px 28px rgba(18,164,238,.35)}
.btn.outline{border:2px solid var(--navy);color:var(--navy);background:transparent}
.btn.light{background:#fff;color:var(--navy)}
.btn:hover{transform:translateY(-3px)}
.btn.outline:hover{background:var(--navy);color:#fff}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua-2);background:rgba(18,164,238,.1);padding:7px 14px;border-radius:99px}

/* hero */
.hero{position:relative;background:linear-gradient(180deg,#e4f3ff 0%,#f6fbff 70%,#fff 100%);padding:70px 22px 150px;overflow:hidden}
.hero-sky:before,.hero-sky:after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.hero-sky:before{width:520px;height:520px;background:#9fd8ff;top:-160px;right:-120px}
.hero-sky:after{width:420px;height:420px;background:#cfe8ff;bottom:-60px;left:-140px}
.hero-inner{position:relative;max-width:var(--max);margin:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.4rem);font-weight:800;font-style:italic;color:var(--navy);margin:22px 0 20px;letter-spacing:-.01em}
.hero-kicker{font-weight:800;color:var(--aqua-2);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.hero-text{color:var(--muted);max-width:560px;font-size:1.04rem}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.hero-stats strong{display:block;font-family:'Oxanium';font-size:2rem;font-weight:800;color:var(--navy);line-height:1}
.hero-stats span{font-size:.76rem;color:var(--muted);font-weight:500}
.hero-visual{position:relative;display:flex;justify-content:center}
.poster{width:min(380px,100%);border-radius:26px;overflow:hidden;box-shadow:var(--shadow),0 0 0 8px rgba(255,255,255,.8);transform:rotate(2.5deg);transition:.5s}
.poster:hover{transform:rotate(0) scale(1.02)}
.poster img{width:100%;height:auto}
.float-badge{position:absolute;background:#fff;border-radius:14px;padding:11px 16px;font-size:.78rem;font-weight:700;color:var(--navy);box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;animation:bob 5s ease-in-out infinite}
.float-badge i{color:var(--aqua)}
.b1{left:-6%;top:14%}.b2{right:-4%;bottom:12%;animation-delay:-2.5s}
@keyframes bob{50%{transform:translateY(-10px)}}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:100px}

/* sections */
.section{padding:90px 22px}
.section.alt{background:var(--ice)}
.section-inner{max-width:var(--max);margin:auto}
.section-head{text-align:center;max-width:720px;margin:0 auto 48px}
.section-head.left{text-align:left;margin:0 0 28px}
.section-head h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;font-style:italic;color:var(--navy);margin:16px 0 12px}
.section-head p{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 26px;transition:.3s;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:.35s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card:hover:before{transform:scaleX(1)}
.ico{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,rgba(18,164,238,.16),rgba(10,42,92,.08));display:grid;place-items:center;color:var(--aqua-2);margin-bottom:18px}
.ico i,.ico svg{width:26px;height:26px}
.card h3{font-size:1.2rem;font-weight:800;color:var(--navy);margin-bottom:10px;line-height:1.15}
.card p{font-size:.92rem;color:var(--muted)}

/* band */
.band{background:var(--navy);background-image:radial-gradient(circle at 15% 50%,rgba(18,164,238,.35),transparent 55%);color:#fff;padding:46px 22px}
.band-inner{max-width:var(--max);margin:auto;display:flex;align-items:center;gap:26px;justify-content:space-between;flex-wrap:wrap}
.laurel{width:60px;height:60px;border-radius:50%;border:2px solid var(--aqua);display:grid;place-items:center;color:var(--aqua)}
.laurel i,.laurel svg{width:28px;height:28px}
.band p{font-family:'Oxanium';font-size:clamp(1.3rem,3vw,2rem);font-weight:700;flex:1;min-width:220px}
.band strong{color:#7fd0ff}

/* products */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.product{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--line);transition:.3s}
.product:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.product img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s}
.product:hover img{transform:scale(1.05)}
.product{overflow:hidden}
.product figcaption{padding:20px 22px 24px}
.product h3{font-size:1.1rem;font-weight:800;color:var(--navy);margin-bottom:6px}
.product p{font-size:.88rem;color:var(--muted)}

/* process */
.process{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.phone{background:var(--navy-2);border-radius:34px;padding:12px;box-shadow:var(--shadow);max-width:340px;margin:auto;position:relative}
.phone video{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:24px;background:#000}
.phone small{display:block;text-align:center;color:#9cb8d8;font-size:.7rem;padding:10px 0 4px}
.steps ol{display:grid;gap:16px}
.steps li{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;align-items:flex-start;transition:.3s}
.steps li:hover{box-shadow:var(--shadow);transform:translateX(6px)}
.steps li>span{flex:none;width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff;font-family:'Oxanium';font-weight:800;font-size:1.3rem;display:grid;place-items:center}
.steps h3{font-size:1.05rem;color:var(--navy);font-weight:800;margin-bottom:3px}
.steps p{font-size:.9rem;color:var(--muted)}

.form{background:#fff;border-radius:24px;padding:34px;box-shadow:var(--shadow);border:1px solid var(--line);display:grid;gap:16px}
.form label{display:grid;gap:6px;font-size:.78rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em}
.form input,.form select,.form textarea{font:inherit;font-size:.95rem;text-transform:none;letter-spacing:0;font-weight:500;padding:13px 15px;border-radius:12px;border:1.5px solid #d6e3f1;background:#f8fbff;color:var(--ink);transition:.2s;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(18,164,238,.15)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form input.err{border-color:#e5484d}
.fine{font-size:.74rem;color:var(--muted);text-align:center}

/* footer */
.footer{background:var(--navy-2);color:#b8cde6;padding:36px 22px}
.footer-inner{max-width:var(--max);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.85rem}
.footer img{height:42px;width:auto;background:#fff;padding:6px 12px;border-radius:10px}
.footer a:hover{color:#fff}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.45);transition:.25s}
.wa-float i,.wa-float svg{width:28px;height:28px}
.wa-float:hover{transform:scale(1.08)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.float-badge{animation:none}html{scroll-behavior:auto}}

/* responsive */
@media (max-width:980px){
  .nav-buttons{display:none}
  .menu-button{display:flex}
  .main-nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:10px 22px 20px;margin:0;border-bottom:1px solid var(--line);box-shadow:0 20px 30px rgba(10,42,92,.1);display:none}
  .main-nav.open{display:flex}
  .main-nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .hero-inner,.process,.contact-grid{grid-template-columns:1fr}
  .hero{padding:50px 20px 120px}
  .hero-visual{margin-top:20px}
  .cards,.products{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .top-info-left span:nth-child(2),.top-info-left span:nth-child(3){display:none}
  .cards,.products{grid-template-columns:1fr}
  .section{padding:64px 18px}
  .form{padding:24px 20px}
  .form .row{grid-template-columns:1fr}
  .hero-stats{gap:22px}
  .b1{left:0}.b2{right:0}
  .band-inner{flex-direction:column;text-align:center}
  .footer-inner{justify-content:center;text-align:center}
}

/* quote modal */
.qm{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:22px;visibility:hidden;pointer-events:none;perspective:1400px;--ox:50vw;--oy:50vh}
.qm.open{visibility:visible;pointer-events:auto}
.qm.closing{opacity:0;transition:opacity .32s ease}
.qm-back{position:absolute;inset:0;background:radial-gradient(circle at var(--ox) var(--oy),#12559f 0%,#0a2a5c 45%,#06173a 100%);opacity:.94}
.qm-ring{position:absolute;left:var(--ox);top:var(--oy);width:40px;height:40px;margin:-20px;border-radius:50%;border:2px solid #7fd0ff;opacity:0;pointer-events:none}
.qm-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.qm-bubbles span{position:absolute;bottom:-40px;border-radius:50%;border:1.5px solid rgba(160,220,255,.55);background:rgba(160,220,255,.12);opacity:0}
.qm-card{position:relative;width:min(960px,100%);max-height:min(92dvh,700px);display:grid;grid-template-columns:.85fr 1.15fr;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 40px 100px rgba(0,10,30,.55),0 0 0 1px rgba(127,208,255,.35);transform-origin:50% 60%}
.qm-x{position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(10,42,92,.25);transition:.25s}
.qm-x:hover{transform:rotate(90deg) scale(1.08);background:var(--aqua);color:#fff}
.qm-scene{position:relative;background:linear-gradient(165deg,#0f4a94 0%,#0a2a5c 55%,#06173a 100%);color:#fff;overflow:hidden;min-height:480px}
.qm-scene>svg{position:absolute;left:0;bottom:0;width:100%;height:62%;max-width:none}
.qm-copy{position:relative;padding:38px 32px}
.qm-tag{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#bfe6ff;background:rgba(127,208,255,.16);padding:7px 14px;border-radius:99px}
.qm-copy h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;font-style:italic;margin:16px 0 12px}
.qm-copy h2 span{display:block;overflow:hidden;padding:2px 8px 4px 0}
.qm-copy h2 b{display:block;font-weight:800}
.qm-copy h2 span+span b{color:#7fd0ff}
.qm-copy p{font-size:.9rem;color:#cfe3f7;max-width:300px}
.qm-info{margin-top:18px;display:grid;gap:8px;font-size:.86rem;font-weight:600}
.qm-info li{display:flex;align-items:center;gap:10px}
.qm-info svg,.qm-info i{color:#7fd0ff}
.qm .form{border:0;border-radius:0;box-shadow:none;padding:58px 34px 30px;overflow-y:auto;align-content:start}
.qm-shine{position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none;z-index:4}
.qm-compass,.qm-star,.qm-boat{transform-box:fill-box;transform-origin:center}
.qm-boat{transform-origin:50% 100%}

.qm.open .qm-back{animation:qmWipe .8s cubic-bezier(.7,0,.2,1) both}
.qm.open .qm-ring{animation:qmRing 1.1s cubic-bezier(.2,.7,.2,1) both}
.qm.open .r2{animation-delay:.14s}.qm.open .r3{animation-delay:.28s}
.qm.open .qm-bubbles span{animation:qmBubble var(--d,6s) linear var(--dl,0s) infinite}
.qm.open .qm-card{animation:qmCard .85s cubic-bezier(.18,1.25,.32,1) .22s both}
.qm.closing .qm-card{animation:qmOut .3s ease-in forwards}
.qm.open .qm-shine{animation:qmShine 1s ease-out 1s both}
.qm.open .qm-sea{animation:qmRise 1s cubic-bezier(.2,.9,.2,1) .45s both}
.qm.open .qm-wave{animation:qmFlow 5s linear infinite}
.qm.open .w2{animation-duration:3.6s;animation-direction:reverse}.qm.open .w3{animation-duration:2.6s}
.qm.open .qm-boat-in{animation:qmSail 1.5s cubic-bezier(.2,.8,.2,1) .7s both}
.qm.open .qm-boat{animation:qmBob 3s ease-in-out infinite}
.qm.open .qm-compass{animation:qmCompassIn 1.1s cubic-bezier(.2,1.3,.3,1) .6s both,qmSpin 22s linear 1.7s infinite}
.qm.open .qm-route{stroke-dasharray:1;animation:qmDraw 1.6s ease-out .8s both}
.qm.open .qm-star{animation:qmTwinkle 2.4s ease-in-out .9s infinite both}
.qm.open .s2{animation-delay:1.5s}.qm.open .s3{animation-delay:2s}
.qm.open .qm-tag{animation:qmUp .6s ease-out .5s both}
.qm.open .qm-copy h2 b{animation:qmMask .75s cubic-bezier(.2,.9,.2,1) .6s both}
.qm.open .qm-copy h2 span+span b{animation-delay:.72s}
.qm.open .qm-copy p{animation:qmUp .6s ease-out .9s both}
.qm.open .qm-info li{animation:qmSide .5s ease-out both}
.qm.open .qm-info li:nth-child(1){animation-delay:1s}.qm.open .qm-info li:nth-child(2){animation-delay:1.1s}.qm.open .qm-info li:nth-child(3){animation-delay:1.2s}
.qm.open .form>*{animation:qmUp .6s cubic-bezier(.2,.9,.2,1) both}
.qm.open .form>:nth-child(1){animation-delay:.6s}.qm.open .form>:nth-child(2){animation-delay:.69s}.qm.open .form>:nth-child(3){animation-delay:.78s}.qm.open .form>:nth-child(4){animation-delay:.87s}.qm.open .form>:nth-child(5){animation-delay:.96s}
.qm.open .form .btn{animation:qmUp .6s cubic-bezier(.2,.9,.2,1) .87s both,qmPulse 2.4s ease-in-out 1.8s infinite}
.qm.open .qm-x{animation:qmPop .5s cubic-bezier(.2,1.6,.3,1) .95s both}

@keyframes qmWipe{from{clip-path:circle(0 at var(--ox) var(--oy))}to{clip-path:circle(150vmax at var(--ox) var(--oy))}}
@keyframes qmRing{from{opacity:.9;transform:scale(.2)}to{opacity:0;transform:scale(26)}}
@keyframes qmBubble{0%{opacity:0;transform:translate(0,0)}10%{opacity:.9}50%{transform:translate(14px,-55vh)}100%{opacity:0;transform:translate(-8px,-112vh)}}
@keyframes qmCard{from{opacity:0;transform:translateY(90px) scale(.8) rotateX(22deg)}}
@keyframes qmSheet{from{transform:translateY(105%)}}
@keyframes qmOut{to{opacity:0;transform:translateY(40px) scale(.94)}}
@keyframes qmShine{to{transform:translateX(420%) skewX(-18deg)}}
@keyframes qmRise{from{transform:translateY(130px)}}
@keyframes qmFlow{to{transform:translateX(-200px)}}
@keyframes qmSail{from{transform:translateX(-300px) rotate(-8deg)}}
@keyframes qmBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes qmCompassIn{from{opacity:0;transform:scale(0) rotate(-200deg)}}
@keyframes qmSpin{to{transform:rotate(360deg)}}
@keyframes qmDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes qmTwinkle{0%,100%{opacity:.15;transform:scale(.5)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
@keyframes qmUp{from{opacity:0;transform:translateY(24px)}}
@keyframes qmSide{from{opacity:0;transform:translateX(-18px)}}
@keyframes qmMask{from{transform:translateY(110%) skewY(6deg)}}
@keyframes qmPop{from{opacity:0;transform:scale(0) rotate(-180deg)}}
@keyframes qmPulse{0%,100%{box-shadow:0 12px 28px rgba(18,164,238,.35)}50%{box-shadow:0 12px 28px rgba(18,164,238,.35),0 0 0 10px rgba(18,164,238,.12)}}

@media (max-width:760px){
  .qm{padding:0;align-items:flex-end}
  .qm-card{grid-template-columns:1fr;border-radius:26px 26px 0 0;max-height:94dvh;overflow-y:auto;overscroll-behavior:contain;width:100%}
  .qm.open .qm-card{animation:qmSheet .7s cubic-bezier(.2,1.05,.3,1) .2s both}
  .qm-scene{min-height:176px}
  .qm-scene>svg{height:100%;opacity:.9}
  .qm-copy{padding:20px 20px 0}
  .qm-copy h2{font-size:1.75rem;margin:10px 0 0;text-shadow:0 2px 12px rgba(6,23,58,.6)}
  .qm-copy p,.qm-info{display:none}
  .qm .form{padding:22px 18px calc(22px + env(safe-area-inset-bottom));overflow:visible}
  .qm .form input,.qm .form select,.qm .form textarea{font-size:16px}
  .qm .form .row{grid-template-columns:1fr 1fr}
  .qm .form textarea{min-height:84px}
  .qm-x{top:10px;right:10px}
  .qm-boat-pos{transform:translate(312px,190px) scale(.85)}
  .qm-card{scrollbar-width:none}
  .qm-card::-webkit-scrollbar{display:none}
  .qm-scene>svg>g:first-of-type{display:none}
}
@media (prefers-reduced-motion:reduce){.qm *,.qm.open *{animation:none!important}}

/* clean close: kill entrance animations, fade whole modal as one layer */
.qm.closing,.qm.closing *{animation:none!important}
.qm.closing{opacity:0;transition:opacity .3s ease}
.qm.closing .qm-card{transform:translateY(28px) scale(.95);transition:transform .3s ease-in}
@media (max-width:760px){.qm.closing .qm-card{transform:translateY(100%);transition:transform .3s ease-in}}

/* ===== immersive hero ===== */
.hero{--s:0;--mx:0;--my:0;--hz:75%;background:#dcefff;padding:0 22px;min-height:max(700px,calc(100vh - 108px));display:flex;align-items:center;isolation:isolate}
.h-scene{position:absolute;inset:0;z-index:-1;overflow:hidden}
.h-scene>*{position:absolute;will-change:transform}
.h-sky{inset:0;background:linear-gradient(100deg,#f3f9ff 0%,#d5e9fb 42%,#7db8ee 78%,#4a96e2 100%)}
.h-sun{left:18%;top:-22%;width:70vmax;height:70vmax;margin-left:-35vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(255,250,230,.55) 18%,rgba(255,255,255,0) 60%);animation:hSun 7s ease-in-out infinite;transform:translate3d(calc(var(--mx)*14px),calc(var(--s)*.05px),0)}
.h-clouds{inset:0;transform:translate3d(calc(var(--mx)*-16px),calc(var(--s)*.1px + var(--my)*-6px),0)}
.h-clouds i{position:absolute;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(255,255,255,0) 68%);filter:blur(6px);animation:hDrift 70s linear infinite}
.h-clouds i:nth-child(1){width:520px;height:120px;top:9%;left:36%}
.h-clouds i:nth-child(2){width:380px;height:90px;top:24%;left:58%;animation-duration:95s;animation-delay:-30s;opacity:.8}
.h-clouds i:nth-child(3){width:640px;height:140px;top:40%;left:-6%;animation-duration:120s;animation-delay:-60s;opacity:.7}
.h-birds{top:14%;left:0;width:120px;opacity:.55;animation:hFly 46s linear infinite}
.h-birds .bd{transform-box:fill-box;transform-origin:center;animation:hFlap 1.1s ease-in-out infinite}
.h-birds .b2{animation-delay:-.3s}.h-birds .b3{animation-delay:-.6s}
.h-mid{inset:0;transform:translate3d(0,calc(var(--s)*.2px),0)}
.h-sea{position:absolute;left:0;right:0;top:var(--hz);bottom:-200px;background:linear-gradient(180deg,#a9cdee 0%,#3f7fc4 9%,#1d5aa3 30%,#0d3a78 62%,#06173a 100%);overflow:hidden}
.h-ripple{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.1) 0 1px,transparent 1px 9px),repeating-linear-gradient(177deg,rgba(6,23,58,.16) 0 2px,transparent 2px 17px);animation:hRipple 3.2s linear infinite;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.h-glints{position:absolute;inset:0 0 auto 0;height:260px}
.h-glints i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.75);opacity:0;animation:hGlint 2s ease-in-out infinite}
.h-boat{position:absolute;right:0;bottom:0;height:100%;aspect-ratio:968/1436;transform:translate3d(calc(var(--mx)*-20px),calc(var(--my)*-8px),0) scale(calc(1 + var(--s)*.0002));transform-origin:80% 80%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%),linear-gradient(to bottom,transparent 0,#000 14%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 34%),linear-gradient(to bottom,transparent 0,#000 14%);mask-composite:intersect}
.h-boat img{width:100%;height:100%;object-fit:cover;animation:hBob 6.5s ease-in-out infinite;transform-origin:70% 90%}
.h-haze{inset:0;background:radial-gradient(60% 75% at 22% 46%,rgba(255,255,255,.78),rgba(255,255,255,0) 72%);pointer-events:none}
.h-wave{left:-2%;width:104%;height:120px;bottom:38px}
.h-wave path{animation:hFlow 9s linear infinite}
.hw1{fill:rgba(18,110,200,.5);transform:translate3d(calc(var(--mx)*10px),calc(var(--s)*-.07px),0)}
.hw2{fill:rgba(8,42,92,.72);bottom:8px;transform:translate3d(calc(var(--mx)*22px),calc(var(--s)*-.16px),0)}
.hw2 path{animation-duration:6s;animation-direction:reverse}
.hero-inner{display:block;width:100%;padding:60px 0 150px}
.hero-copy{max-width:640px;transform:translate3d(0,calc(var(--s)*.32px),0);opacity:calc(1 - var(--s)/620)}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.7rem);text-shadow:0 2px 24px rgba(255,255,255,.7)}
.hero-text{color:#33475f}
.hero .btn.outline{background:rgba(255,255,255,.78);backdrop-filter:blur(6px)}
.hero .btn.outline:hover{background:var(--navy)}
.hero-stats{display:inline-flex;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:16px 24px;border-radius:18px;box-shadow:0 14px 40px rgba(6,23,58,.22)}
.hero .wave{z-index:1}
@keyframes hSun{50%{opacity:.82;scale:1.05}}
@keyframes hDrift{from{translate:-30vw 0}to{translate:110vw 0}}
@keyframes hFly{from{translate:-10vw 0}50%{translate:55vw -30px}to{translate:110vw 10px}}
@keyframes hFlap{50%{transform:scaleY(.25)}}
@keyframes hRipple{to{background-position:0 9px,0 17px}}
@keyframes hGlint{50%{opacity:1;transform:scaleX(1.5)}}
@keyframes hBob{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-9px) rotate(.6deg)}}
@keyframes hFlow{to{transform:translateX(400px)}}
@media (max-width:980px){
  .hero{--hz:calc(100% - 118px);padding:0 20px;align-items:flex-start;min-height:0}
  .hero-inner{padding:44px 0 430px}
  .h-boat{height:440px}
  .h-haze{background:radial-gradient(120% 55% at 30% 28%,rgba(255,255,255,.8),rgba(255,255,255,0) 75%)}
  .hero-stats{gap:18px;padding:14px 18px}
  .h-wave{height:80px}
}
@media (prefers-reduced-motion:reduce){.h-scene *{animation:none!important}}
/* no flash after close: children with their own transitions kept visibility for a moment */
.qm:not(.open){opacity:0!important}
.qm:not(.open) *{transition:none!important;visibility:hidden!important}
/* boat stays glued to the right edge */
.h-boat{right:-70px;transform:translate3d(calc(var(--mx)*-12px),calc(var(--my)*-6px),0) scale(calc(1.04 + var(--s)*.0002));transform-origin:100% 100%}
@keyframes hBob{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-7px) rotate(.3deg)}}

/* ===== step form ===== */
.qf{--p:0;--dir:1}
.qf-top{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua)}
.qf-top span+span{color:var(--navy)}
.qf-track{position:relative;height:6px;border-radius:6px;background:#e3eefa;margin:16px 15px 8px}
.qf-fill{position:absolute;inset:0;border-radius:6px;background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--p));transition:transform .7s cubic-bezier(.3,1.2,.3,1)}
.qf-ship{position:absolute;top:50%;left:calc(var(--p)*100%);width:32px;height:32px;margin:-16px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;box-shadow:0 4px 14px rgba(10,42,92,.3),0 0 0 2px var(--aqua);transition:left .7s cubic-bezier(.3,1.2,.3,1)}
.qf-ship svg{width:17px;height:17px;animation:qfBob 2.4s ease-in-out infinite}
.qf-steps{display:grid;overflow:hidden;padding:6px;margin:-6px}
.qf-step{grid-area:1/1;border:0;padding:0;margin:0;min-width:0;display:grid;gap:14px;align-content:start;visibility:hidden;opacity:0;pointer-events:none}
.qf-step.on{visibility:visible;opacity:1;pointer-events:auto}
.qf-step.on>*{animation:qfIn .55s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(.16s + var(--k,0)*.07s)}
.qf-step>:nth-child(2){--k:1}.qf-step>:nth-child(3){--k:2}.qf-step>:nth-child(4){--k:3}
.qf-step.out{visibility:visible;opacity:1;animation:qfOut .3s ease-in both}
.qf-step.on .chip span{animation:qfPop .45s cubic-bezier(.2,1.5,.3,1) both;animation-delay:calc(.24s + var(--i,0)*.05s)}
.qf-step.shake{animation:qfShake .4s}
.qf-q{font-family:Oxanium,sans-serif;font-size:1.3rem;font-style:italic;color:var(--navy);margin:0}
.qf-h{font-size:.85rem;color:#5b6b80;margin:-8px 0 0}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.form .chip{display:block;position:relative;text-transform:none;letter-spacing:0;cursor:pointer}
.form .chip input{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0}
.chip span{display:grid;justify-items:center;align-content:center;gap:8px;height:100%;padding:16px 6px;border:1.5px solid #d6e3f1;border-radius:14px;background:#f8fbff;font-size:.8rem;font-weight:600;line-height:1.25;color:var(--navy);text-align:center;transition:border-color .2s,background .2s,box-shadow .2s,translate .2s}
.chip span svg{width:24px;height:24px;color:var(--aqua)}
.chip:hover span{border-color:var(--aqua);translate:0 -2px}
.chip input:checked+span{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 10px 24px rgba(18,164,238,.35)}
.chip input:checked+span svg{color:#fff}
.chip input:focus-visible+span{outline:3px solid rgba(18,164,238,.4);outline-offset:2px}
.qf-sum{margin:0;padding:12px 14px;border-radius:12px;background:#eaf5ff;color:var(--navy);font-size:.85rem;font-weight:600}
.qf-sum:empty{display:none}
.qf-nav{display:flex;gap:10px}
.qf-nav .btn{flex:1;justify-content:center}
.qf-back{width:52px;border-radius:14px;border:1.5px solid #d6e3f1;background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:.25s}
.qf-back:hover{border-color:var(--aqua);color:var(--aqua)}
.qf[data-cur="0"] .qf-back{width:0;border-width:0;margin-right:-10px;opacity:0;pointer-events:none}
.qf-next span{display:inline-flex;align-items:center;gap:8px}
.qf .l-send,.qf[data-cur="3"] .l-next{display:none}
.qf[data-cur="3"] .l-send{display:inline-flex}
@keyframes qfIn{from{opacity:0;transform:translateX(calc(var(--dir)*70px))}}
@keyframes qfOut{to{opacity:0;transform:translateX(calc(var(--dir)*-70px)) scale(.97)}}
@keyframes qfPop{from{opacity:0;transform:scale(.7)}}
@keyframes qfBob{50%{transform:translateY(-2px) rotate(8deg)}}
@keyframes qfShake{25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
@media (max-width:760px){.chips{gap:8px}.chip span{padding:12px 4px;font-size:.74rem}.qf-q{font-size:1.15rem}}
@media (prefers-reduced-motion:reduce){.qf *{animation:none!important}}

/* ===== mobile menu motion ===== */
.menu-button span{transition:transform .5s cubic-bezier(.6,-.4,.3,1.5),opacity .25s}
@media (max-width:980px){
  .main-nav{display:flex;visibility:hidden;pointer-events:none;background:linear-gradient(160deg,#12559f 0%,#0a2a5c 45%,#06173a 100%);border:0;padding:14px 24px 64px;box-shadow:0 30px 50px rgba(6,23,58,.35);clip-path:circle(0 at calc(100% - 44px) 0);transition:clip-path .5s cubic-bezier(.7,0,.3,1),visibility 0s .5s;overflow:hidden}
  .main-nav.open{visibility:visible;pointer-events:auto;clip-path:circle(150% at calc(100% - 44px) 0);transition:clip-path .75s cubic-bezier(.2,.8,.2,1)}
  .main-nav a{color:#fff;font-family:Oxanium,sans-serif;font-size:1.15rem;font-style:italic;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);opacity:0;transform:translateX(46px) skewX(-8deg);transition:opacity .2s,transform .2s}
  .main-nav.open a{opacity:1;transform:none;transition:opacity .5s ease-out,transform .6s cubic-bezier(.2,1.3,.3,1);transition-delay:calc(.14s + var(--n,0)*.07s)}
  .main-nav a:nth-child(2){--n:1}.main-nav a:nth-child(3){--n:2}.main-nav a:nth-child(4){--n:3}.main-nav a:nth-child(5){--n:4}
  .main-nav a:after{left:0;right:auto;width:38px;bottom:8px}
  .main-nav a.active{color:#7fd0ff}
  .main-nav:before,.main-nav:after{content:"";position:absolute;left:0;bottom:0;width:200%;height:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 16q25-16 50 0t50 0 50 0 50 0V34H0Z' fill='%2312a4ee' fill-opacity='.45'/%3E%3C/svg%3E") repeat-x 0 0/200px 34px;animation:navWave 5s linear infinite;transform:translateY(100%);transition:transform .3s}
  .main-nav:after{height:24px;opacity:.9;animation-duration:3.2s;animation-direction:reverse;filter:brightness(1.6)}
  .main-nav.open:before,.main-nav.open:after{transform:none;transition:transform .8s cubic-bezier(.2,.9,.2,1) .3s}
}
@keyframes navWave{to{background-position-x:200px}}
@media (prefers-reduced-motion:reduce){.main-nav,.main-nav a{transition:none!important}.main-nav:before,.main-nav:after{animation:none}}

/* ===== premium sections ===== */
.section{padding:110px 22px}
.section-head{margin-bottom:56px}
.section-head h2{letter-spacing:-.01em;line-height:1.05}
.cards{gap:20px}
.card{border-radius:24px;padding:30px 28px;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,#f5faff);isolation:isolate;transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s,opacity .7s}
.card:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(280px circle at var(--x,50%) var(--y,0%),rgba(18,164,238,.16),transparent 70%);opacity:0;transition:opacity .3s}
.card:hover:after{opacity:1}
.card:hover{box-shadow:0 26px 60px rgba(10,42,92,.16)}
.card .num{position:absolute;right:22px;top:10px;font-family:Oxanium,sans-serif;font-size:3.4rem;font-weight:800;font-style:italic;color:transparent;-webkit-text-stroke:1.5px rgba(10,42,92,.13);transition:.3s}
.card:hover .num{-webkit-text-stroke-color:var(--aqua)}
.card .more{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua-2)}
.card .more svg{width:16px;height:16px;transition:transform .25s}
.card:hover .more svg{transform:translateX(5px)}
.card.feat{grid-column:span 2;grid-row:span 2;min-height:440px;padding:38px;border:0;color:#fff;background:linear-gradient(135deg,#12559f 0%,#0a2a5c 45%,#06173a 100%);align-items:flex-start;box-shadow:0 30px 70px rgba(6,23,58,.3)}
.card.feat:before{display:none}
.card.feat .bg{position:absolute;inset:0;z-index:-1;background:url(assets/images/hero-boat.webp) right bottom/auto 135% no-repeat;-webkit-mask-image:linear-gradient(to right,transparent 22%,#000 75%);mask-image:linear-gradient(to right,transparent 22%,#000 75%);transition:transform 1.2s cubic-bezier(.2,.8,.2,1);transform-origin:100% 100%}
.card.feat:hover .bg{transform:scale(1.06)}
.card.feat .ico{background:rgba(255,255,255,.12);color:#7fd0ff;margin-bottom:auto;backdrop-filter:blur(6px)}
.card.feat .num{-webkit-text-stroke-color:rgba(255,255,255,.3);font-size:4.4rem;right:auto;left:110px;top:24px}
.card.feat .tag{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7fd0ff;margin-bottom:10px}
.card.feat h3{color:#fff;font-family:Oxanium,sans-serif;font-style:italic;font-size:clamp(1.9rem,3.2vw,2.8rem);text-shadow:0 2px 20px rgba(6,23,58,.6)}
.card.feat p{color:#d5e7fa;max-width:360px;font-size:1rem;margin-bottom:24px;text-shadow:0 1px 12px rgba(6,23,58,.7)}

.band{position:relative;overflow:hidden;padding:0 22px 80px;background:linear-gradient(180deg,#06173a,#0a2a5c);background-image:radial-gradient(circle at 12% 70%,rgba(18,164,238,.35),transparent 50%),linear-gradient(180deg,#06173a,#0a2a5c)}
.marquee{margin:0 -22px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;white-space:nowrap}
.marquee>div{display:inline-flex;gap:34px;align-items:center;animation:marq 38s linear infinite;padding-right:34px}
.marquee span{font-family:Oxanium,sans-serif;font-size:clamp(1.6rem,3.6vw,2.8rem);font-weight:800;font-style:italic;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.2px rgba(127,208,255,.5)}
.marquee b{color:var(--aqua);font-size:1.1rem}
@keyframes marq{to{transform:translateX(-50%)}}
.band-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;padding-top:70px}
.band h2{font-family:Oxanium,sans-serif;font-size:clamp(1.9rem,3.8vw,3.1rem);font-style:italic;font-weight:800;line-height:1.08;margin-bottom:28px;color:#fff}
.band mark,.cta mark,.section.dark mark{background:none;color:#7fd0ff;-webkit-text-fill-color:#7fd0ff}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stats li{padding:26px 16px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);text-align:center;transition:.3s}
.stats li:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);border-color:rgba(127,208,255,.5)}
.stats strong{display:block;font-family:Oxanium,sans-serif;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;line-height:1;color:#fff}
.stats strong b{font-weight:inherit}
.stats span{display:block;margin-top:8px;font-size:.78rem;color:#b8cde6}

.section.alt{background:linear-gradient(180deg,#f1f8fe,#fff)}
.product{border-radius:26px;padding:10px;background:#fff;box-shadow:0 10px 30px rgba(10,42,92,.07);transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s,opacity .7s}
.product:hover{box-shadow:0 30px 70px rgba(10,42,92,.18)}
.pimg{position:relative;border-radius:18px;overflow:hidden}
.pimg:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);transform:translateX(-100%);transition:transform .9s}
.product:hover .pimg:after{transform:translateX(100%)}
.ptag{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:99px;background:rgba(6,23,58,.72);backdrop-filter:blur(8px);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.product figcaption{padding:18px 14px 16px}

.section.dark{position:relative;background:radial-gradient(circle at 18% 45%,rgba(18,164,238,.28),transparent 45%),linear-gradient(180deg,#06173a,#0a2a5c);color:#fff}
.section.dark .section-head h2{color:#fff}
.section.dark .section-head p{color:#b8cde6}
.section.dark .eyebrow,.cta .eyebrow{background:rgba(255,255,255,.1);color:#7fd0ff}
.phone{border:1px solid rgba(127,208,255,.35);box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 90px rgba(18,164,238,.35)}
.phone:before,.phone:after{content:"";position:absolute;inset:-28px;border-radius:56px;border:1px solid rgba(127,208,255,.25);pointer-events:none;animation:ring 4s ease-out infinite}
.phone:after{animation-delay:-2s}
@keyframes ring{from{transform:scale(.94);opacity:1}to{transform:scale(1.14);opacity:0}}
.steps ol{position:relative;gap:6px}
.steps ol:before,.steps ol:after{content:"";position:absolute;left:21px;top:30px;bottom:50px;width:2px;background:rgba(255,255,255,.14)}
.steps ol:after{background:linear-gradient(180deg,#7fd0ff,#12a4ee);transform:scaleY(var(--tl,0));transform-origin:top;box-shadow:0 0 14px #12a4ee;transition:transform .2s linear}
.steps li{background:none;border:0;border-radius:18px;padding:16px 16px 16px 0;position:relative}
.steps li:hover{box-shadow:none;background:rgba(255,255,255,.05)}
.steps li>span{position:relative;z-index:1;border-radius:50%;box-shadow:0 0 0 6px #0a2a5c,0 0 24px rgba(18,164,238,.6)}
.steps h3{color:#fff;font-size:1.15rem}
.steps p{color:#b8cde6}

.cta{padding:100px 22px;background:#fff}
.cta-card{position:relative;overflow:hidden;max-width:var(--max);margin:auto;padding:80px 30px 110px;border-radius:36px;text-align:center;color:#fff;background:radial-gradient(circle at 80% 0,rgba(127,208,255,.45),transparent 50%),linear-gradient(135deg,#12a4ee 0%,#0a2a5c 60%,#06173a 100%);box-shadow:0 40px 90px rgba(10,42,92,.35)}
.cta-card h2{font-family:Oxanium,sans-serif;font-size:clamp(2.1rem,5vw,4rem);font-style:italic;font-weight:800;line-height:1.05;margin:18px 0 12px}
.cta-card p{color:#d5e7fa;margin-bottom:30px}
.cta-card:before,.cta-card:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:60px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 16q25-16 50 0t50 0 50 0 50 0V34H0Z' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E") repeat-x 0 0/400px 60px;animation:ctaWave 9s linear infinite}
.cta-card:after{height:40px;animation-duration:6s;animation-direction:reverse}
@keyframes ctaWave{to{background-position-x:400px}}
.cta .btn{position:relative;z-index:1;padding:18px 34px;font-size:.95rem;box-shadow:0 16px 40px rgba(6,23,58,.4)}

.footer{padding:70px 22px 0}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:40px;align-items:start;padding-bottom:50px}
.f-brand p{margin-top:16px;max-width:300px}
.f-col{display:grid;gap:10px;justify-items:start}
.f-col h4{font-family:Oxanium,sans-serif;color:#fff;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.f-col a,.f-col span{display:inline-flex;align-items:center;gap:8px;transition:.2s}
.f-col a:hover{color:#7fd0ff;transform:translateX(4px)}
.f-col svg{width:16px;height:16px;color:var(--aqua)}
.f-bottom{max-width:var(--max);margin:auto;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;text-align:center}

@media (max-width:980px){
  .card.feat{min-height:380px}
  .band-inner{grid-template-columns:1fr;gap:36px}
  .footer-inner{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:span 2}
}
@media (max-width:620px){
  .section{padding:76px 18px}
  .card.feat{grid-column:auto;min-height:400px;padding:28px}
  .card.feat .bg{background-size:auto 105%;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 78%);mask-image:linear-gradient(to bottom,#000 30%,transparent 78%)}
  .band-inner{text-align:left;padding-top:50px}
  .band .btn{font-size:.72rem;padding:14px 16px}
  .stats{gap:8px}.stats li{padding:18px 6px}.stats span{font-size:.68rem}
  .products{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -18px;padding:6px 18px 24px;scrollbar-width:none}
  .products::-webkit-scrollbar{display:none}
  .product{flex:0 0 80%;scroll-snap-align:center}
  .products .reveal{opacity:1;transform:none}
  .cta{padding:60px 14px}.cta-card{padding:60px 20px 90px;border-radius:28px}
  .footer-inner{grid-template-columns:1fr;text-align:left;justify-items:start}
  .f-brand{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){.marquee>div,.phone:before,.phone:after,.cta-card:before,.cta-card:after{animation:none}}

/* featured card: own artwork instead of the hero photo */
.card.feat .bg{background:radial-gradient(circle at 78% 55%,rgba(18,164,238,.45),transparent 55%);-webkit-mask-image:none;mask-image:none;overflow:hidden}
.card.feat:hover .bg{transform:none}
.card.feat .bg:after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-120%) skewX(-18deg);animation:featShine 5s ease-in-out infinite}
.card.feat .big{position:absolute;right:-30px;bottom:-40px;width:min(380px,70%);height:auto;aspect-ratio:1;color:rgba(127,208,255,.3);stroke-width:.7;animation:featFloat 6s ease-in-out infinite}
.card.feat .sp{position:absolute;color:#fff;animation:featTw 2.6s ease-in-out infinite}
.card.feat .s1{right:16%;top:16%;width:44px;height:44px}
.card.feat .s2{right:42%;top:34%;width:20px;height:20px;animation-delay:-.9s}
.card.feat .s3{right:8%;top:46%;width:26px;height:26px;animation-delay:-1.7s}
@keyframes featShine{0%,35%{transform:translateX(-120%) skewX(-18deg)}75%,100%{transform:translateX(420%) skewX(-18deg)}}
@keyframes featFloat{50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes featTw{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@media (max-width:620px){.card.feat .bg{-webkit-mask-image:none;mask-image:none}.card.feat .big{width:240px;right:-40px;bottom:auto;top:-10px}}
@media (prefers-reduced-motion:reduce){.card.feat .bg *,.card.feat .bg:after{animation:none}}

/* mobile parallax fix: waves no longer lift off the bottom */
.h-wave{height:320px;bottom:-162px}
.hw2{bottom:-192px}
.h-wave path{transform-box:view-box}
.hw1{transform:translate3d(calc(var(--mx)*10px),max(calc(var(--s)*-.07px),-40px),0)}
.hw2{transform:translate3d(calc(var(--mx)*22px),max(calc(var(--s)*-.16px),-70px),0)}
@media (max-width:980px){.h-wave{height:280px;bottom:-162px}.hw2{bottom:-192px}
  .h-mid{transform:translate3d(0,min(calc(var(--s)*.2px),90px),0)}
  .hero-copy{transform:translate3d(0,min(calc(var(--s)*.18px),120px),0);opacity:calc(1 - var(--s)/900)}}
/* product photos: keep them square (height attr was forcing 800px) */
.pimg img{height:auto;aspect-ratio:1/1}
.ptag{top:auto;bottom:12px}

/* ===== mobile: compositor-driven parallax + lighter scene ===== */
@media (max-width:980px){
  .h-mid,.hero-copy,.hw1,.hw2,.h-clouds,.h-sun{transform:none}
  .hero-copy{opacity:1}
  .hero-stats{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.92)}
  .h-clouds i{filter:none}
  .h-glints i{box-shadow:none}
  .h-ripple{animation:none}
  .h-boat{transform:none}
  @supports (animation-timeline:scroll()){
    .h-mid,.hero-copy,.hw1,.hw2,.h-clouds{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:0 900px}
    .h-mid{animation-name:pMid}.hero-copy{animation-name:pCopy}.hw1{animation-name:pW1}.hw2{animation-name:pW2}.h-clouds{animation-name:pCloud}
  }
}
@keyframes pMid{to{transform:translate3d(0,110px,0)}}
@keyframes pCopy{to{transform:translate3d(0,150px,0);opacity:.15}}
@keyframes pW1{to{transform:translate3d(0,-35px,0)}}
@keyframes pW2{to{transform:translate3d(0,-65px,0)}}
@keyframes pCloud{to{transform:translate3d(0,60px,0)}}
@media (prefers-reduced-motion:reduce){.h-mid,.hero-copy,.hw1,.hw2,.h-clouds{animation:none!important}}

/* mobile hero: less copy, boat higher */
@media (max-width:620px){
  .hero-text,.hero-stats{display:none}
  .hero h1{font-size:clamp(2rem,9.6vw,2.5rem);margin:14px 0 10px}
  .hero-kicker{font-size:.7rem;letter-spacing:.04em}
  .hero .actions{margin:20px 0 0}
  .hero-inner{padding:30px 0 390px}
  .h-boat{height:480px}
  .h-haze{background:radial-gradient(130% 42% at 30% 16%,rgba(255,255,255,.85),rgba(255,255,255,0) 78%)}
}

/* custom line art instead of icon stars */
.marquee .mk{width:38px;flex:none;color:var(--aqua)}
.qm-star{display:none}
.card.feat .yacht{position:absolute;right:-4%;bottom:6%;width:min(470px,74%);color:rgba(127,208,255,.55);overflow:visible}
.yacht .y-boat{animation:featFloat 6s ease-in-out infinite;transform-origin:50% 80%}
.yacht .y-hull{fill:rgba(255,255,255,.07)}
.yacht .y-shine{stroke:#fff;stroke-width:2.5;stroke-dasharray:46 260;animation:yShine 3.6s ease-in-out infinite}
.yacht .y-w{stroke:rgba(127,208,255,.4);animation:yFlow 4s linear infinite}
.yacht .w2{stroke:rgba(127,208,255,.22);animation-duration:2.8s;animation-direction:reverse}
@keyframes yShine{from{stroke-dashoffset:60}to{stroke-dashoffset:-260}}
@keyframes yFlow{to{transform:translateX(60px)}}
@media (max-width:620px){.card.feat .yacht{width:78%;right:-8%;bottom:auto;top:4%}}
@media (prefers-reduced-motion:reduce){.yacht *{animation:none}}
@media (max-width:620px){.card.feat .num{display:none}}