/* =========================================================
   North Sea Labs — landing page
   Everything is sized in --u: one "design pixel" of a 1920px
   wide canvas, so the layout scales like a poster.
   ========================================================= */

@font-face{font-family:'Unbounded';src:url(/assets/fonts/unbounded.woff2) format('woff2');
  font-weight:200 900;font-style:normal;font-display:block}
@font-face{font-family:'Poppins';src:url(/assets/fonts/poppins-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url(/assets/fonts/poppins-700.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --screen:min(100vw,1920px);
  --u:calc(var(--screen) / 1920);
  --outer:max(0px,calc((100vw - 1920px) / 2));
  --text-w:calc(1800*var(--u));

  --fog:#D5DADD;
  --ink:#0A0F14;
  --foam:#74FFC8;
  --buoy:#FF6B3D;
  --deep:#0B1724;
  --white:#FFFFFF;

  --display:'Unbounded',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--fog);color:var(--ink);overflow-x:hidden}
body{font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--foam);color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
  background:var(--ink);color:var(--white);border-radius:999px;text-decoration:none}
.skip:focus{left:16px;top:16px}

.claim,.zone,.dock,.cta{border-inline:var(--outer) solid transparent}

/* ---------- button ---------- */
.btn{display:inline-block;white-space:nowrap;
  background:var(--foam);color:var(--ink);text-decoration:none;border-radius:999px;
  padding:calc(19*var(--u)) calc(56*var(--u));
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:max(14px,calc(27*var(--u)));line-height:calc(39*var(--u));
  --shadow:var(--ink);
  transition:transform .34s cubic-bezier(.25,.8,.25,1),box-shadow .34s cubic-bezier(.25,.8,.25,1)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(calc(-10*var(--u)));box-shadow:0 calc(10*var(--u)) 0 var(--shadow)}
}
.btn:focus-visible{outline:calc(3*var(--u)) solid var(--ink);outline-offset:calc(4*var(--u))}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  --u:min(calc(var(--screen) / 1510),calc(100svh / 1066));
  --x0:calc((100vw - 1920*var(--u)) / 2);
  position:relative;height:calc(993*var(--u));overflow:hidden;background:var(--fog)}

.hero-film{position:absolute;--film:1.15;
  width:max(calc(1707*var(--film)*var(--u)),100vw);
  height:calc(723*var(--film)*var(--u));
  left:50%;top:calc((482.5 - 361.5*var(--film))*var(--u));
  transform:translate3d(-50%,var(--py,0px),0);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1707 723' preserveAspectRatio='none'%3E%3Cfilter id='w' x='-25%25' y='-70%25' width='150%25' height='240%25'%3E%3CfeGaussianBlur stdDeviation='70'/%3E%3C/filter%3E%3Cellipse cx='854' cy='362' rx='697' ry='223' fill='%23fff' filter='url(%23w)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1707 723' preserveAspectRatio='none'%3E%3Cfilter id='w' x='-25%25' y='-70%25' width='150%25' height='240%25'%3E%3CfeGaussianBlur stdDeviation='70'/%3E%3C/filter%3E%3Cellipse cx='854' cy='362' rx='697' ry='223' fill='%23fff' filter='url(%23w)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero-film canvas{display:block;width:100%;height:100%;
  opacity:0;transition:opacity 1.2s ease}
.hero-film canvas.on{opacity:1}

.hero-mark{position:absolute;left:50%;top:calc(96*var(--u));transform:translate(-50%,var(--my,0px));
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:calc(118*var(--u));line-height:.86;letter-spacing:-0.04em;
  color:var(--ink);text-decoration:none;z-index:2}
.mark-line{display:flex;align-items:center;gap:calc(14*var(--u))}
.mark-sea{margin-left:.26em}
.mark-wave{width:calc(130*var(--u));height:calc(46*var(--u));overflow:visible;
  fill:none;stroke:var(--ink);stroke-width:6.5;stroke-linecap:round}
.mark-wave{animation:bob 2.4s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-12%) rotate(-4deg)}to{transform:translateY(12%) rotate(4deg)}}

.hero-headline{position:absolute;left:calc(var(--x0) + (960 - 520)*var(--u));top:calc(728*var(--u));
  width:calc(1040*var(--u));margin:0;text-align:center;z-index:2;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:calc(80*var(--u));line-height:.92;letter-spacing:-0.02em}

.hero-chips{position:absolute;left:0;right:0;top:calc(916*var(--u));margin:0;padding:0;list-style:none;
  display:flex;justify-content:center;flex-wrap:wrap;gap:calc(16*var(--u))}
.hero-chips li{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:max(10px,calc(15*var(--u)));line-height:1;letter-spacing:.02em;
  padding:calc(13*var(--u)) calc(24*var(--u));border-radius:999px;
  border:calc(2*var(--u)) solid var(--ink)}
.hero-chips li:last-child{background:var(--ink);color:var(--fog)}

/* intro choreography */
.hero-mark,.hero-headline,.hero-chips li{opacity:0;translate:0 calc(30*var(--u));
  transition:opacity .9s var(--ease-out),translate .9s var(--ease-out)}
.ready .hero-mark,.ready .hero-headline,.ready .hero-chips li{opacity:1;translate:0 0}
.ready .hero-headline{transition-delay:.25s}
.ready .hero-chips li{transition-delay:calc(.45s + var(--n,0) * .07s)}
.hero-chips li:nth-child(2){--n:1}.hero-chips li:nth-child(3){--n:2}.hero-chips li:nth-child(4){--n:3}

/* =========================================================
   CLAIM
   ========================================================= */
.claim{padding:calc(110*var(--u)) 0 0;text-align:center}
.claim h2{width:calc(1560*var(--u));margin:0 auto;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:calc(46*var(--u));line-height:1.01;letter-spacing:-0.02em}
.claim p{width:calc(1500*var(--u));margin:calc(26*var(--u)) auto 0;
  font-size:calc(35*var(--u));line-height:calc(48*var(--u));letter-spacing:-0.01em}
.claim p + p{margin-top:calc(40*var(--u))}
.br-narrow{display:none}

/* =========================================================
   ZONE — gradient, glowing "N" streaks, fanned tiles
   ========================================================= */
.zone{position:relative;height:calc(1200*var(--u));margin-top:calc(40*var(--u));--su:var(--u)}
.zone-bg{position:absolute;left:calc(-1*var(--outer));right:calc(-1*var(--outer));top:0;bottom:0;z-index:0;
  background:linear-gradient(180deg,var(--fog) 22%,var(--foam) 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);
          mask-image:linear-gradient(180deg,#000 88%,transparent)}

.streaks{position:absolute;inset:0;z-index:1;pointer-events:none}
.streak{position:absolute;--t:calc(150*var(--su));height:var(--t);
  margin-top:calc(var(--t) / -2);transform-origin:0 50%}
.streak i{position:absolute;top:0;left:calc(var(--t) / -2);height:100%;width:var(--t);
  border-radius:999px;opacity:0;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 calc(34*var(--su)) rgba(255,255,255,.95),0 0 calc(40*var(--su)) rgba(255,255,255,.35)}
/* the N: left stem up, diagonal down, right stem up */
.s1{left:calc(795*var(--su));top:calc(485*var(--su));width:calc(350*var(--su));transform:rotate(-90deg)}
.s2{left:calc(795*var(--su));top:calc(135*var(--su));width:calc(481*var(--su));transform:rotate(46.69deg)}
.s3{left:calc(1125*var(--su));top:calc(485*var(--su));width:calc(350*var(--su));transform:rotate(-90deg)}
.s1 i{--len:calc(350*var(--su) + var(--t))}
.s2 i{--len:calc(481*var(--su) + var(--t))}
.s3 i{--len:calc(350*var(--su) + var(--t))}
.zone.in .s1 i{animation:grow 6s linear infinite}
.zone.in .s2 i{animation:grow 6s linear infinite;animation-delay:.36s}
.zone.in .s3 i{animation:grow 6s linear infinite;animation-delay:.72s}
.zone.paused .streak i{animation-play-state:paused}
@keyframes grow{
  0%  {width:var(--t);opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  3%  {opacity:1}
  17% {width:var(--len)}
  70% {width:var(--len);opacity:1;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  84% {width:var(--t);opacity:1}
  88%,100%{width:var(--t);opacity:0}
}

.tiles{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none}
.holder{position:absolute;width:calc(430*var(--u));height:calc(560*var(--u));
  --hx:0px;--hy:0px;transform:translate(var(--hx),var(--hy));
  transition:transform .45s var(--ease-out)}
.fly{position:absolute;inset:0;transform-origin:50% 50%;
  --dx:0px;--dy:0px;--dr:0deg;
  transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) + var(--dr)));
  transition:transform .9s cubic-bezier(.37,.08,.25,1.29)}
.tile{position:absolute;inset:0;overflow:hidden;isolation:isolate;
  border-radius:calc(48*var(--u));
  box-shadow:0 calc(30*var(--u)) calc(60*var(--u)) rgba(10,15,20,.18)}

.t-build {left:calc(175*var(--u)); top:calc(500*var(--u));--rot:-13deg}
.t-ship  {left:calc(560*var(--u)); top:calc(420*var(--u));--rot:-4.5deg}
.t-watch {left:calc(930*var(--u)); top:calc(410*var(--u));--rot:4.5deg}
.t-repeat{left:calc(1315*var(--u));top:calc(490*var(--u));--rot:13deg}

/* before the zone scrolls into view, the tiles sit in one neat stack */
.zone:not(.in) .t-build  .fly{--dx:calc(570*var(--u));--dy:calc(-70*var(--u));--dr:13deg}
.zone:not(.in) .t-ship   .fly{--dx:calc(185*var(--u));--dy:calc(10*var(--u));--dr:4.5deg}
.zone:not(.in) .t-watch  .fly{--dx:calc(-185*var(--u));--dy:calc(20*var(--u));--dr:-4.5deg}
.zone:not(.in) .t-repeat .fly{--dx:calc(-570*var(--u));--dy:calc(-60*var(--u));--dr:-13deg}
.zone.in .t-watch  .fly{transition-delay:.5s}
.zone.in .t-ship   .fly{transition-delay:.56s}
.zone.in .t-repeat .fly{transition-delay:.62s}
.zone.in .t-build  .fly{transition-delay:.68s}

.tile-word{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:900;text-transform:uppercase;text-align:center;
  font-size:calc(104*var(--u));line-height:.83;letter-spacing:-0.03em}
.tile-num{position:absolute;left:calc(40*var(--u));top:calc(36*var(--u));
  font-family:var(--display);font-weight:800;font-size:max(11px,calc(20*var(--u)))}
.tile-note{position:absolute;left:calc(40*var(--u));right:calc(40*var(--u));bottom:calc(36*var(--u));
  font-size:max(11px,calc(21*var(--u)));line-height:1.35}

.t-build .tile{background:var(--ink);color:var(--foam)}
.t-build .tile-num,.t-build .tile-note{color:var(--fog)}
.tile-pattern{position:absolute;left:0;right:0;top:calc(70*var(--u));text-align:center;
  font-family:var(--display);font-weight:900;text-transform:uppercase;white-space:nowrap;
  font-size:calc(66*var(--u));line-height:1;letter-spacing:-0.02em;color:#1d252e;
  animation:drift 9s linear infinite}
@keyframes drift{to{transform:translateY(-25%)}}

.t-ship .tile{background:var(--foam)}
.tile-waves{position:absolute;inset:0;width:200%;height:100%;
  fill:none;stroke:var(--ink);stroke-opacity:.16;stroke-width:2.2;vector-effect:non-scaling-stroke;
  animation:slide 7s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}

.t-watch .tile{background:var(--deep);color:var(--white)}
.t-watch .tile-num,.t-watch .tile-note{color:#9fb2c2}
.radar{position:absolute;left:50%;top:50%;width:calc(360*var(--u));aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%}
.radar b{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(116,255,200,.22)}
.radar b:nth-of-type(2){inset:18%}
.radar b:nth-of-type(3){inset:36%}
.radar i{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(116,255,200,.45),rgba(116,255,200,0) 22%,transparent);
  animation:spin 4s linear infinite}
.radar::after{content:"";position:absolute;left:68%;top:30%;width:calc(14*var(--u));height:calc(14*var(--u));
  border-radius:50%;background:var(--buoy);box-shadow:0 0 calc(18*var(--u)) var(--buoy);
  animation:blip 4s ease-out infinite}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes blip{0%,30%{opacity:0}34%{opacity:1}80%,100%{opacity:0}}

.t-repeat .tile{background:var(--buoy)}
.tile-cycle{position:absolute;left:50%;top:50%;width:calc(340*var(--u));aspect-ratio:1;
  translate:-50% -50%;fill:none;stroke:var(--ink);stroke-opacity:.18;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  animation:spin 12s linear infinite}

/* hover: the hovered tile lifts, neighbours make room (vars set in JS) */
@media (prefers-reduced-motion:reduce){
  .streak i,.fly,.holder{transition:none}
  .zone:not(.in) .fly{--dx:0px;--dy:0px;--dr:0deg}
  .zone .streak i,.zone.in .streak i{animation:none;width:var(--len);opacity:1}
  .tile-pattern,.tile-waves,.radar i,.radar::after,.tile-cycle,.mark-wave{animation:none}
}

/* =========================================================
   DOCK
   ========================================================= */
.dock{position:relative;z-index:1;padding:calc(40*var(--u)) 0 calc(160*var(--u))}
.big-title{margin:0 0 calc(70*var(--u));text-align:center;white-space:nowrap;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:calc(250*var(--u));line-height:1.04;letter-spacing:-0.03em}
.big-title .ch{display:inline-block;white-space:pre}
.big-title.waiting .ch{opacity:0}
.big-title.go .ch{animation:sharpen 1.1s var(--ease-out) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes sharpen{
  from{opacity:0;filter:blur(.24em);scale:1.18}
  to{opacity:1;filter:blur(0);scale:1}
}

.dock-grid{width:var(--text-w);margin:0 auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:calc(50*var(--u))}
.card{position:relative;background:var(--white);border-radius:calc(48*var(--u));
  padding:calc(56*var(--u)) calc(52*var(--u)) calc(60*var(--u));
  transition:transform .32s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(calc(-10*var(--u)))}
}
.card p{margin:calc(22*var(--u)) 0 0;font-size:max(14px,calc(24*var(--u)));line-height:1.45}
.card-label{display:block;font-size:max(12px,calc(19*var(--u)));line-height:1;letter-spacing:-0.01em;
  margin-bottom:calc(16*var(--u));opacity:.7}
.card-title{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:calc(44*var(--u));line-height:1.08}
.card-icon{display:grid;place-items:center;width:calc(96*var(--u));height:calc(96*var(--u));
  border-radius:50%;background:var(--foam);margin-bottom:calc(48*var(--u))}
.card-icon svg{width:55%;height:55%;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.card-main{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1.05fr;gap:calc(70*var(--u));
  align-items:center;background:var(--deep);color:var(--white);border-radius:calc(64*var(--u));
  padding:calc(80*var(--u));overflow:hidden}
.card-main .card-title{font-size:calc(110*var(--u));font-weight:900;line-height:1;color:var(--foam)}
.card-main p{max-width:calc(680*var(--u));color:#c8d3dc}
.card-main .btn{margin-top:calc(46*var(--u));--shadow:var(--fog)}
.card-main .btn:focus-visible{outline-color:var(--white)}

.status{display:inline-flex;align-items:center;gap:calc(14*var(--u));margin-top:calc(36*var(--u));
  padding:calc(12*var(--u)) calc(22*var(--u));border-radius:999px;background:rgba(255,255,255,.07);
  font-size:max(12px,calc(19*var(--u)));line-height:1.2}
.status-host{font-weight:700}
.status-text{opacity:.75}
.status-dot{position:relative;width:calc(14*var(--u));height:calc(14*var(--u));min-width:8px;min-height:8px;
  border-radius:50%;background:#7b8a97}
.status-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:ping 1.8s ease-out infinite}
.status[data-state="online"] .status-dot{background:var(--foam)}
.status[data-state="offline"] .status-dot{background:var(--buoy)}
.status[data-state="offline"] .status-dot::after{animation:none}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(2.8);opacity:0}}

.terminal{align-self:stretch;min-height:calc(440*var(--u));border-radius:calc(30*var(--u));
  background:#050b12;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;overflow:hidden}
.term-bar{display:flex;align-items:center;gap:calc(10*var(--u));padding:calc(20*var(--u)) calc(26*var(--u));
  border-bottom:1px solid rgba(255,255,255,.07)}
.term-bar i{width:calc(14*var(--u));height:calc(14*var(--u));min-width:7px;min-height:7px;border-radius:50%;background:#26323d}
.term-bar span{margin-left:auto;font:max(11px,calc(16*var(--u)))/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#5d6d7b}
.term-body{flex:1;margin:0;padding:calc(30*var(--u)) calc(34*var(--u));white-space:pre-wrap;
  font:max(11px,calc(22*var(--u)))/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;color:#c8d3dc}
.term-body .p{color:var(--foam)}
.term-body .d{color:#5d6d7b}
.term-body .ok{color:var(--foam)}
.term-body .caret{display:inline-block;width:.6em;height:1.1em;vertical-align:-.2em;background:var(--foam);
  animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* =========================================================
   CARGO — marquee of pills
   ========================================================= */
.cargo{background:var(--foam);padding:calc(130*var(--u)) 0;overflow:hidden}
.cargo-row{overflow:hidden}
.cargo-row + .cargo-row{margin-top:calc(32*var(--u))}
.cargo-band{display:flex;gap:calc(32*var(--u));width:max-content;
  animation:march var(--dur) linear infinite}
.cargo-band.reverse{animation-direction:reverse}
.cargo-band span{flex:0 0 calc(420*var(--u));height:calc(170*var(--u));border-radius:999px;
  display:grid;place-items:center;background:var(--white);
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:calc(38*var(--u));letter-spacing:-0.01em}
.cargo-band span:nth-child(even){background:var(--ink);color:var(--white)}
.cargo:hover .cargo-band{animation-play-state:paused}
@keyframes march{to{transform:translateX(calc(-50% - 16*var(--u)))}}

/* =========================================================
   CTA + tide
   ========================================================= */
.cta{text-align:center;padding:calc(200*var(--u)) 0 calc(40*var(--u))}
.cta h2{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:calc(150*var(--u));line-height:.9;letter-spacing:-0.03em}
.cta p{margin:calc(40*var(--u)) auto 0;font-size:calc(32*var(--u));line-height:1.4}
.btn-big{margin-top:calc(60*var(--u));font-size:max(16px,calc(34*var(--u)));
  padding:calc(26*var(--u)) calc(70*var(--u))}

.tide{position:relative;margin-top:calc(-20*var(--u));line-height:0}
.tide svg{display:block;width:100%;height:calc(320*var(--u));overflow:hidden}
.tide text{font-family:var(--display);font-weight:900;font-size:58px;text-transform:uppercase;
  letter-spacing:.02em;fill:var(--ink)}
.tide .water{fill:var(--deep);transform:translateY(14px)}

/* =========================================================
   FLOATING NAV
   ========================================================= */
.dock-nav{position:fixed;left:50%;bottom:24px;z-index:50;
  translate:-50% calc(100% + 40px);transition:translate .6s var(--ease-out)}
.dock-nav.show{translate:-50% 0}
.dock-nav ul{position:relative;display:flex;margin:0;padding:6px;list-style:none;
  background:var(--ink);border-radius:999px;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 40px rgba(10,15,20,.28)}
.dock-nav a{position:relative;z-index:1;display:block;padding:12px 22px;border-radius:999px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.02em;
  color:var(--white);text-decoration:none;transition:color .3s ease}
.dock-nav a.on{color:var(--ink)}
.dock-nav a:focus-visible{outline:2px solid var(--foam);outline-offset:2px}
.nav-pill{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:var(--foam);
  opacity:0;transform:translateX(var(--x,0px));
  transition:transform .45s var(--ease-out),width .45s var(--ease-out),opacity .3s ease}
.nav-pill.on{opacity:1}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--deep);color:var(--fog);text-align:center;
  padding:calc(60*var(--u)) 16px calc(150*var(--u))}
.footer-place{margin:0;font-weight:700;font-size:calc(52*var(--u));line-height:1;letter-spacing:-0.01em;color:var(--white)}
#clock{color:var(--foam);font-variant-numeric:tabular-nums}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 36px;margin:calc(46*var(--u)) 0 0;
  font-size:max(14px,calc(20*var(--u)))}
.footer-links a{text-decoration:none;border-bottom:1px solid rgba(213,218,221,.35);padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease}
.footer-links a:hover{color:var(--foam);border-color:var(--foam)}
.footer-copy{margin:calc(30*var(--u)) 0 0;font-size:max(12px,calc(16*var(--u)));opacity:.55}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.card,.dock-nav,.nav-pill,.hero-mark,.hero-headline,.hero-chips li{transition:none}
  .big-title.go .ch{animation:none}
  .big-title.waiting .ch{opacity:1}
  .cargo-band,.status-dot::after,.term-body .caret{animation:none}
}

/* =========================================================
   PORTRAIT / MOBILE
   ========================================================= */
@media (max-width:767.98px),(max-aspect-ratio:4/5){
  :root{--u:min(calc(100vw / 414),1.15px);--text-w:calc(100vw - 32px)}

  .btn{font-size:clamp(15px,calc(17*var(--u)),20px);line-height:1.2;padding:1em 2em}

  .hero{--u:min(calc(100vw / 414),calc(100svh / 806));height:auto;min-height:100svh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:calc(46*var(--u)) 16px calc(40*var(--u));text-align:center}
  .hero-mark{order:1;position:relative;left:auto;top:auto;transform:translateY(var(--my,0px));
    font-size:calc(54*var(--u))}
  .mark-wave{width:calc(62*var(--u));height:calc(22*var(--u))}
  .hero-film{order:2;position:relative;left:auto;top:auto;transform:translate3d(0,var(--py,0px),0);
    align-self:stretch;margin:calc(-50*var(--u)) -16px 0;width:auto;height:auto;aspect-ratio:414 / 430;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1707 723' preserveAspectRatio='none'%3E%3Cfilter id='w' x='-25%25' y='-70%25' width='150%25' height='240%25'%3E%3CfeGaussianBlur stdDeviation='70'/%3E%3C/filter%3E%3Cellipse cx='854' cy='362' rx='900' ry='275' fill='%23fff' filter='url(%23w)'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1707 723' preserveAspectRatio='none'%3E%3Cfilter id='w' x='-25%25' y='-70%25' width='150%25' height='240%25'%3E%3CfeGaussianBlur stdDeviation='70'/%3E%3C/filter%3E%3Cellipse cx='854' cy='362' rx='900' ry='275' fill='%23fff' filter='url(%23w)'/%3E%3C/svg%3E")}
  .hero-headline{order:3;position:static;width:100%;margin-top:calc(-24*var(--u));
    font-size:calc(0.098 * (100vw - 32px))}
  .hero-chips{order:4;position:static;margin-top:calc(26*var(--u));gap:8px}
  .hero-chips li{font-size:11px;padding:9px 14px;border-width:1.5px}

  .claim{padding:calc(60*var(--u)) 16px 0}
  .claim h2{width:auto;font-size:max(calc(29*var(--u)),24px);line-height:1.05}
  .br-narrow{display:inline}
  .claim p{width:auto;margin-top:calc(20*var(--u));font-size:max(calc(17.5*var(--u)),15px);line-height:1.5}
  .claim p + p{margin-top:calc(22*var(--u))}
  .claim p br{display:none}

  .zone{height:auto;margin-top:calc(30*var(--u));padding:calc(300*var(--u)) 16px calc(70*var(--u));
    --su:calc(var(--screen) / 1100)}
  .streaks{left:calc((100vw - 1920*var(--su)) / 2);top:calc(-10*var(--u))}
  .tiles{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
  .holder{position:relative;left:auto!important;top:auto!important;width:auto;height:auto;aspect-ratio:4 / 5}
  .t-build{--rot:-4deg}.t-ship{--rot:3deg}.t-watch{--rot:-2.5deg}.t-repeat{--rot:4deg}
  .zone:not(.in) .fly{--dx:0px!important;--dy:calc(60*var(--u))!important;--dr:0deg!important;opacity:0}
  .fly{transition:transform .9s cubic-bezier(.37,.08,.25,1.29),opacity .6s ease}
  .zone.in .holder:nth-child(1) .fly{transition-delay:.1s}
  .zone.in .holder:nth-child(2) .fly{transition-delay:.2s}
  .zone.in .holder:nth-child(3) .fly{transition-delay:.3s}
  .zone.in .holder:nth-child(4) .fly{transition-delay:.4s}
  .tile{border-radius:calc(26*var(--u))}
  .tile-word{font-size:calc(46*var(--u))}
  .tile-pattern{font-size:calc(26*var(--u));top:calc(20*var(--u))}
  .tile-num{left:calc(16*var(--u));top:calc(14*var(--u));font-size:11px}
  .tile-note{left:calc(16*var(--u));right:calc(16*var(--u));bottom:calc(14*var(--u));font-size:11px}
  .radar{width:calc(170*var(--u))}
  .tile-cycle{width:calc(160*var(--u))}

  .dock{padding:calc(30*var(--u)) 0 calc(70*var(--u))}
  .big-title{font-size:calc((100vw - 32px) / 6.6);margin-bottom:calc(30*var(--u))}
  .dock-grid{grid-template-columns:1fr;gap:14px}
  .card{border-radius:calc(26*var(--u));padding:calc(28*var(--u)) calc(24*var(--u)) calc(32*var(--u))}
  .card p{font-size:15px;margin-top:12px}
  .card-label{font-size:13px;margin-bottom:10px}
  .card-title{font-size:calc(26*var(--u))}
  .card-icon{width:56px;height:56px;margin-bottom:24px}
  .card-main{grid-template-columns:1fr;gap:28px;padding:calc(30*var(--u)) calc(22*var(--u));border-radius:calc(30*var(--u))}
  .card-main .card-title{font-size:calc(50*var(--u))}
  .card-main .btn{margin-top:26px}
  .status{margin-top:22px;font-size:12px;gap:8px;padding:8px 14px;flex-wrap:wrap}
  .terminal{min-height:250px;border-radius:18px}
  .term-bar{padding:12px 16px;gap:6px}
  .term-body{padding:16px;font-size:12px}

  .cargo{padding:calc(40*var(--u)) 0}
  .cargo-row + .cargo-row{margin-top:calc(14*var(--u))}
  .cargo-band{gap:calc(12*var(--u))}
  .cargo-band span{flex-basis:calc(170*var(--u));height:calc(76*var(--u));font-size:calc(15*var(--u))}
  @keyframes march{to{transform:translateX(calc(-50% - 6*var(--u)))}}

  .cta{padding:calc(90*var(--u)) 16px calc(20*var(--u))}
  .cta h2{font-size:calc(0.112 * (100vw - 32px))}
  .cta p{font-size:16px;margin-top:20px}
  .btn-big{margin-top:30px;font-size:16px}

  .tide svg{height:calc(160*var(--u))}

  .dock-nav{bottom:14px}
  .dock-nav a{padding:11px 16px;font-size:12px}
  .footer{padding:calc(36*var(--u)) 16px 110px}
  .footer-place{font-size:26px}
}