/* =========================================================================
   ORVION — public website design system
   =========================================================================

   SCOPE. This stylesheet serves the PUBLIC COMMERCIAL SURFACE only. It is not
   part of the ORVION application, shares no code with it, and loads no
   external resource: no font CDN, no analytics, no third-party script, no
   framework. Everything these pages need is in this directory.

   ADR-033 separates the public commercial experience from the operating
   application. This file belongs entirely to the first.

   TYPEFACE. A system stack, deliberately. The design calls for a modern
   enterprise sans; on every target platform the system face already is one
   (Segoe UI Variable, SF Pro, Roboto). Shipping a webfont would cost a
   render-blocking request and a ~100 KB download to arrive at the same place.
   Hierarchy here comes from size, weight and letter-spacing, not from novelty.

   THEME. Committed dark. The approved direction is a dark executive surface,
   so this is not a theme-switching stylesheet — every colour is stated, and
   `body` paints an explicit background rather than inheriting one.
   ========================================================================= */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Surfaces, darkest to lightest */
  --bg:              #05060b;
  --bg-deep:         #030407;
  --surface:         #0a0c14;
  --surface-raised:  #0f121c;
  --card:            rgba(255, 255, 255, 0.035);
  --card-hover:      rgba(255, 255, 255, 0.055);
  --glass:           rgba(10, 12, 20, 0.72);

  /* Text */
  --text:            #f4f6fa;
  --text-secondary:  #b3bbcd;
  --text-muted:      #7b849a;
  --text-faint:      #7d8798;

  /* Brand accents */
  --violet:          #7c5cff;
  --violet-bright:   #a189ff;
  --violet-deep:     #4c33c7;
  --blue:            #3d7bff;
  --blue-bright:     #6fa0ff;

  /* Status */
  --success:         #3ddc97;
  --warning:         #f0b345;

  /* Lines and light */
  --border:          rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.16);
  --border-lit:      rgba(124, 92, 255, 0.38);
  --glow-violet:     rgba(124, 92, 255, 0.30);
  --glow-blue:       rgba(61, 123, 255, 0.22);
  --focus-ring:      #a189ff;

  /* Spacing scale (4px base) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* Radii — refined, not pill */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --maxw: 1200px;

  --font: "Segoe UI Variable Display", "Segoe UI", -apple-system,
          BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- 2. Reset ----------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* No element may push the viewport sideways. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--violet-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- 3. Layout ---------------------------------------------------------- */

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

.section { padding: var(--s-8) 0 var(--s-9); position: relative; }
.section--tight { padding: var(--s-7) 0 var(--s-8); }

/* SECTION DIFFERENTIATION. Every band used to be the same flat near-black, so
   the page read as one undifferentiated column of text after the hero. These
   are restrained: a raised surface, a hairline, or a single soft light source —
   never a glow on every section. */
.section--raised {
  background: linear-gradient(180deg, rgba(255,255,255,0.022) 0%, rgba(255,255,255,0.008) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section--deep {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section--lit {
  background:
    radial-gradient(ellipse 78% 120% at 50% -10%, rgba(124, 92, 255, 0.15) 0%, rgba(124, 92, 255, 0) 60%),
    var(--bg-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section--hair { border-top: 1px solid var(--border); }

.section-head { max-width: 62ch; margin-bottom: var(--s-6); }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet-bright);
  margin: 0 0 var(--s-3);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--violet-deep);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* --- 4. Typography ------------------------------------------------------ */

h1, h2, h3, h4 { margin: 0 0 var(--s-4); font-weight: 620; }

h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 680;
}

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.028em;
}

h3 { font-size: 1.12rem; line-height: 1.35; letter-spacing: -0.012em; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
}

.prose { max-width: 68ch; color: var(--text-secondary); }
.prose h2, .prose h3 { color: var(--text); }
.prose ul { padding-left: 20px; margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }

.muted { color: var(--text-muted); }
.u-wide { max-width: 74ch; }
.u-tc { text-align: center; }
.u-mt-lg { margin-top: var(--s-7); }
.u-mt-md { margin-top: var(--s-5); }
.u-mt-sm { margin-top: var(--s-4); }
.u-sub { font-size: 1.25rem; }
.u-center { margin-left: auto; margin-right: auto; }
.u-mt { margin-top: var(--s-3); }
.small { font-size: 0.92rem; }

/* The accent line of the hero headline. */
.grad {
  background: linear-gradient(96deg, var(--blue-bright) 0%, var(--violet-bright) 46%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* If background-clip:text is unsupported the text stays readable in violet. */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad { color: var(--violet-bright); -webkit-text-fill-color: currentColor; }
}

/* --- 5. Header ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 72px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--text);
  font-size: 1.14rem;
  font-weight: 680;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand .mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--violet-bright);
  filter: drop-shadow(0 0 9px var(--glow-violet));
}

.nav-toggle {
  display: none;
  margin-left: auto;
  min-height: 44px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.site-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 620; }

.nav-sep {
  width: 1px;
  height: 24px;
  background: var(--border-strong);
  margin: 0 var(--s-2);
  flex-shrink: 0;
}

.site-nav a.nav-cta {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  color: #fff;
  font-weight: 620;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 20px -8px var(--glow-violet);
}
.site-nav a.nav-cta:hover { background: linear-gradient(135deg, var(--violet-bright) 0%, var(--violet) 100%); color: #fff; }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .site-nav {
    display: none;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-bottom: var(--s-4);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { min-height: 46px; padding: 11px 14px; }
  .nav-sep { width: 100%; height: 1px; margin: var(--s-2) 0; }
  .site-nav a.nav-cta { justify-content: center; }
}

/* --- 6. Buttons --------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 14px 28px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 34px -12px var(--glow-violet);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -12px var(--glow-violet); }

/* The secondary button can land on top of the hero's brightest area (the
 * atmospheric rim). A translucent fill alone would wash out there, so it
 * carries its own dark backdrop and keeps its contrast wherever it sits. */
.btn-secondary {
  background: rgba(10, 12, 20, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: rgba(22, 26, 40, 0.82);
  border-color: var(--border-lit);
  transform: translateY(-1px);
}

.btn .arrow { font-size: 1.05em; line-height: 1; }

/* --- 7. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  text-align: center;
  background: var(--bg-deep);
}

/* The stage is the hero MINUS the feature strip. The globe is anchored to the
 * bottom of this box, so its crest always lands just above the strip instead of
 * behind it — at every viewport, without a hard-coded offset. */
.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 11vw, 132px) 0 0;
}

/* Layer 1 — atmospheric wash. Present even if the globe image fails. */
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 120% 62% at 50% 108%, rgba(124, 92, 255, 0.34) 0%, rgba(124, 92, 255, 0) 62%),
    radial-gradient(ellipse 90% 48% at 50% 100%, rgba(61, 123, 255, 0.22) 0%, rgba(61, 123, 255, 0) 68%),
    linear-gradient(180deg, #05060b 0%, #070810 46%, #0a0a16 100%);
}

/* Layer 2 — the illuminated Earth, blended into the page bottom.
 *
 * Sized and anchored so the atmospheric crest settles BELOW the call-to-action
 * row. The arc is the brightest thing on the page; if it rises into the buttons
 * or the lead paragraph it destroys their contrast, which is a legibility bug
 * before it is an aesthetic one. */
.hero-globe {
  position: absolute;
  left: 50%;
  /* Offset down by roughly the feature strip's height. The stage is shorter
     than the hero it replaced, so without this the arc rides up into the lead
     paragraph and takes its contrast with it. */
  bottom: -112px;
  transform: translateX(-50%);
  width: min(1420px, 108%);
  z-index: -1;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
}

/* Layer 3 — contrast scrim. Guarantees the headline block reads over whatever
 * part of the globe ends up behind it at a given viewport width. */
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 74%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 11, 0.92) 0%, rgba(5, 6, 11, 0.72) 42%, rgba(5, 6, 11, 0) 100%);
}

/* The badge is a long uppercase string with wide tracking. As an inline-flex it
 * refuses to wrap, so on a narrow screen it becomes the widest thing on the
 * page and drags the whole layout past the viewport — clipping the headline.
 * max-width plus a wrappable text node keeps it inside the column. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-lit);
  background: rgba(124, 92, 255, 0.09);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.17em;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: var(--s-6);
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet-bright);
  box-shadow: 0 0 8px var(--violet-bright);
  flex-shrink: 0;
}

.hero h1 { margin-bottom: var(--s-5); }
.hero h1 .line { display: block; }

.hero .lead { margin: 0 auto; text-align: center; max-width: 56ch; }
.hero .actions { justify-content: center; margin-bottom: clamp(56px, 10vw, 124px); }

/* Feature strip sits over the lower glow, as in the approved direction. */
.hero-strip {
  position: relative;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(6, 7, 14, 0.4) 0%, rgba(6, 7, 14, 0.86) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
  text-align: left;
}
.strip-item { display: flex; gap: var(--s-3); align-items: flex-start; }
.strip-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-lit);
  background: rgba(124, 92, 255, 0.11);
  color: var(--violet-bright);
  display: grid;
  place-items: center;
}
.strip-icon svg { width: 19px; height: 19px; }
.strip-item .strip-title { font-size: 0.97rem; margin: 0 0 2px; letter-spacing: -0.005em; }
.strip-item p { font-size: 0.86rem; color: var(--text-muted); margin: 0; line-height: 1.45; }

@media (max-width: 940px) {
  .hero-strip .wrap { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
}
@media (max-width: 560px) {
  .hero { text-align: left; }
  .hero .lead { text-align: left; margin: 0; }
  .hero .actions { justify-content: stretch; flex-direction: column; }
  .hero .actions .btn { width: 100%; }
  /* Wider than the viewport on purpose: only the crest of the arc should show,
     so the globe reads as a horizon rather than filling the screen. */
  .hero-globe { width: 215%; bottom: 0; opacity: 0.95; }
  /* The desktop scrim is tuned for a short hero. On mobile the hero is much
     taller, so the same percentage swallows the globe entirely and the page
     reads as flat black. Shorten it: the text sits high, the arc sits low, and
     they no longer compete. */
  .hero-stage::after { height: 52%; }
  .hero-strip .wrap { grid-template-columns: 1fr; }
  /* Tracking that is elegant at 4K is what breaks the line at 390px. */
  .hero-badge { font-size: 0.63rem; letter-spacing: 0.1em; padding: 7px 14px; }
  h1 { font-size: clamp(1.95rem, 8.6vw, 2.6rem); letter-spacing: -0.028em; }
}

/* --- 8. Cards and grids ------------------------------------------------- */

.grid { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
/* EXPLICIT, NOT auto-fit. At minmax(215px,1fr) auto-fit computed five columns
   in a 1152px container and left eight cards as a ragged 5 + 3. A 4-up grid is
   a design decision, so it is stated rather than derived. */
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .grid-4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.card:hover { background: var(--card-hover); border-color: var(--border-strong); }
.card h3 { color: var(--text); }
.card p { color: var(--text-muted); font-size: 0.94rem; margin: 0; line-height: 1.55; }

.card-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-lit);
  background: rgba(124, 92, 255, 0.11);
  color: var(--violet-bright);
  display: grid;
  place-items: center;
  margin-bottom: var(--s-4);
}
.card-icon svg { width: 20px; height: 20px; }

.card .step {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--violet-bright);
  margin-bottom: var(--s-3);
}

/* Compact pillar tiles */
.pillar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-left: 2px solid var(--violet);
}
.pillar h3 { font-size: 1rem; margin-bottom: 4px; }
.pillar p { font-size: 0.88rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* --- 9. Flow diagram ---------------------------------------------------- */

.flow {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  margin-top: var(--s-6);
  overflow-x: auto;
  padding-bottom: var(--s-3);
}
.flow-node {
  flex: 1 1 0;
  min-width: 128px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-3);
  text-align: center;
}
.flow-node .n {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--violet-bright);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.flow-node strong { display: block; font-size: 0.93rem; font-weight: 600; letter-spacing: -0.005em; }
.flow-node span.d { display: block; font-size: 0.79rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.flow-arrow {
  align-self: center;
  color: var(--text-faint);
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
}
@media (max-width: 760px) {
  .flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); margin: 2px 0; }
}

/* --- 10. Dashboard preview --------------------------------------------- */

.preview {
  margin-top: var(--s-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
  box-shadow: 0 40px 90px -50px rgba(124, 92, 255, 0.5), 0 0 0 1px rgba(255,255,255,0.02) inset;
  overflow: hidden;
}
.preview-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px var(--s-4);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.preview-dots { display: flex; gap: 6px; }
.preview-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); display: block; }
.preview-title { font-size: 0.8rem; color: var(--text-muted); font-family: var(--mono); letter-spacing: 0.04em; }
.preview-body { padding: var(--s-5); display: grid; grid-template-columns: 190px 1fr; gap: var(--s-4); }
.preview-rail { display: flex; flex-direction: column; gap: 7px; }
.rail-item {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  color: var(--text-muted);
  border: 1px solid transparent;
}
.rail-item.is-active {
  background: rgba(124, 92, 255, 0.12);
  border-color: var(--border-lit);
  color: var(--text);
  font-weight: 600;
}
.preview-main { display: grid; gap: var(--s-4); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s-3); }
.stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.stat .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--text-faint); }
.stat .v { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; }
.stat .v.ok { color: var(--success); }
.stat .v.warn { color: var(--warning); }
.panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.panel .panel-h { font-size: 0.83rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--text-faint); margin: 0 0 var(--s-3); font-weight: 620; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: 9px 0; border-top: 1px solid var(--border);
  font-size: 0.88rem; color: var(--text-secondary);
}
.panel li:first-child { border-top: 0; }
.tag {
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border-strong); color: var(--text-muted);
}
.tag.await { border-color: rgba(240, 179, 69, 0.4); color: var(--warning); background: rgba(240, 179, 69, 0.09); }
.tag.done  { border-color: rgba(61, 220, 151, 0.35); color: var(--success); background: rgba(61, 220, 151, 0.08); }

@media (max-width: 760px) {
  .preview-body { grid-template-columns: 1fr; }
  .preview-rail { flex-direction: row; overflow-x: auto; }
  .rail-item { white-space: nowrap; }
}

/* --- 11. Plans ---------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.plan {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.plan.is-featured { border-color: var(--border-lit); background: rgba(124, 92, 255, 0.06); }
.plan h3 { font-size: 1.35rem; letter-spacing: 0.01em; margin-bottom: 2px; }
.plan .plan-note { font-size: 0.88rem; color: var(--text-faint); font-style: italic; margin: 0 0 var(--s-4); }
.plan-summary { font-size: 0.94rem; color: var(--text-secondary); margin: 0 0 var(--s-4); }
.plan ul { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.plan li {
  position: relative;
  padding: 8px 0 8px 26px;
  border-top: 1px solid var(--border);
  font-size: 0.91rem;
  color: var(--text-muted);
}
/* Included and excluded are marked by symbol AND colour, never by colour
   alone, and each carries visually-hidden text so a screen reader hears the
   distinction rather than inferring it from a glyph. */
.plan li::before {
  position: absolute;
  left: 0;
  top: 8px;
  font-weight: 700;
  line-height: 1.5;
}
.plan li.yes { color: var(--text-secondary); }
.plan li.yes::before { content: "\2713"; color: var(--success); }
.plan li.no::before  { content: "\2014"; color: var(--text-faint); }
.plan li.yes::after { content: " (included)"; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plan li.no::after  { content: " (not included)"; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plan .btn { margin-top: auto; width: 100%; }

/* Inline links in prose must still be a 24px target (WCAG 2.5.8), wherever
   the prose lives — cards, notes, definition rows. */
.availability-note a,
.notice a,
.row p a,
.card p a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* --- 12. Notice --------------------------------------------------------- */

.notice {
  border: 1px solid rgba(240, 179, 69, 0.32);
  background: rgba(240, 179, 69, 0.07);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
  color: var(--text-secondary);
  font-size: 0.94rem;
}
.notice strong { color: var(--warning); font-weight: 650; }

.callout .actions { justify-content: center; }
.callout {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-top: var(--s-6);
  text-align: center;
}

/* --- 13. Rows ----------------------------------------------------------- */

.rows { margin-top: var(--s-6); border-top: 1px solid var(--border); }
.row {
  display: grid;
  grid-template-columns: minmax(160px, 250px) 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border);
}
.row h3 { margin: 0; }
.row p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
@media (max-width: 700px) { .row { grid-template-columns: 1fr; gap: 6px; } }

/* --- 14. Final CTA ------------------------------------------------------ */

.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 130% at 50% 118%, rgba(124, 92, 255, 0.26) 0%, rgba(124, 92, 255, 0) 66%),
    var(--bg-deep);
}
.cta-band .actions { justify-content: center; }

/* --- 15. Footer --------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  padding: var(--s-8) 0 var(--s-7);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--s-6) var(--s-5);
  margin-bottom: var(--s-7);
}
.footer-brand .brand { margin-bottom: var(--s-3); }
.footer-brand p { font-size: 0.88rem; color: var(--text-muted); max-width: 34ch; }
.footer-col h2 {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-faint); margin: 0 0 var(--s-3); font-weight: 650;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--s-2); }
.footer-col a { color: var(--text-muted); text-decoration: none; font-size: 0.89rem; }
.footer-col a:hover { color: var(--text); text-decoration: underline; }
.footer-col span.soon { color: var(--text-faint); font-size: 0.89rem; }

.footer-base {
  border-top: 1px solid var(--border);
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-faint);
}
.footer-base p { margin: 0; }

@media (max-width: 940px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); } }

/* --- 16. Page header (interior pages) ----------------------------------- */

.page-head {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 var(--s-8);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 80% 150% at 50% -30%, rgba(124, 92, 255, 0.16) 0%, rgba(124, 92, 255, 0) 62%),
    var(--bg-deep);
}
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: var(--s-4); }

/* --- 17. Status page (login / get-orvion) ------------------------------- */

.status-card {
  max-width: 620px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
}
.status-card .card-icon { margin: 0 auto var(--s-5); width: 52px; height: 52px; }
.status-card .card-icon svg { width: 25px; height: 25px; }
.status-card h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.status-card p { color: var(--text-secondary); }
.status-card .actions { justify-content: center; }
.contact-line {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text-muted);
}
.contact-line a { font-family: var(--mono); font-size: 0.95em; }

/* =========================================================================
   R1 — components for the launch-positioning homepage
   ========================================================================= */

/* --- Availability labelling ---------------------------------------------
   This site describes the INTENDED ORVION launch product. Anything not yet
   operational carries one of these, and the wording is chosen so a reader
   cannot mistake a direction for a delivery. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.badge--planned {
  border-color: rgba(240, 179, 69, 0.38);
  background: rgba(240, 179, 69, 0.09);
  color: var(--warning);
}
.badge--available {
  border-color: rgba(61, 220, 151, 0.34);
  background: rgba(61, 220, 151, 0.08);
  color: var(--success);
}
.badge--module {
  border-color: var(--border-lit);
  background: rgba(124, 92, 255, 0.1);
  color: var(--violet-bright);
}

/* A standing, page-level statement of what the page is describing. */
.availability-note {
  border: 1px solid var(--border);
  border-left: 2px solid var(--violet);
  background: var(--card);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
  font-size: 0.93rem;
  color: var(--text-secondary);
}
.availability-note strong { color: var(--text); font-weight: 650; }

/* --- Fragmentation (business before ORVION) ------------------------------ */

.frag {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}
@media (max-width: 900px) { .frag { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .frag { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.frag-item {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-3);
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.015);
}
.frag-item span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 5px;
}
.frag-caption {
  margin-top: var(--s-6);
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.45;
  color: var(--text);
  font-weight: 620;
  letter-spacing: -0.015em;
}

/* --- Organisation chart --------------------------------------------------
   Department, then team or function, then role. The hierarchy is the point:
   a flat list of agents would communicate the opposite of what ORVION is. */

.org {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.org-dept {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--violet);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.org-dept > h3 {
  font-size: 1rem;
  margin: 0 0 var(--s-3);
  letter-spacing: -0.008em;
}
.org-team {
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-bright);
  margin: var(--s-3) 0 var(--s-2);
}
.org-dept .org-team:first-of-type { margin-top: 0; }
.org-roles { list-style: none; margin: 0; padding: 0; }
.org-roles li {
  position: relative;
  padding: 4px 0 4px 16px;
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.org-roles li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 7px;
  height: 1px;
  background: var(--border-strong);
}

/* The owner sits above the organisation, not inside it. */
.org-owner {
  margin-top: var(--s-5);
  border: 1px solid var(--border-lit);
  background: rgba(124, 92, 255, 0.07);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  text-align: center;
  color: var(--text-secondary);
}
.org-owner strong { color: var(--text); }

/* --- Step flow (worked example, governance) ------------------------------ */

.steps { margin-top: var(--s-6); display: grid; gap: var(--s-2); }

.step-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--s-4);
  align-items: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.step-row.is-decision {
  border-color: var(--border-lit);
  background: rgba(124, 92, 255, 0.07);
}
.step-n {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--violet-bright);
  border: 1px solid var(--border-lit);
  background: rgba(124, 92, 255, 0.1);
}
.step-row.is-decision .step-n {
  color: #fff;
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  border-color: rgba(255, 255, 255, 0.18);
}
.step-body h3 { font-size: 1rem; margin: 0 0 4px; }
.step-body p { font-size: 0.91rem; color: var(--text-muted); margin: 0; line-height: 1.55; }
.step-who {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.step-row.is-decision .step-who { color: var(--violet-bright); }

@media (max-width: 520px) {
  .step-row { grid-template-columns: 36px 1fr; gap: var(--s-3); padding: var(--s-3); }
  .step-n { width: 36px; height: 36px; font-size: 0.78rem; }
}

/* --- Governance split ---------------------------------------------------- */

.gov-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(298px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.gov-side {
  border-radius: var(--r-lg);
  padding: var(--s-5);
  border: 1px solid var(--border);
  background: var(--card);
}
.gov-side.is-owner {
  border-color: var(--border-lit);
  background:
    radial-gradient(ellipse 90% 120% at 50% 0%, rgba(124, 92, 255, 0.14) 0%, rgba(124, 92, 255, 0) 70%),
    var(--card);
}
.gov-side h3 { font-size: 1.05rem; margin-bottom: var(--s-3); }
.gov-side ul { list-style: none; margin: 0; padding: 0; }
.gov-side li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 0.92rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.gov-side li:first-child { border-top: 0; }
.gov-side li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
}
.gov-side.is-owner li::before { background: var(--success); }

/* --- Module cards -------------------------------------------------------- */

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.module {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.module h3 { margin: 0; font-size: 1.08rem; }
.module p { font-size: 0.92rem; color: var(--text-muted); margin: 0; }
.module ul { list-style: none; margin: 0; padding: 0; }
.module li {
  padding: 5px 0 5px 15px;
  position: relative;
  font-size: 0.87rem;
  color: var(--text-muted);
}
.module li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
}

/* --- Tier cards ---------------------------------------------------------- */

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 2px;
}
.tier-price .amount {
  font-size: 2.35rem;
  font-weight: 680;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.05;
}
.tier-price .per { font-size: 0.95rem; color: var(--text-muted); }
.tier-annual {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
}
.tier-annual b { color: var(--violet-bright); font-weight: 650; }
.tier-businesses {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--s-4);
}
.plan.is-featured .tier-businesses { border-color: var(--border-lit); }

/* --- Scroll reveal -------------------------------------------------------
   Comprehension-serving only. The hiding class is ADDED BY SCRIPT at runtime,
   so with JavaScript disabled every element is simply present and readable —
   motion never gates content. */

.js-motion .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js-motion .reveal.is-in { opacity: 1; transform: none; }
.js-motion .reveal-d1 { transition-delay: 0.06s; }
.js-motion .reveal-d2 { transition-delay: 0.12s; }
.js-motion .reveal-d3 { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}