/* Doryven — every value is a token. Change here, never in the markup.
   Product hues are their own tokens so a new product needs no CSS edit. */
:root{
  --ink-900:#071421; --ink-800:#0B1E33; --ink-700:#132A44; --hair-dark:#24405C;
  --blue-700:#0F52B0; --blue-600:#1767D8; --blue-500:#3A91F5;
  --cool:#F6F8FB; --white:#fff; --paper:#FAFBFD;
  --slate-700:#46535F; --slate-600:#5E6B78; --slate-500:#728090;
  --slate-400:#9AA6B2; --slate-300:#C3CCD5; --slate-200:#DDE3EA; --slate-100:#EDF1F5;
  --product-rail:#C01D49; --product-sea:#299C86; --product-cargo:#C87918;
  --ok:#3FBF8B; --err:#F0736A;
  --wrap:1200px; --gutter:24px; --radius:4px;
  --f-display:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --f-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --s-hero:clamp(2.2rem,4.4vw,3.25rem); --s-h2:clamp(1.7rem,2.6vw,2.375rem);
  --s-h3:1.5rem; --s-lede:1.1875rem; --s-body:.9375rem; --s-label:.75rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--f-sans);font-size:var(--s-body);line-height:1.6;
  color:var(--slate-600);background:var(--white);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink-900);line-height:1.12;
  letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:var(--s-hero)} h2{font-size:var(--s-h2)} h3{font-size:var(--s-h3)}
p{margin:0 0 1em}
img,svg{max-width:100%}
a{color:var(--blue-600);text-decoration-thickness:1px;text-underline-offset:2px}
/* Focus ring is never removed — see build spec, rule 6. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue-500);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--white);padding:8px 14px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.band{padding:96px 0;position:relative;overflow:hidden}
.band-cool{background:var(--cool)}
.band-dark{background:var(--ink-900);color:var(--slate-300)}
.band-dark h2,.band-dark h3{color:var(--white)}
.eyebrow{font-family:var(--f-mono);font-size:var(--s-label);letter-spacing:.22em;
  color:var(--blue-600);margin:0 0 1rem}
/* Doryven Blue on navy is 3.51:1 and fails AA. Signal Blue only on dark. */
.band-dark .eyebrow{color:var(--blue-500)}
.lede{font-size:var(--s-lede);max-width:60ch}
.band-dark .lede{color:var(--slate-300)}
.footnote,.muted{color:var(--slate-500);font-size:.875rem}

/* brand ------------------------------------------------------------------ */
.logo{display:inline-flex;align-items:center;gap:.62em;color:inherit}
.logo .mark{height:1.32em;width:auto}
.logo .wordmark{height:1em;width:auto}
.brand{display:inline-block;font-size:20px;color:var(--white)}

/* header ----------------------------------------------------------------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;
  align-items:center;gap:2rem;max-width:var(--wrap);margin:0 auto;
  padding:32px var(--gutter)}
.site-head nav{margin-left:auto}
.site-head ul{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0}
.site-head a{color:var(--slate-300);text-decoration:none;font-size:.875rem}
.site-head a:hover{color:var(--white)}

/* buttons ---------------------------------------------------------------- */
.btn{display:inline-block;padding:14px 26px;border-radius:var(--radius);
  font-family:var(--f-sans);font-weight:600;font-size:.9375rem;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;line-height:1.2}
.btn-sm{padding:9px 18px;font-size:.8125rem}
.btn-primary{background:var(--blue-600);color:var(--white)}
.btn-primary:hover{background:var(--blue-700)}
.btn-ghost{background:transparent;color:var(--blue-500);border-color:var(--blue-500)}
.btn-ghost:hover{background:rgba(58,145,245,.12)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:2rem 0 0}

/* hero ------------------------------------------------------------------- */
.hero{background:var(--ink-900);color:var(--slate-300);padding:220px 0 90px;
  position:relative;overflow:hidden}
/* Line breaks come from content, not from wrapping — do not constrain width. */
.hero h1{color:var(--white)}
.hero h1 em{color:var(--blue-500);font-style:normal}
.hero .lede{color:var(--slate-300);margin-top:1.5rem}
/* Masked so the register never sits behind copy — brand rule: patterns run at
   9–11% and never behind body text. */
.pattern-wrap{position:absolute;inset:0;pointer-events:none;color:var(--blue-500);
  opacity:.10;
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 42%,#000 82%);
  mask-image:linear-gradient(to right,transparent 0,transparent 42%,#000 82%)}
.pattern-wrap svg{position:absolute;right:0;top:0;height:100%;width:58%}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  list-style:none;margin:3.5rem 0 0;padding:3rem 0 0;
  border-top:1px solid var(--hair-dark);position:relative}
.proof strong{display:block;color:var(--white);font-size:1.25rem;
  font-family:var(--f-display);font-weight:600;margin:.9rem 0 .25rem}
/* :not(.tick) — a bare `.proof span` outranks `.tick` and greys the marker out. */
.proof span:not(.tick){font-size:.875rem;color:var(--slate-400)}
.tick{display:block;width:34px;height:7px;background:currentColor;color:var(--blue-500);
  clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}

/* grids & cards ---------------------------------------------------------- */
.grid{display:grid;gap:var(--gutter);list-style:none;margin:2.5rem 0 0;padding:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--slate-200);padding:32px}
.band .card{background:var(--cool)}
.band-cool .card{background:var(--white)}
.card .icon{width:34px;height:34px;color:var(--blue-600);margin-bottom:1.25rem}
.card h3{margin-bottom:.4rem}
.card .note{font-family:var(--f-mono);font-size:.8125rem;color:var(--blue-600);margin:0}

/* platforms -------------------------------------------------------------- */
.platform{position:relative;padding-top:36px}
.platform::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--tok)}
.platform[data-token=rail]{--tok:var(--product-rail)}
.platform[data-token=sea]{--tok:var(--product-sea)}
.platform[data-token=cargo]{--tok:var(--product-cargo)}
.platform-mark{display:block;color:var(--tok);margin-bottom:1.5rem}
.platform-mark .mark{height:44px;width:auto}
.platform .tagline{color:var(--slate-500);margin-top:-.35rem}
.platform hr{border:0;border-top:1px solid var(--slate-200);margin:1.5rem 0 1rem}
.platform .endorse{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;
  color:var(--slate-400);margin:0}
.platform .licence{font-family:var(--f-mono);font-size:.75rem;color:var(--slate-400);
  margin:.25rem 0 .75rem}
.platform .repo{font-family:var(--f-mono);font-size:.8125rem;word-break:break-all}

/* approach --------------------------------------------------------------- */
.steps li{list-style:none}
.steps .num{font-family:var(--f-display);font-size:2.75rem;color:var(--blue-600);
  display:block;line-height:1}
.steps .tick{margin:.5rem 0 1.25rem}
.steps h3{font-size:1.375rem}
.panel{background:var(--white);border:1px solid var(--slate-200);padding:40px;
  margin-top:2.5rem}
.ticks{margin:1.5rem 0 0}
.ticks li{list-style:none;position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:8px;
  background:var(--blue-600);clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}
.closer{margin:1.75rem 0 0;color:var(--slate-500)}

/* industries ------------------------------------------------------------- */
.industries{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gutter);
  list-style:none;margin:2.5rem 0 0;padding:0}
.industries .icon{width:30px;height:30px;color:var(--blue-500);display:block;
  margin-bottom:1rem}
.industries span{color:var(--white);font-weight:600;font-size:.9375rem}

/* publications ----------------------------------------------------------- */
.pubs{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:16px}
.pub{background:var(--cool);border:1px solid var(--slate-200);
  border-left:4px solid var(--blue-600)}
.pub a{display:block;padding:22px 26px;text-decoration:none;color:inherit;
  position:relative}
.pub>.kind{padding:22px 26px 0}
.pub>h3,.pub>.venue{padding:0 26px}
.pub>.venue{padding-bottom:22px}
.pub a .kind,.pub a .venue{padding:0}
.kind{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.18em;
  color:var(--blue-600);margin:0 0 .5rem}
.pub h3{font-size:1rem;font-family:var(--f-sans);font-weight:600;margin:0 0 .25rem;
  letter-spacing:0;line-height:1.4}
.venue{font-family:var(--f-mono);font-size:.8125rem;color:var(--slate-500);margin:0}
.arrow{position:absolute;right:26px;top:50%;transform:translateY(-50%);
  color:var(--blue-600)}

/* about ------------------------------------------------------------------ */
.prose p{max-width:56ch}

/* contact ---------------------------------------------------------------- */
.contact .wrap{position:relative}
.contact-grid{align-items:start;margin-top:0}
/* The form occupies the right half, so the register would sit under the fields.
   Dropped to a texture and un-masked; the rule is "never behind body copy". */
.contact .pattern-wrap{opacity:.05;-webkit-mask-image:none;mask-image:none}
.contact .mail a{color:var(--blue-500);font-family:var(--f-mono);font-size:1.0625rem}
.field{margin:0 0 1.5rem}
.field label{display:block;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.18em;color:var(--slate-400);margin-bottom:.5rem}
.field input,.field textarea{width:100%;background:transparent;color:var(--white);
  border:1.5px solid var(--hair-dark);border-radius:var(--radius);padding:14px;
  font:inherit;font-size:.9375rem}
.field input:focus,.field textarea:focus{border-color:var(--blue-500)}
/* Honeypot — off-screen, never displayed, never announced. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:16px 20px;border-radius:var(--radius);margin:0 0 1.5rem;
  background:rgba(63,191,139,.14);border:1px solid var(--ok);color:var(--white)}
.notice-error{background:rgba(240,115,106,.16);border-color:var(--err)}

/* footer ----------------------------------------------------------------- */
.site-foot{background:var(--ink-800);color:var(--slate-300);padding:64px 0 40px}
.site-foot .brand{color:var(--white);font-size:17px}
.slogan{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.3em;
  color:var(--blue-500);margin-top:1rem}
.foot-top{display:grid;grid-template-columns:1fr 2fr;gap:var(--gutter)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.foot-cols h4{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;
  color:var(--slate-400);margin:0 0 1rem;font-weight:400}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols a{color:var(--slate-300);text-decoration:none;font-size:.875rem;
  line-height:1.9}
.foot-cols a:hover{color:var(--white)}
.site-foot hr{border:0;border-top:1px solid var(--hair-dark);margin:48px 0 20px}
.foot-bottom{display:flex;justify-content:space-between;font-family:var(--f-mono);
  font-size:.75rem;color:var(--slate-500)}
.foot-bottom p{margin:0}

/* responsive ------------------------------------------------------------- */
@media(max-width:900px){
  .site-head nav{display:none}
  .grid-2,.grid-3,.grid-4,.foot-top,.foot-cols{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr;gap:1.75rem}
  .industries{grid-template-columns:repeat(2,1fr);gap:1.75rem}
  .hero{padding:170px 0 70px}
  .band{padding:72px 0}
  .actions .btn{width:100%;text-align:center}
  .foot-cols{gap:2rem;margin-top:2.5rem}
  .foot-bottom{flex-direction:column;gap:.5rem}
}
@media(max-width:520px){
  .panel{padding:26px} .card{padding:24px}
}