/* ============================================================
   RattusWMS v2 — "Operational Blueprint"
   Editorial, technical, precise. Light-forward, brand blue.
   ============================================================ */

:root {
  /* Brand */
  --blue-900:#002344; --blue-800:#003766; --blue-700:#004687; /* primary */
  --blue-600:#0f579e; --blue-500:#2a6fb8; --blue-300:#88b2d8;
  --blue-100:#cfe0f1; --tint:#e9f1f9; --tint-2:#f1f6fb;

  /* Ink / neutrals */
  --ink:#0a1626;          /* near-black, slightly blue */
  --ink-2:#39465a;
  --ink-3:#697587;
  --ink-4:#9aa4b2;
  --paper:#f5f6f8;        /* page */
  --paper-2:#eceff3;
  --surface:#ffffff;
  --line:#e2e6ec;         /* hairline */
  --line-2:#edf0f4;
  --line-strong:#d3d9e2;

  /* Night (blueprint dark) */
  --night:#06182f;
  --night-2:#0a233f;
  --night-line:rgba(136,178,216,.16);
  --night-grid:rgba(136,178,216,.10);
  --night-ink:#eaf1f8;
  --night-ink-2:#9fb6d0;

  /* Data */
  --mint:#12a574; --mint-soft:#e1f4ec;
  --amber:#cf8a2c; --amber-soft:#f9efdc;
  --rose:#d2554c; --rose-soft:#fae8e6;

  /* Type */
  --display:'Sora',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* Radii — crisp, technical */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;

  /* Shadow — restrained */
  --sh-1:0 1px 2px rgba(10,22,38,.05);
  --sh-2:0 2px 8px rgba(10,22,38,.05);
  --sh-3:0 16px 40px -18px rgba(10,30,70,.28);
  --sh-blue:0 10px 26px -10px rgba(0,70,135,.45);

  --maxw:1240px;
  --gut:32px;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; font-family:var(--body); background:var(--paper); color:var(--ink);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; letter-spacing:-.025em; line-height:1.04; color:var(--ink); margin:0; text-wrap:balance; }
p{margin:0; text-wrap:pretty;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }

/* ---------- Mono label ---------- */
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; }
.kicker{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-700); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:14.5px;
  padding:12px 18px; border:1px solid transparent; border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap; line-height:1;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn svg{width:16px;height:16px;}
.btn-primary{ background:var(--blue-700); color:#fff; box-shadow:var(--sh-blue); }
.btn-primary:hover{ background:var(--blue-800); transform:translateY(-1px); }
.btn-secondary{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-secondary:hover{ border-color:var(--blue-300); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink-2); }
.btn-ghost:hover{ color:var(--ink); }
.btn-dark{ background:#fff; color:var(--night); }
.btn-dark:hover{ background:var(--tint); transform:translateY(-1px); }
.btn-dark-ghost{ background:transparent; color:var(--night-ink); border-color:var(--night-line); }
.btn-dark-ghost:hover{ border-color:var(--blue-300); color:#fff; }
.btn-lg{ padding:14px 22px; font-size:15.5px; }
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none;} }

/* ---------- Pills / status ---------- */
.tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--ink-2); border:1px solid var(--line); background:var(--surface); border-radius:var(--r-pill); padding:5px 12px; }
.status{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:500; padding:3px 9px; border-radius:var(--r-xs); }
.status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.s-pick{color:#0f579e;background:#e6f0fa;} .s-pack{color:#0a8f68;background:var(--mint-soft);}
.s-short{color:#bf483f;background:var(--rose-soft);} .s-ship{color:#5b6478;background:#eceff4;}
.s-load{color:#b9791d;background:var(--amber-soft);}

/* ---------- Blueprint grid background ---------- */
.grid-bg{ position:relative; }
.grid-bg::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grid-line,rgba(10,30,70,.05)) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line,rgba(10,30,70,.05)) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 35%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 35%,transparent 78%);
}
.grid-bg > *{ position:relative; z-index:1; }

/* ---------- Section framing ---------- */
.section{ padding:104px 0; }
.section--tight{ padding:72px 0; }
.rule-top{ border-top:1px solid var(--line); }
.sec-head{ display:grid; grid-template-columns:auto 1fr; gap:0 28px; align-items:start; margin-bottom:52px; }
.sec-head .sec-no{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--blue-700); padding-top:6px; letter-spacing:.05em; }
.sec-head .sec-body{ max-width:680px; }
.sec-head .sec-kicker{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); display:block; margin-bottom:14px; }
.sec-head h2{ font-size:clamp(30px,3.6vw,46px); font-weight:600; letter-spacing:-.03em; }
.sec-head p{ margin-top:18px; font-size:18px; line-height:1.55; color:var(--ink-3); }
@media (max-width:680px){
  .sec-head{ grid-template-columns:1fr; gap:14px; }
  .sec-head .sec-no{ padding-top:0; }
}

/* ---------- Tech card (registration ticks) ---------- */
.tcard{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.tcard:hover{ border-color:var(--blue-300); transform:translateY(-3px); box-shadow:var(--sh-2); }

/* ---------- Reveal (transform-only; never hides content) ---------- */
.reveal{ opacity:1; }
@keyframes rise{ from{transform:translateY(15px);} to{transform:none;} }
@media (prefers-reduced-motion:no-preference){
  .reveal{ animation:rise .6s cubic-bezier(.16,1,.3,1) both; }
  .reveal.d1{animation-delay:.07s} .reveal.d2{animation-delay:.14s}
  .reveal.d3{animation-delay:.21s} .reveal.d4{animation-delay:.28s}
}

/* ============================================================
   HEADER
   ============================================================ */
.util{ background:var(--night); color:var(--night-ink-2); font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; }
.util .wrap{ display:flex; align-items:center; gap:18px; height:34px; }
.util .u-left{ display:flex; align-items:center; gap:8px; }
.util .u-left .gd{ width:6px;height:6px;border-radius:50%;background:var(--mint); box-shadow:0 0 0 3px rgba(18,165,116,.18); }
.util .u-right{ margin-left:auto; display:flex; gap:16px; }
.util .u-right a{ color:var(--night-ink-2); transition:color .15s; }
.util .u-right a:hover{ color:#fff; }
@media (max-width:720px){ .util .u-right{ display:none; } }

.hdr{ position:sticky; top:0; z-index:60; background:rgba(245,246,248,.82); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid transparent; transition:border-color .25s, background .25s; }
.hdr.scrolled{ border-bottom-color:var(--line); background:rgba(245,246,248,.94); }
.nav{ display:flex; align-items:center; gap:30px; height:66px; }
.nav .logo img{ height:18px; width:auto; }
.nav .links{ display:flex; align-items:center; gap:26px; margin-left:6px; }
.nav .links a{ font-size:14px; font-weight:500; color:var(--ink-2); display:flex; align-items:center; gap:7px; white-space:nowrap; transition:color .15s; }
.nav .links a .ix{ font-family:var(--mono); font-size:10px; color:var(--blue-500); }
.nav .links a:hover{ color:var(--ink); }
.nav .right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav .tog{ display:none; }
@media (max-width:920px){
  .nav .links{ display:none; }
  .nav .right .btn-ghost{ display:none; }
  .nav .tog{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); cursor:pointer; }
  .nav .tog svg{width:20px;height:20px;}
}
.mnav{ display:none; border-top:1px solid var(--line); background:var(--paper); padding:14px var(--gut) 22px; }
.mnav.open{ display:block; }
.mnav a{ display:block; padding:12px 2px; font-size:16px; font-weight:500; color:var(--ink-2); border-bottom:1px solid var(--line-2); }
.mnav .btn{ width:100%; margin-top:14px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--night); color:var(--night-ink-2); padding:80px 0 36px; position:relative; overflow:hidden; }
.foot::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(var(--night-grid) 1px,transparent 1px),linear-gradient(90deg,var(--night-grid) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(100% 80% at 50% 0%,#000,transparent 75%); mask-image:radial-gradient(100% 80% at 50% 0%,#000,transparent 75%); pointer-events:none; }
.foot .wrap{ position:relative; z-index:1; }
.foot-top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px; }
.foot-brand img{ height:20px; margin-bottom:18px; }
.foot-brand p{ font-size:14px; color:var(--night-ink-2); max-width:300px; line-height:1.6; }
.foot-brand .coords{ font-family:var(--mono); font-size:11.5px; color:var(--blue-300); margin-top:16px; }
.foot-col h4{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--night-ink-2); margin-bottom:16px; }
.foot-col a{ display:block; font-size:14px; color:var(--night-ink); padding:7px 0; opacity:.84; transition:opacity .15s; }
.foot-col a:hover{ opacity:1; }
.foot-bot{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:60px; padding-top:24px; border-top:1px solid var(--night-line); font-size:13px; }
.foot-soc{ display:flex; gap:9px; }
.foot-soc a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--r-sm); border:1px solid var(--night-line); color:var(--night-ink); transition:background .15s,border-color .15s; }
.foot-soc a:hover{ background:var(--night-2); border-color:var(--blue-500); }
.foot-soc svg{width:17px;height:17px;}
@media (max-width:820px){
  .foot-top{ grid-template-columns:1fr 1fr; gap:32px; }
  .foot-brand{ grid-column:1 / -1; }
  .foot-bot{ flex-direction:column; align-items:flex-start; }
}