:root {
  --navy: #091827;
  --navy-deep: #05101b;
  --blue: #197da4;
  --cyan: #9de5e7;
  --orange: #ef7047;
  --cream: #f5f2eb;
  --sand: #e8e1d5;
  --ink: #142332;
  --muted: #65717c;
  --line: rgba(20,35,50,.16);
  --sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.scroll-progress { background: var(--orange); height: 3px; left: 0; position: fixed; top: 0; transition: width .1s linear; width: 0; z-index: 20; }
.site-header { align-items: center; background: rgba(5,16,27,.88); color: #fff; display: flex; height: 74px; justify-content: space-between; padding: 0 clamp(22px,6vw,96px); position: absolute; width: 100%; z-index: 10; }
.site-header.is-scrolled { background: rgba(5,16,27,.98); box-shadow: 0 8px 25px rgba(0,0,0,.14); position: fixed; }
.brand { align-items: center; display: inline-flex; gap: 11px; min-width: max-content; }
.brand b { display: block; font-size: 17px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.brand small { color: rgba(255,255,255,.45); display: block; font-size: 8px; letter-spacing: .16em; margin-top: 5px; }
.brand-mark { align-items: center; background: var(--orange); color: var(--navy); display: inline-flex; font-size: 18px; font-weight: 800; height: 34px; justify-content: center; width: 34px; }
.main-nav { display: flex; gap: clamp(18px,3vw,42px); margin-left: auto; margin-right: clamp(25px,4vw,66px); }
.main-nav a, .header-action { color: rgba(255,255,255,.66); font-size: 12px; letter-spacing: .08em; transition: color .2s ease; }
.main-nav a:hover, .main-nav a.is-active, .header-action:hover { color: #fff; }
.main-nav a.is-active { border-bottom: 1px solid var(--orange); padding-bottom: 7px; }
.header-action { border-bottom: 1px solid var(--orange); color: #fff; padding-bottom: 6px; }
.header-action span, .text-link span, .inline-cta span, .contact-link span { color: var(--orange); margin-left: 7px; }
.menu-toggle { background: none; border: 0; display: none; height: 40px; padding: 8px; width: 40px; }
.menu-toggle span { background: #fff; display: block; height: 1px; margin: 5px 0; transition: transform .2s ease; width: 24px; }
.nav-open .menu-toggle span:first-child { transform: translateY(3px) rotate(45deg); }.nav-open .menu-toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }
.hero { background: var(--navy); color: #fff; min-height: min(830px,100vh); overflow: hidden; position: relative; }
.hero-backdrop, .hero-grid { inset: 0; position: absolute; }.hero-backdrop { overflow: hidden; }
.hero-grid { background-image: linear-gradient(rgba(157,229,231,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(157,229,231,.07) 1px, transparent 1px); background-size: 64px 64px; left: 52%; opacity: .8; transform: perspective(850px) rotateY(-14deg); transform-origin: left center; }
.hero::after { background: linear-gradient(90deg,var(--navy) 15%,rgba(9,24,39,.9) 56%,rgba(9,24,39,.36)); content: ""; inset: 0; position: absolute; }
.glow { border: 1px solid rgba(157,229,231,.14); border-radius: 50%; position: absolute; }.glow-one { height: 650px; right: -90px; top: 70px; transform: rotate(28deg) skewX(-22deg); width: 560px; }.glow-two { border-color: rgba(239,112,71,.28); height: 330px; right: 8%; top: 220px; transform: rotate(-27deg) skewX(-18deg); width: 510px; }
.hero-inner { align-items: center; display: grid; gap: 40px; grid-template-columns: minmax(420px,1fr) minmax(390px,.9fr); margin: 0 auto; max-width: 1400px; min-height: 830px; padding: 120px clamp(24px,6vw,96px) 75px; position: relative; z-index: 2; }.hero-copy-block { max-width: 620px; }
.eyebrow, .section-kicker { font-size: 10px; font-weight: 700; letter-spacing: .22em; margin: 0 0 23px; }.eyebrow { color: var(--cyan); }
h1, h2, h3, p { margin-top: 0; } h1, h2 { font-weight: 400; letter-spacing: -.06em; }
h1 { font-size: clamp(53px,7.5vw,100px); line-height: 1.02; margin-bottom: 28px; } h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-copy { color: rgba(255,255,255,.66); font-size: 16px; line-height: 1.9; margin-bottom: 32px; max-width: 460px; }.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 25px; }
.button { align-items: center; border: 1px solid transparent; display: inline-flex; font-size: 12px; font-weight: 700; gap: 20px; justify-content: center; letter-spacing: .08em; min-height: 48px; padding: 0 20px; transition: background .2s ease, transform .2s ease; }.button:hover { transform: translateY(-2px); }.button-primary { background: var(--orange); color: var(--navy); }.button-primary:hover { background: #ff8b65; }.button-dark { background: var(--navy); color: #fff; }.button-dark:hover { background: #14324a; }
.text-link { border-bottom: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.76); font-size: 12px; padding-bottom: 8px; }.text-link:hover { border-color: var(--orange); color: #fff; }
.hero-proof { border-top: 1px solid rgba(255,255,255,.16); display: flex; gap: clamp(20px,4vw,55px); margin-top: 88px; padding-top: 17px; }.hero-proof span { display: grid; gap: 5px; }.hero-proof strong { font-size: 12px; font-weight: 500; }.hero-proof small { color: rgba(255,255,255,.43); font-size: 9px; letter-spacing: .08em; }
.hero-console { background: rgba(245,242,235,.95); box-shadow: 22px 28px 70px rgba(0,0,0,.22); color: var(--navy); justify-self: end; max-width: 470px; padding: 20px; transform: rotate(2deg); width: 100%; }.console-top, .console-bottom { align-items: center; display: flex; justify-content: space-between; }.console-top { color: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: .18em; }.console-status { color: #6d7a79; font-size: 8px; letter-spacing: .08em; }.console-status i { background: #54ad7b; border-radius: 50%; display: inline-block; height: 6px; margin-right: 5px; width: 6px; }
.route-map { background: #d9e8e7; height: 300px; margin: 18px 0; overflow: hidden; position: relative; }.route-map::before { background-image: linear-gradient(rgba(25,125,164,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(25,125,164,.1) 1px, transparent 1px); background-size: 31px 31px; content: ""; inset: 0; position: absolute; transform: rotate(-16deg) scale(1.4); }.route-label { color: var(--blue); font-size: 11px; font-weight: 700; position: absolute; z-index: 2; }.route-origin { left: 13%; top: 55%; }.route-eu { left: 48%; top: 18%; }.route-sea { left: 57%; top: 70%; }.route-na { right: 10%; top: 34%; }.route-path { border-top: 1px dashed var(--orange); height: 1px; position: absolute; transform-origin: left; z-index: 1; }.path-one { left: 17%; top: 55%; transform: rotate(-28deg); width: 47%; }.path-two { left: 18%; top: 57%; transform: rotate(22deg); width: 43%; }.path-three { left: 17%; top: 53%; transform: rotate(-9deg); width: 73%; }.route-node { background: var(--orange); border: 4px solid rgba(239,112,71,.25); border-radius: 50%; height: 14px; position: absolute; width: 14px; z-index: 2; }.node-origin { left: 15%; top: 53%; }.node-eu { left: 49%; top: 17%; }.node-sea { left: 58%; top: 68%; }.node-na { right: 10%; top: 32%; }.console-bottom { gap: 25px; }.console-bottom div { display: grid; gap: 5px; }.console-bottom small { color: #74808b; font-size: 9px; }.console-bottom strong { font-size: 13px; }.console-arrow { color: var(--orange); font-size: 22px; margin-left: auto; }
.hero-meta { bottom: 25px; color: rgba(255,255,255,.42); display: flex; font-size: 10px; gap: clamp(20px,5vw,75px); left: clamp(24px,6vw,96px); letter-spacing: .15em; position: absolute; z-index: 3; }
.section-shell { padding: clamp(82px,10vw,145px) clamp(24px,8vw,120px); }.section-kicker, .panel-kicker { color: var(--blue); }.section-heading { align-items: end; display: flex; gap: 35px; justify-content: space-between; margin-bottom: 52px; } h2 { font-size: clamp(40px,5.3vw,72px); line-height: 1.12; margin: 0; }.heading-note { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0 0 2px; max-width: 250px; }
.audience-section { background: var(--cream); }.audience-layout { display: grid; gap: 50px; grid-template-columns: minmax(260px,.7fr) minmax(360px,1fr); }.audience-tabs { border-top: 1px solid var(--line); }.audience-tab { align-items: center; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); display: grid; gap: 7px; grid-template-columns: 45px 1fr; padding: 18px 0; position: relative; text-align: left; transition: color .2s ease, padding .2s ease; width: 100%; }.audience-tab span { color: var(--orange); font-size: 11px; }.audience-tab strong { font-size: 17px; font-weight: 500; }.audience-tab small { font-size: 11px; grid-column: 2; }.audience-tab.is-active { color: var(--navy); padding-left: 13px; }.audience-tab.is-active::before { background: var(--orange); content: ""; height: 46px; left: 0; position: absolute; width: 3px; }
.audience-panel { background: #fff; min-height: 405px; padding: clamp(30px,5vw,70px); position: relative; }.panel-kicker { font-size: 9px; font-weight: 700; letter-spacing: .17em; margin-bottom: 24px; }.audience-panel h3, .service-detail h3, .process-panel h3 { font-size: clamp(28px,3.5vw,45px); font-weight: 400; letter-spacing: -.05em; line-height: 1.15; margin: 0 0 20px; }.audience-panel > p:not(.panel-kicker) { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 450px; }.audience-panel ul, .detail-list { color: var(--muted); display: grid; gap: 10px; list-style: none; margin: 26px 0 34px; padding: 0; }.audience-panel li, .detail-list li { font-size: 12px; }.audience-panel li::before, .detail-list li::before { color: var(--orange); content: "—"; margin-right: 10px; }.inline-cta { background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 12px; font-weight: 700; padding: 0 0 8px; }.signal-row { border-top: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: repeat(3,1fr); margin-top: 80px; padding-top: 20px; }.signal-row div { display: grid; gap: 7px; grid-template-columns: 10px 1fr; }.signal-dot { background: var(--orange); border-radius: 50%; height: 7px; margin-top: 4px; width: 7px; }.signal-row strong { font-size: 13px; font-weight: 500; }.signal-row small { color: var(--muted); font-size: 11px; grid-column: 2; }
.services-section { background: #fff; }.service-switcher { display: grid; grid-template-columns: minmax(230px,.34fr) 1fr; }.service-tabs { background: var(--navy); display: grid; align-content: center; }.service-tab { align-items: center; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); display: flex; gap: 20px; padding: 22px 24px; text-align: left; transition: background .2s ease, color .2s ease; }.service-tab:last-child { border-bottom: 0; }.service-tab span { color: var(--orange); font-size: 11px; }.service-tab.is-active, .service-tab:hover { background: rgba(255,255,255,.08); color: #fff; }.service-detail { background: #e8f0ef; display: grid; gap: 45px; grid-template-columns: 130px 1fr; min-height: 410px; padding: clamp(30px,5vw,70px); }.detail-aside { display: flex; flex-direction: column; }.detail-index, .detail-label { color: var(--blue); font-size: 9px; letter-spacing: .14em; }.detail-symbol { color: var(--orange); font-size: 44px; margin-top: auto; }.detail-label { margin-top: 18px; }.detail-main { max-width: 560px; }.service-detail h3 { font-size: clamp(30px,3.6vw,49px); }.service-detail > .detail-main > p:not(.panel-kicker) { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 500px; }
.process-section { background: var(--sand); }.process-layout { display: grid; gap: 55px; grid-template-columns: minmax(260px,.7fr) 1fr; }.process-tabs { border-top: 1px solid var(--line); }.process-tab { align-items: center; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); display: flex; gap: 20px; padding: 19px 0; text-align: left; width: 100%; }.process-tab span { color: var(--orange); font-size: 11px; }.process-tab strong { font-size: 16px; font-weight: 500; }.process-tab.is-active, .process-tab:hover { color: var(--navy); padding-left: 12px; }.process-panel { background: var(--cream); min-height: 330px; padding: clamp(30px,5vw,65px); }.process-panel > p:not(.panel-kicker) { color: var(--muted); font-size: 15px; line-height: 1.9; max-width: 460px; }.process-output { border-top: 1px solid var(--line); display: grid; gap: 10px; margin-top: 65px; padding-top: 14px; }.process-output span { color: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: .14em; }.process-output strong { font-size: 16px; font-weight: 500; }
.contact-band { background: var(--navy); color: #fff; display: grid; gap: 90px; grid-template-columns: minmax(300px,.9fr) minmax(380px,1fr); padding: clamp(82px,10vw,140px) clamp(24px,8vw,120px); }.contact-band .section-kicker { color: var(--cyan); }.contact-intro > p:not(.section-kicker) { color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.85; margin-top: 25px; max-width: 330px; }.contact-aside { border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 9px; margin-top: 70px; padding-top: 14px; width: 210px; }.contact-aside span { color: var(--cyan); font-size: 9px; letter-spacing: .12em; }.contact-aside strong { font-size: 17px; font-weight: 500; }.contact-form { background: #f5f2eb; color: var(--navy); padding: 28px clamp(24px,4vw,50px) 35px; }.form-heading { border-bottom: 1px solid var(--line); display: grid; gap: 9px; margin-bottom: 24px; padding-bottom: 20px; }.form-heading span { color: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: .16em; }.form-heading strong { font-size: 23px; font-weight: 500; }.contact-form label { color: var(--muted); display: grid; font-size: 11px; gap: 8px; margin-top: 17px; }.contact-form label small { display: inline; font-size: 10px; margin-left: 5px; }.contact-form input, .contact-form select, .contact-form textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--navy); outline: 0; padding: 8px 0 11px; resize: vertical; width: 100%; }.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--blue); }.contact-form input::placeholder, .contact-form textarea::placeholder { color: #9ba1a2; }.form-submit { border: 0; margin-top: 27px; }.form-status { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 15px 0 0; min-height: 18px; }.form-status.is-success { color: #277c5a; }
.site-footer { background: var(--navy-deep); color: #fff; padding: 42px clamp(24px,8vw,120px) 25px; }.footer-top { align-items: center; border-bottom: 1px solid rgba(255,255,255,.14); display: grid; gap: 24px; grid-template-columns: 1fr 1fr 1fr; padding-bottom: 38px; }.footer-top > p { color: rgba(255,255,255,.5); font-size: 12px; margin: 0; }.footer-links { display: flex; gap: 25px; justify-content: flex-end; }.footer-links a, .footer-bottom { color: rgba(255,255,255,.52); font-size: 11px; }.footer-links a:hover, .footer-bottom a:hover { color: #fff; }.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 25px; justify-content: space-between; padding-top: 23px; }.footer-bottom > span { white-space: nowrap; }.footer-bottom a { margin-right: 16px; }
.legal-page { background: var(--cream); }.legal-header { position: relative; }.legal-main { margin: 0 auto; max-width: 820px; padding: 90px 24px 120px; }.legal-main h1 { color: var(--navy); font-size: clamp(42px,6vw,72px); margin-bottom: 10px; }.legal-main h2 { color: var(--navy); font-size: 24px; letter-spacing: -.03em; margin: 45px 0 14px; }.legal-main p { color: var(--muted); font-size: 15px; line-height: 1.95; }.legal-main a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }.legal-updated { color: var(--orange) !important; font-size: 12px !important; margin-bottom: 48px; }.legal-footer { padding-top: 0; }
@media (max-width: 980px) { .hero-inner { grid-template-columns: 1fr; }.hero-console { justify-self: start; margin-top: -10px; max-width: 440px; }.hero-proof { margin-top: 55px; }.service-switcher { grid-template-columns: 1fr; }.service-tabs { grid-template-columns: repeat(4,1fr); }.service-tab { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.12); flex-direction: column; gap: 9px; padding: 18px 10px; text-align: center; }.service-tab:last-child { border-right: 0; }.service-detail { min-height: 390px; }.contact-band { gap: 50px; } }
@media (max-width: 720px) { .site-header { height: 65px; }.menu-toggle { display: block; order: 2; }.main-nav { background: var(--navy-deep); display: none; flex-direction: column; gap: 0; left: 0; margin: 0; padding: 12px 24px 20px; position: absolute; right: 0; top: 65px; }.nav-open .main-nav { display: flex; }.main-nav a { border-bottom: 1px solid rgba(255,255,255,.1); padding: 15px 0; }.header-action { font-size: 10px; margin-left: auto; margin-right: 17px; }.hero { min-height: 850px; }.hero-inner { min-height: 850px; padding-top: 130px; }.hero-copy-block { max-width: none; }.hero-console { margin-top: 10px; transform: rotate(1deg) scale(.91); transform-origin: left top; width: 110%; }.hero-proof { gap: 16px; }.hero-proof strong { font-size: 11px; }.hero-meta { bottom: 18px; flex-wrap: wrap; gap: 10px 22px; right: 24px; }.section-heading { align-items: start; flex-direction: column; gap: 20px; }.audience-layout, .process-layout, .contact-band { grid-template-columns: 1fr; }.audience-panel { min-height: 390px; }.signal-row { grid-template-columns: 1fr; gap: 17px; margin-top: 50px; }.service-tabs { grid-template-columns: repeat(2,1fr); }.service-tab { border-bottom: 1px solid rgba(255,255,255,.12); }.service-tab:nth-child(2) { border-right: 0; }.service-detail { gap: 20px; grid-template-columns: 70px 1fr; padding: 30px 24px; }.detail-symbol { font-size: 34px; }.detail-label { font-size: 8px; writing-mode: vertical-rl; }.process-panel { min-height: 350px; }.process-output { margin-top: 45px; }.contact-aside { margin-top: 45px; }.footer-top { align-items: start; grid-template-columns: 1fr; }.footer-links { justify-content: flex-start; }.footer-bottom { justify-content: flex-start; }.footer-bottom > span { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button, .main-nav a, .audience-tab, .service-tab, .process-tab { transition: none; } }