/* ==========================================================================
   Navirix Maritime Pvt Ltd — site stylesheet
   Navy + gold + white, maritime blue accents. Montserrat throughout.
   ========================================================================== */

:root {
  --navy: #16265a;
  --navy-2: #0f1c47;
  --navy-deep: #0a1230;
  --gold: #c0a36a;
  --gold-light: #e6d4a3;
  --gold-deep: #96773a;
  --blue: #357fb2;
  --sky: #8fc4e6;
  --ivory: #f7f9fc;
  --mist: #eaf1f8;
  --white: #fff;
  --ink: #16265a;
  --muted: #4c587c;
  --line: rgba(22, 38, 90, .12);
  --radius: 20px;
  --shadow-sm: 0 6px 20px rgba(22, 38, 90, .07);
  --shadow: 0 18px 48px rgba(22, 38, 90, .14);
  --shadow-lg: 0 30px 70px rgba(10, 18, 48, .28);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 18px; background: var(--gold); color: var(--navy); font-weight: 700; border-radius: 10px; transition: top .2s; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── Type helpers ───────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
.on-dark .eyebrow, .section--navy .eyebrow, .hero .eyebrow { color: var(--gold); }
.h2 { font-size: clamp(1.75rem, 3.6vw, 2.85rem); font-weight: 800; margin: 14px 0 16px; text-wrap: balance; }
.h3 { font-size: 1.15rem; font-weight: 800; }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.section--navy .lead, .hero .lead, .on-dark .lead { color: rgba(255, 255, 255, .78); }
.gold { background: linear-gradient(100deg, var(--gold-deep), var(--gold) 45%, var(--gold-light) 70%, var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero .gold, .section--navy .gold, .on-dark .gold { background-image: linear-gradient(100deg, var(--gold), var(--gold-light) 50%, var(--gold)); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.center .eyebrow::before { display: none; }
.center .eyebrow::after { content: ""; width: 34px; height: 2px; background: linear-gradient(270deg, var(--gold), transparent); }

/* ───────── Buttons ───────── */
.btn {
  --bg: var(--navy); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--fg); background: var(--bg);
  box-shadow: 0 12px 28px rgba(22, 38, 90, .25);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(22, 38, 90, .32); }
.btn .i { width: 1.15em; height: 1.15em; transition: transform .3s var(--ease); }
.btn:hover .i { transform: translateX(4px); }
.btn--gold { --bg: linear-gradient(135deg, #d6bd85, var(--gold) 55%, #a98a4c); --fg: var(--navy-deep); box-shadow: 0 14px 30px rgba(192, 163, 106, .38); }
.btn--ghost { --bg: rgba(255, 255, 255, .08); --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--ghost:hover { --bg: rgba(255, 255, 255, .16); }
.btn--outline { --bg: transparent; --fg: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn--outline:hover { --bg: var(--navy); --fg: #fff; }
.btn--sm { padding: 11px 20px; font-size: .72rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--gold-deep); }
.link-arrow .i { transition: transform .3s var(--ease); }
.link-arrow:hover .i { transform: translateX(5px); }
.section--navy .link-arrow { color: var(--gold); }

/* ───────── Header ───────── */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 200; transition: background .35s, box-shadow .35s, backdrop-filter .35s; }
.nav-wrap.container { width: min(1480px, 100% - var(--gutter) * 2); }
.nav-wrap { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: height .35s var(--ease); }
.brand { display: block; flex: none; }
.brand img { height: 46px; width: auto; transition: height .35s var(--ease); }
.brand .logo-dark { display: none; }
.nav { display: flex; align-items: center; gap: clamp(12px, 1.35vw, 26px); }
.nav a { position: relative; padding: 8px 0; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #fff; white-space: nowrap; transition: color .25s; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover { color: var(--gold-light); }
.nav .btn { padding: 11px 20px; font-size: .68rem; color: var(--navy-deep); margin-left: 4px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-cta { display: none; white-space: nowrap; }
.burger { display: none; width: 46px; height: 46px; border: 1.5px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 14px; cursor: pointer; place-items: center; }
.burger .i { width: 22px; height: 22px; }
.burger .i-x { display: none; }
.site-header.is-scrolled { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 8px 30px rgba(22, 38, 90, .1); }
.site-header.is-scrolled .nav-wrap { height: 68px; }
.site-header.is-scrolled .brand img { height: 40px; }
.site-header.is-scrolled .logo-light { display: none; }
.site-header.is-scrolled .logo-dark { display: block; }
.site-header.is-scrolled .nav a:not(.btn) { color: var(--navy); }
.site-header.is-scrolled .nav a:hover { color: var(--gold-deep); }
.site-header.is-scrolled .burger { color: var(--navy); border-color: var(--line); background: #fff; }
body.menu-open .site-header { transition: none; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .logo-light { display: block !important; }
body.menu-open .logo-dark { display: none !important; }
body.menu-open .burger { color: #fff !important; border-color: rgba(255, 255, 255, .4) !important; background: rgba(255, 255, 255, .1) !important; }
body.menu-open .burger .i-menu { display: none; }
body.menu-open .burger .i-x { display: block; }

@media (max-width: 1299px) {
  .burger { display: grid; }
  .header-cta { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
    padding: 100px 36px 40px;
    background: radial-gradient(90% 60% at 100% 0, rgba(53, 127, 178, .35), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .35s, transform .45s var(--ease), visibility .35s;
  }
  body.menu-open .nav { opacity: 1; visibility: visible; transform: none; }
  body.menu-open { overflow: hidden; }
  .nav a { font-size: clamp(1.15rem, 4.4vw, 1.5rem); letter-spacing: .04em; padding: 12px 0; }
  .nav a:not(.btn) { color: #fff !important; }
  .nav .btn { margin-top: 18px; font-size: .85rem; padding: 16px 30px; }
}
@media (min-width: 1300px) { .header-actions .header-cta { display: none; white-space: nowrap; } }

/* ───────── Hero ───────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: calc(var(--header-h) + clamp(36px, 7vh, 80px)) 0 clamp(110px, 13vw, 170px);
  background:
    radial-gradient(60% 55% at 78% 40%, rgba(53, 127, 178, .34), transparent 70%),
    radial-gradient(40% 40% at 8% 90%, rgba(192, 163, 106, .16), transparent 70%),
    linear-gradient(165deg, #1b2f6e 0%, var(--navy) 38%, var(--navy-deep) 100%);
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(143, 196, 230, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 196, 230, .08) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 65% 45%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 75% 70% at 65% 45%, #000 15%, transparent 75%); }
.hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.7rem); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; margin: 20px 0 22px; text-wrap: balance; }
.hero .lead { margin-bottom: 34px; }
.hero--page { padding-bottom: clamp(100px, 11vw, 140px); }
.hero--page h1 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); }
.hero--slim .hero__grid { grid-template-columns: 1fr; }
.hero--slim h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(50px, 7vw, 100px); color: var(--ivory); pointer-events: none; }
.hero__wave svg { width: 100%; height: 100%; }
.hero__wave--white { color: #fff; }
.hero__wave--top { top: -1px; bottom: auto; transform: scaleY(-1); }
.crumbs { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 8px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold-light); }
.crumbs span[aria-hidden] { margin: 0 8px; color: var(--gold); }
.hero__points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .8); }
.hero__points li { display: inline-flex; align-items: center; gap: 8px; }
.hero__points .i { color: var(--gold); }

/* 3D scene wrappers */
.scene { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; margin-inline: auto; perspective: 1400px; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.scene canvas:active { cursor: grabbing; }
.depth { transform: translate3d(calc(var(--px, 0) * var(--depth, 10) * 1px), calc(var(--py, 0) * var(--depth, 10) * 1px), 0); transition: transform .25s ease-out; }
.chip3d { position: absolute; z-index: 2; }
.chip3d > div { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: #fff; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 20px 40px rgba(5, 10, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: float 6s ease-in-out infinite; animation-delay: var(--fd, 0s); }
.chip3d .medal { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--gold); }
.chip3d .medal .i { width: 16px; height: 16px; }

/* Container stack (CSS 3D) */
.stack { --L: 190px; --H: 48px; --D: 78px; position: absolute; left: 50%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(var(--ry, 35deg)); }
.cbox { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: translate3d(var(--x), var(--y), var(--z)); }
.cbox .f { position: absolute; left: 0; top: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-color: var(--c); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18); overflow: hidden; }
.cbox .f-front, .cbox .f-back { width: var(--L); height: var(--H); background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .17) 0 2px, transparent 2px 8px), linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .16)); }
.cbox .f-left, .cbox .f-right { width: var(--D); height: var(--H); background-image: linear-gradient(90deg, transparent calc(50% - 1px), rgba(0, 0, 0, .35) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 6px), linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .28)); }
.cbox .f-top { width: var(--L); height: var(--D); background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 8px), linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08)); }
.cbox .f-front { transform: translate(-50%, -50%) translateZ(calc(var(--D) / 2)); }
.cbox .f-back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--D) / 2)); filter: brightness(.8); }
.cbox .f-right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--L) / 2)); filter: brightness(.86); }
.cbox .f-left { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--L) / 2)); filter: brightness(.78); }
.cbox .f-top { transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--H) / 2)); }
.cbox .f-bottom { width: var(--L); height: var(--D); transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--H) / 2)); background-color: #0a1230; }
.cbox .f b { font-size: 9px; font-weight: 800; letter-spacing: .34em; color: var(--t, rgba(255, 255, 255, .88)); text-indent: .34em; }
.stack-shadow { position: absolute; left: 50%; top: 79%; width: 80%; height: 16%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(3, 8, 24, .55), transparent); filter: blur(6px); }
.deck-plate { position: absolute; left: 0; top: 0; width: calc(var(--L) * 2.5); height: calc(var(--D) * 4.5); transform: translate(-50%, -50%) translateY(calc(var(--H) * 1.5 + 3px)) rotateX(90deg); background: linear-gradient(135deg, rgba(53, 127, 178, .55), rgba(22, 38, 90, .8)); border: 2px solid rgba(143, 196, 230, .55); border-radius: 10px; box-shadow: 0 0 60px rgba(53, 127, 178, .4); }

/* 3D compass */
.compass3d { position: absolute; inset: 4%; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-8deg); }
.compass3d .plate { position: absolute; inset: 0; animation: spinz 90s linear infinite; }
.compass3d .plate--2 { inset: 20%; animation-duration: 60s; animation-direction: reverse; transform: translateZ(34px); opacity: .9; }
.compass3d .plate--3 { inset: 38%; animation-duration: 45s; transform: translateZ(64px); opacity: .95; }
.compass3d .plate img { width: 100%; height: 100%; }
.compass3d .glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(53, 127, 178, .5), transparent); transform: translateZ(-20px); }
.medallion { position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; margin: -13.5% 0 0 -13.5%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, #e9eff8 70%); box-shadow: 0 30px 50px rgba(3, 8, 24, .55), 0 0 0 6px rgba(192, 163, 106, .85), 0 0 60px rgba(143, 196, 230, .35); animation: float 6s ease-in-out infinite; }
.medallion img { width: 62%; height: auto; }
.floor-shadow { position: absolute; left: 50%; bottom: 14%; width: 46%; height: 8%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(3, 8, 24, .55), transparent); filter: blur(8px); }

/* 3D ring carousel */
.ring-wrap { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; }
.ring-wrap { transform: rotateX(-9deg); }
.ring { --r: 290px; --n: 8; position: relative; width: calc(var(--r) * .58); height: calc(var(--r) * .74); transform-style: preserve-3d; animation: ringspin 46s linear infinite; }
.ring-wrap:hover .ring { animation-play-state: paused; }
.rc { position: absolute; inset: 0; transform: rotateY(calc(var(--i) * (360deg / var(--n)))) translateZ(var(--r)); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px; text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 22px; color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 25px 50px rgba(3, 8, 24, .4), inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rc .medal { width: 52px; height: 52px; }
.ring-floor { position: absolute; left: 50%; bottom: 8%; width: 70%; height: 10%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(3, 8, 24, .5), transparent); filter: blur(8px); }

/* logo medallion for About */
.about-orb { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; }

/* ───────── Sections ───────── */
.section { position: relative; padding-block: clamp(70px, 9vw, 122px); }
.section--white { background: #fff; }
.section--mist { background: var(--mist); }
.section--navy { color: #fff; background: radial-gradient(70% 60% at 90% 0, rgba(53, 127, 178, .3), transparent 65%), radial-gradient(50% 50% at 0 100%, rgba(192, 163, 106, .14), transparent 60%), linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 100%); overflow: hidden; isolation: isolate; }
.section--navy::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(143, 196, 230, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 196, 230, .06) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 10%, transparent 75%); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head.center { margin-inline: auto; }
.deco-compass { position: absolute; z-index: -1; width: min(620px, 90vw); aspect-ratio: 1; opacity: .06; animation: spin 240s linear infinite; pointer-events: none; }
.section--navy .deco-compass { opacity: .09; }
.deco-compass.r { right: -220px; top: -160px; }
.deco-compass.l { left: -240px; bottom: -220px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.split--wide { grid-template-columns: 1.15fr .85fr; }
.split.flip > :first-child { order: 2; }
.prose p { color: var(--muted); }
.prose p + p { margin-top: 1.1em; }
.section--navy .prose p { color: rgba(255, 255, 255, .78); }

/* value strip */
.strip { background: var(--ivory); position: relative; z-index: 1; }
.strip__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; padding: 26px 0; font-size: .78rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--navy); }
.strip__row li { display: inline-flex; align-items: center; gap: 14px; }
.strip__row li::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* ───────── Cards, tiles ───────── */
.grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.medal { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--gold); background: radial-gradient(circle at 30% 25%, #26397f, var(--navy) 65%); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--gold), 0 10px 24px rgba(22, 38, 90, .25); }
.medal .i { width: 26px; height: 26px; }
.section--navy .medal { box-shadow: 0 0 0 3px var(--navy-2), 0 0 0 4.5px var(--gold), 0 10px 24px rgba(0, 0, 0, .3); }

[data-tilt] { transform-style: preserve-3d; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .4s, border-color .4s; will-change: transform; }
[data-tilt].is-tilting { transition: transform .08s linear, box-shadow .4s, border-color .4s; }
[data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .55), transparent 55%); transition: opacity .4s; mix-blend-mode: soft-light; }
[data-tilt]:hover::after { opacity: 1; }
.pop { transform: translateZ(34px); }

.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 2.4vw, 34px); box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow); border-color: rgba(192, 163, 106, .7); }
.card h3 { font-size: 1.08rem; font-weight: 800; margin: 20px 0 8px; }
.card p { font-size: .92rem; color: var(--muted); margin: 0; }
.card--glass { color: #fff; background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .18); box-shadow: 0 20px 44px rgba(3, 8, 24, .3), inset 0 1px 0 rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.card--glass:hover { border-color: rgba(192, 163, 106, .8); box-shadow: 0 30px 60px rgba(3, 8, 24, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.card--glass p { color: rgba(255, 255, 255, .74); }

.tile { display: flex; flex-direction: column; padding: 30px 28px 28px; text-decoration: none; }
.tile__num { position: absolute; right: 22px; top: 12px; font-size: 4.4rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(22, 38, 90, .1); }
.tile h3 { font-size: 1.12rem; text-transform: uppercase; letter-spacing: .04em; }
.tile p { flex: 1; margin-bottom: 22px; }
.tile::before { content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, var(--gold), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.tile:hover::before { transform: scaleX(1); }

.vm { display: grid; gap: 18px; }
.vm .card { display: flex; gap: 20px; align-items: flex-start; }
.vm .card h3 { margin-top: 0; }

.checks { display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--muted); }
.checks .i { margin-top: .22em; color: var(--gold-deep); width: 1.15em; height: 1.15em; }
.section--navy .checks li { color: rgba(255, 255, 255, .8); }
.section--navy .checks .i { color: var(--gold); }

/* audience cards */
.aud { display: flex; flex-direction: column; gap: 6px; text-decoration: none; min-height: 100%; }
.aud small { font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.aud h3 { margin: 12px 0 8px; font-size: 1.1rem; }
.aud .link-arrow { margin-top: auto; padding-top: 18px; align-self: flex-start; }
.tile .link-arrow { align-self: flex-start; }

/* steps / flow */
.steps { --n: 6; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 14px; counter-reset: s; }
.steps::before { content: ""; position: absolute; top: 33px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; background: repeating-linear-gradient(90deg, var(--gold) 0 9px, transparent 9px 18px); opacity: .7; }
.steps--fill::after { content: ""; position: absolute; top: 31px; left: calc(50% / var(--n)); width: 10px; height: 6px; border-radius: 6px; background: var(--gold); box-shadow: 0 0 14px 4px rgba(192, 163, 106, .7); animation: travel 5s ease-in-out infinite; }
.step { position: relative; text-align: center; padding: 0 6px; }
.step .medal { position: relative; z-index: 1; width: 66px; height: 66px; margin: 0 auto 16px; }
.step h3 { font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; }
.step p { font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.55; }
.step .n { position: absolute; top: -8px; left: calc(50% + 22px); z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: var(--navy-deep); background: var(--gold); box-shadow: 0 0 0 3px var(--ivory); }
.section--white .step .n { box-shadow: 0 0 0 3px #fff; }
.section--navy .step p { color: rgba(255, 255, 255, .72); }
.section--navy .step .n { box-shadow: 0 0 0 3px var(--navy-2); }

/* service blocks (logistics) */
.svc { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.svc h3 { margin: 4px 0 8px; }

/* sectors flip cards */
.flip-card { position: relative; height: 210px; perspective: 900px; cursor: default; }
.flip-card__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.flip-card:hover .flip-card__in, .flip-card:focus-within .flip-card__in { transform: rotateY(180deg); }
.flip-card .face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 20px; border-radius: var(--radius); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-card .front { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.flip-card .front h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.flip-card .back { transform: rotateY(180deg); color: #fff; background: linear-gradient(150deg, var(--navy), var(--navy-deep)); border: 1px solid rgba(192, 163, 106, .6); font-size: .86rem; }
.flip-card .back p { margin: 0; color: rgba(255, 255, 255, .85); }
.flip-card .back strong { color: var(--gold); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }

/* note / notice */
.note { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; border-radius: 16px; font-size: .88rem; color: var(--muted); background: #fff; border: 1px dashed rgba(192, 163, 106, .9); }
.note .i { color: var(--gold-deep); margin-top: .2em; }
.section--navy .note { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .06); border-color: rgba(192, 163, 106, .6); }
.section--navy .note .i { color: var(--gold); }
.note strong { color: var(--navy); }
.section--navy .note strong { color: #fff; }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); transition: border-color .3s, box-shadow .3s; }
.faq details[open] { border-color: rgba(192, 163, 106, .8); box-shadow: var(--shadow); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; font-weight: 700; font-size: .98rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--gold-deep); transition: transform .35s var(--ease); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq .ans { padding: 0 24px 22px; color: var(--muted); font-size: .94rem; }
.faq .ans p:last-child { margin: 0; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #fff; padding: clamp(50px, 7vw, 86px) clamp(24px, 5vw, 70px); border-radius: 32px; background: radial-gradient(60% 90% at 85% 0, rgba(53, 127, 178, .45), transparent 65%), linear-gradient(140deg, #1d3277, var(--navy) 45%, var(--navy-deep)); box-shadow: var(--shadow-lg); }
.cta-band::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -140px; width: 420px; aspect-ratio: 1; background: url("../images/compass-light.svg") center/contain no-repeat; opacity: .16; animation: spin 200s linear infinite; }
.cta-band::after { content: ""; position: absolute; z-index: -1; left: -100px; bottom: -160px; width: 380px; aspect-ratio: 1; background: url("../images/compass-light.svg") center/contain no-repeat; opacity: .1; animation: spin 240s linear infinite reverse; }
.cta-band h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 800; margin-bottom: 14px; text-wrap: balance; }
.cta-band p { max-width: 58ch; margin: 0 auto 30px; color: rgba(255, 255, 255, .8); }
.cta-band .btn-row { justify-content: center; }

/* trade flow visual */
.route-visual { position: relative; padding: 34px; border-radius: 28px; background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .16); box-shadow: var(--shadow-lg); }

/* ───────── Forms ───────── */
.tabs { display: none; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.js .tabs { display: flex; }
.js .tabpanel + .tabpanel { margin-top: 0; }
.tabpanel + .tabpanel { margin-top: 28px; }
.contact-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.contact-layout aside { position: sticky; top: 110px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: all .3s var(--ease); }
.tab:hover { border-color: var(--gold); transform: translateY(-2px); }
.tab[aria-selected="true"] { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow: 0 12px 26px rgba(22, 38, 90, .28); }
.tab[aria-selected="true"] .i { color: var(--gold); }
.js .tabpanel[hidden] { display: none; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: clamp(24px, 3.4vw, 46px); box-shadow: var(--shadow); }
.form-card h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; }
.form-card > p { color: var(--muted); font-size: .94rem; margin-bottom: 26px; }
.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label:not(.consent) { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.field label:not(.consent) em { color: var(--gold-deep); font-style: normal; }
.field input:not([type="checkbox"]), .field select, .field textarea { width: 100%; padding: 14px 16px; font: inherit; font-size: .95rem; color: var(--navy); background: var(--ivory); border: 1.5px solid transparent; border-radius: 14px; outline: 0; transition: border-color .25s, box-shadow .25s, background .25s; }
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316265a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus { background: #fff; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(192, 163, 106, .22); }
.field input:not([type="checkbox"]):user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: #c0392b; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .84rem; color: var(--muted); }
.consent input { margin-top: .3em; width: 18px; height: 18px; accent-color: var(--navy); flex: none; }
.consent a { color: var(--navy); font-weight: 700; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }
.form-msg { margin-top: 18px; padding: 14px 18px; border-radius: 14px; font-size: .9rem; font-weight: 600; background: var(--mist); color: var(--navy); }
.form-msg[hidden] { display: none; }
.form-msg p { margin: 0; }
.form-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; font-size: .84rem; font-weight: 600; }
.form-alt a, .form-alt button { padding: 8px 16px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .78rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.form-alt a:hover, .form-alt button:hover { background: rgba(0, 0, 0, .06); }
.form-msg.ok { background: #e7f4ec; color: #17603a; }
.form-msg.err { background: #fbeaea; color: #8c2020; }
.hp { position: absolute; left: -9999px; }

.contact-list { display: grid; gap: 22px; }
.contact-list li { display: flex; gap: 18px; align-items: flex-start; }
.contact-list h3 { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 800; margin-bottom: 4px; }
.contact-list a, .contact-list span { font-size: 1.02rem; font-weight: 600; text-decoration: none; }
.contact-list a:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 4px; }

/* legal */
.legal-doc { max-width: 820px; margin-inline: auto; }
.legal-doc h2 { font-size: 1.35rem; font-weight: 800; margin: 2.2em 0 .6em; }
.legal-doc p, .legal-doc li { color: var(--muted); font-size: .98rem; }
.legal-doc ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 6px; margin-bottom: 1em; }
.legal-doc a { color: var(--navy); font-weight: 700; }
.legal-meta { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }

/* empty state */
.empty { text-align: center; padding: 44px 24px; border-radius: 24px; background: #fff; border: 1.5px dashed rgba(192, 163, 106, .8); }
.empty .medal { margin: 0 auto 18px; }
.empty h3 { font-size: 1.15rem; margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 52ch; margin: 0 auto; }

/* ───────── Sea strip + footer ───────── */
.sea { position: relative; height: 150px; margin-top: -1px; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory) 45%, var(--mist) 100%); }
.sea--white { background: linear-gradient(180deg, #fff 0%, #fff 45%, var(--mist) 100%); }
.wave { position: absolute; left: 0; bottom: -1px; height: 140px; background-repeat: repeat-x; background-position: 0 100%; will-change: transform; }
.wave--back { right: -1800px; background-image: url("../images/wave-back.svg"); background-size: 1800px 140px; animation: drift-back 38s linear infinite; }
.wave--mid { right: -1400px; background-image: url("../images/wave-mid.svg"); background-size: 1400px 140px; animation: drift-mid 26s linear infinite; }
.wave--front { right: -1200px; background-image: url("../images/wave-front.svg"); background-size: 1200px 140px; animation: drift-front 17s linear infinite; }
.ship-track { position: absolute; left: 0; bottom: 34px; width: 230px; animation: sail 64s linear infinite; animation-delay: -18s; will-change: transform; }
.ship { animation: bob 5.5s ease-in-out infinite; transform-origin: 50% 90%; filter: drop-shadow(0 6px 8px rgba(12, 23, 56, .25)); }

.site-footer { color: #d9e1f2; background: var(--navy); font-size: .9rem; }
.foot { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr; gap: 40px clamp(24px, 4vw, 56px); padding-block: 14px 48px; }
.foot__brand img { width: min(280px, 100%); height: auto; margin-bottom: 18px; }
.foot__brand p { max-width: 34ch; color: #aebbd9; }
.foot h3 { margin: 0 0 16px; font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.foot li + li { margin-top: 9px; }
.foot a { text-decoration: none; color: #d9e1f2; transition: color .25s; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot address { font-style: normal; display: grid; gap: 12px; }
.foot .row { display: flex; gap: 12px; align-items: flex-start; }
.foot .row .i { margin-top: .22em; color: var(--gold); width: 1.05em; height: 1.05em; }
.legal-bar { border-top: 1px solid rgba(255, 255, 255, .12); }
.legal-bar .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 26px; padding-block: 20px calc(22px + env(safe-area-inset-bottom)); font-size: .78rem; color: #93a3c9; }
.legal-bar nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legal-bar a { text-decoration: none; }
.legal-bar a:hover { color: #fff; }
.legal-bar b { color: var(--gold); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.float-cta { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: none; gap: 10px; }
.float-cta a { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; background: #1fa855; box-shadow: 0 12px 28px rgba(0, 0, 0, .3); transition: transform .3s var(--ease); }
.float-cta a:hover { transform: scale(1.08); }
.float-cta .i { width: 26px; height: 26px; }
.float-cta.on { display: flex; }

/* ───────── Motion ───────── */
.js .reveal { opacity: 0; translate: 0 34px; scale: .97; transition: opacity .9s var(--ease), translate .9s var(--ease), scale .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.in { opacity: 1; translate: 0 0; scale: 1; }
.js .reveal-l { opacity: 0; translate: -40px 0; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal-l.in { opacity: 1; translate: 0 0; }
.js .reveal-r { opacity: 0; translate: 40px 0; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal-r.in { opacity: 1; translate: 0 0; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinz { to { transform: rotate(360deg); } }
@keyframes ringspin { from { transform: translateZ(calc(var(--r) * -1)) rotateY(0deg); } to { transform: translateZ(calc(var(--r) * -1)) rotateY(-360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes travel { 0% { left: calc(50% / var(--n)); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 50% / var(--n) - 10px); opacity: 0; } }
@keyframes sail { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 60px)); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1.2deg); } }
@keyframes drift-back { to { transform: translateX(-1800px); } }
@keyframes drift-mid { to { transform: translateX(-1400px); } }
@keyframes drift-front { to { transform: translateX(-1200px); } }

/* ───────── Responsive ───────── */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-layout aside { position: static; }
  .hero__grid, .split, .split--wide { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .scene { max-width: 460px; }
  .hero__grid .scene { margin-top: 10px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { --n: 1; grid-template-columns: 1fr; gap: 26px; }
  .steps::before { left: 32px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--gold) 0 9px, transparent 9px 18px); }
  .steps--fill::after { display: none; }
  .step { display: grid; grid-template-columns: 66px 1fr; gap: 18px; text-align: left; align-items: start; padding: 0; }
  .step .medal { margin: 0; }
  .step .n { top: -6px; left: 46px; }
  .step > div { padding-top: 6px; }
}
@media (max-width: 640px) {
  :root { --header-h: 72px; }
  .brand img { height: 34px; }
  .header-actions { gap: 8px; }
  .nav-wrap { gap: 10px; }
  .burger { width: 42px; height: 42px; border-radius: 12px; }
  .grid--2, .grid--3, .grid--4, .fields { grid-template-columns: 1fr; }
  .scene { max-width: 360px; }
  .stack { --L: 140px; --H: 36px; --D: 58px; }
  .ring { --r: 190px; }
  .rc { font-size: .66rem; }
  .rc .medal { width: 42px; height: 42px; }
  .chip3d > div { font-size: .64rem; padding: 7px 11px 7px 7px; }
  .chip3d .medal { width: 26px; height: 26px; }
  .sea { height: 120px; }
  .ship-track { width: 170px; bottom: 26px; }
  .foot { grid-template-columns: 1fr; gap: 30px; }
  .legal-bar .container { flex-direction: column; }
  .btn { padding: 14px 22px; }
  .header-cta { padding: 10px 14px; font-size: .64rem; letter-spacing: .06em; }
  .flip-card { height: 190px; }
  .tabs { gap: 8px; }
  .tab { padding: 10px 14px; font-size: .68rem; }
}
@media (max-width: 400px) {
  .header-cta { display: none; }
}
@media (hover: none) {
  [data-tilt] { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal, .js .reveal-l, .js .reveal-r { opacity: 1; translate: none; scale: 1; }
  .ship-track { transform: translateX(28vw); }
}
@media print {
  .site-header, .sea, .cta-band, .float-cta { display: none !important; }
  .hero { color: #000; background: none; padding-top: 20px; }
}