/* ==========================================================================
   PELLENZO — PLATFORM PAGE SYSTEM
   Shared shell for the standalone platform pages (AIS, Pellic, Paloris,
   Plantorian). These pages are description-only: the platform name, what
   the platform is, and what it does. No navigation and no visuals; the only
   link on the page is the arrow control back to the home screen.

   Light grey over the top half of the page, white over the bottom half,
   black type throughout.
   ========================================================================== */

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

:root {
  --grey: #e4e4e4;
  --white: #ffffff;
  --ink: #000000;
  --ink-soft: rgba(0, 0, 0, 0.66);
  --rule: rgba(0, 0, 0, 0.22);

  --mono: 'Share Tech Mono', 'Barlow Condensed', monospace;
}

/* An explicit background on the root keeps the body background from
   propagating to the canvas, so the 50/50 split below measures against the
   body box — i.e. the true top and bottom halves of the page. */
html {
  background: var(--white);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    var(--grey) 0,
    var(--grey) 50%,
    var(--white) 50%,
    var(--white) 100%
  );
  color: var(--ink);
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ===== BACK TO HOME ===== */
.back-home {
  position: fixed;
  top: 26px;
  left: 26px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.back-home svg {
  width: 19px;
  height: 19px;
  display: block;
}

.back-home:hover,
.back-home:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
  transform: translateX(-2px);
}

.back-home:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .back-home { transition: none; }
  .back-home:hover,
  .back-home:focus-visible { transform: none; }
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 32px 140px;
}

.platform-index {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

h1 {
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: clamp(64px, 13vw, 132px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.platform-definition {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 3.2vw, 27px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}

.platform-description { margin-top: 42px; }

.platform-description p {
  font-size: 17.5px;
  color: var(--ink);
  margin-bottom: 26px;
}

.platform-description p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  main { padding: 88px 22px 96px; }
  .platform-description p { font-size: 17px; }

  .back-home {
    top: 18px;
    left: 18px;
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   PLATFORM HERO — full-bleed dark opening screen
   Each platform page opens on a black screen carrying the platform name at
   display scale, over a live canvas backdrop specific to that platform
   (mesh / strata / pipeline / rotating Earth with targets). The document
   sheet below the fold keeps the original light treatment.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #000308;
  isolation: isolate;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Vignette + floor gradient so display type stays legible over the canvas. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(0, 0, 0, 0) 40%, rgba(0, 3, 8, 0.72) 100%),
    linear-gradient(to bottom, rgba(0, 3, 8, 0) 42%, rgba(0, 3, 8, 0.86) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(22px, 4.6vw, 64px) clamp(64px, 11vh, 132px);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 26px;
  font-family: var(--mono);
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(168, 216, 245, 0.72);
  margin-bottom: clamp(20px, 4vh, 40px);
}

.hero-meta span { display: inline-flex; align-items: center; gap: 10px; }

.hero-meta span + span::before {
  content: '';
  width: 22px;
  height: 1px;
  background: rgba(127, 212, 255, 0.4);
}

/* ===== THE NAME ===== */
.hero-name {
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(58px, 15.5vw, 268px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: #cfeeff;
  text-shadow:
    0 0 18px rgba(96, 196, 255, 0.55),
    0 0 60px rgba(58, 158, 255, 0.42),
    0 0 150px rgba(28, 118, 220, 0.35);
}

/* Three-letter marks get more room and open tracking. */
.hero-name.is-acronym {
  font-size: clamp(96px, 28vw, 420px);
  letter-spacing: 0.005em;
}

.hero-tagline {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 2.2vw, 25px);
  line-height: 1.42;
  letter-spacing: 0.015em;
  color: rgba(219, 240, 252, 0.82);
  max-width: 44ch;
  margin-top: clamp(18px, 3vh, 34px);
  padding-top: clamp(18px, 3vh, 30px);
  border-top: 1px solid rgba(140, 205, 240, 0.28);
}

/* ===== SCROLL CUE ===== */
.hero-cue {
  position: absolute;
  right: clamp(22px, 4.6vw, 64px);
  bottom: clamp(64px, 11vh, 132px);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(168, 216, 245, 0.62);
  text-decoration: none;
}

.hero-cue-rule {
  width: 1px;
  height: 54px;
  background: linear-gradient(to bottom, rgba(127, 212, 255, 0.55), rgba(127, 212, 255, 0));
  animation: cue-drift 2.6s ease-in-out infinite;
}

.hero-cue:hover, .hero-cue:focus-visible { color: #cfeeff; }

@keyframes cue-drift {
  0%, 100% { transform: scaleY(1); opacity: 0.9; }
  50% { transform: scaleY(0.62); opacity: 0.45; }
}

/* ===== BACK CONTROL OVER THE DARK HERO ===== */
.back-home {
  border-color: rgba(160, 214, 244, 0.42);
  background: rgba(6, 16, 28, 0.5);
  color: #d5efff;
}

.back-home:hover,
.back-home:focus-visible {
  background: #cfeeff;
  border-color: #cfeeff;
  color: #001018;
}

.back-home:focus-visible { outline-color: #cfeeff; }

/* Past the fold the page is light again, so the control inverts back. */
.back-home.on-light {
  border-color: var(--rule);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
}

.back-home.on-light:hover,
.back-home.on-light:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.back-home.on-light:focus-visible { outline-color: var(--ink); }

/* ===== DOCUMENT SHEET BELOW THE FOLD ===== */
main.platform-doc {
  max-width: none;
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, var(--grey) 0, var(--grey) 34%, var(--white) 72%, var(--white) 100%);
}

.doc-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(84px, 13vh, 132px) 32px 140px;
}

.doc-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.doc-inner .platform-definition {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(21px, 3.4vw, 30px);
}

@media (max-width: 640px) {
  .doc-inner { padding: 72px 22px 96px; }
  .hero-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cue-rule { animation: none; }
}

/* The hero and the document sheet each paint their own ground now, so the
   body no longer needs the 50/50 split it used when the page was type only. */
body { background: var(--white); }