/* ============================================================
   NAMPORT · CONCEPT 02 · "TIDAL"
   Immersive · dark · kinetic · tech-forward
   ============================================================ */
@font-face{font-family:'Sora';src:url('../fonts/sora-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --navy:#04123D; --navy-2:#071A4E; --ink:#0A1633;
  --blue:#0837CE; --blue-bright:#2E63FF; --glow:#3F7BFF;
  --orange:#FF6A00; --orange-soft:#FF8A1E;
  --mist:#AEB9D6; --line:rgba(255,255,255,.1);
  --head:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --wrap:1320px;
}
*{margin:0;padding:0;box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html:not(.lenis){scroll-behavior:smooth}
body{font-family:var(--body);color:#fff;background:var(--navy);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--orange);color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.05;letter-spacing:-.02em}
.rv{opacity:0;transform:translateY(34px)}
.rvline{overflow:hidden;display:block}.rvline>span{display:block;transform:translateY(110%)}
@media(hover:hover) and (pointer:fine){body{cursor:none}}

/* custom cursor */
.cursor{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--orange);z-index:2000;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:normal;transition:width .25s,height .25s,background .25s,opacity .25s}
.cursor.ring{width:44px;height:44px;background:transparent;border:1.5px solid rgba(255,255,255,.55)}
.cursor.hide{opacity:0}
@media(hover:none),(pointer:coarse){.cursor{display:none}body{cursor:auto}}

/* top bar */
.topbar{background:#020C2B;color:var(--mist);font:500 12.5px/1 var(--body)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:20px}
.topbar a{transition:.3s}.topbar a:hover{color:#fff}
.topbar .l{display:flex;gap:26px}.topbar .r{display:flex;gap:22px;align-items:center}
.topbar .dot{width:7px;height:7px;border-radius:50%;background:#39D98A;box-shadow:0 0 0 4px rgba(57,217,138,.16);display:inline-block;margin-right:7px;vertical-align:middle}
@media(max-width:820px){.topbar .l span:not(:first-child){display:none}}
@media(max-width:760px){.topbar{display:none}.nav{top:0}}

/* nav */
.nav{position:fixed;top:40px;left:0;right:0;z-index:900;transition:transform .5s cubic-bezier(.19,1,.22,1),background .4s,box-shadow .4s}
.nav .wrap{display:flex;align-items:center;gap:34px;min-height:84px}
.nav.solid{background:rgba(4,18,61,.82);backdrop-filter:blur(18px);box-shadow:0 1px 0 var(--line)}
.nav.hidden{transform:translateY(-170%)}
.brand{display:flex;align-items:center;gap:13px;margin-right:auto}
.brand img{height:44px;background:#fff;border-radius:9px;padding:4px 6px}
.brand .bt{font:700 15px/1 var(--head)}
.brand .bs{display:block;font:600 9.5px/1.4 var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);margin-top:3px}
.menu{display:flex;gap:2px}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:6px;font:600 14px/1 var(--head);color:#E7EDFB;padding:12px 15px;border-radius:100px;transition:.3s}
.menu>li>a:hover{color:var(--orange-soft);background:rgba(255,255,255,.06)}
.menu .cx{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5}
.dd{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#0A1C52;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s}
.menu>li:hover .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;padding:11px 15px;border-radius:10px;font:500 14px var(--body);color:#D9E2F8;transition:.2s}
.dd a:hover{background:rgba(255,255,255,.07);color:#fff;padding-left:20px}
.nav-cta{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--head);padding:13px 22px;border-radius:100px;background:var(--orange);color:#fff;transition:.35s}
.nav-cta:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}
.burger{display:none;width:46px;height:46px;border-radius:12px;border:1.4px solid var(--line);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:20px;height:1.7px;background:#fff;transition:.3s}
@media(max-width:1080px){.menu,.nav-cta{display:none}.burger{display:flex}}
.mnav{position:fixed;inset:0;z-index:1000;background:var(--navy-2);padding:34px 40px;transform:translateX(100%);transition:transform .55s cubic-bezier(.76,0,.24,1);overflow:auto}
.mnav.open{transform:none}
.mnav .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.mnav .top .x{font-size:30px}
.mnav a.ml{display:block;font:700 clamp(28px,7vw,44px)/1.1 var(--head);padding:14px 0;border-bottom:1px solid var(--line)}
.mnav a.ml:hover{color:var(--orange)}

/* HERO */
.hero{position:relative;height:100svh;min-height:660px;overflow:hidden;display:flex;align-items:center}
.hero .layer{position:absolute;inset:-8%;background:url('../img/hero-cranes.jpg') center/cover;will-change:transform}
.hero .veil{position:absolute;inset:0;background:radial-gradient(120% 100% at 25% 75%,rgba(4,18,61,.25),rgba(4,18,61,.86)),linear-gradient(0deg,var(--navy) 2%,rgba(4,18,61,.25) 55%)}
.hero .grain{position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,99,255,.14),transparent 40%);mix-blend-mode:screen}
.hero .wrap{position:relative;z-index:3;width:100%}
.hero .eye{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 var(--head);letter-spacing:.24em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--line);padding:10px 18px;border-radius:100px;margin-bottom:30px;backdrop-filter:blur(6px)}
.hero .eye .dot{width:8px;height:8px;border-radius:50%;background:#39D98A;box-shadow:0 0 0 5px rgba(57,217,138,.2);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(57,217,138,.03)}}
.hero h1{font-size:clamp(52px,11vw,168px);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.88}
.hero h1 .l2{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.6)}
.hero h1 .l3 em{font-style:normal;color:var(--orange)}
.hero .sub{display:flex;gap:30px;align-items:flex-end;flex-wrap:wrap;margin-top:36px}
.hero .sub p{max-width:46ch;color:#D9E2F8;font-size:clamp(15px,1.3vw,18px)}
.mbtn{display:inline-flex;align-items:center;gap:12px;font:600 15px/1 var(--head);background:var(--orange);color:#fff;padding:19px 32px;border-radius:100px;position:relative;will-change:transform;transition:background .3s}
.mbtn.alt{background:#fff;color:var(--navy)}
.mbtn:hover{background:#fff;color:var(--navy)}
.hero .statbar{position:absolute;right:0;bottom:0;z-index:4;display:flex;background:rgba(4,18,61,.66);backdrop-filter:blur(14px);border-top-left-radius:22px;border-top:1px solid var(--line);border-left:1px solid var(--line);overflow:hidden}
.hero .statbar>div{padding:26px 38px;border-left:1px solid var(--line)}
.hero .statbar>div:first-child{border-left:none}
.hero .statbar .n{font:800 32px/1 var(--head)}.hero .statbar .n em{font-style:normal;color:var(--orange)}
.hero .statbar p{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-top:8px}
@media(max-width:900px){.hero .statbar{display:none}}

/* marquee stroke */
.mq{padding:40px 0;border-block:1px solid var(--line);overflow:hidden;background:var(--navy)}
.mq .track{display:flex;gap:60px;white-space:nowrap;width:max-content;font:800 clamp(42px,7vw,96px)/1 var(--head);text-transform:uppercase;will-change:transform}
.mq .track span{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.26);display:inline-flex;gap:60px;align-items:center}
.mq .track b{color:var(--orange);-webkit-text-stroke:0}
.mq .track i{font-style:normal;color:rgba(255,255,255,.14)}

/* section */
.section{padding:130px 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:13px;font:600 12px/1 var(--head);letter-spacing:.24em;text-transform:uppercase;color:var(--orange-soft);margin-bottom:24px}
.eyebrow::before{content:"";width:34px;height:1.5px;background:var(--orange)}
.disp{font-size:clamp(34px,5.4vw,80px);font-weight:800;letter-spacing:-.03em;line-height:.98;text-transform:uppercase}
.lead{font-size:clamp(16px,1.35vw,19px);color:var(--mist);max-width:58ch}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:60px}

/* service tall cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:3/4.1;display:flex;align-items:flex-end;padding:32px;isolation:isolate}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s cubic-bezier(.2,.8,.25,1)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(4,18,61,.94))}
.card:hover img{transform:scale(1.09)}
.card .idx{position:absolute;top:28px;left:32px;font:700 13px/1 var(--head);color:var(--orange);letter-spacing:.2em}
.card h3{font-size:26px;font-weight:700}
.card p{font-size:14px;color:#C9D6F5;max-height:0;overflow:hidden;opacity:0;transition:.5s cubic-bezier(.2,.8,.25,1)}
.card:hover p{max-height:120px;opacity:1;margin-top:10px}
.card .go{position:absolute;top:26px;right:28px;width:44px;height:44px;border-radius:50%;border:1.4px solid var(--line);display:grid;place-items:center;transition:.4s}
.card:hover .go{background:var(--orange);border-color:var(--orange);transform:rotate(-45deg)}
@media(max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cards{grid-template-columns:1fr}.card{aspect-ratio:4/3.6}.card p{max-height:120px;opacity:1;margin-top:10px}}

/* horizontal quay pin */
.quay{overflow:hidden;background:linear-gradient(180deg,var(--navy),#020C2B)}
.quay .head{padding:120px 0 60px}
.qpin{height:100vh;display:flex;align-items:center}
.qtrack{display:flex;gap:26px;padding:0 40px;will-change:transform}
.qpanel{flex:none;width:min(72vw,760px);height:72vh;border-radius:24px;overflow:hidden;position:relative;display:flex;align-items:flex-end}
.qpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qpanel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,18,61,.05),rgba(4,18,61,.92))}
.qpanel .cap{position:relative;z-index:2;padding:40px}
.qpanel .cap b{font:700 26px/1.1 var(--head);display:block}
.qpanel .cap small{display:block;color:var(--mist);font-size:14px;margin-top:10px;max-width:40ch}
.qintro{flex:none;width:40vw;min-width:300px;display:flex;flex-direction:column;justify-content:center;padding-right:20px}
.qcount{position:absolute;top:36px;right:44px;z-index:5;font:700 15px/1 var(--head);color:var(--mist)}
.qcount em{font-style:normal;color:var(--orange)}
@media(max-width:860px){.qpin{height:auto;display:block}.qtrack{flex-direction:column;transform:none!important;padding:0 24px 80px}.qpanel{width:100%;height:60vh}.qintro{width:100%;padding-bottom:30px}.qcount{display:none}}

/* digital port dashboard */
.digi{position:relative}
.digi .grid{display:grid;grid-template-columns:.95fr 1.15fr;gap:60px;align-items:center}
.glass{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:24px;overflow:hidden;backdrop-filter:blur(8px)}
.glass .gh{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line)}
.glass .gh b{font:700 16px/1 var(--head)}
.glass .live{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:#5CE59C}
.glass .live .d{width:8px;height:8px;border-radius:50%;background:#39D98A;box-shadow:0 0 0 4px rgba(57,217,138,.18);animation:pulse 1.8s infinite}
.logrow{display:grid;grid-template-columns:1.4fr .9fr .8fr auto;gap:14px;align-items:center;padding:18px 26px;border-bottom:1px solid var(--line);font-size:14px;transition:background .3s}
.logrow:last-child{border-bottom:none}
.logrow:hover{background:rgba(255,255,255,.03)}
.logrow .v{font:600 15px/1.2 var(--head)}
.logrow .t{color:var(--mist);font-size:12.5px}
.logrow .st{justify-self:end;padding:5px 12px;border-radius:100px;font:600 11px/1 var(--head);white-space:nowrap}
.st.g{background:rgba(57,217,138,.15);color:#5CE59C}
.st.a{background:rgba(255,138,30,.16);color:var(--orange-soft)}
.st.b{background:rgba(46,99,255,.18);color:#7FA4FF}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.kpi{border:1px solid var(--line);border-radius:18px;padding:26px}
.kpi .n{font:800 42px/1 var(--head)}.kpi .n em{font-style:normal;color:var(--orange)}
.kpi p{color:var(--mist);font-size:13px;margin-top:10px}
@media(max-width:900px){.digi .grid{grid-template-columns:1fr;gap:34px}.logrow{grid-template-columns:1.3fr auto;grid-auto-flow:row}.logrow .t,.logrow .ty{display:none}}

/* CTA */
.cta{position:relative;overflow:hidden;text-align:center;padding:150px 0}
.cta .bg{position:absolute;inset:-8%;background:url('../img/hero-sunburst.jpg') center/cover;will-change:transform}
.cta .veil{position:absolute;inset:0;background:rgba(4,18,61,.78)}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:clamp(40px,7vw,110px);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.94}
.cta .row{display:flex;gap:16px;justify-content:center;margin-top:40px;flex-wrap:wrap}

/* footer */
.foot{background:#020C2B;color:var(--mist);padding:90px 0 40px}
.foot .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding-bottom:60px;border-bottom:1px solid var(--line)}
.foot h5{color:#fff;font:600 13px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.foot a{display:block;padding:7px 0;font-size:14.5px;transition:.25s}.foot a:hover{color:#fff}
.foot .lede{color:#C7D0E6;font-size:15px;max-width:40ch;margin:20px 0}
.foot .bot{display:flex;justify-content:space-between;gap:20px;padding-top:30px;flex-wrap:wrap;font-size:13px}
.foot img.lg{height:46px;background:#fff;border-radius:9px;padding:5px 8px;margin-bottom:12px}
@media(max-width:820px){.foot .top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot .top{grid-template-columns:1fr}}

.switch{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1200;display:flex;gap:6px;background:rgba(2,12,43,.92);backdrop-filter:blur(14px);border:1px solid var(--line);padding:7px;border-radius:100px;box-shadow:0 20px 50px -20px rgba(0,0,0,.7)}
.switch a{font:600 12px/1 var(--head);color:var(--mist);padding:10px 16px;border-radius:100px;transition:.3s;white-space:nowrap}
.switch a:hover{color:#fff}.switch a.on{background:var(--orange);color:#fff}
@media(max-width:560px){.switch a .lbl{display:none}.switch a{padding:10px 13px}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.rvline>span{transform:none}}