/* ============================================================================
   makeHistori — company site
   ----------------------------------------------------------------------------
   Plain CSS, no build step, no external fonts or scripts.

   ALWAYS DARK, deliberately. This page matches the VData launch deck, which is
   itself always dark ("This page is always dark, so it takes the dark-mode
   value of --color-brand" — services/launch/index.html). Someone arriving here
   from the demo should not meet a different-coloured site, so there is no
   light theme and no prefers-color-scheme switch. Every value below is the
   launch page's own.

   Tokens:
     services/launch/index.html      (palette, background treatment, type)
     apps/logbook/vantage-tokens.css (the dark palette those values come from)

   Wordmark rule: one accent letter takes the brand green (span.v) — the
   leading V of any VData name, and the capital H of makeHistori, so the
   company and the product family share one treatment. Green is used for
   nothing else on the page, exactly as on the launch deck.
   ============================================================================ */

:root {
  /* Grounds, verbatim from the launch deck */
  --bg0:#060912; --bg1:#0c1322;
  --panel:rgba(16,24,42,.72); --panel2:rgba(20,30,52,.6);

  /* Type */
  --ink:#eef3ff; --muted:#93a1c4; --faint:#5f6d8e;

  /* Hairlines */
  --bd:rgba(120,150,210,.22); --bd2:rgba(120,150,210,.14);

  /* Accents. --uns is the interactive/hover colour; --brand is the wordmark
     green only. The four node colours are the constellation's. */
  --uns:#5BA0DD;
  --brand:#2DB87A;
  --node-source:#5BB378; --node-transform:#E0B05A;
  --node-uns:#5BA0DD;    --node-profile:#A07AD6;

  --shadow:0 8px 26px rgba(0,0,0,.45);
  --radius:14px;
  --font-sans:"Inter","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg0);color:var(--ink);
  font-family:var(--font-sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* Fixed background, three layers as on the launch deck: a radial glow behind
   everything, a fine grid over it, and a vignette mask that fades the grid out
   toward the edges. Both layers are fixed, so they don't scroll with content. */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:radial-gradient(1100px 760px at 50% 24%,#16203a 0%,var(--bg1) 42%,var(--bg0) 100%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(120,150,210,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,150,210,.06) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 34%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 34%,#000 0%,transparent 78%)}

a{color:inherit;text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
.v{color:var(--brand)}

/* ---- constellation mark ---------------------------------------------------
   Four modelled sources converging on one point. */
.mark-svg .n-src{fill:var(--node-source)}
.mark-svg .n-tfm{fill:var(--node-transform)}
.mark-svg .n-uns{fill:var(--node-uns)}
.mark-svg .n-prf{fill:var(--node-profile)}
.mark-svg .leg{stroke:var(--node-uns);fill:none;stroke-linecap:round}

/* ---- top bar ---- */
.top{display:flex;align-items:center;gap:14px;height:64px;border-bottom:1px solid var(--bd2)}
.top .mark{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:17px}
.top .mark svg{width:24px;height:24px;flex:0 0 24px}
.top .mark small{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:500}
.topnav{margin-left:auto;display:flex;gap:4px;align-items:center}
.topnav a{font-size:13.5px;color:#c7d2ee;padding:8px 13px;border-radius:8px;transition:.14s}
.topnav a:hover{background:rgba(120,150,210,.1);color:#fff}
/* The single call to action gets the launch deck's primary button. */
.topnav a.cta{background:linear-gradient(135deg,#4f93d6,#6f5fd0);color:#fff;font-weight:600;
  padding:9px 16px;border-radius:9px;box-shadow:0 6px 20px rgba(91,160,221,.32)}
.topnav a.cta:hover{filter:brightness(1.08);box-shadow:0 8px 26px rgba(91,160,221,.5);color:#fff}

/* ---- hero ---- */
.hero{padding:62px 0 8px;max-width:760px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:#b9c6ea;background:rgba(91,160,221,.1);
  border:1px solid var(--bd);border-radius:999px;padding:6px 15px}
/* The launch deck's headline treatment: a cool gradient fill rather than flat
   ink. padding-bottom keeps descenders from being clipped by background-clip. */
.hero h1{font-size:clamp(29px,4.6vw,46px);line-height:1.18;letter-spacing:-.5px;
  margin:20px 0 0;padding-bottom:.1em;font-weight:800;text-wrap:balance;
  background:linear-gradient(92deg,#fff 0%,#cfe0ff 55%,#a7c8ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:clamp(16px,2vw,18.5px);color:var(--muted);margin:16px 0 0}

/* ---- section furniture ---- */
.sec-h{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  margin:56px 0 14px;font-weight:600}
.prose{max-width:720px}
.prose p{margin:0 0 14px;font-size:15.5px;color:#c7d2ee}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--ink);font-weight:700}

/* ---- cards (expertise grid) ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:var(--panel);border:1px solid var(--bd);border-radius:var(--radius);
  padding:20px 21px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.card h3{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
/* Inline-block marker, not a flex parent: a flex h3 would make a nested span
   its own flex item and open a gap mid-word. */
.card h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--uns);margin-right:13px;vertical-align:middle;position:relative;top:-1px;
  box-shadow:0 0 8px var(--uns)}
.card p{margin:9px 0 0;font-size:14.5px;color:#c7d2ee}

/* ---- capability lists inside cards ----
   Two devices, chosen by what the content is: sentences describing what we do
   get bullets; platform and protocol names are labels, so they get pills. */
.card ul{margin:11px 0 0;padding-left:17px}
.card li{font-size:14px;color:var(--muted);margin:5px 0}
.card li::marker{color:var(--uns)}
.card .sub-h{margin:14px 0 8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tags span{font-size:12px;font-weight:500;color:#b3c0de;background:var(--panel2);
  border:1px solid var(--bd);border-radius:999px;padding:4px 10px}

/* ---- pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.pillars.four{grid-template-columns:repeat(2,1fr)}
.pillar{background:var(--panel2);border:1px solid var(--bd2);border-radius:12px;
  padding:15px 16px;backdrop-filter:blur(6px)}
.pillar b{display:block;font-size:14.5px;color:var(--ink)}
.pillar span{display:block;font-size:13px;color:var(--muted);margin-top:3px}

/* ---- closing call to action ---- */
.close{margin-top:20px;background:var(--panel);border:1px solid var(--bd);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 26px;backdrop-filter:blur(8px)}
.close h2{margin:0;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em;font-weight:800;
  text-wrap:balance;color:var(--ink)}
.close p{margin:12px 0 0;font-size:15px;color:var(--muted);max-width:640px}
.close .addr{display:inline-block;margin-top:18px;font-size:18px;font-weight:700;
  letter-spacing:-.01em;color:var(--brand);
  border-bottom:1px solid color-mix(in srgb,var(--brand) 45%,transparent)}
.close .addr:hover{border-bottom-color:var(--brand)}

/* ---- footer ---- */
footer{margin:56px 0 44px;padding-top:22px;border-top:1px solid var(--bd2);
  font-size:12.5px;color:var(--faint)}
footer .honest{color:var(--muted);max-width:760px}
footer b{color:#c7d2ee;font-weight:650}
footer .bar{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
footer a:hover{color:#fff}

/* ---- 404 ---- */
.notfound{padding:90px 0 60px;max-width:560px}
.notfound h1{font-size:clamp(26px,4vw,36px);margin:16px 0 0;letter-spacing:-.02em;
  font-weight:800;color:var(--ink)}
.notfound p{color:var(--muted);margin:14px 0 0;font-size:16px}
.notfound a.back{display:inline-block;margin-top:22px;font-weight:600;color:#d6e0f7;
  border:1px solid var(--bd);border-radius:9px;padding:9px 16px;font-size:14px;transition:.15s}
.notfound a.back:hover{border-color:var(--uns);background:rgba(91,160,221,.1);color:#fff}

/* ---- focus, for keyboard users ---- */
a:focus-visible{outline:2px solid var(--uns);outline-offset:3px;border-radius:4px}

@media (max-width:720px){
  .grid,.pillars,.pillars.four{grid-template-columns:1fr}
  .hero{padding-top:40px}
  .topnav a:not(.cta){display:none}
}