:root { --navy:#073653; --navy-deep:#062a43; --teal:#0f8277; --mint:#a9eee4; --ink:#17324d; --muted:#6f8194; --line:#dfe8ef; --surface:#fff; --bg:#f3f7fa; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:0 clamp(24px,5vw,76px); color:#fff; background:rgba(6,42,67,.96); box-shadow:0 8px 30px rgba(6,42,67,.16); backdrop-filter:blur(12px); }
.site-brand { display:flex; align-items:center; gap:12px; }
.brand-symbol { display:grid; place-items:center; width:43px; height:43px; border-radius:13px; color:var(--navy-deep); background:linear-gradient(145deg,#ecfffb,#91e5da); font-size:19px; font-weight:900; box-shadow:0 5px 17px rgba(0,0,0,.15); }
.brand-symbol.small { width:36px; height:36px; border-radius:10px; font-size:16px; }
.brand-text { display:flex; flex-direction:column; }.brand-text strong { font-size:19px; }.brand-text small { margin-top:3px; color:#a8d8d5; font-size:10px; letter-spacing:.08em; }
.site-nav { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:650; }.site-nav>a:not(.nav-login) { color:#c9dde5; }.site-nav>a:hover { color:#fff; }
.nav-login { display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:10px; color:#083c4d; background:var(--mint); }.nav-login span,.button span { transition:transform .18s; }.nav-login:hover span,.button:hover span { transform:translateX(3px); }
.home-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr); align-items:center; min-height:650px; padding:70px clamp(24px,7vw,105px) 80px; overflow:hidden; background:radial-gradient(circle at 75% 35%,rgba(35,184,169,.14),transparent 28%),linear-gradient(145deg,#eef8f8 0%,#f7fafc 47%,#eaf2f7 100%); }
.home-hero::after { content:""; position:absolute; right:-100px; bottom:-170px; width:550px; height:550px; border:1px solid rgba(15,130,119,.1); border-radius:50%; box-shadow:0 0 0 65px rgba(15,130,119,.025),0 0 0 135px rgba(15,130,119,.018); }
.hero-copy { position:relative; z-index:2; max-width:670px; }.eyebrow { display:block; margin-bottom:14px; color:#0c8c80; font-size:11px; font-weight:850; letter-spacing:.18em; }
.hero-copy h1 { margin:0; color:#102f49; font-size:clamp(38px,4.4vw,62px); line-height:1.18; letter-spacing:-.045em; }.hero-copy h1 em { color:#0f8277; font-style:normal; }
.hero-copy>p { max-width:620px; margin:24px 0 0; color:#63778a; font-size:16px; line-height:1.9; }
.hero-cta { display:flex; gap:13px; margin-top:32px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:49px; padding:0 22px; border-radius:12px; font-size:14px; font-weight:750; transition:transform .18s,box-shadow .18s; }.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff; background:linear-gradient(120deg,#0b4667,#0f8277); box-shadow:0 10px 25px rgba(9,75,91,.2); }.button-secondary { color:#1e4962; border:1px solid #cbdbe4; background:rgba(255,255,255,.72); }
.trust-row { display:flex; flex-wrap:wrap; gap:22px; margin-top:30px; color:#748697; font-size:11px; }.trust-row i { display:inline-grid; place-items:center; width:18px; height:18px; margin-right:5px; border-radius:50%; color:#0f8277; background:#dff4f0; font-style:normal; font-weight:900; }
.ocean-visual { position:relative; z-index:2; min-height:480px; }.data-card { border:1px solid rgba(211,226,235,.9); background:rgba(255,255,255,.9); box-shadow:0 24px 60px rgba(12,56,79,.13); backdrop-filter:blur(14px); }
.card-main { position:absolute; top:70px; right:4%; width:min(500px,92%); height:310px; padding:25px; border-radius:24px; transform:rotate(-1.5deg); }.card-head { display:flex; justify-content:space-between; align-items:center; color:#29475e; font-size:14px; font-weight:800; }.card-head b { padding:5px 9px; border-radius:8px; color:#0f8277; background:#e0f5f1; font-size:9px; letter-spacing:.08em; }
.chart-bars { display:flex; align-items:end; gap:15px; height:190px; padding:25px 8px 15px; border-bottom:1px solid #dce8ee; background:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,#edf2f5 44px); }.chart-bars i { flex:1; border-radius:7px 7px 2px 2px; background:linear-gradient(to top,#0d5470,#24b7a6); }.chart-bars i:nth-child(1){height:48%}.chart-bars i:nth-child(2){height:68%}.chart-bars i:nth-child(3){height:56%}.chart-bars i:nth-child(4){height:83%}.chart-bars i:nth-child(5){height:64%}.chart-bars i:nth-child(6){height:92%}.chart-bars i:nth-child(7){height:79%}
.chart-labels { display:flex; justify-content:space-around; padding-top:14px; color:#8798a8; font-size:10px; }.card-float { position:absolute; display:flex; align-items:center; gap:12px; min-width:205px; padding:15px; border-radius:15px; }.card-float b,.card-float small { display:block; }.card-float b { color:#24435a; font-size:12px; }.card-float small { margin-top:4px; color:#8293a3; font-size:9px; }.float-icon { display:grid; place-items:center; width:41px; height:41px; border-radius:12px; color:#0d7068; background:#ddf5f1; font-weight:900; }
.card-certificate { top:24px; right:0; }.card-certificate .float-icon { color:#a16b10; background:#fff1d7; }.card-crew { left:1%; bottom:35px; }.orbit { position:absolute; border:1px dashed rgba(15,130,119,.21); border-radius:50%; }.orbit-one { top:25px; right:-50px; width:480px; height:370px; transform:rotate(-14deg); }.orbit-two { top:100px; right:40px; width:350px; height:240px; transform:rotate(10deg); }.ocean-dot { position:absolute; width:10px; height:10px; border:2px solid #2bbbad; border-radius:50%; background:#effafa; box-shadow:0 0 0 6px rgba(43,187,173,.1); }.dot-one{top:80px;left:18%}.dot-two{right:8%;bottom:70px}.dot-three{left:12%;top:250px}
.capabilities { padding:90px clamp(24px,7vw,105px) 100px; background:#fff; }.section-heading { max-width:700px; margin:0 auto 45px; text-align:center; }.section-heading h2 { margin:0; color:#16334d; font-size:clamp(28px,3vw,40px); letter-spacing:-.025em; }.section-heading p { margin:16px 0 0; color:#758698; line-height:1.8; }
.capability-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1200px; margin:auto; }.capability-grid article { padding:27px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 28px rgba(25,55,75,.045); transition:transform .2s,box-shadow .2s,border-color .2s; }.capability-grid article:hover { transform:translateY(-4px); border-color:#b9ddd8; box-shadow:0 17px 35px rgba(25,75,82,.09); }.module-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:13px; font-weight:900; }.module-icon.blue{color:#23628f;background:#e5f1fa}.module-icon.cyan{color:#0a776e;background:#def5f1}.module-icon.amber{color:#99630e;background:#fff0d3}.module-icon.violet{color:#7052a3;background:#eee8fa}.module-icon.green{color:#397755;background:#e4f3e9}.module-icon.rose{color:#9c5264;background:#fae8ed}
.capability-grid h3 { margin:18px 0 9px; font-size:17px; }.capability-grid p { min-height:50px; margin:0; color:#718294; font-size:12px; line-height:1.75; }.capability-grid a { display:inline-block; margin-top:16px; color:#0f8277; font-size:11px; font-weight:800; }
.site-footer { display:flex; align-items:center; gap:35px; padding:28px clamp(24px,5vw,76px); color:#afc6d2; background:#062f49; font-size:11px; }.footer-brand { display:flex; align-items:center; gap:10px; margin-right:auto; color:#fff; }.footer-brand strong,.footer-brand small { display:block; }.footer-brand small { margin-top:3px; color:#8fbdc3; font-size:9px; }
@media(max-width:1000px){.home-hero{grid-template-columns:1fr;padding-top:60px}.ocean-visual{min-height:450px}.capability-grid{grid-template-columns:repeat(2,1fr)}.site-nav>a:not(.nav-login){display:none}}
@media(max-width:650px){.site-header{min-height:68px;padding:0 16px}.brand-text small{display:none}.site-nav{gap:8px}.nav-login{padding:10px 12px;font-size:11px}.home-hero{padding:48px 20px 55px}.hero-copy h1{font-size:38px}.hero-copy>p{font-size:14px}.hero-cta{flex-direction:column}.button{width:100%}.trust-row{gap:12px}.ocean-visual{min-height:370px}.card-main{top:65px;height:250px}.chart-bars{height:135px}.card-float{min-width:175px}.capabilities{padding:65px 20px}.capability-grid{grid-template-columns:1fr}.site-footer{align-items:flex-start;flex-direction:column;gap:12px}}