/* ============================================================
   ALLEONIX — premium holding page
   Palette anchored on the logo colour (#1196bd)
   ============================================================ */

:root {
  --bg: #04070a;
  --accent: #1196bd;        /* brand teal — logo colour */
  --accent-light: #62b8d6;  /* lighter teal for labels   */
  --ink: #f2f9f6;
  --scan: #e24a47;          /* read-head accent (crimson) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  /* Gradient stays pinned to the viewport while content scrolls */
  background: radial-gradient(125% 125% at 64% 38%, #0c1722 0%, #070c12 52%, #04070a 100%) #04070a;
  font-family: 'JetBrains Mono', monospace;
  color: #eef7f4;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Stage ---------- */
.stage {
  position: relative;
}

/* Canvas + ambient layers are pinned to the viewport (fixed backdrop) */
.stage__canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Faint coordinate grid */
.stage__grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(70,160,195,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,160,195,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 80%);
}

/* Single light source behind the helix */
.stage__glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(closest-side at 66% 50%, rgba(17,150,189,0.12), transparent 72%);
}

/* Vignette for depth */
.stage__vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 360px 60px rgba(0,0,0,0.75);
  background: radial-gradient(130% 130% at 50% 50%, transparent 52%, rgba(2,5,8,0.7) 100%);
}

/* Film grain — keeps the picture from feeling sterile */
.stage__grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Content layer ---------- */
.content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 4vw, 56px);
  pointer-events: auto;
}

/* Top / bottom corner bars */
.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 16px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.bar--top    { color: #8fb6ac; }
.bar--bottom { color: #79a299; letter-spacing: 0.28em; }

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bar__meta { opacity: 0.7; }
.bar--bottom .bar__meta { opacity: 0.65; }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.bar--bottom .dot { width: 5px; height: 5px; box-shadow: 0 0 8px var(--accent); }

/* Logo — 3× the original mark size */
.logo {
  height: clamp(45px, 5.7vw, 69px);
  width: auto;
  display: block;
}

/* ---------- Hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  max-width: 620px;
}

.hero__title-wrap { overflow: hidden; }

.hero__title {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 200;
  font-size: clamp(25px, 7.2vw, 104px);
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-shadow: 0 0 60px rgba(17,150,189,0.18);
  white-space: nowrap;
}

.hero__rule {
  width: 76px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.hero__eyebrow {
  margin: 0;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-light);
}

.hero__taglines {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 10px;
}

.hero__lead {
  margin: 0;
  font-weight: 300;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.02em;
  color: #dceee8;
}

/* Second tagline — slightly larger, brighter, heavier for readability */
.hero__sub {
  margin: 0;
  font-weight: 400;
  font-size: clamp(13px, 1.35vw, 16px);
  letter-spacing: 0.02em;
  color: #a9c4bf;
}

/* Entrance elements start hidden; script.js fades them in */
.enter { will-change: opacity, transform; }

/* ---------- Short / landscape screens ----------
   Compact the layout so it fits the small height; if it still
   overflows, the page now scrolls instead of clipping. */
@media (max-height: 560px) {
  .content { gap: 18px; padding: 20px clamp(20px, 4vw, 40px); }
  .hero { gap: 16px; }
  .logo { height: clamp(34px, 7vh, 46px); }
  .hero__title { font-size: clamp(24px, 6vw, 72px); }
  .hero__taglines { margin-top: 2px; }
}

@media (max-height: 380px) {
  .content { gap: 12px; padding: 14px 20px; }
  .hero { gap: 10px; }
  .logo { height: 32px; }
}