/* SEALUTION — shared stylesheet (v2 revamp).
Dark, map-forward design in the spirit of mapbox.com / cargowise.com:
deep navy surfaces, restrained brand teal accents, quiet borders. No neon.
Headings: Montserrat. Body/UI: Poppins. */
/* DS:BEGIN tokens — generated, do not edit by hand */
:root{
--bg:#050A13;
--bg2: #081120;
--navy: #0A1628;
--navy2: #0F1F38;
--teal: #073D82;
--teal-light: #6C9FE8;
--aqua: #6C9FE8;
--orange: #E8621A;
--accent: #6C9FE8;
--accent-soft: rgba(108,159,232,.5);
--action: #2F6FD0;
--action-ink: #FFFFFF;
--action-hover: #4484E0;
--white: #FFFFFF;
--ink: #FFFFFF;
--desc: rgba(255,255,255,.72);
--steel: rgba(255,255,255,.55);
--muted: rgba(255,255,255,.42);
--faint: rgba(255,255,255,.28);
--border: rgba(255,255,255,.12);
--card: rgba(255,255,255,.04);
--card-hover: rgba(255,255,255,.07);
--radius:14px;
--radius-control:8px;
--pad-x:100px;
--font-head:'Montserrat',sans-serif;
--font-body:'Poppins','Montserrat',sans-serif;
--nav-h:72px;
}
/* DS:END tokens */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;background:#02040A;}
body{
font-family:var(--font-body);
font-weight:400;
color:var(--ink);
/* Descent gradient: bright navy at the surface, near-black in the deep.
Spans the whole document, so scrolling down = diving down. */
background-color:#02040A;
background-image:linear-gradient(180deg,
#10294A 0%,
#0C2038 12%,
#091730 30%,
#070F22 55%,
#040914 80%,
#02040A 100%);
background-repeat:no-repeat;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;color:var(--white);line-height:1.22;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--pad-x);}
::selection{background:rgba(108,159,232,.28);color:var(--white);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);}
.eyebrow{
font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--teal-light);display:flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal-light);flex-shrink:0;}
/* Accented phrase in headings — a quiet color shift, not a gradient */
.grad{color:var(--teal-light);}
/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{
position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
background:var(--teal-light);opacity:.8;
pointer-events:none;
}
/* ---------- NAV ---------- */
header.site{
position:fixed;top:0;left:0;right:0;z-index:100;
background:transparent;
border-bottom:1px solid transparent;
transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
header.site.scrolled,header.site.menu-open{
background:rgba(5,10,19,.78);
-webkit-backdrop-filter:blur(16px) saturate(1.4);
backdrop-filter:blur(16px) saturate(1.4);
border-bottom-color:var(--border);
}
.nav-inner{
display:flex;align-items:center;justify-content:space-between;
max-width:1440px;margin:0 auto;
padding:15px var(--pad-x);
}
.logo{display:inline-flex;align-items:center;gap:9px;}
.logo-img{height:34px;width:auto;display:block;filter:brightness(0) invert(1);}
.logo-img-sm{height:26px;}
.logo-mark{height:26px;width:auto;display:block;filter:brightness(0) invert(1);}
.logo-mark-sm{height:20px;}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);}
.nav-links a{
position:relative;
font-size:13.5px;font-weight:500;color:var(--steel);
padding:6px 0;transition:color .2s ease;
}
.nav-links a::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
background:var(--teal-light);
border-radius:2px;transition:right .25s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--white);}
.nav-links a:hover::after,.nav-links a.active::after{right:0;}
.btn{
position:relative;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--font-body);font-weight:600;font-size:14px;
padding:12px 26px;border-radius:999px;border:none;cursor:pointer;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
/* The primary action, from the design system. It was the brand navy, which on
a navy page read as muddy and, worse, meant the SAME sign-in button was one
colour in the popup here and another on the portal's own page. */
.btn-primary{
background:var(--action);
color:var(--action-ink);
box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
.btn-primary:hover{
background:var(--action-hover);
box-shadow:0 10px 24px -10px rgba(0,0,0,.7);
}
.btn-ghost{
background:rgba(255,255,255,.04);color:var(--white);
border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.07);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:120;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--white);margin:5px 0;transition:transform .25s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-links .btn-primary{flex-shrink:0;min-width:max-content;padding:10px 22px;}
/* ---------- MODAL ---------- */
.modal-backdrop{
position:fixed;inset:0;z-index:200;
background:rgba(3,7,13,.72);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;
padding:24px;
opacity:0;pointer-events:none;
transition:opacity .2s ease;
}
.modal-backdrop.open{opacity:1;pointer-events:auto;}
.modal{
position:relative;
background:linear-gradient(180deg,#0E1B31,#0A1424);
border:1px solid var(--border);
border-radius:var(--radius);
padding:36px;
width:100%;max-width:480px;
max-height:88vh;overflow-y:auto;
transform:translateY(12px);
transition:transform .2s ease;
box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
}
.modal-backdrop.open .modal{transform:translateY(0);}
.modal-close{
position:absolute;top:16px;right:16px;
width:32px;height:32px;border-radius:50%;border:none;
background:rgba(255,255,255,.08);color:var(--white);
font-size:20px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:rgba(255,255,255,.18);}
.modal-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-light);}
.modal h3{font-size:22px;margin-top:8px;}
.modal-sub{font-size:13.5px;font-weight:400;color:var(--desc);margin-top:8px;margin-bottom:22px;}
.modal-form .field{margin-bottom:14px;}
.modal-form label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:5px;}
/* Form controls take the design system's control radius, so a field and its
submit button are the same shape wherever the form appears. The sign-in form
is the clearest case: it is the portal's own form, shown here in a popup,
and it was a 999px pill here and an 8px rectangle there.
The pills elsewhere (nav links, the pane switch, marketing CTAs) are
navigation, not form controls, and keep their own shape. */
.modal-form input,.modal-form textarea,.modal-form select{
width:100%;
font-family:var(--font-body);font-size:14px;color:var(--ink);
background:rgba(255,255,255,.04);
border:1px solid var(--border);border-radius:var(--radius-control);
padding:11px 14px;
resize:vertical;
transition:border-color .2s ease,box-shadow .2s ease;
}
.modal-form input::placeholder,.modal-form textarea::placeholder{color:rgba(255,255,255,.32);}
.modal-form input:focus,.modal-form textarea:focus,.modal-form select:focus{outline:none;border-color:var(--teal-light);box-shadow:0 0 0 3px rgba(108,159,232,.14);}
/* The trial popup is the only modal with a select. Native chrome on a dark
background renders it light and a size of its own, so it is given the same
shape as the inputs and its own arrow. */
.modal-form select{
appearance:none;-webkit-appearance:none;
padding-right:38px;cursor:pointer;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:right 14px center;
}
.modal-form select option{background:var(--navy);color:var(--ink);}
/* The start popup asks which of two things you are after, instead of making
that choice two near-identical buttons in the nav. */
/* [hidden] is a user-agent rule, so any class that declares its own display
beats it. .modal-points does (display:flex), which left both lists of
bullets on screen at once when the popup switched pane. This is the usual
guard and it protects every other [hidden] on the site too. */
[hidden]{display:none !important;}
.modal-panes{min-width:0;}
.modal-switch{
display:inline-flex;gap:4px;padding:4px;margin-bottom:20px;
background:rgba(255,255,255,.04);border:1px solid var(--border);
border-radius:999px;
}
.modal-switch__opt{
appearance:none;border:0;cursor:pointer;
padding:7px 16px;border-radius:999px;
font-family:var(--font-body);font-size:13px;font-weight:500;
color:var(--steel);background:transparent;
transition:color .2s ease,background .2s ease;
}
.modal-switch__opt:hover{color:var(--ink);}
.modal-switch__opt.is-on{background:var(--teal-light);color:#04203F;font-weight:600;}
/* Sign in is a single column: it has two fields and no pitch beside it. */
.modal-narrow{max-width:420px;padding:32px;}
.modal-narrow .modal-sub{margin-bottom:20px;}
.modal-narrow .form-note{margin-top:14px;text-align:center;}
.modal-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.modal-submit{width:100%;margin-top:6px;border-radius:var(--radius-control);}
.modal .form-note{text-align:center;margin-top:14px;color:var(--muted);}
.modal .form-status{text-align:center;}
.modal .form-status.ok{color:var(--teal-light);}
.modal .form-status.err{color:var(--orange);}
body.modal-open{overflow:hidden;}
/* Wide split modal: context panel + form */
.modal-wide{max-width:800px;padding:0;}
.modal-grid{display:grid;grid-template-columns:290px 1fr;min-height:100%;}
.modal-aside{
background:linear-gradient(165deg,#0A1C38,#081120 80%);
border-right:1px solid var(--border);
padding:34px 30px;
display:flex;flex-direction:column;
}
.modal-aside h3{font-size:21px;line-height:1.3;margin-top:10px;}
.modal-aside .modal-sub{margin-bottom:0;}
.modal-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.modal-points li{
display:flex;gap:10px;align-items:flex-start;
font-size:12.5px;color:var(--desc);line-height:1.55;
}
.modal-points .pt-check{
width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-top:1px;
border:1.5px solid var(--teal);color:var(--teal-light);
background:rgba(7,61,130,.18);
display:flex;align-items:center;justify-content:center;font-size:9px;
}
.modal-aside-note{
margin-top:auto;padding-top:24px;
font-size:12px;color:var(--muted);font-style:italic;
}
.modal-wide .modal-form{padding:34px 32px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field-hint{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.5;}
@media (max-width:680px){
.modal-grid{grid-template-columns:1fr;}
.modal-aside{padding:26px 24px 20px;border-right:none;border-bottom:1px solid var(--border);}
.modal-aside .modal-points,.modal-aside-note{display:none;}
.modal-wide .modal-form{padding:24px;}
.field-row{grid-template-columns:1fr;gap:0;}
}
/* Standalone page form (contact page), same look as .modal-form but not modal-scoped */
.contact-aside,.contact-form-card{padding:32px;}
.contact-aside h3{font-size:21px;margin-top:10px;}
.contact-form-card .field{margin-bottom:14px;}
.contact-form-card label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:5px;}
.contact-form-card input,.contact-form-card textarea,.contact-form-card select{
width:100%;
font-family:var(--font-body);font-size:14px;color:var(--ink);
background:rgba(255,255,255,.04);
border:1px solid var(--border);border-radius:10px;
padding:11px 14px;
resize:vertical;
transition:border-color .2s ease,box-shadow .2s ease;
}
.contact-form-card select{
appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.contact-form-card select option{background:#0A1C38;color:var(--ink);}
.contact-form-card select:invalid{color:rgba(255,255,255,.32);}
.contact-form-card input::placeholder,.contact-form-card textarea::placeholder{color:rgba(255,255,255,.32);}
.contact-form-card input:focus,.contact-form-card textarea:focus,.contact-form-card select:focus{outline:none;border-color:var(--teal-light);box-shadow:0 0 0 3px rgba(108,159,232,.14);}
.contact-form-card .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
@media (max-width:680px){
.contact-aside,.contact-form-card{padding:24px;}
}
/* ---------- SECTIONS ---------- */
/* Sections stay translucent so the depth gradient shows through;
.bg-light is a faint lighter band, not an opaque plate. */
section{padding:clamp(64px,9vh,110px) 0;position:relative;}
.bg-light{background:rgba(255,255,255,.025);}
.bg-navy{background:transparent;color:var(--white);}
.center{text-align:center;}
.narrow{max-width:860px;margin-left:auto;margin-right:auto;}
/* Pages without the full-bleed hero start their first section below the fixed nav */
main>section.hero:first-child{padding-top:calc(var(--nav-h) + clamp(48px,8vh,90px));}
.section-head{margin-bottom:8px;}
.section-head h2,h2.sec-title{font-size:clamp(24px,3.4vw,36px);margin-top:12px;letter-spacing:-.01em;}
.section-lead{font-size:15px;font-weight:400;color:var(--desc);max-width:640px;margin-top:12px;line-height:1.7;}
/* ---------- HERO (full-bleed interactive globe) ---------- */
.hero-v2{
position:relative;
min-height:100svh;
display:flex;align-items:center;
padding:calc(var(--nav-h) + 24px) 0 72px;
overflow:hidden;
background:#10294A; /* surface water — matches the top of the depth gradient */
}
.hero-map{position:absolute;inset:0;z-index:0;}
.hero-map .maplibregl-canvas{outline:none;cursor:grab;}
.hero-map .maplibregl-canvas:active{cursor:grabbing;}
.hero-overlay{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(90deg,rgba(11,25,45,.95) 0%,rgba(11,25,45,.82) 30%,rgba(11,25,45,.3) 55%,rgba(11,25,45,0) 75%),
linear-gradient(180deg,rgba(11,25,45,.55) 0%,rgba(11,25,45,0) 22%,rgba(11,25,45,0) 70%,#0C2038 100%);
}
.hero-glow{
position:absolute;z-index:1;pointer-events:none;
width:60vw;height:60vw;right:-12vw;top:50%;transform:translateY(-50%);
background:radial-gradient(circle,rgba(7,61,130,.08) 0%,transparent 60%);
}
.hero-v2 .wrap{position:relative;z-index:2;pointer-events:none;}
.hero-v2 .wrap a,.hero-v2 .wrap button{pointer-events:auto;}
.hero-content{max-width:720px;}
.hero-badge{
pointer-events:auto;
display:inline-flex;align-items:center;gap:9px;
font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--teal-light);
background:rgba(5,10,19,.4);
border:1px solid var(--border);
border-radius:999px;padding:7px 16px;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hero-badge .pulse-dot{
width:6px;height:6px;border-radius:50%;background:var(--teal-light);flex-shrink:0;
animation:badgePulse 2.6s ease-in-out infinite;
}
@keyframes badgePulse{
0%,100%{opacity:1;}
50%{opacity:.35;}
}
.hero-v2 h1{
font-size:clamp(30px,3.6vw,48px);
font-weight:800;letter-spacing:-.02em;line-height:1.16;
margin:26px 0 22px;
}
.hero-v2 .sub{
font-size:clamp(14.5px,1.2vw,16.5px);font-weight:400;color:var(--desc);
max-width:540px;margin:0 0 34px;line-height:1.75;
}
.hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.hero-v2 .cta-note{font-size:13px;color:var(--muted);margin-top:14px;}
.hero-stats{
pointer-events:auto;
display:grid;grid-template-columns:repeat(4,auto);
justify-content:start;gap:20px clamp(20px,2.6vw,44px);
margin-top:clamp(36px,5vh,60px);
padding-top:26px;
border-top:1px solid rgba(255,255,255,.1);
}
@media (max-width:560px){
.hero-stats{grid-template-columns:repeat(2,auto);}
}
.hstat .hstat-num{
font-family:var(--font-head);
font-size:clamp(24px,2.4vw,34px);font-weight:800;color:var(--white);
line-height:1;letter-spacing:-.01em;
display:flex;align-items:baseline;gap:2px;
}
.hstat .hstat-num .suffix{color:var(--teal-light);font-size:.72em;font-weight:700;}
.hstat .hstat-lbl{font-size:12px;font-weight:400;color:var(--muted);margin-top:7px;letter-spacing:.03em;}
.map-caption{
font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.hero-caption{
position:absolute;z-index:2;right:28px;bottom:24px;pointer-events:none;
display:flex;align-items:center;gap:8px;
}
.hero-caption .drag-ico{width:14px;height:14px;opacity:.5;}
.maplibregl-ctrl-attrib{background:rgba(5,10,19,.55) !important;font-size:8px !important;border-radius:6px 0 0 0 !important;color:rgba(255,255,255,.5) !important;}
.maplibregl-ctrl-attrib a{color:rgba(255,255,255,.6) !important;}
.maplibregl-ctrl-attrib-button{display:none !important;}
.port-dot{width:9px;height:9px;border-radius:50%;background:var(--teal-light);border:1.5px solid rgba(5,10,19,.6);position:relative;cursor:pointer;}
.port-dot::after{
content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--teal-light);
opacity:.5;animation:portPulse 2.8s ease-out infinite;
}
.port-dot .port-name{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:.06em;
color:rgba(255,255,255,.85);white-space:nowrap;
background:rgba(5,10,19,.6);padding:2px 8px;border-radius:99px;border:1px solid rgba(255,255,255,.14);
opacity:0;transition:opacity .2s ease;pointer-events:none;
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.port-dot:hover .port-name{opacity:1;}
@keyframes portPulse{0%{transform:scale(.4);opacity:.7;}100%{transform:scale(2.2);opacity:0;}}
/* Vessels sailing the hero routes */
.ship-marker{width:20px;height:20px;cursor:pointer;}
.ship-marker svg{
width:100%;height:100%;display:block;
filter:drop-shadow(0 0 5px rgba(108,159,232,.75));
transition:transform .18s ease;
}
.ship-marker:hover svg{transform:scale(1.4);}
.story-vessel{width:24px;height:24px;pointer-events:none;}
.story-vessel:hover svg{transform:none;}
/* Dark tracking popups (vessels + ports) */
.hero-popup .maplibregl-popup-content{
background:#0E1B31;border:1px solid rgba(255,255,255,.16);
color:var(--white);font-family:var(--font-body);
padding:12px 14px;border-radius:8px;
box-shadow:0 16px 40px -16px rgba(0,0,0,.85);
}
.hero-popup .maplibregl-popup-tip{
border-top-color:#0E1B31 !important;
border-bottom-color:#0E1B31 !important;
}
.hero-popup .maplibregl-popup-close-button{
color:rgba(255,255,255,.55);font-size:15px;right:5px;top:3px;
background:none;border:none;
}
.hero-popup .maplibregl-popup-close-button:hover{color:var(--white);background:none;}
.hero-popup .pp-title{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.01em;padding-right:14px;}
.hero-popup .pp-sub{font-size:11px;color:var(--teal-light);margin-top:2px;}
.hero-popup .pp-rows{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:9px;font-size:11px;color:rgba(255,255,255,.85);}
.hero-popup .pp-note{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:9px;}
/* ---------- ROUTE INTELLIGENCE DEMO ---------- */
/* Boxed on purpose: this is a working widget, not a content card. */
.route-demo{
margin-top:34px;
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
overflow:hidden;
}
.rd-head{
display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
padding:18px 20px;border-bottom:1px solid var(--border);
}
.rd-field{display:flex;flex-direction:column;gap:5px;}
.rd-field label{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.rd-field select{
background:#0E1B31;color:var(--white);
border:1px solid var(--border);border-radius:4px;
font-family:var(--font-body);font-size:13px;
padding:9px 12px;min-width:200px;
outline:none;cursor:pointer;
}
.rd-field select:focus{border-color:rgba(108,159,232,.5);}
.rd-arrow{color:var(--teal-light);font-size:18px;padding-bottom:10px;}
.rd-btn{margin-left:auto;}
.rd-body{display:grid;grid-template-columns:1.6fr 1fr;min-height:380px;}
.rd-map{position:relative;min-height:380px;background:#0C2038;}
.rd-side{
border-left:1px solid var(--border);
padding:18px 20px;display:flex;flex-direction:column;gap:14px;
}
/* First-visit hook: handwritten nudge filling the whole empty side panel,
with a big hand-drawn arrow sweeping from the text up to the Generate
button that sits just above the panel's top-right corner. */
.rd-hook{
position:relative;
flex:1;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
text-align:center;
padding:96px 12px 20px;
color:var(--teal-light);
animation:rdHookIn .8s ease .4s backwards;
}
.rd-hook-arrow{
position:absolute;top:-38px;right:82px;
width:150px;height:158px;
color:var(--teal-light);opacity:.9;
}
/* Arrow draws itself in like a pen stroke */
.rd-hook-arrow path{
stroke-dasharray:1;stroke-dashoffset:1;
animation:rdDraw .8s ease-out 1s forwards;
}
.rd-hook-arrow path:last-child{animation-duration:.25s;animation-delay:1.85s;}
@keyframes rdDraw{to{stroke-dashoffset:0;}}
.rd-hook-text{
font-family:'Caveat',cursive;
font-size:44px;font-weight:600;line-height:1.08;
transform:rotate(-3deg);
max-width:320px;
}
.rd-hook-text span{
display:block;
font-size:26px;font-weight:600;
color:var(--desc);opacity:.9;
margin-top:10px;line-height:1.25;
}
@keyframes rdHookIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* B-roll "boil": tiny stepped jitters so the handwriting feels alive,
like hand-drawn captions redrawn frame by frame. */
@media (prefers-reduced-motion: no-preference){
.rd-hook-text{animation:rdBoilText 1.1s steps(1,end) infinite;}
.rd-hook-arrow{animation:rdBoilArrow 1.3s steps(1,end) infinite;}
}
@keyframes rdBoilText{
0%{transform:rotate(-3deg) translate(0,0);}
33%{transform:rotate(-2.4deg) translate(.7px,-.7px);}
66%{transform:rotate(-3.5deg) translate(-.7px,.5px);}
100%{transform:rotate(-3deg) translate(0,0);}
}
@keyframes rdBoilArrow{
0%{transform:rotate(0deg) translate(0,0);}
33%{transform:rotate(.9deg) translate(-.8px,.6px);}
66%{transform:rotate(-.8deg) translate(.7px,-.5px);}
100%{transform:rotate(0deg) translate(0,0);}
}
@media (max-width:860px){
.rd-hook{padding:20px 100px 16px 8px;align-items:flex-start;text-align:left;}
.rd-hook-arrow{top:-10px;right:6px;width:88px;height:92px;}
.rd-hook-text{font-size:32px;}
.rd-hook-text span{font-size:22px;}
}
.rd-steps{display:flex;flex-direction:column;gap:8px;}
.rd-step{
display:flex;align-items:baseline;gap:9px;
font-size:12.5px;color:var(--muted);
opacity:.45;transition:opacity .25s ease,color .25s ease;
}
.rd-step.active,.rd-step.done{opacity:1;}
.rd-step.done{color:var(--desc);}
.rd-step-ico{
width:14px;height:14px;flex-shrink:0;position:relative;top:2px;
display:inline-flex;align-items:center;justify-content:center;
font-size:10px;color:var(--teal-light);
}
.rd-step.active .rd-step-ico::before{
content:"";width:9px;height:9px;border-radius:50%;
border:1.5px solid var(--teal-light);border-top-color:transparent;
animation:rdSpin .7s linear infinite;
}
@keyframes rdSpin{to{transform:rotate(360deg);}}
.rd-step-label{font-weight:600;color:inherit;white-space:nowrap;}
.rd-step.done .rd-step-label{color:var(--white);}
.rd-step-detail{font-size:11px;color:var(--faint);}
.rd-result{margin-top:auto;}
.rd-done{font-size:12.5px;color:var(--teal-light);font-weight:600;line-height:1.5;}
.rd-warn{font-size:12.5px;color:#E8B04B;line-height:1.5;}
.rd-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.rd-chips span{
font-size:11px;font-weight:500;color:var(--desc);
background:rgba(255,255,255,.05);border:1px solid var(--border);
border-radius:3px;padding:4px 10px;
}
.rd-footnote{
padding:12px 20px;border-top:1px solid var(--border);
font-size:11px;color:var(--faint);
}
@media (max-width:860px){
.rd-body{grid-template-columns:1fr;}
.rd-map{min-height:300px;}
.rd-side{border-left:0;border-top:1px solid var(--border);}
.rd-btn{margin-left:0;width:100%;}
.rd-field{flex:1;min-width:0;}
.rd-field select{min-width:0;width:100%;}
.rd-arrow{display:none;}
}
/* ---------- CLIENT SEGMENT MARQUEE ---------- */
.client-strip{background:transparent;padding:40px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.client-strip-label{
font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
color:var(--faint);text-align:center;margin-bottom:26px;
}
.ticker-wrap{
overflow:hidden;
-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
}
.ticker-track{
display:flex;align-items:center;gap:56px;width:max-content;
animation:tickerScroll 34s linear infinite;
}
.ticker-wrap:hover .ticker-track{animation-play-state:paused;}
.ticker-mark{display:flex;align-items:center;gap:11px;flex-shrink:0;transition:opacity .2s;}
.ticker-mark .mark-glyph{width:7px;height:7px;border:1.5px solid rgba(108,159,232,.55);transform:rotate(45deg);flex-shrink:0;}
.ticker-mark .mark-text{font-family:var(--font-head);font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.36);white-space:nowrap;transition:color .2s;}
.ticker-mark:hover .mark-text{color:var(--teal-light);}
@keyframes tickerScroll{to{transform:translateX(-50%);}}
/* ---------- REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1);}
.stagger.is-visible>*{opacity:1;transform:translateY(0);}
.stagger.is-visible>*:nth-child(1){transition-delay:.05s;}
.stagger.is-visible>*:nth-child(2){transition-delay:.12s;}
.stagger.is-visible>*:nth-child(3){transition-delay:.19s;}
.stagger.is-visible>*:nth-child(4){transition-delay:.26s;}
.stagger.is-visible>*:nth-child(5){transition-delay:.33s;}
.stagger.is-visible>*:nth-child(6){transition-delay:.4s;}
.stagger.is-visible>*:nth-child(n+7){transition-delay:.47s;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px;}
/* ---------- CARDS (with cursor spotlight) ---------- */
.card{
position:relative;overflow:hidden;
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
padding:24px 26px;
transition:border-color .25s ease,transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.card:hover{border-color:rgba(255,255,255,.24);background:var(--card-hover);transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(0,0,0,.8);}
.pain-card p{font-size:14px;font-weight:400;font-style:italic;color:var(--desc);line-height:1.7;}
.pain-card p::before{content:"\201C";color:var(--teal-light);font-size:1.4em;font-style:normal;line-height:0;margin-right:2px;}
.pain-card p::after{content:"\201D";color:var(--teal-light);font-size:1.4em;font-style:normal;line-height:0;margin-left:2px;}
/* ---------- OPERATOR FEED (thread-style, auto-scrolling columns) ---------- */
.pain-feed{
display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
margin-top:34px;
height:540px;
overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
}
.feed-col{overflow:hidden;min-width:0;}
.feed-track{
display:flex;flex-direction:column;gap:16px;
animation:feedUp var(--feed-dur,44s) linear infinite;
}
.feed-col-1 .feed-track{--feed-dur:46s;}
.feed-col-2 .feed-track{--feed-dur:58s;animation-delay:-12s;}
.feed-col-3 .feed-track{--feed-dur:52s;animation-delay:-25s;}
.pain-feed:hover .feed-track{animation-play-state:paused;}
@keyframes feedUp{
from{transform:translateY(0);}
to{transform:translateY(-50%);}
}
.feed-post{
flex-shrink:0;
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
padding:18px 20px;
transition:border-color .25s ease,background .25s ease;
}
.feed-post:hover{border-color:rgba(255,255,255,.24);background:var(--card-hover);}
.feed-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.feed-avatar{
width:34px;height:34px;border-radius:50%;flex-shrink:0;
background:rgba(7,61,130,.2);border:1.5px solid rgba(108,159,232,.4);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-size:11px;font-weight:800;color:var(--teal-light);
}
.feed-id{display:flex;flex-direction:column;min-width:0;line-height:1.3;}
.feed-name{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--white);}
.feed-role{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feed-time{margin-left:auto;font-size:11px;color:var(--faint);flex-shrink:0;}
.feed-text{font-size:13.5px;color:var(--desc);line-height:1.65;}
.feed-note{font-size:12.5px;color:var(--muted);margin-top:16px;}
@media (prefers-reduced-motion:reduce){
.pain-feed{height:auto;-webkit-mask-image:none;mask-image:none;}
.feed-track{animation:none;}
.feed-post[aria-hidden="true"]{display:none;}
}
@media (max-width:900px){
.pain-feed{grid-template-columns:1fr;height:440px;}
.feed-col-2,.feed-col-3{display:none;}
}
/* ---------- ANSWER (quote band) ---------- */
.answer-band h2{font-size:clamp(22px,3.2vw,32px);letter-spacing:-.01em;line-height:1.35;}
.answer-band .answer-body{font-size:15px;color:var(--steel);margin-top:18px;line-height:1.8;max-width:720px;margin-left:auto;margin-right:auto;}
/* ---------- MODULES (tabs + chips) ---------- */
.mod-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;}
.mod-tab{
font-family:var(--font-body);font-size:13px;font-weight:500;
color:var(--steel);background:rgba(255,255,255,.04);
border:1px solid var(--border);border-radius:999px;
padding:9px 18px;cursor:pointer;
transition:color .2s,border-color .2s,background .2s,box-shadow .2s;
}
.mod-tab:hover{color:var(--white);border-color:rgba(255,255,255,.3);}
.mod-tab.active{
color:var(--white);background:var(--teal);
border-color:var(--teal);
}
.mod-tab .count{font-size:11px;color:var(--teal-light);margin-left:6px;font-weight:600;}
.mod-tab.active .count{color:rgba(255,255,255,.75);}
.mod-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;min-height:120px;}
.mod-chip{
position:relative;
flex:1 1 200px;max-width:calc(25% - 8px);
display:flex;align-items:center;gap:9px;
background:var(--card);border:1px solid var(--border);border-radius:10px;
padding:13px 16px;font-size:13.5px;font-weight:400;
transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,color .2s ease,opacity .35s ease;
cursor:default;
}
.mod-chip:focus{outline:none;border-color:var(--teal-light);}
/* Tooltip: what each module actually does */
.chip-tip{
position:absolute;left:50%;bottom:calc(100% + 11px);
transform:translateX(-50%) translateY(5px);
width:max-content;max-width:260px;
background:#0E1B31;border:1px solid rgba(255,255,255,.16);border-radius:10px;
padding:11px 14px;
font-size:12px;font-weight:400;line-height:1.6;color:var(--desc);
text-align:left;white-space:normal;
box-shadow:0 16px 34px -12px rgba(0,0,0,.75);
opacity:0;pointer-events:none;
transition:opacity .18s ease,transform .18s ease;
z-index:30;
}
.chip-tip::after{
content:"";position:absolute;top:100%;left:50%;margin-left:-5px;
border:5px solid transparent;border-top-color:#0E1B31;
}
.mod-chip:hover .chip-tip,
.mod-chip:focus .chip-tip{
opacity:1;transform:translateX(-50%) translateY(0);
}
/* The filter is authoritative: a chip hidden by a category tab stays hidden
whatever the clamp below says. */
.mod-chip.hide{display:none !important;}
/* THE CLAMP. The full list is long enough that dropping all of it on a phone,
one chip per row, buries everything under it. So the grid shows its first
four desktop rows and the reader asks for the rest.
Done by hiding the extra chips rather than clipping the container: the
tooltips sit ABOVE their chip, and an overflow:hidden wrapper would slice
the top row's tooltip in half.
Pure CSS via a checkbox, so it still works with JS off — which matters,
because the category tabs above it do not. When a tab IS clicked, fx.js
opens the clamp, since counting positions in the DOM says nothing about
which chips a filter left visible. */
.mod-reveal{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.mod-grid > div.mod-chip:nth-of-type(n+17){display:none;}
.mod-reveal:checked ~ .mod-grid > div.mod-chip:nth-of-type(n+17){display:flex;}
.mod-more{
display:inline-flex;align-items:center;gap:8px;cursor:pointer;
margin-top:14px;padding:10px 18px;border-radius:999px;
background:transparent;border:1px solid var(--border);
color:var(--desc);font-size:12.5px;font-weight:500;
transition:color .2s ease,border-color .2s ease;
}
.mod-more:hover{color:var(--white);border-color:rgba(255,255,255,.3);}
.mod-more .dot{width:6px;height:6px;border-radius:50%;background:var(--teal-light);}
.mod-reveal:checked ~ .mod-more{display:none;}
.mod-reveal:focus-visible ~ .mod-more{outline:2px solid var(--teal-light);outline-offset:3px;}
.mod-chip.in{animation:chipIn .4s cubic-bezier(.2,.6,.2,1) both;}
@keyframes chipIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.mod-chip:hover{
border-color:var(--teal-light);color:var(--teal-light);
transform:translateY(-2px);
}
.mod-chip .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);flex-shrink:0;transition:background .2s ease,transform .2s ease;}
.mod-chip:hover .dot{background:var(--teal-light);transform:scale(1.3);}
.mod-chip.accent{color:var(--teal-light);border-color:rgba(7,61,130,.8);}
.mod-chip.accent .dot{background:var(--teal-light);}
.mod-chip-cta{
border-style:dashed;color:var(--teal-light);background:transparent;
font:inherit;cursor:pointer;text-align:left;
}
.mod-chip-cta .dot{background:var(--teal-light);animation:ctaChipPulse 2.2s ease-in-out infinite;}
.mod-chip-cta:hover{background:rgba(7,61,130,.12);}
@keyframes ctaChipPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(1.25);}}
.mod-footnote{font-size:13px;color:var(--muted);margin-top:18px;}
/* ---------- STORY / SCROLLYTELLING MAP ---------- */
.story-section{background:rgba(255,255,255,.02);overflow:visible;}
.story-grid{
display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
gap:clamp(28px,4vw,64px);
margin-top:40px;
align-items:start;
}
.story-steps{display:flex;flex-direction:column;}
.story-step{
min-height:72vh;
display:flex;align-items:center;
}
.story-step-card{
position:relative;
padding:8px 0;
opacity:.32;transform:translateX(-6px);
transition:opacity .5s ease,transform .5s ease;
}
.story-step.active .story-step-card{
opacity:1;transform:translateX(0);
}
.story-step .step-idx{
font-family:var(--font-head);
font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--teal-light);
text-transform:uppercase;
}
.story-step h3{font-size:clamp(19px,1.8vw,24px);margin:10px 0 12px;letter-spacing:-.01em;}
.story-step p{font-size:14.5px;color:var(--desc);line-height:1.75;}
.step-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.step-chips span{
font-size:11px;font-weight:500;letter-spacing:.04em;
color:var(--teal-light);background:rgba(7,61,130,.14);
border:1px solid rgba(108,159,232,.25);
border-radius:99px;padding:4px 11px;
}
.story-map-wrap{
position:sticky;top:calc(var(--nav-h) + 20px);
height:calc(100vh - var(--nav-h) - 44px);
min-height:420px;
border-radius:20px;overflow:hidden;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 80px -30px rgba(0,0,0,.85);
background:var(--bg);
}
#storyMap{position:absolute;inset:0;}
.story-hud{position:absolute;inset:0;pointer-events:none;z-index:5;}
.hud-live{
position:absolute;top:16px;left:16px;
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--white);
background:rgba(5,10,19,.62);border:1px solid rgba(255,255,255,.16);
border-radius:99px;padding:7px 14px;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hud-live .pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--teal-light);animation:badgePulse 2.6s ease-in-out infinite;}
.hud-coords{
position:absolute;top:16px;right:16px;
font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.65);
background:rgba(5,10,19,.62);border:1px solid rgba(255,255,255,.16);
border-radius:8px;padding:7px 12px;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hud-progress{
position:absolute;left:16px;right:16px;bottom:16px;
background:rgba(5,10,19,.62);border:1px solid rgba(255,255,255,.16);
border-radius:12px;padding:12px 16px;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hud-progress .hud-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.hud-progress .hud-route{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--white);}
.hud-progress .hud-pct{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--teal-light);}
.hud-bar{height:4px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;}
.hud-bar-fill{
height:100%;width:0;border-radius:99px;
background:var(--teal-light);
transition:width .9s cubic-bezier(.3,.7,.3,1);
}
.vessel-marker{
width:15px;height:15px;border-radius:50%;
background:var(--white);
border:3px solid var(--teal);
box-shadow:0 2px 8px rgba(0,0,0,.5);
position:relative;
}
.vessel-marker::after{
content:"";position:absolute;inset:-8px;border-radius:50%;
border:1.5px solid rgba(108,159,232,.6);
animation:portPulse 2.4s ease-out infinite;
}
/* ---------- PROOF ---------- */
.proof-grid{
display:grid;grid-template-columns:1.1fr .9fr;
gap:clamp(32px,4vw,72px);align-items:center;
}
.ploop svg{width:100%;max-width:470px;height:auto;display:block;margin:0 auto;}
.ploop-node{fill:rgba(255,255,255,.04);stroke:var(--border);stroke-width:1.2;}
.ploop-node-g:hover .ploop-node{stroke:rgba(108,159,232,.5);}
.ploop-step{font-family:var(--font-head);font-size:12px;font-weight:800;fill:var(--teal-light);letter-spacing:.06em;}
.ploop-label{font-family:var(--font-body);font-size:14px;font-weight:600;fill:var(--white);}
.ploop-line{stroke:rgba(255,255,255,.3);stroke-width:1.4;stroke-dasharray:2 7;stroke-linecap:round;animation:ploopFlow 2.8s linear infinite;}
.ploop-return{fill:none;stroke:rgba(108,159,232,.55);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;animation:ploopFlow 2.8s linear infinite;}
.ploop-arrowhead{fill:rgba(108,159,232,.7);}
@keyframes ploopFlow{to{stroke-dashoffset:-90;}}
.ploop-caption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px;}
@media (prefers-reduced-motion:reduce){
.ploop-line,.ploop-return{animation:none;}
}
@media (max-width:960px){
.proof-grid{grid-template-columns:1fr;}
.ploop{margin-top:8px;}
}
.proof-quote{font-family:var(--font-head);font-size:clamp(20px,2.6vw,26px);font-weight:700;color:var(--white);max-width:680px;margin-top:16px;line-height:1.4;letter-spacing:-.01em;}
.proof-body{font-size:14.5px;font-weight:400;color:var(--desc);max-width:620px;margin-top:18px;line-height:1.75;}
.proof-box{
position:relative;overflow:hidden;
margin-top:26px;padding:20px 24px;border:1px solid var(--border);border-radius:var(--radius);
background:var(--card);max-width:620px;
}
.proof-box .label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.proof-list{font-size:14px;font-weight:400;color:var(--desc);line-height:1.9;}
.proof-list a{color:var(--teal-light);font-weight:600;text-decoration:none;}
.proof-list a:hover{color:var(--white);text-decoration:underline;}
.redacted{display:inline-block;filter:blur(3px);user-select:none;color:var(--ink);opacity:.6;}
.proof-note{font-size:12.5px;color:var(--muted);margin-top:10px;}
/* ---------- ROUTE INTELLIGENCE ---------- */
.route-body{font-size:14.5px;font-weight:400;color:var(--desc);max-width:620px;margin-top:16px;line-height:1.75;}
.route-card{padding-top:28px;}
.route-card::after{
content:"";position:absolute;top:0;left:26px;width:44px;height:2px;
background:var(--teal-light);border-radius:2px;opacity:.7;
}
.route-card .num{font-family:var(--font-head);font-size:clamp(20px,1.8vw,24px);font-weight:800;color:var(--white);letter-spacing:-.01em;}
.route-card .lbl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-light);margin:6px 0 12px;}
.route-card p{font-size:14px;font-weight:400;color:var(--desc);line-height:1.7;}
.route-note{font-size:13.5px;color:var(--steel);font-style:italic;margin-top:24px;}
.route-tech-note{font-size:12.5px;color:var(--muted);margin-top:10px;max-width:580px;}
/* ---------- PLATFORM ---------- */
.plat-card{text-align:left;padding:28px 26px;will-change:transform;}
.plat-card .plat-ico{
width:42px;height:42px;border-radius:11px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);border:1px solid var(--border);
margin-bottom:16px;
}
.plat-card .plat-ico svg{width:20px;height:20px;stroke:var(--teal-light);}
.plat-card h3{font-size:16px;margin-bottom:6px;}
.plat-card p{font-size:13.5px;font-weight:400;color:var(--desc);line-height:1.65;}
.soon-tag{
display:inline-flex;align-items:center;gap:6px;
margin-top:14px;
font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);
border:1px dashed rgba(255,255,255,.22);border-radius:999px;
padding:4px 12px;
}
.soon-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal-light);opacity:.7;}
.soon-tag.soon-link{cursor:pointer;transition:color .2s ease,border-color .2s ease;}
.soon-tag.soon-link:hover{color:var(--white);border-color:rgba(108,159,232,.5);}
/* ---------- RECEIVE ---------- */
.receive-item{
display:flex;gap:14px;
padding:18px;border-radius:var(--radius);
border:1px solid transparent;
transition:background .25s,border-color .25s;
}
.receive-item:hover{background:var(--card);border-color:var(--border);}
.receive-item .check{
width:22px;height:22px;border-radius:50%;
border:1.5px solid var(--teal);color:var(--teal-light);
background:rgba(7,61,130,.14);
display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:2px;
}
.receive-item h4{font-size:14.5px;margin-bottom:3px;}
.receive-item p{font-size:13.5px;font-weight:400;color:var(--desc);line-height:1.6;}
/* ---------- HORIZON ---------- */
.horizon-card .tag{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:7px;}
.horizon-card.now{border-color:rgba(108,159,232,.55);}
.horizon-card.now .tag{color:var(--teal-light);}
.horizon-card h3{font-size:17px;margin:10px 0 8px;}
.horizon-card p{font-size:13.5px;font-weight:400;color:var(--desc);line-height:1.65;}
/* ---------- FINAL CTA ---------- */
.cta-section{overflow:hidden;}
.cta-aurora{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(50% 60% at 50% 45%,rgba(7,61,130,.1),transparent 75%);
}
.cta-section h2{color:var(--white);font-size:clamp(26px,3.8vw,40px);letter-spacing:-.015em;}
.cta-section .sub{font-size:15px;color:var(--desc);max-width:540px;margin:16px auto 32px;line-height:1.75;}
.demo-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:560px;margin:0 auto;}
.demo-form input{
flex:1 1 220px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);
border-radius:8px;padding:13px 16px;color:var(--white);font-family:var(--font-body);font-size:14px;
}
.demo-form input::placeholder{color:#93a3ae;}
.demo-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.demo-form button{flex:0 0 auto;}
.form-note{font-size:13px;color:var(--muted);margin-top:16px;}
.form-status{font-size:13px;margin-top:14px;min-height:16px;}
.form-status.ok{color:var(--teal-light);}
.form-status.err{color:var(--orange);}
/* ---------- FOOTER ---------- */
footer.site{
background:rgba(0,0,0,.4);border-top:1px solid var(--border);position:relative;
}
footer.site::before{
content:"";position:absolute;top:-1px;left:20%;right:20%;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.footer-grid{
display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
gap:clamp(28px,4vw,64px);
padding:52px 0 40px;
}
.footer-brand-col .logo{margin-bottom:16px;}
.footer-tagline{font-size:13px;color:var(--steel);line-height:1.7;max-width:320px;}
.footer-origin{font-size:12px;color:var(--muted);margin-top:12px;letter-spacing:.04em;}
.footer-h{
font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--faint);margin-bottom:14px;
}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.footer-col a{font-size:13px;color:var(--steel);transition:color .2s;}
.footer-col a:hover{color:var(--teal-light);}
.footer-bottom{
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
border-top:1px solid rgba(255,255,255,.08);
padding:20px 0 24px;
}
.footer-copy{font-size:12.5px;color:var(--muted);}
@media (max-width:900px){
.footer-grid{grid-template-columns:1fr 1fr;padding:40px 0 28px;}
.footer-brand-col{grid-column:1 / -1;}
}
@media (max-width:520px){
.footer-grid{grid-template-columns:1fr;}
}
/* ---------- ABOUT PAGE ---------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,4vw,64px);align-items:start;}
.split.split-wide{grid-template-columns:1.7fr .8fr;}
.split-aside{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:0;}
.split-aside .testimonial{margin-top:0;}
@media (max-width:960px){
.split{grid-template-columns:1fr;}
.split.split-wide{grid-template-columns:1fr;}
.split-aside{position:static;}
}
.hero .sub{font-size:15px;font-weight:400;color:var(--desc);max-width:560px;margin:16px auto 0;line-height:1.75;}
.hero h1{font-size:clamp(28px,4vw,44px);margin:18px 0 8px;letter-spacing:-.015em;}
.origin{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;}
.origin-aside{position:sticky;top:calc(var(--nav-h) + 20px);}
.founder-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;margin-bottom:16px;}
.founder-avatar{width:56px;height:56px;border-radius:50%;background:rgba(7,61,130,.16);border:2px solid var(--teal);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--teal-light);margin-bottom:14px;}
.founder-name{font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--white);}
.founder-title{font-size:13px;color:var(--muted);font-weight:400;margin-top:2px;margin-bottom:14px;}
.founder-bio{font-size:13.5px;color:var(--desc);line-height:1.7;}
.founder-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(7,61,130,.16);color:var(--teal-light);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-top:14px;border:1px solid rgba(108,159,232,.25);}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.stat-card-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:16px;}
.stat-card .stat{margin-bottom:14px;}
.stat-card .stat:last-child{margin-bottom:0;}
.stat-card .stat-num{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--white);line-height:1;margin-bottom:3px;}
.stat-card .stat-lbl{font-size:12px;color:rgba(255,255,255,.45);font-weight:400;line-height:1.4;}
.pull-quote{padding:16px 22px;margin:22px 0;background:rgba(7,61,130,.12);border-radius:10px;}
.pull-quote p{font-size:16px;font-style:italic;color:var(--white);font-weight:400;line-height:1.65;margin:0;max-width:100%;}
.pull-quote-attr{display:block;font-size:12.5px;color:var(--muted);margin-top:8px;font-style:normal;font-weight:600;}
.testimonial{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;margin-top:24px;}
.testimonial-quote{font-size:18px;font-style:italic;color:rgba(255,255,255,.9);line-height:1.65;margin-bottom:16px;}
.testimonial-attr{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.4);font-weight:400;}
.testimonial-attr .dot{width:7px;height:7px;border-radius:50%;background:var(--teal-light);flex-shrink:0;}
.card-dark{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;transition:border-color .25s,transform .25s;}
.card-dark:hover{border-color:rgba(108,159,232,.35);transform:translateY(-2px);}
.card-dark .lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-light);margin-bottom:8px;}
.card-dark h3{font-size:15px;color:var(--white);margin-bottom:6px;}
.card-dark p{font-size:13.5px;font-weight:400;color:rgba(255,255,255,.55);line-height:1.65;}
.team-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--border);border-radius:10px;background:var(--card);transition:border-color .2s,background .2s;}
.team-row:hover{border-color:rgba(108,159,232,.3);background:var(--card-hover);}
.team-row + .team-row{margin-top:10px;}
.team-avatar{width:38px;height:38px;border-radius:50%;background:rgba(7,61,130,.16);border:1.5px solid var(--teal);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:12px;font-weight:800;color:var(--teal-light);flex-shrink:0;}
.team-info{flex:1;}
.team-name{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--white);}
.team-role{font-size:12.5px;color:var(--muted);font-weight:400;}
@media (max-width:900px){
.origin{grid-template-columns:1fr;}
.origin-aside{position:static;}
}
/* ---------- AMBIENT DECORATION (radar / rail / loop / grid) ---------- */
.deco-host{position:relative;overflow:hidden;}
.deco-host>.wrap{position:relative;z-index:1;}
.deco-grid{
position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);
background-size:28px 28px;
-webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 0%,transparent 75%);
mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 0%,transparent 75%);
}
.deco-radar{
position:absolute;z-index:0;pointer-events:none;
width:440px;height:440px;top:-140px;right:-100px;
opacity:.55;
transition:transform .3s ease-out;
}
.deco-radar svg{width:100%;height:100%;display:block;}
.deco-radar .ring{fill:none;stroke:rgba(108,159,232,.22);stroke-width:1;}
.deco-radar .ring.r2{stroke:rgba(108,159,232,.14);}
.deco-radar .ring.r3{stroke:rgba(108,159,232,.28);stroke-dasharray:2 6;animation:radarDash 40s linear infinite;}
.deco-radar .cross{stroke:rgba(108,159,232,.1);stroke-width:1;}
.deco-radar .sweep{fill:url(#radarSweepGrad);transform-origin:200px 200px;animation:radarSpin 7s linear infinite;}
.deco-radar .blip{fill:var(--teal-light);animation:radarBlip 3.2s ease-in-out infinite;}
.deco-radar .blip.b2{animation-delay:1.1s;}
.deco-radar .blip.b3{animation-delay:2.2s;}
@keyframes radarSpin{to{transform:rotate(360deg);}}
@keyframes radarDash{to{stroke-dashoffset:-400;}}
@keyframes radarBlip{0%,100%{opacity:.9;}50%{opacity:.15;}}
.deco-rail{position:absolute;top:0;right:64px;bottom:0;width:1px;z-index:0;pointer-events:none;}
.deco-rail .rail-line{
position:absolute;top:10%;bottom:10%;left:0;width:1px;
background:linear-gradient(to bottom,transparent,rgba(108,159,232,.55) 12%,rgba(108,159,232,.55) 88%,transparent);
}
.deco-rail .rail-mark{
position:absolute;left:0;width:7px;height:7px;margin-left:-3.5px;margin-top:-3.5px;
border:1.5px solid var(--accent);transform:rotate(45deg);background:transparent;
}
.deco-rail .rail-pulse{
position:absolute;left:0;width:6px;height:6px;margin-left:-3px;margin-top:-3px;border-radius:50%;
background:var(--teal-light);
animation:railTravel 5.5s ease-in-out infinite;
}
@keyframes railTravel{
0%{top:10%;opacity:0;}
10%{opacity:1;}
90%{opacity:1;}
100%{top:90%;opacity:0;}
}
@media (max-width:1200px){
.deco-rail{display:none;}
}
.deco-loop{
position:absolute;z-index:0;pointer-events:none;
top:50%;right:250px;transform:translateY(-50%);
width:min(66vw,860px);
}
.deco-loop svg{width:100%;height:auto;display:block;}
.loop-panel{fill:var(--bg2);}
.loop-track{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.4;stroke-dasharray:2 9;animation:loopFlow 7s linear infinite;}
.loop-node{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.38);stroke-width:1.2;}
.loop-label{font-family:var(--font-body);font-size:10px;font-weight:600;fill:var(--white);text-anchor:middle;letter-spacing:.005em;}
.loop-pulse{fill:var(--teal-light);opacity:.9;}
@keyframes loopFlow{to{stroke-dashoffset:-220;}}
@media (max-width:1400px){
.deco-loop{right:150px;width:min(56vw,660px);}
}
@media (max-width:1200px){
.deco-loop{display:none;}
}
@media (max-width:720px){
.deco-radar{width:280px;height:280px;top:-80px;right:-80px;}
}
/* ---------- GLOBAL REACH MAP (about page) ---------- */
.deco-globalmap{margin-top:32px;padding:24px 24px 20px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.03);}
.globalmap-inner{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:1009.6727/665.96301;}
.deco-globalmap .map-caption{margin-top:14px;text-align:center;}
.globalmap-mask{
position:absolute;inset:0;
background-color:rgba(255,255,255,.14);
-webkit-mask-image:url(/assets/world.svg);mask-image:url(/assets/world.svg);
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
}
.globalmap-overlay{position:absolute;inset:0;width:100%;height:100%;display:block;}
.global-route{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.6;stroke-dasharray:2 8;stroke-linecap:round;animation:globalRouteFlow 3.2s linear infinite;}
.global-port{fill:var(--teal-light);}
.global-hub{fill:var(--teal-light);}
.global-hub-ring{fill:none;stroke:var(--teal-light);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:globalHubPulse 2.4s ease-out infinite;}
.global-label{font-family:var(--font-body);font-size:11px;font-weight:500;fill:rgba(255,255,255,.55);text-anchor:middle;}
.global-label-hub{fill:var(--teal-light);font-weight:700;}
.global-pulse{fill:var(--white);filter:drop-shadow(0 0 4px rgba(255,255,255,.7));}
@keyframes globalHubPulse{0%{transform:scale(.6);opacity:.8;}100%{transform:scale(2.4);opacity:0;}}
@keyframes globalRouteFlow{to{stroke-dashoffset:-100;}}
/* ---------- DIRECTOR HUB DIAGRAM (about page) ---------- */
.team-hub-row{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:32px;align-items:center;margin-top:24px;}
.deco-hub{width:100%;}
.deco-hub svg{width:100%;height:auto;display:block;}
.hub-spoke{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.6;stroke-dasharray:2 8;stroke-linecap:round;animation:globalRouteFlow 3.2s linear infinite;}
.hub-node{fill:rgba(255,255,255,.05);stroke:var(--border);stroke-width:1.2;}
.hub-label{font-family:var(--font-body);font-size:12.5px;font-weight:600;fill:var(--white);text-anchor:middle;}
.hub-sublabel{font-family:var(--font-body);font-size:11px;font-weight:400;fill:var(--muted);text-anchor:middle;}
.hub-center{fill:var(--teal);}
.hub-center-ring{fill:none;stroke:var(--teal-light);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:globalHubPulse 2.6s ease-out infinite;}
.hub-pulse{fill:var(--white);filter:drop-shadow(0 0 4px rgba(255,255,255,.7));}
/* The SEALUTION logogram at the hub's center: the actual mark artwork
(assets/logogram.png), tinted white the same way nav.php's logo-mark
is. Grows/fades in once the diagram scrolls into view, then settles
into a slow, gentle breathing pulse. */
.hub-mark-spin{transform-origin:340px 340px;}
.deco-hub.is-visible .hub-mark-spin{animation:hubMarkSpin 42s linear infinite;}
.hub-mark-img{
filter:brightness(0) invert(1);
transform-origin:340px 340px;
opacity:0;
transform:scale(.7);
}
.deco-hub.is-visible .hub-mark-img{
animation:hubMarkIntro .6s cubic-bezier(.3,.7,.3,1) both,
hubMarkBreathe 4.6s ease-in-out .6s infinite;
}
@keyframes hubMarkSpin{to{transform:rotate(360deg);}}
@keyframes hubMarkIntro{
from{opacity:0;transform:scale(.7);}
to{opacity:1;transform:scale(1);}
}
@keyframes hubMarkBreathe{
0%,100%{transform:scale(1);}
50%{transform:scale(1.035);}
}
@media (max-width:1100px){
.team-hub-row{grid-template-columns:1fr;}
.deco-hub{max-width:480px;margin:0 auto;}
}
/* ---------- GET ON BOARD PAGE ---------- */
.free-badge{
display:inline-flex;align-items:center;gap:8px;
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--teal-light);
background:rgba(7,61,130,.18);
border:1px solid rgba(108,159,232,.35);
border-radius:999px;padding:6px 15px;
}
.free-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal-light);}
.step-card .step-num{
font-family:var(--font-head);
font-size:clamp(26px,2.4vw,34px);font-weight:800;line-height:1;
color:rgba(255,255,255,.16);
margin-bottom:12px;
transition:color .25s ease;
}
.step-card:hover .step-num{color:var(--teal-light);}
.step-card h3{font-size:15.5px;margin-bottom:8px;}
.step-card p{font-size:13.5px;font-weight:400;color:var(--desc);line-height:1.65;}
.train-card{padding:30px 28px;}
.train-card .train-tag{
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--teal-light);margin-bottom:10px;
}
.train-card h3{font-size:19px;margin-bottom:10px;}
.train-card>p{font-size:14px;font-weight:400;color:var(--desc);line-height:1.7;}
.train-topics{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.train-topics li{
display:flex;gap:10px;align-items:flex-start;
font-size:13.5px;color:var(--desc);line-height:1.55;
}
.train-topics li::before{
content:"";width:5px;height:5px;border-radius:50%;flex-shrink:0;
background:var(--teal-light);margin-top:8px;opacity:.7;
}
.train-duration{
display:inline-flex;align-items:center;gap:7px;
margin-top:18px;
font-size:12px;font-weight:500;color:var(--steel);
border:1px solid var(--border);border-radius:999px;padding:6px 14px;
}
.train-duration svg{width:13px;height:13px;stroke:var(--teal-light);flex-shrink:0;}
.not-covered{
margin-top:26px;padding:20px 24px;
border:1px dashed rgba(255,255,255,.18);border-radius:var(--radius);
max-width:720px;
}
.not-covered .label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.not-covered p{font-size:13.5px;color:var(--steel);line-height:1.7;}
.not-covered a{color:var(--teal-light);}
.not-covered a:hover{text-decoration:underline;}
/* Onboarding timeline: four clickable week stops on a progress track */
.tl{margin-top:44px;}
.tl-track{
position:relative;
display:grid;grid-template-columns:repeat(4,1fr);
}
.tl-track.tl-5{grid-template-columns:repeat(5,1fr);}
.tl-line{
position:absolute;left:12.5%;right:12.5%;top:9px;height:2px;
background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;
pointer-events:none;
}
.tl-line.tl-5{left:10%;right:10%;}
.tl-fill{
height:100%;width:0;
background:var(--teal-light);
transition:width .5s cubic-bezier(.3,.7,.3,1);
}
.tl-stop{
position:relative;
background:none;border:none;cursor:pointer;
font-family:var(--font-body);color:inherit;
display:flex;flex-direction:column;align-items:center;gap:11px;
padding:0 8px;
}
.tl-stop:focus-visible{outline:2px solid var(--teal-light);outline-offset:4px;border-radius:8px;}
.tl-dot{
position:relative;
width:20px;height:20px;border-radius:50%;
border:2px solid rgba(255,255,255,.25);
background:var(--navy);
transition:border-color .3s ease;
}
.tl-dot::after{
content:"";position:absolute;inset:4px;border-radius:50%;
background:var(--teal-light);
transform:scale(0);transition:transform .3s ease;
}
.tl-stop.done .tl-dot{border-color:rgba(108,159,232,.5);}
.tl-stop.done .tl-dot::after{transform:scale(.55);opacity:.6;}
.tl-stop.active .tl-dot{border-color:var(--teal-light);}
.tl-stop.active .tl-dot::after{transform:scale(1);opacity:1;}
.tl-week{
font-family:var(--font-head);
font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);transition:color .3s ease;
}
.tl-name{
font-size:13px;font-weight:500;color:var(--steel);
text-align:center;line-height:1.4;
transition:color .3s ease;
}
.tl-stop:hover .tl-week,.tl-stop.active .tl-week{color:var(--teal-light);}
.tl-stop:hover .tl-name,.tl-stop.active .tl-name{color:var(--white);}
.tl-panels{margin-top:30px;position:relative;}
.tl-panel{display:none;}
.tl-panel.active{display:block;animation:tlPanelIn .35s ease both;}
@keyframes tlPanelIn{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
.tl-card{
padding:30px 32px;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
gap:clamp(24px,3.4vw,56px);align-items:start;
}
.tl-card .tl-card-week{
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--teal-light);margin-bottom:8px;
}
.tl-card h3{font-size:19px;margin-bottom:10px;}
.tl-card p{font-size:14px;font-weight:400;color:var(--desc);line-height:1.75;}
.tl-card .step-chips{margin-top:16px;}
.tl-duties{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,32px);
}
.tl-duty-h{
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);margin-bottom:12px;
}
.tl-duty ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.tl-duty li{
display:flex;gap:9px;align-items:flex-start;
font-size:13px;color:var(--desc);line-height:1.55;
}
.tl-duty li::before{
content:"";width:5px;height:5px;border-radius:50%;flex-shrink:0;
background:var(--teal-light);margin-top:7px;opacity:.7;
}
@media (max-width:900px){
.tl-card{grid-template-columns:1fr;}
}
@media (max-width:520px){
.tl-duties{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
.tl-panel.active{animation:none;}
.tl-fill,.tl-dot,.tl-dot::after{transition:none;}
}
@media (max-width:720px){
.tl-week{font-size:10px;}
.tl-name{font-size:11px;}
.tl-stop{padding:0 4px;}
.tl-card{padding:22px;}
.tl-track.tl-5{grid-template-columns:repeat(3,1fr);row-gap:22px;}
.tl-line.tl-5{display:none;}
}
/* ---------- PRICING PAGE ---------- */
/* Decorative wave divider: two tileable sine paths, each drawn twice
side by side (2400 units = two 1200-unit/4-period copies) so a
translateX(-50%) loop is perfectly seamless, same trick as .ticker-track. */
.deco-wave{position:relative;height:88px;overflow:hidden;pointer-events:none;}
.wave-svg{position:absolute;top:0;left:0;width:200%;height:100%;display:block;}
.wave-path{fill:none;stroke-linecap:round;}
.wave-back{stroke:rgba(255,255,255,.1);stroke-width:1.4;animation:waveDrift 52s linear infinite;}
.wave-front{stroke:rgba(108,159,232,.4);stroke-width:1.6;animation:waveDrift 38s linear infinite reverse;}
@keyframes waveDrift{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
.wave-back,.wave-front{animation:none;}
}
@media (max-width:720px){
.deco-wave{height:58px;}
}
.currency-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px;flex-wrap:wrap;}
.currency-label{font-size:12.5px;color:var(--muted);letter-spacing:.04em;}
.currency-tabs{margin-top:0;}
.currency-tabs .mod-tab{padding:8px 20px;}
.price-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
margin-top:36px;align-items:stretch;
}
.price-card{
display:flex;flex-direction:column;
padding:32px 28px;
}
.price-card.accent{border-color:rgba(108,159,232,.5);}
.price-badge{
align-self:flex-start;
display:inline-flex;align-items:center;gap:7px;
font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--teal-light);
background:rgba(7,61,130,.16);border:1px solid rgba(108,159,232,.3);
border-radius:999px;padding:5px 13px;margin-bottom:18px;
}
.price-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal-light);flex-shrink:0;}
.price-card h3{font-size:19px;margin-bottom:6px;}
.price-tagline{font-size:13px;color:var(--desc);line-height:1.6;margin-bottom:20px;}
.price-amount-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
.price-amount{font-family:var(--font-head);font-size:clamp(28px,2.6vw,36px);font-weight:800;color:var(--white);letter-spacing:-.02em;}
.price-unit{font-size:12.5px;color:var(--muted);}
.price-subnote{font-size:12px;color:var(--muted);margin-bottom:20px;min-height:16px;}
.price-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;}
.price-pills span{
font-size:10.5px;font-weight:500;letter-spacing:.04em;
color:var(--steel);background:rgba(255,255,255,.05);
border:1px solid var(--border);border-radius:99px;padding:4px 11px;
}
.price-feats{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1;}
.price-feats li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--desc);line-height:1.6;}
.price-feats li strong{color:var(--white);font-weight:600;}
.price-feats .pf-check{
width:17px;height:17px;border-radius:50%;flex-shrink:0;margin-top:1px;
border:1.5px solid var(--teal);color:var(--teal-light);background:rgba(7,61,130,.14);
display:flex;align-items:center;justify-content:center;font-size:9px;
}
.price-card .btn{width:100%;margin-top:auto;}
.price-derived{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;}
/* Retainer payment schedule */
.pay-schedule{margin-top:44px;}
.pay-track{
display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
margin-top:24px;
}
.pay-month{
position:relative;
border:1px solid var(--border);border-radius:10px;
background:var(--card);
padding:14px 10px 12px;text-align:center;
transition:border-color .2s ease,background .2s ease;
}
.pay-month.pay-due{border-color:rgba(108,159,232,.5);background:rgba(7,61,130,.14);}
.pay-month .pm-num{font-family:var(--font-head);font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.pay-month.pay-due .pm-num{color:var(--teal-light);}
.pay-month .pm-mark{
width:9px;height:9px;border-radius:50%;background:var(--teal-light);
margin:8px auto 0;opacity:0;transform:scale(.5);
transition:opacity .2s ease,transform .2s ease;
}
.pay-month.pay-due .pm-mark{opacity:1;transform:scale(1);}
.pay-note{font-size:12px;color:var(--desc);text-align:center;margin-top:16px;line-height:1.6;}
.pay-note strong{color:var(--white);}
/* Comparison table */
.price-compare-wrap{margin-top:56px;overflow-x:auto;}
.price-compare{width:100%;border-collapse:collapse;min-width:640px;}
.price-compare th,.price-compare td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--border);}
.price-compare th{font-family:var(--font-head);font-size:12.5px;font-weight:700;color:var(--white);}
.price-compare td:first-child,.price-compare th:first-child{text-align:left;font-weight:500;color:var(--desc);font-size:13px;}
.price-compare th:first-child{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;}
.price-compare td{font-size:13px;color:var(--steel);}
.price-compare .yes{color:var(--teal-light);font-size:15px;}
.price-compare .no{color:var(--faint);}
.price-compare tbody tr:hover{background:rgba(255,255,255,.02);}
@media (max-width:960px){
.price-grid{grid-template-columns:1fr;}
.pay-track{grid-template-columns:repeat(3,1fr);row-gap:10px;}
}
/* FAQ accordion (native details/summary, no JS needed) */
.faq-grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);
gap:clamp(28px,4vw,72px);align-items:start;
margin-top:32px;
}
.faq{display:flex;flex-direction:column;gap:12px;}
.faq-aside{position:sticky;top:calc(var(--nav-h) + 24px);}
.faq-aside .card{padding:28px;}
.faq-aside h3{font-size:18px;margin:10px 0 10px;}
.faq-aside p{font-size:13.5px;font-weight:400;color:var(--desc);line-height:1.7;}
.faq-aside .btn{margin-top:18px;width:100%;}
.faq-aside .faq-aside-note{font-size:12px;color:var(--muted);font-style:italic;margin-top:14px;text-align:center;}
@media (max-width:960px){
.faq-grid{grid-template-columns:1fr;}
.faq-aside{position:static;}
}
.faq-item{
background:var(--card);border:1px solid var(--border);border-radius:12px;
transition:border-color .25s ease,background .25s ease;
}
.faq-item[open]{border-color:rgba(108,159,232,.35);background:var(--card-hover);}
.faq-item summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 22px;
font-family:var(--font-head);font-size:14.5px;font-weight:600;color:var(--white);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
content:"+";
font-family:var(--font-body);font-size:20px;font-weight:300;line-height:1;
color:var(--teal-light);flex-shrink:0;
transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{padding:0 22px 20px;}
.faq-item .faq-a p{font-size:14px;font-weight:400;color:var(--desc);line-height:1.75;}
.faq-item .faq-a p+p{margin-top:10px;}
/* ---------- BLOG ---------- */
.blog-filter-bar{
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
margin-top:36px;padding-bottom:20px;border-bottom:1px solid var(--border);
}
.blog-sort-field{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);flex-shrink:0;}
.blog-sort-field select{
background:#0E1B31;color:var(--white);border:1px solid var(--border);border-radius:4px;
font-family:var(--font-body);font-size:13px;padding:8px 11px;outline:none;cursor:pointer;
}
.blog-sort-field select:focus{border-color:rgba(108,159,232,.5);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;}
.blog-card.is-hidden{display:none;}
.blog-card{display:flex;flex-direction:column;padding:26px 26px 24px;}
.blog-tag{
display:inline-block;
align-self:flex-start;
font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--teal-light);
background:rgba(7,61,130,.16);border:1px solid rgba(108,159,232,.3);
border-radius:999px;padding:5px 13px;margin-bottom:16px;
}
.blog-card h3{font-size:18px;line-height:1.35;margin-bottom:10px;}
.blog-card p{font-size:13.5px;font-weight:400;color:var(--desc);line-height:1.7;flex:1;}
.blog-meta{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
font-size:11.5px;color:var(--muted);margin-top:18px;margin-bottom:16px;
}
.blog-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.blog-read{
font-size:13px;font-weight:600;color:var(--teal-light);
display:inline-flex;align-items:center;gap:6px;
}
.blog-card:hover .blog-read{color:var(--white);}
/* KUMA hardware research note: hull-risk meter on the mounting comparison cards */
.kuma-risk{display:flex;align-items:center;gap:5px;margin-top:16px;}
.kuma-risk-dot{width:7px;height:7px;border-radius:50%;background:var(--border);flex-shrink:0;}
.kuma-risk-dot.on{background:var(--teal-light);}
.kuma-risk-lbl{font-size:11px;color:var(--muted);margin-left:5px;}
/* KUMA founder-note carousel: several short notebook entries, auto-advancing */
.kn-note-body{min-height:210px;}
.kn-note-slide{display:none;font-size:13.5px;color:var(--desc);line-height:1.7;}
.kn-note-slide.active{display:block;animation:knNoteIn .35s ease both;}
@keyframes knNoteIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.kn-note-nav{display:flex;gap:7px;margin-top:16px;}
.kn-note-dot{
width:7px;height:7px;border-radius:50%;background:var(--border);border:none;padding:0;
cursor:pointer;transition:background .2s ease,transform .2s ease;
}
.kn-note-dot:hover{background:rgba(108,159,232,.5);}
.kn-note-dot.active{background:var(--teal-light);transform:scale(1.4);}
@media (prefers-reduced-motion:reduce){
.kn-note-slide.active{animation:none;}
}
/* Article header (blog post pages) */
.article-meta{
display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
font-size:12.5px;color:var(--muted);margin-top:16px;
}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);flex-shrink:0;}
/* Article body prose */
.prose{max-width:720px;margin:0 auto;}
.prose > * + *{margin-top:20px;}
.prose h2{font-size:clamp(19px,2.2vw,23px);margin-top:44px;letter-spacing:-.01em;}
.prose h2:first-child{margin-top:0;}
.prose p{font-size:15px;font-weight:400;color:var(--desc);line-height:1.85;}
.prose a{color:var(--teal-light);text-decoration:underline;text-decoration-color:rgba(108,159,232,.35);text-underline-offset:2px;}
.prose a:hover{color:var(--white);text-decoration-color:currentColor;}
.prose blockquote{
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
padding:20px 24px;font-size:15.5px;font-style:italic;color:var(--white);line-height:1.7;
}
.prose ul{padding-left:22px;}
.prose li{font-size:15px;font-weight:400;color:var(--desc);line-height:1.75;}
.prose li + li{margin-top:8px;}
.prose strong{color:var(--white);font-weight:600;}
/* Article body section: keep the top space (matches hero-to-body spacing
elsewhere) but cut the bottom short, since this section runs straight
into the CTA with no section in between to justify a full double gap. */
.article-section{padding-bottom:8px;}
/* ---------- ROADMAP TIMELINE (in-article visual) ---------- */
/* A vertical stop-list, one entry per roadmap item, each honestly labeled
with its real stage rather than rounded up to sound further along. Pure
CSS, no JS: this is a reading aid, not a widget. */
/* Jump targets from the timeline links land clear of the fixed nav */
.prose h2[id^="rm-"]{scroll-margin-top:calc(var(--nav-h) + 20px);}
.rm-timeline{
max-width:720px;margin:36px auto 52px;
padding:28px 24px 4px 52px;
position:relative;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.rm-timeline::before{
content:"";position:absolute;left:33px;top:32px;bottom:30px;width:1px;
background:var(--border);
}
.rm-stop{position:relative;padding-bottom:28px;}
.rm-stop:last-child{padding-bottom:0;}
.rm-stop::before{
content:"";position:absolute;left:-24px;top:4px;
width:11px;height:11px;border-radius:50%;
background:var(--bg);border:2px solid var(--border);
}
.rm-stop.is-live::before{border-color:var(--teal-light);background:var(--teal-light);}
.rm-stop.is-active::before{border-color:var(--teal-light);}
.rm-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.rm-num{font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--faint);}
.rm-title{
font-size:15px;font-weight:700;color:var(--white);
text-decoration:none;transition:color .2s ease;
}
.rm-title:hover{color:var(--teal-light);}
.rm-stage{
font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
padding:3px 9px;border-radius:3px;
border:1px solid var(--border);color:var(--muted);
margin-left:auto;white-space:nowrap;
}
.rm-stop.is-live .rm-stage{border-color:rgba(108,159,232,.4);color:var(--teal-light);background:rgba(7,61,130,.16);}
.rm-stop.is-active .rm-stage{border-color:rgba(108,159,232,.3);color:var(--teal-light);}
.rm-summary{font-size:13.5px;color:var(--desc);line-height:1.6;margin-top:6px;max-width:520px;}
@media (max-width:640px){
.rm-head{gap:6px 8px;}
.rm-stage{margin-left:0;}
}
/* "What's the challenge?" callout, one per roadmap item. Same treatment as
.pull-quote elsewhere in the site: plain tinted box, no border. */
.rm-challenge{padding:16px 22px;background:rgba(7,61,130,.12);border-radius:10px;}
.rm-challenge-label{
font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--teal-light);margin-bottom:8px;
}
.rm-challenge p{font-size:16px;font-style:italic;color:var(--white);font-weight:400;line-height:1.65;margin:0;}
/* More from the blog, at the end of each article */
.more-posts{margin-top:64px;padding-top:40px;border-top:1px solid var(--border);}
.more-posts-head{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;text-align:center;}
.more-posts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.more-post-card{padding:20px 22px;}
.more-post-card .blog-tag{margin-bottom:10px;}
.more-post-card h4{font-size:14.5px;color:var(--white);font-weight:700;line-height:1.4;}
@media (max-width:900px){
.blog-grid{grid-template-columns:1fr;}
.more-posts-grid{grid-template-columns:1fr;}
}
/* ---------- SIMPLE CONTENT PAGES (privacy / terms) ---------- */
.legal{max-width:720px;margin:0 auto;padding:calc(var(--nav-h) + 60px) var(--pad-x) 100px;}
.legal h1{font-size:28px;margin-bottom:8px;}
.legal h2{font-size:16px;margin:28px 0 8px;}
.legal p{font-size:14px;font-weight:400;color:var(--desc);margin-bottom:6px;line-height:1.75;}
.legal em{color:var(--muted);font-size:14px;}
/* ---------- GLOSSARY ---------- */
.gl-controls{
display:flex;flex-wrap:wrap;gap:12px;align-items:center;
margin-top:32px;margin-bottom:8px;
}
.gl-search-wrap{position:relative;flex:1;min-width:220px;}
.gl-search{
width:100%;background:#0E1B31;border:1px solid var(--border);border-radius:4px;
padding:11px 14px 11px 38px;color:var(--white);font-size:14px;font-family:var(--font-body);
outline:none;transition:border-color .2s ease;
}
.gl-search:focus{border-color:rgba(108,159,232,.5);}
.gl-search::placeholder{color:var(--faint);}
.gl-search-ico{
position:absolute;left:12px;top:50%;transform:translateY(-50%);
width:15px;height:15px;color:var(--faint);pointer-events:none;
}
.gl-tabs{display:flex;flex-wrap:wrap;gap:8px;}
.gl-tab{
font-family:var(--font-body);font-size:12.5px;font-weight:600;
background:transparent;border:1px solid var(--border);border-radius:4px;
color:var(--muted);padding:8px 13px;cursor:pointer;
transition:border-color .2s ease,color .2s ease,background .2s ease;
white-space:nowrap;
}
.gl-tab:hover{color:var(--white);border-color:rgba(255,255,255,.28);}
.gl-tab.active{color:var(--teal-light);border-color:rgba(108,159,232,.4);background:rgba(7,61,130,.16);}
.gl-count{font-size:14px;color:var(--faint);margin:0 0 24px;}
.gl-cat{
margin-top:44px;padding-bottom:10px;border-bottom:1px solid var(--border);
font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-light);
}
.gl-cat:first-of-type{margin-top:0;}
.gl-row{
display:grid;grid-template-columns:230px 1fr;gap:8px 28px;
padding:16px 0;border-top:1px solid var(--border);
}
.gl-term{font-weight:700;color:var(--white);font-size:15px;line-height:1.5;}
.gl-def{font-size:14px;color:var(--desc);line-height:1.75;}
.gl-empty{display:none;padding:40px 0;text-align:center;color:var(--muted);font-size:14px;}
@media (max-width:700px){
.gl-row{grid-template-columns:1fr;gap:4px;}
}
/* ---------- STATUS FLOW (B2B lifecycle pipelines) ---------- */
.b2b-flow-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.b2b-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:28px;}
.b2b-flow:last-of-type{margin-bottom:0;}
.b2b-flow .step{
font-size:12px;font-weight:600;color:var(--teal-light);
background:rgba(7,61,130,.14);border:1px solid rgba(108,159,232,.25);
border-radius:3px;padding:5px 11px;white-space:nowrap;
text-decoration:none;display:inline-block;transition:border-color .15s ease,background .15s ease;
}
a.step:hover{border-color:rgba(108,159,232,.55);background:rgba(7,61,130,.22);}
.b2b-flow .arrow{color:var(--faint);font-size:13px;}
.b2b-flow .branch{
font-size:11.5px;font-weight:500;color:var(--muted);
border:1px dashed var(--border);border-radius:3px;padding:5px 11px;white-space:nowrap;
}
/* ---------- SPREADSHEET GRID MOCKUP ---------- */
/* Illustrates the bulk container editor. Static, not a real widget: the one
"selected" cell and the pasted-range tint are fixed, not interactive. */
.b2b-sheet{
margin-top:20px;
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
overflow-x:auto;
}
.b2b-sheet-inner{min-width:640px;}
.b2b-sheet-row{
display:grid;grid-template-columns:34px 1.3fr 1fr 1fr 1.1fr 1fr;
border-bottom:1px solid var(--border);
}
.b2b-sheet-row:last-child{border-bottom:0;}
.b2b-sheet-row.head{background:rgba(255,255,255,.03);}
.b2b-sheet-row.head span{
font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.b2b-sheet-row span{
padding:9px 12px;font-size:12.5px;color:var(--desc);
border-right:1px solid var(--border);
display:flex;align-items:center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.b2b-sheet-row span:last-child{border-right:0;}
.b2b-sheet-row span.rn{
color:var(--faint);font-size:11px;justify-content:center;
background:rgba(255,255,255,.02);
}
.b2b-sheet-row .mono{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:11.5px;}
.b2b-sheet-row span.pasted{background:rgba(7,61,130,.16);}
.b2b-sheet-row span.active-cell{
background:rgba(7,61,130,.22);
outline:1.5px solid var(--teal-light);outline-offset:-1.5px;
color:var(--white);
}
.b2b-sheet-caption{
padding:10px 14px;border-top:1px solid var(--border);
font-size:11.5px;color:var(--faint);
}
/* ---------- DOCUMENT VERSION CHIPS ---------- */
.b2b-versions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.b2b-version{
display:flex;flex-direction:column;gap:2px;
border:1px solid var(--border);border-radius:4px;
padding:8px 13px;min-width:74px;
}
.b2b-version .vn{font-size:13px;font-weight:700;color:var(--desc);}
.b2b-version .vd{font-size:10px;color:var(--faint);}
.b2b-version.current{border-color:rgba(108,159,232,.4);background:rgba(7,61,130,.14);}
.b2b-version.current .vn{color:var(--teal-light);}
.b2b-version.current .vd{color:var(--teal-light);opacity:.8;}
/* ---------- VESSEL-STRING STITCH ---------- */
.b2b-stitch{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:18px 0;padding:14px 16px;
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12.5px;
}
.b2b-stitch span.field{color:var(--desc);background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:3px;padding:5px 10px;}
.b2b-stitch span.plus{color:var(--faint);font-family:var(--font-body);}
.b2b-stitch span.eq{color:var(--faint);font-family:var(--font-body);}
.b2b-stitch span.result{color:var(--teal-light);background:rgba(7,61,130,.16);border:1px solid rgba(108,159,232,.3);border-radius:3px;padding:5px 10px;}
@media (max-width:640px){
.b2b-stitch{font-size:11.5px;}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
[data-reveal],.stagger>*{opacity:1;transform:none;transition:none;}
.ticker-track,.mod-chip.in,.cta-aurora,
.deco-radar .sweep,.deco-radar .ring.r3,.deco-radar .blip,
.deco-rail .rail-pulse,.loop-track,
.global-route,.global-hub-ring,.hub-spoke,.hub-center-ring,
.port-dot::after,.vessel-marker::after,
.hero-badge .pulse-dot,.hud-live .pulse-dot,
.mod-chip-cta .dot{animation:none;}
.deco-rail .rail-pulse,.loop-pulse,.global-pulse,.hub-pulse{display:none;}
.btn:hover,.card:hover,.mod-chip:hover{transform:none;}
.deco-radar{transition:none;}
.hub-mark-spin{animation:none;}
.hub-mark-img{animation:none;opacity:1;transform:scale(1);}
}
/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
:root{--pad-x:48px;}
.story-grid{grid-template-columns:minmax(0,380px) minmax(0,1fr);}
}
@media (max-width:960px){
.nav-links{
position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
height:calc(100vh - var(--nav-h));overflow-y:auto;z-index:110;
background:rgba(5,10,19,.98);flex-direction:column;align-items:flex-start;
padding:24px var(--pad-x);gap:20px;
transform:translateX(100%);transition:transform .25s ease;
}
.nav-links.open{transform:translateX(0);}
.nav-toggle{display:block;}
.nav-links .btn{margin-top:8px;}
.story-grid{grid-template-columns:1fr;gap:0;}
.story-map-wrap{
order:-1;
position:sticky;top:calc(var(--nav-h) + 8px);
height:44vh;min-height:320px;
z-index:5;
}
.story-steps{padding-top:28px;}
.story-step{min-height:0;padding:34px 0;}
.story-step-card{opacity:1;transform:none;}
.hud-coords{display:none;}
}
@media (max-width:900px){
.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}
.mod-chip{max-width:calc(50% - 5px);}
.hero-content{max-width:100%;}
.hero-overlay{
background:
linear-gradient(180deg,rgba(11,25,45,.85) 0%,rgba(11,25,45,.6) 55%,#0C2038 100%);
}
.hero-glow{display:none;}
}
@media (max-width:720px){
:root{--pad-x:24px;}
.mod-chip{max-width:100%;flex:1 1 100%;}
.footer-inner{flex-direction:column;align-items:flex-start;}
.hero-v2{min-height:100svh;}
.hero-stats{gap:22px;}
.hero-caption{display:none;}
}
/* ============ CLIENT LOGOS STRIP ============
Add this block to assets/style.css
Placement: after the .client-strip rules
============================================ */
.logos-strip {
padding: 48px 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.logos-ticker-wrap {
overflow: hidden;
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
}
.logos-ticker-track {
display: flex;
align-items: center;
gap: 56px;
width: max-content;
animation: logoScroll 48s linear infinite;
}
.logos-ticker-track:hover {
animation-play-state: paused;
}
.logo-slot {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--text, #fff);
width: 160px;
height: 64px;
opacity: 0.6;
transition: opacity 0.25s ease;
}
.logo-slot:hover {
opacity: 1;
}
.logo-slot svg {
height: 64px;
width: auto;
display: block;
}
/* Real client logos: colors vary (dark text, light text, mixed icons), so by
default every logo is forced to a flat white silhouette (same size box,
same treatment) and only reveals its real colors on hover. That keeps the
strip visually uniform no matter what gets dropped into /assets/clients/. */
.logo-slot img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
filter: brightness(0) invert(1);
transition: filter 0.25s ease;
}
.logo-slot:hover img {
filter: none;
}
@keyframes logoScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.logos-ticker-track { animation: none; }
}
@media (max-width: 600px) {
.logos-strip { padding: 36px 0; }
.logos-ticker-track { gap: 28px; }
.logo-slot { width: 110px; height: 40px; }
.logo-slot svg { height: 26px; }
}
/* ================================================================
KNOWLEDGE BASE
================================================================ */
.kb-shell{display:flex;align-items:flex-start;padding-top:var(--nav-h);}
.kb-sidebar{
width:272px;flex-shrink:0;
position:sticky;top:var(--nav-h);
height:calc(100vh - var(--nav-h));
overflow-y:auto;
border-right:1px solid var(--border);
padding-bottom:40px;
}
.kb-sidebar::-webkit-scrollbar{width:4px;}
.kb-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.kb-search-wrap{position:relative;padding:20px 18px 14px;}
.kb-search{
width:100%;background:#0E1B31;border:1px solid var(--border);border-radius:4px;
padding:9px 12px 9px 34px;color:var(--white);font-size:13px;font-family:var(--font-body);outline:none;
transition:border-color .2s ease;
}
.kb-search:focus{border-color:rgba(108,159,232,.5);}
.kb-search::placeholder{color:var(--faint);}
.kb-search-ico{position:absolute;left:29px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--faint);pointer-events:none;}
.kb-nav-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:16px 18px 6px;}
.kb-nav-label:first-of-type{padding-top:4px;}
.kb-nav-link{
display:block;padding:6px 18px 6px 20px;font-size:13px;color:var(--desc);text-decoration:none;
border-left:2px solid transparent;transition:all .12s ease;
}
.kb-nav-link:hover{color:var(--white);background:rgba(255,255,255,.03);}
.kb-nav-link.active{color:var(--teal-light);border-left-color:var(--teal-light);background:rgba(7,61,130,.1);font-weight:600;}
.kb-main{flex:1;min-width:0;padding:0 0 80px;}
.kb-hero{padding:44px 44px 30px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.kb-hero-content{position:relative;z-index:1;}
.kb-hero .eyebrow{justify-content:flex-start;}
.kb-hero h1{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.01em;margin:10px 0 12px;max-width:640px;}
.kb-hero p.lead{font-size:15px;color:var(--desc);max-width:600px;line-height:1.7;margin-bottom:22px;}
.kb-hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;}
.kb-hero-pill{
display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--desc);
background:var(--card);border:1px solid var(--border);border-radius:4px;padding:7px 13px;
}
.kb-hero-pill .dot{width:5px;height:5px;border-radius:50%;background:var(--teal-light);flex-shrink:0;}
.kb-section{padding:32px 44px;border-bottom:1px solid var(--border);}
.kb-section:last-of-type{border-bottom:0;}
.kb-section-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.kb-section-num{
width:30px;height:30px;border-radius:4px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--white);
background:var(--teal);
}
.kb-section-num.is-engine{background:#2B4C6F;}
.kb-section-num.is-teal{background:var(--teal);}
.kb-section-num.is-success{background:#1E7A52;}
.kb-section-num.is-amber{background:#8a5a1a;}
.kb-section-num.is-danger{background:#7a2e26;}
.kb-section-title{font-size:20px;font-weight:700;color:var(--white);}
.kb-section-sub{font-size:13.5px;color:var(--desc);max-width:680px;line-height:1.7;margin:8px 0 22px;}
/* pillar overview cards */
.kb-pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:6px;}
.kb-pillar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:border-color .2s ease,transform .2s ease;}
.kb-pillar:hover{border-color:rgba(108,159,232,.35);transform:translateY(-2px);}
.kb-pillar h4{font-size:14.5px;margin:12px 0 6px;}
.kb-pillar p{font-size:12.5px;color:var(--desc);line-height:1.7;margin:0;}
.kb-pillar-ico-wrap{
width:40px;height:40px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
background:rgba(7,61,130,.16);
}
.kb-pillar:nth-child(2) .kb-pillar-ico-wrap{background:rgba(43,76,111,.22);}
.kb-pillar:nth-child(3) .kb-pillar-ico-wrap{background:rgba(30,122,82,.16);}
.kb-pillar:nth-child(4) .kb-pillar-ico-wrap{background:rgba(199,122,31,.16);}
.kb-pillar .kb-pillar-ico{width:20px;height:20px;color:var(--teal-light);}
.kb-pillar:nth-child(2) .kb-pillar-ico{color:#8CB4E8;}
.kb-pillar:nth-child(3) .kb-pillar-ico{color:#4FBE8E;}
.kb-pillar:nth-child(4) .kb-pillar-ico{color:#E8B370;}
/* accordion, built on native */
.kb-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:10px;background:var(--card);}
.kb-card summary{
display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none;list-style:none;
}
.kb-card summary::-webkit-details-marker{display:none;}
.kb-card summary:hover{background:rgba(255,255,255,.02);}
.kb-card[open] summary{border-bottom:1px solid var(--border);}
.kb-step-tag{
font-family:var(--font-head);font-size:11px;font-weight:700;color:var(--white);
background:var(--teal);border-radius:3px;padding:3px 8px;flex-shrink:0;
}
.kb-card-title{font-size:14.5px;font-weight:600;color:var(--white);flex:1;}
.kb-card-cat{font-size:11px;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:3px;padding:3px 9px;flex-shrink:0;white-space:nowrap;}
.kb-chevron{color:var(--faint);flex-shrink:0;transition:transform .2s ease;width:16px;height:16px;}
.kb-card[open] .kb-chevron{transform:rotate(180deg);}
.kb-body{padding:4px 18px 20px;}
.kb-desc{font-size:13.5px;color:var(--desc);line-height:1.8;margin:0 0 14px;}
.kb-desc:last-child{margin-bottom:0;}
.kb-desc strong{color:var(--white);font-weight:600;}
.kb-desc code{background:#0E1B31;color:var(--teal-light);padding:2px 7px;border-radius:3px;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12px;}
.kb-steps{list-style:none;margin:0 0 14px;padding:0;counter-reset:kbstep;}
.kb-steps li{counter-increment:kbstep;position:relative;padding:6px 0 6px 30px;font-size:13.5px;color:var(--desc);line-height:1.6;}
.kb-steps li::before{
content:counter(kbstep);position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;
background:rgba(7,61,130,.16);color:var(--teal-light);font-family:ui-monospace,monospace;font-size:10.5px;font-weight:700;
display:flex;align-items:center;justify-content:center;
}
.kb-note{display:flex;gap:10px;background:rgba(7,61,130,.12);border-radius:10px;padding:12px 15px;font-size:13px;color:var(--desc);margin:12px 0;line-height:1.65;}
.kb-note b{color:var(--white);}
.kb-note.amber{background:rgba(199,122,31,.12);}
.kb-note.amber b{color:#E8B370;}
.kb-note-ico{width:16px;height:16px;color:var(--teal-light);flex-shrink:0;margin-top:2px;}
.kb-note.amber .kb-note-ico{color:#E8B370;}
.kb-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0;}
.kb-compare .col{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:8px;padding:14px 16px;}
.kb-compare .col h5{font-size:13px;margin:0 0 6px;color:var(--white);}
.kb-compare .col p{margin:0;font-size:12.5px;color:var(--desc);line-height:1.6;}
.kb-table{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0 14px;}
@media (max-width:720px){
.kb-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
}
.kb-table th{text-align:left;color:var(--faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:7px 10px;border-bottom:1px solid var(--border);}
.kb-table td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--desc);vertical-align:top;}
.kb-table td:first-child{font-weight:600;color:var(--white);white-space:nowrap;}
/* status badges (distinct palette per state family) */
.kb-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:3px;}
.kb-b-grey{background:rgba(255,255,255,.06);color:var(--muted);}
.kb-b-teal{background:rgba(7,61,130,.16);color:var(--teal-light);}
.kb-b-success{background:rgba(30,122,82,.16);color:#4FBE8E;}
.kb-b-amber{background:rgba(199,122,31,.16);color:#E8B370;}
.kb-b-danger{background:rgba(178,58,46,.16);color:#E88A80;}
/* reuse the b2b-flow chip language for every status pipeline in the KB */
.kb-legend-row{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0;}
/* interactive: shipment status tracker */
.kb-tracker{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:10px;padding:16px;margin:14px 0;}
.kb-tstage-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.kb-tstage{
font-size:12px;font-weight:600;padding:7px 12px;border-radius:4px;cursor:pointer;
background:var(--card);border:1px solid var(--border);color:var(--muted);transition:all .15s ease;white-space:nowrap;
}
.kb-tstage:hover{border-color:rgba(255,255,255,.3);color:var(--white);}
.kb-tstage.active{background:var(--teal);border-color:var(--teal);color:var(--white);}
.kb-tstage.past{background:rgba(7,61,130,.14);border-color:transparent;color:var(--teal-light);}
.kb-tarrow{color:var(--faint);font-size:13px;}
.kb-texc-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.kb-texc{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:4px;background:rgba(178,58,46,.12);border:1px solid rgba(178,58,46,.28);color:#E88A80;cursor:pointer;}
.kb-texc.active{background:#7a2e26;color:var(--white);}
.kb-tresult{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px 16px;font-size:13px;color:var(--desc);line-height:1.65;}
.kb-tresult b{color:var(--white);}
/* interactive: sailing call simulator */
.kb-sim{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:10px;padding:16px;margin:14px 0;}
.kb-sim-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px;}
.kb-sim-field label{display:block;font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.kb-sim-field input[type=date],.kb-sim-field input[type=number]{
width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:4px;
font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12.5px;outline:none;
background:#0E1B31;color:var(--white);
}
.kb-sim-field input:focus{border-color:rgba(108,159,232,.5);}
.kb-sim-check{display:flex;align-items:center;gap:7px;padding-top:20px;font-size:12.5px;color:var(--desc);}
.kb-sim-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;}
.kb-sim-cell{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:9px 12px;}
.kb-sim-cell .lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700;margin-bottom:3px;}
.kb-sim-cell .val{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12.5px;color:var(--white);font-weight:600;}
.kb-sim-cell.dim .val{color:var(--faint);}
/* interactive: package calculator */
.kb-calc-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.kb-calc-row label{font-size:12.5px;color:var(--desc);font-weight:600;}
.kb-calc-row input{
padding:8px 11px;border:1px solid var(--border);border-radius:4px;
font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:13px;width:170px;outline:none;
background:#0E1B31;color:var(--white);
}
.kb-calc-row input:focus{border-color:rgba(108,159,232,.5);}
.kb-pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.kb-pkg-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px;}
.kb-pkg-card.express{border-color:rgba(199,122,31,.35);}
.kb-pkg-card.standard{border-color:rgba(108,159,232,.35);}
.kb-pkg-card.economy{border-color:rgba(30,122,82,.3);}
.kb-pkg-mult{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:3px;margin-bottom:8px;}
.kb-pkg-card.express .kb-pkg-mult{background:rgba(199,122,31,.15);color:#E8B370;}
.kb-pkg-card.standard .kb-pkg-mult{background:rgba(7,61,130,.16);color:var(--teal-light);}
.kb-pkg-card.economy .kb-pkg-mult{background:rgba(30,122,82,.15);color:#4FBE8E;}
.kb-pkg-card h5{margin:0 0 3px;font-size:14px;color:var(--white);}
.kb-pkg-price{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:16px;font-weight:700;margin:8px 0 0;color:var(--white);}
.kb-pkg-card ul{margin:10px 0 0;padding-left:16px;font-size:11.5px;color:var(--muted);}
.kb-pkg-card ul li{margin-bottom:3px;}
/* quick reference legend grid */
.kb-legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.kb-legend-block{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.kb-legend-block h4{font-size:13.5px;margin:0 0 12px;color:var(--white);}
/* The 'why' note beside a legend heading: present, but never louder than
the statuses it is annotating. */
.kb-legend-block h4 .kb-legend-note{font-size:11.5px;font-weight:500;color:var(--desc);}
/* Keyboard keys. Used in the handbook and the blog when naming a shortcut;
the browser default is a bare monospace run that reads as a typo here. */
kbd{
display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.85em;line-height:1;padding:3px 6px;margin:0 1px;
color:var(--white);background:rgba(255,255,255,.07);
border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;
white-space:nowrap;
}
@media (max-width:900px){
.kb-shell{flex-direction:column;}
.kb-sidebar{
position:relative;top:0;height:auto;width:100%;max-height:280px;
border-right:0;border-bottom:1px solid var(--border);
}
.kb-hero,.kb-section{padding:26px 20px;}
.kb-pillar-grid,.kb-pkg-grid,.kb-legend-grid,.kb-compare,.kb-sim-grid{grid-template-columns:1fr;}
.kb-calc-row input{width:100%;}
}
/* ---------- KB COMPLETE-FLOW MAP (animated interactive tour) ---------- */
.kbm-wrap{
position:relative;margin-top:18px;border-radius:14px;overflow:hidden;
background:radial-gradient(circle at 15% 15%,rgba(7,61,130,.14),transparent 45%),
radial-gradient(circle at 85% 85%,rgba(43,76,111,.12),transparent 45%),
#0A1728;
border:1px solid var(--border);
padding:14px 10px 6px;
}
.kbm-badge{
display:inline-flex;align-items:center;gap:7px;
font-size:11px;font-weight:600;color:var(--teal-light);
background:rgba(7,61,130,.16);border:1px solid rgba(108,159,232,.3);
border-radius:99px;padding:5px 12px;margin-bottom:6px;
}
.kbm-badge .dot{width:5px;height:5px;border-radius:50%;background:var(--teal-light);animation:badgePulse 2.6s ease-in-out infinite;}
.kbm-svg{width:100%;height:auto;display:block;}
.kbm-route{fill:none;stroke:rgba(108,159,232,.5);stroke-width:2;stroke-dasharray:1 8;stroke-linecap:round;}
.kbm-wp{cursor:pointer;}
.kbm-dot{stroke:#050A13;stroke-width:2;transition:transform .15s ease,filter .15s ease;transform-box:fill-box;transform-origin:center;}
.kbm-wp:hover .kbm-dot{transform:scale(1.15);}
.kbm-dot.foundation{fill:#1C2B42;}
.kbm-dot.engine{fill:#2B4C6F;}
.kbm-dot.voyage{fill:var(--teal);}
.kbm-dot.monitor{fill:#8a5a1a;}
.kbm-dot.end{fill:#1E7A52;}
.kbm-wp.kbm-current .kbm-dot{filter:drop-shadow(0 0 7px rgba(108,159,232,.85));transform:scale(1.22);}
.kbm-num{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12px;font-weight:700;fill:var(--white);text-anchor:middle;dominant-baseline:middle;pointer-events:none;}
.kbm-label{font-family:var(--font-body);font-weight:600;font-size:14px;fill:var(--desc);text-anchor:middle;pointer-events:none;}
.kbm-wp.kbm-current .kbm-label{fill:var(--white);}
.kbm-island{fill:rgba(108,159,232,.07);stroke:rgba(108,159,232,.16);stroke-width:1;stroke-dasharray:2 4;}
.kbm-tip{
position:absolute;z-index:5;max-width:230px;pointer-events:none;
background:#0E1B31;border:1px solid rgba(108,159,232,.35);border-radius:8px;
padding:9px 12px;font-size:12px;line-height:1.55;color:var(--desc);
box-shadow:0 12px 30px -12px rgba(0,0,0,.7);
opacity:0;transition:opacity .18s ease,transform .18s ease;
}
.kbm-tip b{display:block;font-family:var(--font-head);font-size:13px;color:var(--white);margin-bottom:2px;}
.kbm-tip.kbm-tip-up{transform:translate(-50%,-100%) translateY(8px);}
.kbm-tip.kbm-tip-down{transform:translate(-50%,0) translateY(-8px);}
.kbm-tip.show{opacity:1;}
.kbm-tip.kbm-tip-up.show{transform:translate(-50%,-100%) translateY(0);}
.kbm-tip.kbm-tip-down.show{transform:translate(-50%,0) translateY(0);}
@media (max-width:640px){
.kbm-label{font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
.kbm-ship{display:none;}
.kbm-badge .dot{animation:none;}
}
/* ---------- RESEARCH REFERENCE DIAGRAMS (KUMA page) ---------- */
/* Hand-drawn inline SVG in the site's own visual language, so they sit on
the dark theme like every other diagram on the site (.ploop, .kbm-svg,
deco-globalmap) rather than importing a foreign light-mode palette. */
.kdiag{
margin:28px 0;
border-radius:var(--radius);
background:var(--card);
border:1px solid var(--border);
padding:20px 20px 4px;
}
.kdiag svg{width:100%;height:auto;display:block;}
.kdiag-cap{
padding:12px 2px 16px;
font-size:12.5px;
color:var(--muted);
border-top:1px solid var(--border);
margin-top:14px;
}
.kdiag-box{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.16);stroke-width:1;}
.kdiag-box-acc{fill:rgba(108,159,232,.12);stroke:var(--accent);stroke-width:1.2;}
.kdiag-box-alt{fill:rgba(108,159,232,.08);stroke:rgba(108,159,232,.4);stroke-width:1;}
.kdiag-title{font-family:var(--font-body);font-size:12.5px;font-weight:600;fill:var(--white);}
.kdiag-sub{font-family:var(--font-body);font-size:10.5px;fill:rgba(255,255,255,.45);}
.kdiag-h{font-family:var(--font-head);font-size:13px;font-weight:700;fill:var(--white);}
.kdiag-note{font-family:var(--font-body);font-size:10.5px;fill:rgba(255,255,255,.5);}
.kdiag-line{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1;stroke-dasharray:4 3;animation:kdiagAnts 1.1s linear infinite;}
.kdiag-line-acc{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:4 3;animation:kdiagAnts 1.1s linear infinite;}
/* Marching-ants flow: dashes drift toward each arrowhead. dasharray sums to
7, so a -7 offset loops seamlessly. */
@keyframes kdiagAnts{to{stroke-dashoffset:-7;}}
@media (prefers-reduced-motion:reduce){
.kdiag-line,.kdiag-line-acc,.kx-flow{animation:none;}
}
/* ---------- KUMA DEVICE EXPLORER (interactive, 5-layer) ---------- */
.kx-wrap{
margin-top:22px;border-radius:var(--radius);
background:var(--card);border:1px solid var(--border);
padding:22px 22px 24px;
}
.kx-flow{animation:kdiagAnts 1.1s linear infinite;}
.kx-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;}
.kx-tab{
padding:8px 16px;font-size:12.5px;font-weight:600;border-radius:6px;
border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
color:rgba(255,255,255,.6);cursor:pointer;font-family:var(--font-body);
transition:all .15s ease;
}
.kx-tab.active{border-width:1.5px;}
.kx-layer-title{
padding:10px 16px;border-radius:6px;font-size:13.5px;font-weight:600;
margin-bottom:14px;font-family:var(--font-head);
}
.kx-diagram-wrap{
border:1px solid var(--border);border-radius:10px;overflow:hidden;
background:rgba(0,0,0,.15);margin-bottom:14px;
}
.kx-detail-empty{
padding:12px 16px;border-radius:8px;border:1px solid var(--border);
background:rgba(255,255,255,.03);font-size:12.5px;color:var(--faint);
}
.kx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:20px;}
.kx-stat{padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--border);}
.kx-stat-label{font-size:10.5px;color:var(--faint);margin-bottom:3px;}
.kx-stat-val{font-size:14px;font-weight:600;color:var(--white);font-family:var(--font-head);}
.kx-node{cursor:pointer;}
.kx-node:hover rect{stroke-width:1.2;}
@media (max-width:640px){
.kx-wrap{padding:16px 14px 18px;}
}
/* ---------- KUMA SIMULATOR POPUP (iframes /kuma.sea) ---------- */
.sim-modal{position:fixed;inset:0;z-index:1000;background:rgba(3,7,14,.82);display:flex;align-items:center;justify-content:center;padding:20px;}
.sim-modal[hidden]{display:none;}
.sim-modal-inner{width:min(1200px,96vw);height:min(880px,94vh);display:flex;flex-direction:column;background:#0a1114;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.85);}
.sim-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#0c1518;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:600;color:#e9f3f1;flex-shrink:0;}
.sim-modal-actions{display:flex;align-items:center;gap:16px;}
.sim-open-new{color:#6C9FE8;font-size:12px;font-weight:500;text-decoration:none;}
.sim-open-new:hover{text-decoration:underline;}
.sim-modal-close{background:none;border:none;color:rgba(255,255,255,.6);font-size:24px;line-height:1;cursor:pointer;padding:0 2px;}
.sim-modal-close:hover{color:#fff;}
.sim-modal iframe{flex:1;width:100%;border:0;background:#060a0d;display:block;}
@media (max-width:600px){.sim-modal{padding:0;}.sim-modal-inner{width:100vw;height:100vh;border-radius:0;border:0;}}
/* ---------- COOKIE CONSENT ---------- */
.consent-banner{
position:fixed;left:0;right:0;bottom:0;z-index:190;
background:linear-gradient(180deg,#0E1B31,#0A1424);
border-top:1px solid var(--border);
box-shadow:0 -12px 30px -14px rgba(0,0,0,.6);
padding:18px var(--pad-x);
transform:translateY(100%);opacity:0;pointer-events:none;
transition:transform .3s ease,opacity .3s ease;
}
.consent-banner.visible{transform:translateY(0);opacity:1;pointer-events:auto;}
.consent-banner-inner{
display:flex;align-items:center;justify-content:space-between;gap:24px;
flex-wrap:wrap;max-width:1200px;margin:0 auto;
}
.consent-banner-text{font-size:13.5px;color:var(--desc);line-height:1.6;max-width:640px;margin:0;font-family:var(--font-body);}
.consent-banner-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;}
.consent-banner-actions .btn{padding:10px 18px;font-size:13px;}
.consent-fab{
position:fixed;left:24px;bottom:24px;z-index:190;
width:44px;height:44px;border-radius:50%;
background:linear-gradient(180deg,#0E1B31,#0A1424);
border:1px solid var(--border);
color:var(--teal-light);
display:flex;align-items:center;justify-content:center;
cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.7);
opacity:0;pointer-events:none;transform:scale(.8);
transition:transform .25s ease,opacity .25s ease,border-color .2s ease;
}
.consent-fab.visible{opacity:1;pointer-events:auto;transform:scale(1);}
.consent-fab:hover{transform:scale(1.06);border-color:rgba(255,255,255,.3);}
.consent-categories{margin-top:6px;display:flex;flex-direction:column;gap:14px;}
.consent-cat{border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--card);}
.consent-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.consent-cat-name{font-size:13.5px;font-weight:600;color:var(--white);font-family:var(--font-body);}
.consent-cat-state{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.consent-cat-desc{font-size:12.5px;color:var(--desc);line-height:1.6;margin-top:6px;font-family:var(--font-body);}
.consent-toggle{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
.consent-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;}
.consent-toggle-track{
position:absolute;inset:0;border-radius:999px;
background:rgba(255,255,255,.14);border:1px solid var(--border);
transition:background .2s ease,border-color .2s ease;
}
.consent-toggle-track::before{
content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
background:var(--white);transition:transform .2s ease;
}
.consent-toggle input:checked ~ .consent-toggle-track{background:var(--teal);border-color:var(--teal);}
.consent-toggle input:checked ~ .consent-toggle-track::before{transform:translateX(16px);}
.consent-toggle input:focus-visible ~ .consent-toggle-track{outline:2px solid var(--teal-light);outline-offset:2px;}
.consent-modal-actions{display:flex;gap:10px;margin-top:22px;}
.consent-modal-actions .btn{flex:1;}
.consent-accept-all-link{
display:block;width:100%;text-align:center;margin-top:14px;
background:none;border:none;color:var(--muted);font-size:12.5px;font-family:var(--font-body);
cursor:pointer;text-decoration:underline;
}
.consent-accept-all-link:hover{color:var(--white);}
@media (max-width:720px){
.consent-banner{padding:16px 24px;}
.consent-banner-inner{flex-direction:column;align-items:stretch;}
.consent-banner-actions{justify-content:stretch;}
.consent-banner-actions .btn{flex:1;}
.consent-fab{left:16px;bottom:16px;}
}
@media (prefers-reduced-motion:reduce){
.consent-banner,.consent-fab{transition:none;}
}
/* ---------- WHAT WE ARE (rotating category) ---------- */
.whatis{padding-top:70px;padding-bottom:70px;}
.whatis-line{
display:flex;align-items:center;justify-content:center;
gap:8px 16px;flex-wrap:wrap;margin-top:18px;
font-family:var(--font-head);font-weight:800;
font-size:clamp(23px,4.2vw,42px);letter-spacing:-.02em;line-height:1.25;
color:var(--white);
}
.whatis-lead{white-space:nowrap;}
/* The flip window. .whatis-sizer holds the height, and the width of the
longest term as the no-JS fallback; with JS the width animates to fit the
current term instead, so a short word like "Maritime ERP" stays centred in
the line rather than sitting left with all the slack after it. Each word is
centred on the box (left:50% + translateX(-50%)) so it stays put while the
box resizes underneath it. */
.whatis-flip{
position:relative;display:inline-block;
perspective:700px;
transition:width .5s cubic-bezier(.2,.75,.25,1);
}
.whatis-sizer{visibility:hidden;display:block;white-space:nowrap;}
.whatis-word{
position:absolute;left:50%;top:0;
white-space:nowrap;color:var(--teal-light);
opacity:0;transform:translateX(-50%) rotateX(-90deg) translateY(50%);
transition:transform .55s cubic-bezier(.2,.75,.25,1),opacity .4s ease;
will-change:transform,opacity;
}
.whatis-word.is-current{opacity:1;transform:translateX(-50%) rotateX(0deg) translateY(0);}
.whatis-word.is-out{opacity:0;transform:translateX(-50%) rotateX(90deg) translateY(-50%);}
/* Full list for screen readers; the animated version is aria-hidden. */
.whatis-sr{
position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.whatis-sub{
font-size:15px;font-weight:400;color:var(--desc);line-height:1.75;
max-width:660px;margin:20px auto 0;
}
.whatis-chips{
display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
margin-top:28px;padding:0;list-style:none;
}
.whatis-chips li{
font-family:var(--font-body);font-size:12.5px;font-weight:500;
color:var(--steel);background:var(--card);
border:1px solid var(--border);border-radius:999px;
padding:7px 15px;transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.whatis-chips li:hover{color:var(--white);background:var(--card-hover);border-color:rgba(255,255,255,.22);}
@media (max-width:720px){
.whatis{padding-top:52px;padding-bottom:52px;}
.whatis-line{gap:4px 12px;}
.whatis-chips{gap:8px;}
.whatis-chips li{font-size:11.5px;padding:6px 12px;}
}
/* No spinning text for anyone who asked the OS not to animate: the first
term simply stays put, and the chip row carries the full list anyway. */
@media (prefers-reduced-motion:reduce){
.whatis-word,.whatis-flip{transition:none;}
}
/* Sign in sits beside the demo button: a quiet link, because somebody who
already has an account is not the person the page is trying to persuade. */
/* The account link sits among .nav-links a, which sets font, colour and
padding at a higher specificity (class + type) than .nav-signin can reach.
That is left alone on purpose: it keeps the row identical to its siblings,
so only the things unique to an icon are declared here. */
.nav-signin{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;}
.nav-signin-icon{
/* Sized in its own right rather than by the inherited line-height, which
would drift it off the wordmark's centre by a pixel or two. */
width:24px;height:24px;display:block;flex-shrink:0;fill:currentColor;
}
/* .nav-links a::after slides a 2px bar under the label on hover. Under a round
icon with no text it reads as a stray mark rather than an underline, so it
is suppressed while the label is hidden. Hover still changes the colour,
the same as every other link up there. */
.nav-signin::after{display:none;}
/* Visible to screen readers only while the icon carries the meaning; it comes
back as real text in the mobile panel below. */
.nav-signin-label{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* The links become a full-height slide-in panel at 960px. This whole item used
to be display:none from 1100px down, which left every phone and most tablets
with no way into the portal at all. In the panel it reads as an ordinary
row, icon then label, and the underline comes back with the text. */
@media (max-width:960px){
.nav-signin::after{display:block;}
.nav-signin-label{
position:static;width:auto;height:auto;margin:0;
overflow:visible;clip:auto;clip-path:none;
}
}