/* ============================================================
   Xterion — credibility site
   Single fixed screen. Selecting a nav item transitions a panel
   into view (no scrolling). Echoes the live brand:
   bg #0A0F1E · cyan #00bcd4 · Sora + Inter · glowing logo.
   ============================================================ */

:root {
  --bg:        #0A0F1E;
  --line:      #1e2a3a;
  --line-2:    #16202f;
  --accent:    #00bcd4;
  --accent-2:  #4dd6e8;
  /* Violet from the overview deck — the far end of the logo's cyan-to-magenta
     gradient. Reserved for the problem statement, never for Xterion's own
     capabilities, which stay cyan. */
  --accent-alt: #a78bfa;
  --text:      #c8d6e5;
  --text-soft: #93a4ba;
  --text-faint:#5a6b80;

  --maxw: 1080px;
  --pad: clamp(20px, 5vw, 48px);
  --header-h: 76px;
  --local-nav-h: 44px;
  --footer-h: 56px;

  --display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;                 /* no page scroll — views swap in place */
}

.container {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-left: var(--pad); padding-right: var(--pad);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #04222a; padding: 10px 16px;
  z-index: 300; font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---- Persistent ambient background ---- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-glow { position: absolute; border-radius: 50%; transition: opacity 0.8s ease; }
.bg-glow-core {
  top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 820px; height: 820px;
  background: radial-gradient(circle, rgba(0,188,212,0.15) 0%, rgba(0,188,212,0.045) 38%, transparent 68%);
  filter: blur(10px);
}
.bg-glow-b {
  bottom: -240px; right: -140px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(45,106,163,0.16) 0%, transparent 68%);
  filter: blur(18px);
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 78% 70% at 50% 45%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 45%, #000 30%, transparent 80%);
}

/* ---- Header ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: linear-gradient(to bottom, rgba(10,15,30,0.85), rgba(10,15,30,0));
}
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: inline-flex; }
.brand-logo { height: 40px; width: auto; display: block; }
/* On home, the hero already carries the logo and the two CTA buttons cover
   Platform/Contact — so the whole header is redundant. Hide it on home;
   it fades back in on the Platform/Contact views. */
.site-header { transition: opacity 0.4s ease; }
html[data-view="home"] .site-header { opacity: 0; visibility: hidden; pointer-events: none; }

.nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); }
.nav a {
  font-size: 0.95rem; font-weight: 500; color: var(--text-soft);
  transition: color 0.2s ease; position: relative;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="true"] { color: var(--accent); }
.nav-cta {
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 20px;
  color: var(--text) !important;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover { border-color: var(--accent); color: var(--accent) !important; box-shadow: 0 0 24px rgba(0,188,212,0.18); }
.nav-cta[aria-current="true"] { border-color: var(--accent); color: var(--accent) !important; }
@media (max-width: 560px) { .nav a:not(.nav-cta) { display: none; } }

/* ---- Stage + views (the swap mechanism) ---- */
.stage { position: fixed; inset: 0; z-index: 10; }

.view {
  position: absolute; inset: 0;
  display: flex; align-items: safe center; justify-content: center;
  padding: calc(var(--header-h) + 16px) 0 calc(var(--footer-h) + 16px);
  opacity: 0; visibility: hidden;
  transform: translateY(18px) scale(0.992);
  transition: opacity 0.5s var(--ease), transform 0.55s var(--ease), visibility 0s linear 0.55s;
  pointer-events: none;
  overflow-y: auto;                 /* graceful fallback if a panel is taller than the screen */
}
.view.is-active {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 0.55s var(--ease), transform 0.6s var(--ease), visibility 0s;
}
.view[hidden] { display: flex; }    /* keep flex layout; visibility handles hide */

.view-inner { width: 100%; text-align: center; }

/* staggered child entrance, re-fired each time a view activates */
.v-item { opacity: 0; transform: translateY(20px); }
.view.is-active .v-item {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(0.08s + var(--i, 0) * 0.07s);
}

@media (prefers-reduced-motion: reduce) {
  .view, .view.is-active, .v-item, .view.is-active .v-item { transition: none !important; }
  .v-item { opacity: 1; transform: none; }
}

/* ---- Typographic primitives ---- */
/* Brand line, set INSIDE the lockup as a wordmark tagline rather than as a
   separate line of content. Positioned from the same measured artwork the
   trademark uses: in the 546x148 image the wordmark starts at x 190 (34.8%)
   and the X mark's foot sits at y 140 (5.4% up from the bottom) — so the
   tagline aligns left with the "X" of XTERION and bottoms out level with the
   mark, filling the empty space beneath the wordmark.

   Sentence-case, untracked and grey against the kicker below, which is
   uppercase, widely tracked and cyan — that separation is what keeps the two
   from muddying each other. NOT italic: neither font is loaded with an ital
   axis (the request carries wght only), so font-style: italic would be
   synthesised by slanting roman glyphs, which renders inconsistently and reads
   as a rendering fault rather than a choice. Restoring the deck's italic would
   mean adding a real italic cut to the font request.

   Sized with a clamp scaled off the logo's own clamp (36vw x ~3.7%) so it
   tracks the wordmark width at every viewport. */
.brandline {
  position: absolute;
  left: 34.8%;
  bottom: 5.4%;
  margin: 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(10px, 1.33vw, 16px);
  letter-spacing: 0.02em; line-height: 1;
  color: var(--text-soft);
  white-space: nowrap;
}

.kicker, .eyebrow {
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin: 0 0 18px;
}
.display-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.12; letter-spacing: -0.02em;
  color: #eaf2fb; margin: 0 auto 22px; max-width: 20ch;
  /* Evens the two lines rather than filling the first and orphaning the
     rest — "Not the / bottleneck." split awkwardly without this. */
  text-wrap: balance;
}
.display-title.sm { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.grad {
  background: linear-gradient(100deg, var(--accent) 0%, #6fe3f0 50%, #5aa2d6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lead {
  font-size: clamp(1.04rem, 1.7vw, 1.22rem);
  color: var(--text-soft); max-width: 60ch; margin: 0 auto 34px;
  /* Stops the paragraph ending on a stranded word or two. Ignored by
     browsers that don't support it, which just get the default wrap. */
  text-wrap: pretty;
}
.lead.center { margin-left: auto; margin-right: auto; }
/* The problem statement that sets up the headline. Deliberately stays INSIDE
   the lead paragraph and in the body face: on its own line in the display face
   it mirrored the headline's structure (short pair, second half in a
   contrasting colour) and read as a second tagline competing with the first,
   rather than as the substance behind it. Colour and weight carry the emphasis
   instead. The violet is the deck's, and the only non-cyan accent on the site,
   so the constraint reads as distinct from everything Xterion offers in cyan. */
.lead-open { color: #eaf2fb; font-weight: 600; }
.lead-open-alt { color: var(--accent-alt); font-weight: 600; }

/* ---- Home view ---- */
.home-inner { max-width: 880px; }
.home-logo {
  width: clamp(280px, 36vw, 430px); height: auto; margin: 0; display: block;
  filter: drop-shadow(0 0 50px rgba(0,188,212,0.28));
}

/* ---- Trademark symbol ----
   On the hero lockup only. The header logo is 40px tall, which leaves the
   wordmark a cap height of ~11px and the symbol about 4px to render in — below
   what it can resolve as anything but a blob. Marking the primary lockup is
   the convention, and satisfies notice without repeating on every instance.

   Text rather than baked into the PNG so it scales with the hero's clamp.
   Offsets are measured from the artwork, not guessed — in the 546x148 image
   the wordmark cap band runs y 54..94 (36.5% to 63.5% of height) and the N's
   right edge sits at x 531 (97.25% of width). */
.lockup { position: relative; display: inline-block; line-height: 0; }
.lockup--hero { display: block; width: fit-content; margin: 0 auto 34px; }

.tm {
  position: absolute;
  left: 97.25%;          /* right edge of the N */
  top: 36.5%;            /* cap top of the wordmark */
  line-height: 1;
  font-family: var(--body); font-weight: 500;
  color: #dbe7f3;
  user-select: none; pointer-events: none;
  white-space: nowrap;
}
/* Sized so the glyph lands near 35-40% of the wordmark's cap height, which is
   27% of the logo box. At the hero's 430px max that cap is ~31px, so ~12px of
   glyph — and the TM character renders at roughly half its font-size. */
.lockup--hero .tm { font-size: clamp(15px, 2vw, 26px); margin-left: 5px; }
.triad {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 22px; margin: 0 auto 34px; max-width: 720px;
}
.triad span {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(0.92rem, 1.5vw, 1.06rem); color: #dbe7f3; letter-spacing: -0.005em;
  position: relative;
}
.triad span:not(:last-child)::after {
  content: ''; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px rgba(0,188,212,0.7);
}
@media (max-width: 560px) { .triad span:not(:last-child)::after { display: none; } }

.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 30px; }
.micro {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint); margin: 0;
}
.btn {
  display: inline-block; font-family: var(--body);
  font-size: 1rem; font-weight: 600; padding: 13px 30px;
  border-radius: 8px; border: 1px solid transparent;
  transition: transform 0.18s var(--ease), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary { background: var(--accent); color: #04222a; }
.btn-primary:hover { background: var(--accent-2); color: #04222a; transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0,188,212,0.3); }
/* The border was on --line (#1e2a3a), the hairline used for dividers, which
   sits at 1.32:1 against the background and effectively disappears. A control
   boundary needs 3:1 under WCAG 1.4.11; #4f6a8e gives 3.44:1. With a faint
   fill it reads as a button while staying subordinate to the filled primary. */
.btn-ghost {
  border-color: #4f6a8e; color: var(--text);
  background: rgba(255,255,255,0.03);
}
.btn-ghost:hover {
  border-color: var(--accent); color: var(--accent);
  background: rgba(0,188,212,0.06);
  transform: translateY(-2px);
}

/* ---- Capabilities view ---- */
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px);
  margin-top: 8px; text-align: left;
}
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 2.6vw, 30px);
  transition: transform 0.22s var(--ease), border-color 0.22s ease, box-shadow 0.22s ease;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 1px;
  pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, rgba(0,188,212,0.55), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity 0.22s ease;
}
.card:hover { transform: translateY(-5px); border-color: rgba(0,188,212,0.35); box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 0 40px rgba(0,188,212,0.08); }
.card:hover::before { opacity: 1; }
.card-num { font-family: var(--display); font-size: 0.9rem; font-weight: 700; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 16px; }
.card h3 { font-family: var(--display); font-weight: 600; font-size: 1.18rem; margin: 0 0 10px; color: #eaf2fb; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--text-soft); font-size: 0.97rem; line-height: 1.6; }

/* ---- Platform-family local nav ----
   Section navigation shared by Overview, In Action, Integration and Operating
   Model. Deliberately quieter than the global nav — smaller, tracked, muted —
   so it reads as "parts of this section" rather than a second main nav. */
.local-nav {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 90;
  display: none;                     /* only shown inside the Platform family */
  align-items: center;
  height: var(--local-nav-h);
  border-bottom: 1px solid var(--line-2);
  background: rgba(10, 15, 30, 0.72);
  backdrop-filter: blur(10px);
}
.local-nav-inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 2px clamp(4px, 1.2vw, 12px);
}
/* Shown, and the panel padded to clear it, only on the four family views.
   data-view is stamped on <html> by the router. */
html[data-view="capabilities"] .local-nav,
html[data-view="infrastructure"] .local-nav,
html[data-view="integration"] .local-nav,
html[data-view="in-action"] .local-nav { display: flex; }

html[data-view="capabilities"] .view,
html[data-view="infrastructure"] .view,
html[data-view="integration"] .view,
html[data-view="in-action"] .view {
  padding-top: calc(var(--header-h) + var(--local-nav-h) + 16px);
}
.local-nav a {
  position: relative;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 6px 10px; border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.local-nav a:hover { color: var(--text-soft); background: rgba(255,255,255,0.035); }
.local-nav a[aria-current="page"] {
  color: var(--accent);
  background: rgba(0, 188, 212, 0.09);
}
.local-nav a:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* Hairline separators between items, suppressed at the ends and when wrapped
   onto a new line would leave one dangling. */
.local-nav a + a::before {
  content: ''; position: absolute; left: calc(-1 * clamp(6px, 1.4vw, 14px) / 2);
  top: 50%; transform: translateY(-50%);
  width: 1px; height: 10px; background: var(--line);
}
@media (max-width: 560px) {
  .local-nav-inner { gap: 2px 4px; }
  .local-nav a { font-size: 0.66rem; letter-spacing: 0.1em; padding: 5px 7px; }
  .local-nav a + a::before { display: none; }
}

/* ---- Product view ----
   The screenshot is the section; the copy exists to frame it. Border and radius
   match .card so the frame reads as part of the existing system rather than a
   pasted-on image. Native 1433x877 (ratio 1.634) — width/height attributes plus
   aspect-ratio reserve the box so activating the view causes no layout shift. */
.shot { margin: clamp(22px, 3vw, 32px) auto 0; max-width: 900px; width: 100%; }
.shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1433 / 877;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
/* The inline render is ~63% of native, so the benefit-form table reads as shape
   rather than text. Full size opens in an overlay rather than a new tab: a bare
   image file loses the site frame entirely, which reads as unfinished. */
.shot-zoom { display: block; cursor: zoom-in; }
.shot figcaption {
  margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
}
.shot figcaption a {
  color: var(--text-faint); letter-spacing: 0.14em;
  transition: color 0.2s ease;
}
.shot figcaption a:hover { color: var(--accent); }
@media (max-width: 560px) {
  .shot figcaption { flex-direction: column; gap: 6px; }
}
/* Shorter viewports: pull the image in so the framing copy stays on screen with
   it, rather than letting the panel scroll on a section that is one glance. */
@media (max-height: 900px) { .shot { max-width: 740px; margin-top: 18px; } }
@media (max-height: 780px) { .shot { max-width: 620px; margin-top: 14px; } }

/* ---- Full-size viewer ----
   Keeps the reader inside the site rather than dropping them on a bare image
   file. Sits above the header and footer (z 300 vs 100). body already carries
   overflow:hidden, so no scroll lock is needed. */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(46px, 6vw, 72px) clamp(16px, 4vw, 56px);
  background: rgba(6, 10, 20, 0.93);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.lightbox.is-open { opacity: 1; }
/* Needed because .lightbox sets display:flex, which would otherwise defeat the
   hidden attribute. */
.lightbox[hidden] { display: none; }

.lightbox-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

.lightbox-close {
  position: absolute; top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 1.5rem; line-height: 1; font-family: var(--body);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,188,212,0.07); }
.lightbox-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* ---- Integration view ----
   Three positions relative to the carrier's system of record — upstream,
   parallel, downstream — then the event-driven note. */
.wrap-grid .card { padding: clamp(18px, 2vw, 24px); }
.wrap-grid .card-num { margin-bottom: 10px; font-size: 0.78rem; }
.wrap-grid .card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.wrap-grid .card p { font-size: 0.9rem; line-height: 1.55; }

.event-note {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-family: var(--display); font-weight: 600;
  font-size: 0.92rem; color: var(--text-soft); letter-spacing: -0.005em;
}


/* ---- Operating model view ----
   Four cards in 2x2 (mirrors the overview deck), then a single substrate
   line naming the cloud the platform runs on. The hosting detail is one
   line, not the subject of the view. */
.ops-grid { grid-template-columns: repeat(2, 1fr); }
.ops-grid .card { padding: clamp(18px, 2vw, 24px); }
.ops-grid .card-num { margin-bottom: 12px; font-size: 0.82rem; }
.ops-grid .card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.ops-grid .card p { font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 820px) { .ops-grid { grid-template-columns: 1fr; } }

.substrate {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: 13px clamp(16px, 2vw, 20px);
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,0.015);
  color: var(--text-soft); font-size: 0.87rem; line-height: 1.55;
  text-align: left;
}
.substrate-row { display: flex; align-items: flex-start; gap: 11px; margin: 0; }
.substrate-row + .substrate-row {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2);
}
.substrate strong { color: #eaf2fb; font-weight: 600; }
.substrate-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  margin-top: 7px;
  background: #34d399; box-shadow: 0 0 10px rgba(52,211,153,0.6);
}
/* Hollow ring, not a filled dot: the filled green reads as "live", and this
   one is deliberately not claiming a completed state. */
.substrate-dot--pending {
  background: transparent; box-shadow: none;
  border: 1px solid var(--accent);
}

/* Short viewports: compress the denser views so they stay on one screen. */
@media (max-height: 820px) {
  .ops-grid .card { padding: 15px 18px; }
  .ops-grid .card-num { margin-bottom: 8px; font-size: 0.76rem; }
  .ops-grid .card h3 { font-size: 1rem; margin-bottom: 6px; }
  .ops-grid .card p { font-size: 0.86rem; line-height: 1.45; }
  .substrate { font-size: 0.8rem; padding: 11px 16px; margin-top: 16px; }

  .wrap-grid .card { padding: 15px 18px; }
  .wrap-grid .card h3 { font-size: 1rem; margin-bottom: 6px; }
  .wrap-grid .card p { font-size: 0.86rem; line-height: 1.45; }
  .event-note { font-size: 0.86rem; margin-top: 14px; }
}

/* ---- Contact view ---- */
.contact-link {
  display: inline-block; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--accent);
  padding-bottom: 6px; border-bottom: 1px solid rgba(0,188,212,0.3);
  transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
}
.contact-link:hover { color: var(--accent-2); border-color: var(--accent-2); text-shadow: 0 0 30px rgba(0,188,212,0.45); }
/* Leadership block. Left-aligned inside a centred container: names and roles
   centre well, but a sentence of background reads badly ragged on both sides. */
.leaders {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(26px, 3.5vw, 40px) auto 0;
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--line-2);
  max-width: 760px; text-align: left;
}
.leader-name {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  color: #eaf2fb; letter-spacing: -0.01em;
}
.leader-role {
  font-size: 0.75rem; color: var(--accent);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  margin-top: 3px;
}
.leader-bio {
  margin: 10px 0 0; font-size: 0.87rem; line-height: 1.6;
  color: var(--text-soft); text-wrap: pretty;
}
@media (max-width: 640px) { .leaders { grid-template-columns: 1fr; } }
@media (max-height: 760px) {
  .leaders { margin-top: 20px; padding-top: 18px; }
  .leader-bio { font-size: 0.82rem; line-height: 1.5; margin-top: 8px; }
}

/* ---- Footer ---- */
.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; height: var(--footer-h);
  display: flex; align-items: center;
  background: linear-gradient(to top, rgba(10,15,30,0.85), rgba(10,15,30,0));
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.footer-meta { color: var(--text-faint); font-size: 0.82rem; letter-spacing: 0.04em; }
/* The brand line. Was --text-faint at 0.72rem and hidden below 560px, which
   meant it read as fine print on desktop and did not exist at all on a phone. */
.footer-tag {
  color: var(--text-soft); font-weight: 500;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
}
/* Kept on small screens rather than dropped — tightened instead so it fits
   beside the copyright without wrapping the fixed-height footer. */
@media (max-width: 560px) {
  .footer-tag { font-size: 0.6rem; letter-spacing: 0.09em; }
  .footer-meta { font-size: 0.72rem; }
}

/* ---- Small / short phones: tighten the home view so the CTA buttons
   stay above the fold even on a 667px-tall screen (iPhone SE). ---- */
@media (max-width: 560px) {
  .home-logo { width: 210px; }
  .lockup--hero { margin-bottom: 20px; }
  .kicker { margin-bottom: 12px; }
  .display-title { margin-bottom: 16px; }
  .lead { margin-bottom: 20px; }
  .triad { margin-bottom: 20px; }
  .actions { margin-bottom: 0; }
}

/* Short viewports (iPhone SE height, landscape phones): compress the home
   view harder so the CTA buttons stay visible without scrolling. */
@media (max-height: 720px) {
  .home-logo { width: 168px; }
  .lockup--hero { margin-bottom: 14px; }
  .kicker { font-size: 0.72rem; margin-bottom: 8px; }
  .display-title { font-size: 1.85rem; margin-bottom: 12px; }
  .lead { font-size: 0.92rem; line-height: 1.45; margin-bottom: 14px; }
  .triad { margin-bottom: 14px; }
  .triad span { font-size: 0.86rem; }
}