:root{--blue:#0a3e8f;--blue2:#1d4ed8;--blue3:#2563eb;--dark:#0b1220;--line:#dbe7ff;--text:#0f172a;--muted:#475569;--wa:#22c55e}
*{box-sizing:border-box}body{margin:0;font-family:'Inter',sans-serif;color:var(--text);background:linear-gradient(180deg,#eef4ff 0%,#f7faff 35%,#ecf3ff 100%)}
.container{width:min(1140px,92%);margin:0 auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(9,21,43,.82);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.12)}
.nav-inner{min-height:74px;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.brand img{height:50px;max-width:260px;object-fit:contain}
.menu{display:flex;gap:1rem;align-items:center}.menu a{text-decoration:none;color:#e2e8f0;font-weight:600}.menu a:hover{color:#93c5fd}
.nav-pill{padding:.5rem .85rem;border:1px solid rgba(147,197,253,.6);border-radius:.65rem;background:rgba(255,255,255,.08)}
.menu-btn{display:none;background:none;border:0;font-size:1.5rem;color:#fff}
.social-top{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.contact-pill{display:inline-flex;gap:.35rem;align-items:center;padding:.38rem .58rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(147,197,253,.5);color:#e2e8f0;text-decoration:none;font-weight:600;font-size:.78rem;transition:.2s}
.contact-pill img{width:16px;height:16px}.contact-pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.16)}
.hero{background:radial-gradient(1200px 600px at 10% 0%,#23427d 0%,var(--dark) 60%);color:#fff;padding:4.2rem 0}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.2rem;align-items:center}
.eyebrow{font-weight:700;color:#93c5fd;margin:0 0 .6rem}h1{font-size:clamp(2rem,5vw,3.8rem);line-height:1.05;margin:.2rem 0 .8rem;font-weight:900}
.hero p{color:#dbeafe;max-width:60ch}.hero-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1rem}
.hero-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:1rem;border-radius:1rem;animation:floatIn .7s ease both}
.stack{display:grid;gap:.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1rem;border-radius:.65rem;text-decoration:none;font-weight:700;border:1px solid transparent;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.15)}
.btn-primary{background:linear-gradient(135deg,var(--blue2),var(--blue3));color:#fff}.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:#fff;color:var(--blue);border-color:#dbeafe}.btn-wa{background:var(--wa);color:#052e16}
.section{padding:3.3rem 0}.light{background:linear-gradient(180deg,#eaf2ff 0%,#f4f8ff 100%)}h2{font-size:clamp(1.6rem,3.4vw,2.8rem);margin:0 0 1rem}
.cards{display:grid;gap:1rem}.cards.four{grid-template-columns:repeat(4,1fr)}.cards.three{grid-template-columns:repeat(3,1fr)}.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%);border:1px solid var(--line);border-radius:.95rem;padding:1rem;box-shadow:0 10px 24px rgba(37,99,235,.08);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 38px rgba(37,99,235,.18);border-color:#93c5fd}
.card p{color:var(--muted)}
.reveal{animation:fadeUp .7s ease both}
.logo-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
.logo-strip span{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:.7rem;padding:.9rem;font-weight:800;color:#334155}
.industries span{flex-direction:column;gap:.25rem;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.industries span b{font-size:1.3rem}.industries span small{font-size:.78rem;letter-spacing:.04em}
.industries span:hover{transform:translateY(-5px);box-shadow:0 18px 30px rgba(37,99,235,.18);border-color:#93c5fd}
.service-highlight{position:relative;overflow:hidden}.service-media{height:120px;border-radius:.7rem;margin-bottom:.7rem;background-size:cover;background-position:center;border:1px solid #bfdbfe}
.service-cross{background-image:linear-gradient(0deg,rgba(7,22,50,.25),rgba(7,22,50,.25)),url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=1200&auto=format&fit=crop')}
.service-demurrage{background-image:linear-gradient(0deg,rgba(7,22,50,.28),rgba(7,22,50,.28)),url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?q=80&w=1200&auto=format&fit=crop')}
.badge{display:inline-block;background:#ef4444;color:#fff;font-size:.75rem;font-weight:800;padding:.25rem .5rem;border-radius:999px;letter-spacing:.03em}
.service-highlight ul{margin:.6rem 0 0;padding-left:1rem;color:#1e3a8a;font-weight:600}
.trace-section{background:linear-gradient(180deg,#f8fbff 0%,#edf4ff 100%)}.trace-lead{color:#334155}
.trace-wrap{position:relative;margin-top:1rem;padding-top:1.8rem}.trace-step{display:inline-flex;margin:.15rem 0 .55rem;padding:.25rem .55rem;border-radius:999px;background:#dbeafe;color:#1e3a8a;font-weight:800;font-size:.78rem}
.trace-line{height:10px;background:#dbeafe;border-radius:999px;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.trace-line::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 18px, rgba(255,255,255,0) 18px 36px);animation:waveMove 2.8s linear infinite}
.trace-progress{height:100%;width:0;background:linear-gradient(90deg,#2563eb,#1d4ed8);border-radius:999px;transition:width .45s cubic-bezier(.22,.61,.36,1)}
.ship{position:absolute;top:-2px;left:-4px;font-size:1.5rem;transition:left .45s cubic-bezier(.22,.61,.36,1);animation:shipBob 2.2s ease-in-out infinite}
.trace-points{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.45rem;margin-top:.8rem}
.trace-point{background:#fff;border:1px solid #bfdbfe;border-radius:.65rem;padding:.55rem .35rem;font-weight:700;font-size:.74rem;color:#1e3a8a;cursor:pointer;transition:all .2s ease;min-width:0}
.trace-point:hover,.trace-point.active{background:#1d4ed8;color:#fff;border-color:#1d4ed8;transform:translateY(-2px)}
.trace-info{margin-top:.75rem;background:#fff;border:1px solid #bfdbfe;border-radius:.7rem;padding:.7rem .8rem;color:#1e3a8a;font-weight:600}
.quote{background:linear-gradient(135deg,#0f3b88 0%,#1d4ed8 55%,#2563eb 100%);color:#fff}.quote-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:center}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.quote-grid input,.quote-grid select{width:100%;padding:.75rem;border:1px solid #bfdbfe;border-radius:.6rem;background:#f8fbff}.quote-grid button{grid-column:1/-1}
.footer{padding:1rem 0;border-top:1px solid rgba(255,255,255,.2);background:#0b1220;color:#e2e8f0}.footer-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-links a{color:#93c5fd;margin-left:.8rem;text-decoration:none;display:inline-flex;gap:.35rem;align-items:center}.footer-links img{width:16px;height:16px}
.wa-float{position:fixed;right:18px;bottom:18px;background:var(--wa);color:#052e16;padding:.8rem 1rem;border-radius:999px;font-weight:800;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.2)}

/* Portal UX */
.portal-bg{min-height:100vh;margin:0;background:linear-gradient(120deg,rgba(3,10,27,.82),rgba(10,28,68,.72)),url('https://images.unsplash.com/photo-1536895058696-a69b1c7ba34f?q=80&w=1800&auto=format&fit=crop') center/cover no-repeat fixed;color:#fff;--bgx:50%;--bgy:50%;background-position:var(--bgx) var(--bgy)}
.portal-main{min-height:100vh;display:grid;place-items:center;padding:1.25rem}
.portal-panel{width:min(560px,95%);background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(191,219,254,.45);box-shadow:0 24px 48px rgba(2,8,23,.45),0 0 0 1px rgba(147,197,253,.2) inset;border-radius:18px;padding:1.2rem;animation:panelIn .7s cubic-bezier(.22,.61,.36,1) both;position:relative;overflow:hidden}
.portal-panel::before{content:'';position:absolute;inset:-1px;background:linear-gradient(120deg,transparent,rgba(147,197,253,.25),transparent);transform:translateX(-100%);animation:panelSheen 3.2s ease-in-out infinite;pointer-events:none}
.portal-logo{height:58px;max-width:100%;margin-bottom:.4rem;background:#fff;border-radius:10px;padding:.28rem .45rem;object-fit:contain}
.portal-kicker{font-weight:800;letter-spacing:.08em;color:#bfdbfe;font-size:.76rem;margin:0}
.portal-panel h1{margin:.2rem 0 .5rem;color:#fff;font-size:1.9rem}
.portal-sub{color:#dbeafe;margin:0 0 .8rem}
.portal-form label{display:grid;gap:.35rem;font-weight:700;color:#dbeafe;font-size:.92rem}
.portal-form input{background:#fff;border:1px solid #bfdbfe;border-radius:.62rem;padding:.72rem .75rem;outline:none;transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease}
.portal-form input:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.18);transform:translateY(-1px)}
.portal-links{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:.8rem}
.portal-links a{color:#bfdbfe;text-decoration:none;font-weight:700}
.portal-links a:hover{text-decoration:underline}

@keyframes shipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes waveMove{from{background-position:0 0}to{background-position:72px 0}}@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes floatIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes panelIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes panelSheen{0%,25%{transform:translateX(-100%)}50%,100%{transform:translateX(120%)}}
@media(max-width:1100px){.trace-points{grid-template-columns:repeat(4,1fr)}.ship,.trace-line{display:none}}
@media(max-width:980px){.hero-grid,.cards.four,.cards.three,.cards.two,.quote-wrap,.quote-grid,.logo-strip,.trace-points{grid-template-columns:1fr}.menu-btn{display:block}.menu{display:none;position:absolute;top:74px;left:0;right:0;background:#0b1220;border-bottom:1px solid rgba(255,255,255,.14);padding:1rem 4%;flex-direction:column;align-items:flex-start}.menu.show{display:flex}.social-top{width:100%;justify-content:flex-start}.contact-pill{font-size:.72rem}.trace-wrap{padding-top:.5rem}.ship,.trace-line{display:none}.trace-step{margin-bottom:.6rem}}