@view-transition{navigation:auto}
:root{--ink:#041b1d;--line:#276164}
body{background:var(--ink)}
header{max-width:1600px;margin:auto;background:#031719;gap:24px}
main{overflow:clip}
.scene-hero{position:relative;isolation:isolate;overflow:hidden;background:none!important;min-height:660px}
.scene-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#021517ee 0%,#021517aa 36%,#02151711 80%),linear-gradient(0deg,#041b1d,transparent 22%);pointer-events:none}
.hero-image{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:center;z-index:-2;transform:translateY(var(--parallax-y,0px));will-change:transform}
.hero-copy{position:relative;width:68%;padding:72px 4vw 110px}
.hero h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:800;letter-spacing:-1.3px;text-transform:uppercase;font-size:clamp(38px,5.4vw,82px);line-height:1.04;text-shadow:0 2px 18px #03171988}
.hero p{max-width:610px;text-shadow:0 2px 9px #031719}
article{max-width:1440px;padding:20px 4vw 70px}
article>p{max-width:940px}
h2{font-family:Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:.2px;font-size:clamp(28px,3.4vw,48px);text-transform:uppercase}
h3{color:var(--lime)}
.field-card{min-height:280px;align-items:flex-end;background-image:linear-gradient(0deg,#031719 0%,transparent 85%),url('/assets/panoramas/03-directions.webp')!important;color:white;font-size:23px;border-bottom:2px solid var(--lime);transition:filter .2s,transform .2s}
.field-card.pink{background-image:linear-gradient(0deg,#031719,transparent 85%),url('/assets/panoramas/04-observatory.webp')!important;border-color:var(--pink)}
.field-card.orange{background-image:linear-gradient(0deg,#031719,transparent 85%),url('/assets/panoramas/05-cooperation.webp')!important;border-color:var(--orange)}
.field-card:hover{transform:translateY(-4px);color:var(--lemon)}
.button{transition:background .2s,box-shadow .2s,transform .2s;border:0}
.button:hover{background:var(--pink);box-shadow:0 4px 25px #f457ad30;transform:translateY(-2px)}
.button span{transition:transform .2s}.button:hover span{transform:translate(3px,-3px)}
.actions .button:nth-child(even){border:1px solid #7ca3a4}
.freeport-section{margin:55px 0;padding:28px 4vw 40px;background:linear-gradient(90deg,#071b1cef,#071b1cd9),url('/assets/panoramas/03-directions.webp') center/cover;border-block:1px solid var(--line)}
.freeport-section h2{margin-top:0;border:0;color:var(--lemon)}
.freeport-section h3{margin-bottom:8px}
.page-contact .hero{min-height:550px}.page-legal .hero{min-height:480px}
.page-contact form{padding:30px;background:#062427;border:1px solid var(--line)}
.page-legal article>p{max-width:850px}
.port-system{padding-block:25px;border-block:1px solid var(--line);margin-block:45px}
.system-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center}
.port-map{width:100%;height:auto;border:1px solid var(--line);background:#082d30;border-radius:4px}
.water{fill:#0c4953}.route{fill:none;stroke:#749b80;stroke-width:4;stroke-dasharray:8 5}
.map-node circle{fill:#123b3b;stroke:#91b4ad;stroke-width:2}.map-node text{fill:white;font:700 18px Arial}
.map-node.selected circle{fill:var(--lemon);stroke:var(--lemon)}.map-node.selected text{fill:#041b1d}
.node-controls{display:grid;gap:8px}.node-button{padding:12px 16px;text-align:start;background:#0c3133;color:var(--text);border:1px solid var(--line);cursor:pointer;min-height:48px;font-weight:700}
.node-button[aria-pressed=true]{color:#041b1d;background:var(--lime)}
#node-detail{padding:8px 24px 20px;border-inline-start:3px solid var(--pink);margin-block:22px;min-height:125px}
#node-detail h3{margin-top:20px}
[dir=rtl] .scene-hero::after{background:linear-gradient(270deg,#021517f0,#021517aa 45%,#02151722),linear-gradient(0deg,#041b1d,transparent 22%)}
[dir=rtl] .hero h1{font-family:Arial,sans-serif;letter-spacing:0;line-height:1.35}
html[lang=zh] .hero h1{font-family:Arial,sans-serif;line-height:1.25}
@media(max-width:900px){.hero-copy{width:88%}.scene-hero{min-height:650px}.system-layout{grid-template-columns:1fr}.node-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:clamp(36px,7vw,66px)}.field-grid{grid-template-columns:1fr}.field-card{min-height:270px}}
@media(max-width:600px){.hero-copy{width:100%;padding:35px 6vw 160px}.scene-hero{min-height:670px}.scene-hero::after,[dir=rtl] .scene-hero::after{background:linear-gradient(180deg,#021517e8,#021517a8 50%,#02151722 82%,var(--ink))}.hero-image{object-position:62% center}.hero h1{font-size:clamp(32px,8.8vw,49px)}.page-legal .hero,.page-contact .hero{min-height:510px}.hero p:first-of-type{font-size:20px}.freeport-section{padding-inline:20px}.page-contact form{padding:18px}.node-button{font-size:13px}.node-controls{gap:6px}h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-image{transform:none!important;will-change:auto}*,*::before,*::after{animation:none!important;transition:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}

.map-node{cursor:pointer}

article details{padding:20px;border:1px solid var(--line);margin-block:16px;overflow-wrap:anywhere}article details summary{cursor:pointer;font-weight:bold;color:var(--lime);min-height:44px}article details a{overflow-wrap:anywhere}