/* ===========================================================================
   Reidar public site — shared styles.

   One file, linked by every marketing page. It used to be a ~390 line
   <style> block pasted into eight pages; the copies had already drifted
   apart by up to 90 lines, so a change to "the shared styles" only ever
   reached the page you happened to be editing.

   The look is the pitch deck's, translated to a scrolling page. The
   authority is 05_Marketing-and-Web/design-system/REIDAR-DESIGN-SYSTEM.md,
   and the working reference is /invest, which already did this translation
   once. Pure black ground, white type, one green, and colour used only to
   say which party in the trade you are looking at.

   Where the deck and Blueprint disagree, Blueprint wins on structure and
   the deck wins on colour:

     radii      Blueprint. 3px on controls, 6px is the ceiling anywhere.
                The deck's 14/16/28px panels and 100px pills are not used.
     spacing    Blueprint's scale.
     buttons    Blueprint's shape, sizing and 44px tap target.
     colour     the deck. Black ground, the alpha ladder, one green.
     type       the deck. Overpass heavy and tight, Lexend for sentences.
     icons      Lucide, stroked, never a filled glyph.

   There is no grey hex in this file. Anything that needs to recede drops
   its alpha instead, which is what keeps the whole site reading as one
   surface rather than as a stack of panels.
   =========================================================================== */

/* --- faces ---------------------------------------------------------------
   Overpass for anything you read at a glance: a heading, a number, a label.
   Lexend for anything that is a sentence. B612 Mono for figures inside
   running text. The alternation between the first two is the single most
   recognisable thing about the look, so keep it.

   Lexend is the house body face, from the deck and the brand carousels.
   The site shipped Segoe UI until now; /invest still does, and should be
   brought across. woff2 first, ttf only as the fallback for old Safari. */
@font-face { font-family:'Overpass'; src:url('/fonts/Overpass-ExtraBold.woff2') format('woff2'), url('/fonts/Overpass-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Overpass'; src:url('/fonts/Overpass-Bold.woff2')      format('woff2'), url('/fonts/Overpass-Bold.ttf')      format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Overpass'; src:url('/fonts/Overpass-SemiBold.woff2')  format('woff2'), url('/fonts/Overpass-SemiBold.ttf')  format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Overpass'; src:url('/fonts/Overpass-Medium.woff2')    format('woff2'), url('/fonts/Overpass-Medium.ttf')    format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Overpass'; src:url('/fonts/Overpass-Regular.woff2')   format('woff2'), url('/fonts/Overpass-Regular.ttf')   format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('/fonts/Lexend-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('/fonts/Lexend-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('/fonts/Lexend-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'B612 Mono'; src:url('/fonts/B612Mono-Regular.woff2') format('woff2'), url('/fonts/B612Mono-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* --- the four colours -------------------------------------------------
     Semantic, not a palette. Red is sellers, cyan is buyers, amber is
     transporters, green is traders and Reidar. A chart that colours a
     series red is saying "this is the seller side". Do not reassign. */
  --green:  #34C165;
  --red:    #F9333D;
  --amber:  #FDAB11;
  --cyan:   #21A7BF;

  --black:  #000000;   /* the ground. not #0A0A0A, not near-black */
  --white:  #FFFFFF;

  /* Green at depth, for the two places a flat green will not do: a hover
     on a green fill, and a rule that has to sit on the ground. */
  --green-deep:  #2AA355;
  --green-glow:  rgba(52,193,101,.16);

  /* --- the opacity ladder -----------------------------------------------
     White text never uses a grey. It uses white at a fixed set of alphas,
     and that is what holds the site together as one surface. If something
     needs to recede, drop its alpha. Never reach for a grey hex. */
  --fg:     #FFFFFF;                  /* headings, figures, the live line */
  --body:   rgba(255,255,255,.78);    /* the standard body line */
  --strong: rgba(255,255,255,.86);    /* a line sitting next to an icon */
  --dim:    rgba(255,255,255,.56);    /* secondary copy, subheads */
  --faint:  rgba(255,255,255,.30);    /* captions, footers, disabled */
  --hair:   rgba(255,255,255,.13);    /* every rule and border on the site */

  /* --- surfaces ---------------------------------------------------------
     A card is almost nothing: a whisper of white and a hairline. The
     border does the work, not the fill. */
  --surface:     rgba(255,255,255,.022);
  --surface-2:   rgba(255,255,255,.045);   /* hover, and nested panels */
  --surface-3:   rgba(255,255,255,.08);    /* pressed, and nav hovers */

  --font-head: 'Overpass', system-ui, sans-serif;
  --font-body: 'Lexend', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-mono: 'B612 Mono', ui-monospace, monospace;

  /* --- Blueprint structure ---------------------------------------------
     3px on controls, 6px on panels, and 6px is the ceiling anywhere on
     the site. The deck's rounder panels and its pills are deliberately
     not carried across. */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;

  /* Blueprint's spacing scale. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;

  /* Elevation on a black ground cannot be a drop shadow, because there is
     nothing darker to cast onto. It is a brighter hairline instead: the
     higher the element, the more its edge catches. */
  --elev-0: none;
  --elev-1: 0 0 0 1px rgba(255,255,255,.13);
  --elev-2: 0 0 0 1px rgba(255,255,255,.18);
  --elev-3: 0 0 0 1px rgba(255,255,255,.24), 0 8px 24px rgba(0,0,0,.6);
  --elev-4: 0 0 0 1px rgba(255,255,255,.28), 0 18px 46px 6px rgba(0,0,0,.7);

  --maxw:   1200px;
  --pad:    clamp(16px, 4vw, 48px);
  --nav-h:  60px;

  /* The deck's one easing curve. Everything uses it. */
  --e: cubic-bezier(.22,.75,.28,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

::selection { background: rgba(52,193,101,.3); color: #fff; }

/* ── ATMOSPHERE ────────────────────────────────────────────────────────────
   Two fixed green glows, well behind everything and inert. Pure radial
   gradients, never filter:blur() — a blur composites a full screen surface
   every frame, which is the last thing you want on a mid-range Android.
   Alpha stays at or below .16 so white on black never drops out of its
   21:1 contrast by any amount that matters. */
.atmos { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.atmos .glow { position:absolute; border-radius:50%; }
.atmos .glow-a {
  width:80vmax; height:80vmax; top:-34vmax; right:-30vmax;
  background:radial-gradient(circle, rgba(52,193,101,.16) 0%, rgba(52,193,101,.07) 34%, rgba(52,193,101,0) 68%);
}
.atmos .glow-b {
  width:64vmax; height:64vmax; bottom:-28vmax; left:-26vmax;
  background:radial-gradient(circle, rgba(52,193,101,.11) 0%, rgba(52,193,101,.04) 38%, rgba(52,193,101,0) 70%);
}
body > *:not(.atmos) { position: relative; z-index: 1; }

/* ── NAV ───────────────────────────────────────────────────────────────────
   The ground is black on every page now, so the old .light-bg variant has
   nothing left to invert. It is kept as a no-op alias rather than removed,
   because the class is still on the markup of several pages and a missing
   selector there would be silent. */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 var(--pad);
  background: transparent;
  transition: background 220ms var(--e), box-shadow 220ms var(--e);
}
.site-nav.scrolled,
.site-nav.light-bg.scrolled {
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hair);
}
.site-nav.light-bg { background: transparent; }

.nav-logo { display:flex; align-items:center; gap:8px; text-decoration:none; }
.nav-logo img { height:26px; width:auto; }

.nav-links { display:flex; align-items:center; gap:2px; margin-left:32px; }
.nav-links a,
.site-nav.light-bg .nav-links a,
.site-nav.light-bg.scrolled .nav-links a {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--dim); text-decoration: none;
  padding: 6px 12px; border-radius: var(--r-sm);
  transition: color 120ms var(--e), background 120ms var(--e);
}
.nav-links a:hover,
.site-nav.light-bg .nav-links a:hover,
.site-nav.light-bg.scrolled .nav-links a:hover { color: var(--fg); background: var(--surface-3); }
/* Brand green marks the page you are on. This is what green is for. */
.nav-links a.active { color: var(--green); }

.nav-dropdown { position:relative; }
.nav-dropdown-trigger { cursor:pointer; display:flex; align-items:center; gap:4px; }
.nav-dropdown-trigger svg { transition: transform 160ms var(--e); }
.nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu,
.site-nav.light-bg .nav-dropdown-menu {
  display:none; position:absolute; top:calc(100% + 8px); left:0;
  background: #000; border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: 8px; min-width:230px;
  box-shadow: var(--elev-4);
}
.nav-dropdown.open .nav-dropdown-menu { display:block; }
.nav-dropdown-item,
.site-nav.light-bg .nav-dropdown-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r-sm);
  color:var(--strong); font-size:13px; font-weight:500;
  text-decoration:none; transition:background 100ms var(--e);
}
.nav-dropdown-item:hover,
.site-nav.light-bg .nav-dropdown-item:hover { background: var(--surface-3); }
.nav-dropdown-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.nav-dropdown-item span { font-size:11px; color:var(--faint); margin-top:1px; display:block; }
.nav-dropdown-item strong { font-weight:700; color:var(--fg); }

.nav-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }

.nav-hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  padding:8px; margin-left:auto; background:none; border:none;
  /* 44px tap target even though the bars themselves are 22x12 */
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.nav-hamburger span,
.site-nav.light-bg .nav-hamburger span,
.site-nav.light-bg.scrolled .nav-hamburger span {
  display:block; width:22px; height:2px; background:var(--strong);
  border-radius:2px; transition:all 200ms var(--e);
}

.mobile-menu {
  display:none; position:fixed; inset:0; z-index:99;
  background:#000; padding: 80px var(--pad) 32px;
  flex-direction:column; gap:4px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  font-family:var(--font-head); font-size:22px; font-weight:800;
  letter-spacing:-.02em;
  color:var(--fg); text-decoration:none; padding:14px 0;
  border-bottom:1px solid var(--hair);
}
.mobile-menu a:hover { color:var(--green); }
.mobile-menu-actions { display:flex; flex-direction:column; gap:10px; margin-top:24px; }

/* ── BUTTONS ───────────────────────────────────────────────────────────────
   Blueprint's shape and sizing: 3px radius, hugging on desktop, and a
   44px tap target on mobile enforced globally at the bottom of this file.

   On colour these pages part company with the product UI. In the app,
   brand green is reserved for nav, links and selected states and a button
   takes a Blueprint intent instead. Out here the green fill IS the call to
   action, it is what the deck does, and it is what these pages already
   shipped. Keep it. The rule that still holds is that green never turns up
   on a button that is not the primary action on its screen. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font-body); font-weight:700;
  border-radius:var(--r-sm); cursor:pointer; text-decoration:none;
  white-space:nowrap; border:1px solid transparent;
  transition:background 120ms var(--e), border-color 120ms var(--e), color 120ms var(--e);
}
.btn-lg { font-size:15px; padding:12px 24px; }
.btn-md { font-size:14px; padding:9px 18px; }
.btn-sm { font-size:13px; padding:6px 14px; }
.btn svg { flex-shrink:0; }

.btn-primary { background:var(--green); color:#04140A; border-color:var(--green); }
.btn-primary:hover { background:var(--green-deep); border-color:var(--green-deep); }

/* The secondary action. One rule, no fill: on a black ground an outline
   reads as clearly as a filled button and does not compete with the CTA. */
.btn-outline-light,
.btn-outline-dark {
  background:transparent; color:var(--fg); border-color:rgba(255,255,255,.35);
}
.btn-outline-light:hover,
.btn-outline-dark:hover { background:var(--surface-3); border-color:rgba(255,255,255,.6); }

.btn-ghost-green { background:transparent; color:var(--green); border-color:rgba(52,193,101,.45); }
.btn-ghost-green:hover { background:rgba(52,193,101,.1); border-color:var(--green); }

.btn-nav-login {
  font-family:var(--font-body); font-size:13px; font-weight:600;
  padding:6px 14px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.25); color:var(--strong);
  background:transparent; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center;
  transition:border-color 120ms var(--e), color 120ms var(--e);
}
.btn-nav-login:hover,
.site-nav.light-bg .btn-nav-login:hover { border-color:rgba(255,255,255,.5); color:var(--fg); }
.site-nav.light-bg .btn-nav-login,
.site-nav.light-bg.scrolled .btn-nav-login { border-color:rgba(255,255,255,.25); color:var(--strong); }

.btn-nav-cta {
  font-family:var(--font-body); font-size:13px; font-weight:700;
  padding:7px 16px; border-radius:var(--r-sm);
  border:none; background:var(--green); color:#04140A;
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center;
  transition:background 120ms var(--e);
}
.btn-nav-cta:hover { background: var(--green-deep); }

/* ── SECTION LAYOUT ────────────────────────────────────────────────────────
   Sections separate with a hairline, not with a change of background.
   The old .section-dark / .section-muted / .section-green variants all
   collapse onto the one ground; they stay as aliases because the classes
   are still in the markup.

   The padding trap from /invest applies here too: use padding-block, never
   the `padding: X 0` shorthand, or you wipe .container's padding-inline
   and the copy runs flush to both screen edges. */
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

.section { padding-block: clamp(60px, 8vw, 100px); }
.section-sm { padding-block: clamp(40px, 5vw, 64px); }

.section-dark, .section-dark-2, .section-muted { background: transparent; color: var(--body); }
/* A section that needs to read as its own beat gets a rule, not a fill. */
.section-muted { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.section-green { background: transparent; color: var(--body); }

hr.divider,
.section-dark hr.divider { border:none; border-top:1px solid var(--hair); margin:0; }

/* ── NO EYEBROWS ───────────────────────────────────────────────────────────
   BANNED. Do not add an .eyebrow, .section-label, .hero-eyebrow, .kicker or
   any other small uppercase label above a heading. Not on any Reidar page,
   ever. There is no variant of this that is allowed.

   An eyebrow only ever restates the heading underneath it in smaller type.
   "THE PROBLEM" above "Agricultural commodity trading runs on WhatsApp
   group chats" tells the reader nothing they are not about to read. If a
   section needs naming, the heading names it.

   A status chip is a different thing and is fine: LIVE, COMING SOON, IN
   TRANSIT say something the heading does not. Those are .tag, and they sit
   inside a card or a row, not above a headline. */

/* ── TYPE ──────────────────────────────────────────────────────────────────
   Overpass 800 for anything read at a glance, and the tracking tightens as
   the size grows. Copy width is capped in ch rather than px, which is why
   it reads at every viewport. */
h1, h2, h3, h4, h5 { font-family:var(--font-head); color:var(--fg); text-wrap:balance; }

h1.display {
  font-weight:800;
  font-size: clamp(2.3rem, 8.2vw, 4.25rem);
  line-height:1.02; letter-spacing:-.03em;
}
h1.display span.accent, h1.display em { color:var(--green); font-style:normal; }

h2.section-title,
.section-dark h2.section-title {
  font-weight:800;
  font-size: clamp(1.75rem, 5.2vw, 2.75rem);
  line-height:1.08; letter-spacing:-.025em; color:var(--fg);
}
h2.section-title em { color:var(--green); font-style:normal; }

h3.card-title {
  font-weight:800;
  font-size:clamp(1.12rem, 2vw, 1.375rem); line-height:1.25; letter-spacing:-.02em;
  color:var(--fg);
}

.lead,
.section-dark .lead {
  font-family:var(--font-body); font-size:clamp(1rem, 2vw, 1.18rem);
  line-height:1.6; color:var(--dim); text-wrap:pretty; max-width:60ch;
}

p { max-width:66ch; }

.mono { font-family:var(--font-mono); font-weight:400; }

/* ── ICON LIST ─────────────────────────────────────────────────────────────
   The workhorse of the whole system. A Lucide icon, then a line of text.
   Bullets are never dots: the icon is the bullet, and it depicts the thing
   being said. A line about trucks gets a truck. */
.ilist { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:15px; }
.ilist li { display:flex; gap:15px; align-items:flex-start; }
.ilist svg {
  flex:none; width:27px; height:27px; stroke:var(--green); stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round; margin-top:3px;
}
.ilist span { font-size:clamp(1rem,3.1vw,1.16rem); color:var(--strong); }
.ilist.red   svg { stroke:var(--red); }
.ilist.cyan  svg { stroke:var(--cyan); }
.ilist.amber svg { stroke:var(--amber); }

/* ── STAT ──────────────────────────────────────────────────────────────────
   Big green number, bold label, dim description. .white turns the number
   white, used for the second of a pair so two figures do not compete. */
.stats { display:grid; gap:26px; margin-top:24px; grid-template-columns:1fr; }
@media (min-width:680px) { .stats.two { grid-template-columns:1fr 1fr; } }
@media (min-width:820px) { .stats.three { grid-template-columns:repeat(3,1fr); } }
@media (min-width:560px) and (max-width:819px) { .stats.three { grid-template-columns:1fr 1fr; } }
.stat .si {
  display:block; width:30px; height:30px; margin-bottom:13px; fill:none;
  stroke:var(--green); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.stat.white .si { stroke:var(--fg); }
.stat .n {
  font-family:var(--font-head); font-weight:800; letter-spacing:-.045em;
  line-height:.94; font-size:clamp(3.1rem,13vw,4.6rem); color:var(--green);
}
.stat .n .u { font-size:.4em; letter-spacing:-.02em; }
.stat.white .n { color:var(--fg); }
.stat .k {
  font-family:var(--font-head); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.02rem,3.3vw,1.2rem); margin-top:12px; line-height:1.22; color:var(--fg);
}
.stat .d { color:var(--dim); font-size:.99rem; margin-top:8px; }

/* ── STEPS ─────────────────────────────────────────────────────────────────
   A vertical sequence: icon, label, then a short arrow down to the next.
   The arrow is indented to sit under the centre of the icon above it, so
   the sequence reads as one line rather than as two columns. */
.steps-v { margin-top:24px; display:grid; gap:0; }
.step-v { display:flex; gap:15px; align-items:center; }
.step-v > svg {
  flex:none; width:30px; height:30px; stroke:var(--green); stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round; display:block;
}
.step-v span { font-size:clamp(1rem,3.1vw,1.16rem); color:var(--strong); line-height:1.35; }
.arw { margin:7px 0 7px 5px; }
.arw > svg {
  flex:none; width:20px; height:20px; stroke:var(--dim); stroke-width:2.2;
  fill:none; stroke-linecap:round; stroke-linejoin:round; display:block;
}

/* ── DERIVATION BLOCK ──────────────────────────────────────────────────────
   How a number was arrived at, written the way you would write it on
   paper. The operator sits inside the label rather than in a column of its
   own: given its own track it has to be wide enough for the widest symbol
   on every row, which opens a gap in front of the short labels. */
.calc {
  margin:22px 0 0; border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:clamp(14px,3.6vw,22px); background:var(--surface);
}
.calc .cl {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(10px,2.6vw,15px); padding:10px 0;
}
.calc .ic {
  width:clamp(18px,4.6vw,21px); height:clamp(18px,4.6vw,21px); flex:none;
  display:block; fill:none; stroke:var(--green); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; opacity:.85;
}
.calc .op { font-family:var(--font-head); font-weight:800; color:var(--faint); margin-right:.42em; font-size:1.02em; }
.calc .lb { color:var(--dim); font-size:clamp(.86rem,2.6vw,.98rem); line-height:1.4; max-width:none; }
.calc .vl {
  font-family:var(--font-head); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(.98rem,3.1vw,1.15rem); white-space:nowrap; text-align:right; color:var(--fg);
}
.calc .cl.eq { border-top:1px solid var(--hair); margin-top:5px; padding-top:16px; }
.calc .cl.eq .lb { color:var(--fg); }
.calc .cl.eq .op { color:var(--green); }
.calc .cl.eq .ic { opacity:1; stroke-width:2.1; }
.calc .cl.eq .vl { color:var(--green); font-size:clamp(1.25rem,4.4vw,1.6rem); }
.calc .note { margin:14px 0 0; color:var(--faint); font-size:.83rem; line-height:1.55; }

/* ── FLAG ──────────────────────────────────────────────────────────────────
   An amber left rule, for stating a caveat rather than hiding it. Used
   sparingly and deliberately. */
.flag {
  margin:20px 0 0; border-left:2px solid var(--amber); padding:2px 0 2px 16px;
  color:var(--dim); font-size:clamp(.88rem,2.7vw,.98rem); line-height:1.6; max-width:64ch;
}
.flag b { color:var(--amber); font-weight:700; }

/* ── TAGS ──────────────────────────────────────────────────────────────────
   The old soft tints were light-mode fills. On black a tag is a tinted
   hairline with the colour carried by the text, which keeps the four
   party colours legible without four new background values. */
.tag {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-body); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  padding:3px 8px; border-radius:var(--r-sm);
  border:1px solid currentColor; background:transparent;
}
.tag-green { color:var(--green); background:rgba(52,193,101,.1); }
.tag-red   { color:var(--red);   background:rgba(249,51,61,.1); }
.tag-amber { color:var(--amber); background:rgba(253,171,17,.1); }
.tag-cyan  { color:var(--cyan);  background:rgba(33,167,191,.1); }
.tag-muted { color:var(--dim);   background:var(--surface); border-color:var(--hair); }
.tag-live  { color:#04140A; background:var(--green); border-color:var(--green); }

/* ── CARDS ─────────────────────────────────────────────────────────────────
   Almost no fill, one hairline, 6px. A card that carries a party colour
   states it with its border, not with a tinted background. */
.card {
  background:var(--surface); border-radius:var(--r-lg);
  border:1px solid var(--hair);
  overflow:hidden;
}
.card h3 {
  font-family:var(--font-head); font-weight:800; font-size:1.12rem;
  letter-spacing:-.02em; margin:0 0 14px; padding-bottom:12px;
  border-bottom:1px solid var(--hair);
}
.card .ilist { margin-top:0; }
.card.c-red   { border-color:rgba(249,51,61,.55); }  .card.c-red   .ilist svg { stroke:var(--red); }
.card.c-cyan  { border-color:rgba(33,167,191,.55); } .card.c-cyan  .ilist svg { stroke:var(--cyan); }
.card.c-amber { border-color:rgba(253,171,17,.55); } .card.c-amber .ilist svg { stroke:var(--amber); }
.card.c-green { border-color:rgba(52,193,101,.6); }

.card-hoverable { transition:border-color 140ms var(--e), background 140ms var(--e), transform 140ms var(--e); cursor:pointer; }
.card-hoverable:hover { border-color:rgba(255,255,255,.32); background:var(--surface-2); transform:translateY(-2px); }

.cards { display:grid; gap:15px; margin-top:24px; grid-template-columns:1fr; }
@media (min-width:680px) { .cards.two { grid-template-columns:1fr 1fr; } }
@media (min-width:900px) { .cards.four { grid-template-columns:repeat(4,1fr); } }
@media (min-width:680px) and (max-width:899px) { .cards.four { grid-template-columns:1fr 1fr; } }

/* ── PLATFORM CARD ─────────────────────────────────────────────────────────
   The one place all four party colours appear at once. Each card is
   identified by the 3px rule along its top and by the colour its border
   takes on hover — never by a fill, which would turn the row into four
   coloured blocks and lose the black ground. */
.platform-card {
  border-radius:var(--r-lg); border:1px solid var(--hair);
  background:var(--surface);
  padding:28px; display:flex; flex-direction:column;
  gap:16px; text-decoration:none; color:inherit;
  transition:border-color 180ms var(--e), background 180ms var(--e), transform 180ms var(--e);
  position:relative; overflow:hidden;
}
.platform-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.platform-card.trader::before { background:var(--green); }
.platform-card.logis::before  { background:var(--amber); }
.platform-card.sell::before   { background:var(--red); }
.platform-card.buy::before    { background:var(--cyan); }
.platform-card:hover { transform:translateY(-3px); background:var(--surface-2); }
.platform-card.trader:hover { border-color:rgba(52,193,101,.55); }
.platform-card.logis:hover  { border-color:rgba(253,171,17,.55); }
.platform-card.sell:hover   { border-color:rgba(249,51,61,.55); }
.platform-card.buy:hover    { border-color:rgba(33,167,191,.55); }

.platform-icon {
  width:44px; height:44px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; border:1px solid currentColor;
}
.platform-icon.trader { color:var(--green); background:rgba(52,193,101,.1); }
.platform-icon.logis  { color:var(--amber); background:rgba(253,171,17,.1); }
.platform-icon.sell   { color:var(--red);   background:rgba(249,51,61,.1); }
.platform-icon.buy    { color:var(--cyan);  background:rgba(33,167,191,.1); }
.platform-icon svg { stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── FIGURE ────────────────────────────────────────────────────────────────
   A holder for a diagram. Everything inside is the deck's own artwork. */
.fig {
  margin-top:26px; border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:14px; background:var(--surface);
}
.fig svg { display:block; width:100%; height:auto; }
.figcap { color:var(--faint); font-size:.85rem; margin-top:10px; text-align:center; }

/* ── TABLE ─────────────────────────────────────────────────────────────────
   No vertical rules, a hairline between rows, numerics right-aligned and
   nowrap in Overpass 800. No min-width: the numeric cells already refuse
   to wrap and a min-width just pushes columns off a phone behind a scroll
   nobody discovers. */
.tbl { margin:22px 0 0; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl table { width:100%; border-collapse:collapse; font-size:clamp(.82rem,2.4vw,.95rem); }
.tbl th, .tbl td {
  text-align:left; padding:11px clamp(8px,2.4vw,14px) 11px 0;
  border-bottom:1px solid var(--hair); vertical-align:top;
}
.tbl th {
  font-family:var(--font-body); font-weight:700; font-size:.74rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--faint); white-space:nowrap;
}
.tbl td.n, .tbl th.n {
  text-align:right; padding-right:0; white-space:nowrap;
  font-family:var(--font-head); font-weight:800; letter-spacing:-.015em; color:var(--fg);
}
.tbl th.n { font-family:var(--font-body); font-weight:700; letter-spacing:.11em; color:var(--faint); }
.tbl tr:last-child td { border-bottom:0; }
.tbl tr.tot td { border-top:2px solid rgba(255,255,255,.28); border-bottom:0; padding-top:14px; color:var(--fg); }
.tbl tr.tot td.n { color:var(--green); font-size:1.06em; }
.tbl td small {
  display:block; margin-top:4px; color:var(--faint); font-size:.82em;
  font-family:var(--font-body); font-weight:400; letter-spacing:0; line-height:1.45; white-space:normal;
}

/* ── PULL QUOTE ────────────────────────────────────────────────────────── */
.pull {
  font-family:var(--font-head); font-weight:800; letter-spacing:-.025em;
  line-height:1.14; font-size:clamp(1.35rem,5vw,2rem); margin:0; max-width:22ch; color:var(--fg);
}
.pull em { font-style:normal; color:var(--green); }

.quote {
  margin:26px 0 0; padding:clamp(20px,4.6vw,30px);
  border:1px solid var(--hair); border-left:2px solid var(--green);
  border-radius:var(--r-lg); background:var(--surface);
}
.quote blockquote { margin:0; font-size:clamp(.98rem,3vw,1.1rem); line-height:1.62; color:rgba(255,255,255,.9); max-width:none; }
.quote figcaption {
  margin-top:18px; padding-top:15px; border-top:1px solid var(--hair);
  display:flex; align-items:center; gap:13px; font-size:.9rem; color:var(--faint);
}
.quote figcaption b { font-weight:700; color:var(--fg); }
.quote .qface { width:44px; height:44px; border-radius:50%; object-fit:cover; display:block; border:1px solid var(--hair); }

/* ── COLUMN CHART ──────────────────────────────────────────────────────────
   Flat bars, 3px corners to match the controls. One bar picked out in
   green, the rest at .15 white. No gridlines, no axes, no legend — the
   label under each bar is the axis. If a chart needs a legend to be
   understood, label the marks instead. */
.barc { display:block; width:100%; height:auto; overflow:visible; }
.barc .bar { fill:rgba(255,255,255,.15); }
.barc .bar.on { fill:var(--green); }
.barc .bar.red { fill:var(--red); } .barc .bar.cyan { fill:var(--cyan); } .barc .bar.amber { fill:var(--amber); }
.barc .bval {
  font-family:var(--font-head); font-weight:800; font-size:30px;
  letter-spacing:-.02em; fill:var(--fg); text-anchor:middle;
}
.barc .blab { font-family:var(--font-body); font-weight:400; font-size:25px; fill:var(--faint); text-anchor:middle; }

/* ── NETWORK DIAGRAM ───────────────────────────────────────────────────────
   A static line with a brighter segment travelling along it, rather than a
   marching-ants dash. Nodes breathe rather than blink, and each carries its
   own delay so the set never pulses in unison. */
.netl { stroke:rgba(255,255,255,.29); stroke-width:5; fill:none; stroke-linecap:round; }
.netf {
  stroke:rgba(255,255,255,.68); stroke-width:5; fill:none; stroke-linecap:round;
  stroke-dasharray:70 700;
}
.netarw { fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }

/* ── GRID HELPERS ────────────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.site-footer {
  background:transparent; color:var(--dim);
  border-top:1px solid var(--hair);
  padding:clamp(48px,6vw,80px) 0 32px;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-brand img { width:auto; }
.footer-brand p { font-size:14px; line-height:1.6; margin-top:14px; max-width:38ch; color:var(--dim); }
.footer-col h6 {
  font-family:var(--font-body); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; color:var(--faint); margin-bottom:14px;
}
.footer-col a { display:block; font-size:14px; color:var(--dim); text-decoration:none; margin-bottom:8px; transition:color 120ms var(--e); }
.footer-col a:hover { color:var(--fg); }
.footer-bottom {
  padding-top:24px; border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; font-size:13px; flex-wrap:wrap; color:var(--faint);
}
.footer-bottom a { color:var(--faint); text-decoration:none; }
.footer-bottom a:hover { color:var(--dim); }

/* ── MOTION ────────────────────────────────────────────────────────────────
   Copy rises, numbers settle with weight, lines draw themselves, and
   nothing runs past about a second: the build finishes well before the
   reader does. Repeated groups walk in at 70-80ms intervals off an order
   index rather than each carrying a hand-written delay. */
@keyframes fade-up  { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes fade-in  { from { opacity:0; } to { opacity:1; } }
@keyframes fxRise   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fxSettle { from { opacity:0; transform:translateY(10px) scale(.965); } to { opacity:1; transform:none; } }
@keyframes fxFade   { from { opacity:0; } to { opacity:1; } }
@keyframes fxPop    { from { opacity:0; transform:scale(.35); } to { opacity:1; transform:none; } }
@keyframes fxDraw   { from { stroke-dashoffset:1000; } to { stroke-dashoffset:0; } }
@keyframes barGrow  { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes pulse-dot { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.6); opacity:.5; } }
@keyframes draw-line { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes float     { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes spin-slow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes count-up  { from { opacity:0; } to { opacity:1; } }
@keyframes shimmer   { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes netflow   { from { stroke-dashoffset:0; } to { stroke-dashoffset:-770; } }
@keyframes netpulse  { 0%,100% { transform:scale(1); } 50% { transform:scale(1.13); } }

/* Scroll reveal is opt-in: the hiding rule only applies once the script has
   confirmed it will do the revealing. A dead script leaves a readable page,
   never a blank one. */
html.reveal-on .reveal { opacity:0; transform:translateY(20px); transition:opacity 550ms var(--e), transform 550ms var(--e); }
html.reveal-on .reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:80ms; }
.reveal-delay-2 { transition-delay:160ms; }
.reveal-delay-3 { transition-delay:240ms; }
.reveal-delay-4 { transition-delay:320ms; }

@media (prefers-reduced-motion:no-preference) {
  .netf { animation:netflow var(--dur,3.2s) linear infinite; animation-delay:var(--d,0s); }
  .barc .bar { transform-box:fill-box; transform-origin:bottom; }
  .barc.in .bar { animation:barGrow .52s var(--e) both; animation-delay:calc(var(--o,0)*70ms + 120ms); }
  .barc.in .bval { animation:fxFade .3s var(--e) both; animation-delay:calc(var(--o,0)*70ms + 420ms); }
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  .nav-links, .nav-actions { display:none; }
  .nav-hamburger { display:flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }

  .footer-grid { grid-template-columns:1fr 1fr 1fr; gap:24px 20px; }
  .footer-grid .footer-brand { grid-column:1 / -1; }
  .footer-grid .footer-brand p { max-width:none; }
  .footer-bottom { flex-direction:column; gap:12px; align-items:flex-start; }

  /* Inline two-column grids collapse. Matches the many
     style="display:grid;grid-template-columns:1fr 1fr" blocks used in the
     platform heroes and detail pages. */
  .section [style*="grid-template-columns:1fr 1fr"],
  section [style*="grid-template-columns:1fr 1fr"],
  .container > [style*="grid-template-columns:1fr 1fr"],
  .container [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
    gap:32px !important;
  }

  /* Platform hero demo mockups: hide on mobile, the text and CTA carry it */
  .browser-mock, .feature-preview, .listing-preview, .sourcing-preview,
  #lt-hero .container > div > div:last-child:not(:first-child),
  #st-hero .container > div > div:last-child:not(:first-child),
  #bt-hero .container > div > div:last-child:not(:first-child) {
    display:none !important;
  }

  #lt-hero, #st-hero, #bt-hero, #tt-hero { min-height:auto !important; padding-bottom:24px; }
  .marketplace-visual { margin-top:24px; max-width:360px; margin-inline:auto; }
  .mission-block { padding:24px !important; }
}

/* Blueprint's tap target, enforced once rather than per callsite. */
@media (max-width:640px) {
  .btn, .btn-nav-cta, .btn-nav-login { min-height:44px; }
  .btn-lg, .btn-md { width:100%; }
  .hero-actions .btn { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.reveal-on .reveal { opacity:1; transform:none; }
}