/* ─────────────────────────────────────────────────────────────────
   AETHERA · CELESTIAL ATLAS — Landing Redesign
   Inspired by 17th-c. Cellarius star atlases × editorial gazettes.
   Scoped to #landing-screen so it never bleeds into the app.
   ───────────────────────────────────────────────────────────────── */

#landing-screen {
  /* Tokens — palette: ink cosmos / antiqued gold / starlight ivory */
  --ink:       #0b0815;
  --ink-2:     #140e26;
  --ink-3:     #1d1535;
  --plum:      #2a1a3e;
  --paper:     #f4ead6;
  --paper-2:   #ebdfc4;
  --paper-3:   #d9c89d;
  --gilt:      #c9a45c;     /* tarnished gold leaf */
  --gilt-hi:   #e8c97a;
  --gilt-lo:   #8a6b2e;
  --ember:     #b3431f;     /* deep illuminated-manuscript red */
  --ember-2:   #d6552a;
  --quill:     #2a2230;
  --rule:      rgba(201,164,92,.32);
  --rule-strong: rgba(201,164,92,.6);

  /* Type scale */
  --display: 'Italiana', 'Cormorant Garamond', serif;
  --serif:   'Cormorant Garamond', 'EB Garamond', serif;
  --mono:    'DM Mono', 'Courier New', ui-monospace, monospace;

  /* layout */
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  /* JS may set display:flex inline (showLandingScreen). Either way we lay out as a column. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background:
    radial-gradient(1200px 700px at 80% -10%, #1a0e2e 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 30%, #221538 0%, transparent 55%),
    linear-gradient(180deg, #07050d 0%, #0b0815 35%, #0e0a1e 100%);
  color: var(--paper);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* Web fonts — load only on the redesigned landing */
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Mono:wght@300;400;500&display=swap');

#landing-screen .landing-inner {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Film-grain + paper noise overlay ─────────────────────────── */
#landing-screen::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85   0 0 0 0 0.78  0 0 0 0 0.6  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* gentle vignette */
#landing-screen::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}

#landing-screen > * { position: relative; z-index: 3; }
#landing-screen .landing-inner > * { position: relative; z-index: 3; }

/* hide v1 hero image entirely (we render our own composition) */
#landing-screen .landing-hero-img { display: none !important; }
/* hide v1 default text — we replace with our own markup */
#landing-screen > .landing-inner > .landing-title,
#landing-screen > .landing-inner > .landing-subtitle,
#landing-screen > .landing-inner > .landing-tagline { display: none; }

/* ════════════════════════════════════════════════════════════════
   MASTHEAD
   ═══════════════════════════════════════════════════════════════ */
.aeth-masthead {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 8px;
  padding: 28px clamp(20px, 6vw, 80px) 0;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .62rem;
  color: var(--gilt);
}
@media (min-width: 720px) {
  .aeth-masthead {
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    font-size: .68rem;
  }
}
.aeth-masthead .meta-l, .aeth-masthead .meta-r { white-space: nowrap; opacity: .85; }
@media (min-width: 720px) { .aeth-masthead .meta-r { text-align: right; justify-self: end; } .aeth-masthead .meta-l { justify-self: start; } }
.aeth-masthead .meta-c { display:flex; align-items:center; gap:10px; }
.aeth-masthead .meta-c .star { color: var(--gilt-hi); font-size: 1rem; line-height: 0; }
.aeth-masthead .meta-c .vol { font-size: .6rem; opacity: .7; }

/* hairline under masthead */
.aeth-rule {
  height: 1px;
  margin: 18px clamp(20px, 6vw, 80px) 0;
  background: linear-gradient(90deg, transparent, var(--rule-strong) 8%, var(--rule-strong) 92%, transparent);
  position: relative;
}
.aeth-rule::before, .aeth-rule::after {
  content: "✦";
  position: absolute; top: -.6em;
  color: var(--gilt-hi);
  font-size: .9rem;
}
.aeth-rule::before { left: clamp(20px, 6vw, 80px); transform: translateX(-50%); }
.aeth-rule::after  { right: clamp(20px, 6vw, 80px); transform: translateX(50%); }

/* ════════════════════════════════════════════════════════════════
   HERO — Folio I
   ═══════════════════════════════════════════════════════════════ */
.aeth-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: clamp(40px, 8vw, 96px) clamp(20px, 6vw, 80px) 60px;
  position: relative;
}
@media (min-width: 900px) {
  .aeth-hero { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
}

.aeth-hero-figure {
  position: relative;
  order: 1;
  aspect-ratio: 3 / 4;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  isolation: isolate;
}
@media (min-width: 900px) {
  .aeth-hero-figure { order: 2; max-width: 560px; margin: 0; justify-self: end; }
}

.aeth-hero-figure .frame {
  position: absolute; inset: 0;
  border: 1px solid var(--rule-strong);
  pointer-events: none;
}
.aeth-hero-figure .frame::before,
.aeth-hero-figure .frame::after {
  content: ""; position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gilt);
}
.aeth-hero-figure .frame::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
.aeth-hero-figure .frame::after  { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }

.aeth-hero-figure .portrait {
  position: absolute; inset: 14px;
  background-image: url("/v1/aethera/assets/hero-oracle");
  background-size: cover;
  background-position: center 22%;
  filter: contrast(1.05) saturate(.95);
  box-shadow:
    inset 0 0 0 1px rgba(201,164,92,.18),
    0 30px 60px -20px rgba(0,0,0,.7),
    0 0 100px -10px rgba(201,164,92,.12);
}
.aeth-hero-figure .portrait::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 30% 10%, transparent 50%, rgba(11,8,21,.55) 100%),
    linear-gradient(180deg, transparent 60%, rgba(11,8,21,.65) 100%);
  pointer-events: none;
}

/* gilded zodiac wheel rotating slowly behind hero */
.aeth-hero-figure .wheel {
  position: absolute;
  width: 130%; height: 130%;
  left: -15%; top: -15%;
  z-index: -1;
  opacity: .35;
  animation: aeth-spin 240s linear infinite;
  background-image: url("/v1/aethera/assets/atlas-celestial");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: hue-rotate(-5deg) saturate(.7) brightness(.95);
  mix-blend-mode: screen;
}

/* live transit overlay — planetary markers (NOT rotating, anchored to sky) */
.aeth-hero-figure .transit-overlay {
  position: absolute;
  width: 130%; height: 130%;
  left: -15%; top: -15%;
  z-index: 0;             /* above wheel, below frame/portrait */
  pointer-events: none;
  overflow: visible;
  animation: aeth-fade 2s ease 1.4s both;
}
.transit-overlay .ring {
  fill: none;
  stroke: rgba(232,201,122,.35);
  stroke-width: .35;
  stroke-dasharray: 1 2.5;
}
.transit-overlay .planet {
  fill: var(--gilt-hi);
  stroke: var(--ink);
  stroke-width: .5;
  filter: drop-shadow(0 0 4px rgba(232,201,122,.7));
}
.transit-overlay .planet.retro { fill: var(--ember-2); }
.transit-overlay .glyph {
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.transit-overlay .label {
  font-family: 'DM Mono', monospace;
  font-size: 4.2px;
  letter-spacing: .15em;
  fill: var(--gilt);
  text-anchor: middle;
  text-transform: uppercase;
  opacity: .85;
}
@keyframes aeth-spin {
  to { transform: rotate(360deg); }
}

/* hero text */
.aeth-hero-text { order: 2; text-align: center; }
@media (min-width: 900px) {
  .aeth-hero-text { order: 1; text-align: left; }
}

.aeth-folio-tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.aeth-folio-tag::before, .aeth-folio-tag::after {
  content: ""; width: 28px; height: 1px; background: var(--gilt);
}
@media (min-width: 900px) { .aeth-folio-tag::after { display: none; } }

.aeth-wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(4.5rem, 14vw, 11rem);
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0;
  position: relative;
}
.aeth-wordmark .em {
  font-style: italic;
  color: var(--gilt-hi);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  position: relative;
  display: inline-block;
}
.aeth-wordmark .ampersand {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gilt);
  font-size: .6em;
  vertical-align: -0.05em;
  margin: 0 .02em;
}

.aeth-deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--paper-2);
  line-height: 1.5;
  margin: 28px 0 0;
  max-width: 36ch;
}
@media (max-width: 899px) { .aeth-deck { margin-left: auto; margin-right: auto; } }

.aeth-dek-rule {
  width: 80px; height: 1px;
  background: var(--gilt);
  margin: 24px 0;
}
@media (max-width: 899px) { .aeth-dek-rule { margin-left: auto; margin-right: auto; } }

.aeth-lede {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(244,234,214,.78);
  max-width: 38ch;
}
@media (max-width: 899px) { .aeth-lede { margin-left: auto; margin-right: auto; } }

/* dial of attestation chips under hero */
.aeth-attest {
  display: flex; flex-wrap: wrap; gap: 28px;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--gilt);
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 899px) { .aeth-attest { justify-content: center; } }
.aeth-attest span { display: inline-flex; align-items: center; gap: 8px; }
.aeth-attest .num {
  font-family: var(--display);
  font-size: 1.6rem; line-height: 1;
  color: var(--paper);
  letter-spacing: 0;
  text-transform: none;
}

/* ════════════════════════════════════════════════════════════════
   FORM CARTOUCHE — the inquiry
   ═══════════════════════════════════════════════════════════════ */
.aeth-cartouche-wrap {
  padding: clamp(24px, 5vw, 64px) clamp(20px, 6vw, 80px);
  display: flex; justify-content: center;
}
.aeth-cartouche {
  width: 100%; max-width: 720px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,164,92,.08), transparent 60%),
    linear-gradient(180deg, rgba(244,234,214,.04), rgba(244,234,214,.02));
  border: 1px solid var(--rule-strong);
  padding: clamp(28px, 4vw, 52px);
  position: relative;
  text-align: center;
  backdrop-filter: blur(2px);
}
.aeth-cartouche::before, .aeth-cartouche::after {
  content: "✶"; position: absolute;
  font-size: 1rem; color: var(--gilt-hi);
  background: #0b0815; padding: 0 12px;
}
.aeth-cartouche::before { top: -.7em; left: 50%; transform: translateX(-50%); }
.aeth-cartouche::after  { bottom: -.7em; left: 50%; transform: translateX(-50%); }

.aeth-cartouche .small-caps {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .35em; font-size: .68rem;
  color: var(--gilt); margin-bottom: 8px;
}
.aeth-cartouche .heading {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  color: var(--paper); margin: 0 0 24px;
  line-height: 1.05;
}
.aeth-cartouche .heading em {
  font-family: 'Cormorant Garamond', serif;
  color: var(--gilt-hi); font-style: italic;
}

/* form fields */
#landing-screen #landing-form { max-width: none !important; margin: 0 !important; text-align: left; }

#landing-screen #landing-form .form-group { margin-bottom: 18px !important; }
#landing-screen #landing-form .form-group label,
#landing-screen #landing-form label[data-i18n] {
  display: block !important;
  font-family: var(--mono) !important;
  font-size: .65rem !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--gilt) !important;
  margin-bottom: 8px !important;
}
#landing-screen #landing-form input[type="text"],
#landing-screen #landing-form input[type="date"],
#landing-screen #landing-form input {
  width: 100% !important;
  padding: 14px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  border-radius: 0 !important;
  color: var(--paper) !important;
  font-family: var(--serif) !important;
  font-size: 1.2rem !important;
  font-style: italic !important;
  outline: none !important;
  transition: border-color .25s, color .25s !important;
}
#landing-screen #landing-form input:focus {
  border-bottom-color: var(--gilt-hi) !important;
  color: #fff !important;
}
#landing-screen #landing-form input::placeholder {
  color: rgba(244,234,214,.35) !important;
  font-style: italic !important;
}
#landing-screen #landing-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.7) sepia(1) saturate(2) hue-rotate(5deg);
  cursor: pointer;
}

/* focus area */
#landing-screen .focus-options {
  display: flex !important; flex-wrap: wrap !important;
  justify-content: center !important; gap: 8px !important;
  margin-top: 8px;
}
#landing-screen .focus-btn {
  font-family: var(--mono) !important;
  font-size: .7rem !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  padding: 9px 16px !important;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  color: var(--paper-2) !important;
  cursor: pointer;
  transition: all .25s ease;
}
#landing-screen .focus-btn:hover {
  border-color: var(--gilt-hi) !important;
  color: var(--gilt-hi) !important;
}
#landing-screen .focus-btn.selected,
#landing-screen .focus-btn[data-focus][selected] {
  background: var(--paper) !important;
  border-color: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 1px var(--gilt) inset, 0 0 24px rgba(232,201,122,.15) !important;
}
#landing-screen .focus-section p,
#landing-screen #landing-form > div > p[data-i18n="focus_q"] {
  font-family: var(--mono) !important;
  font-size: .65rem !important; letter-spacing: .35em !important;
  text-transform: uppercase !important; color: var(--gilt) !important;
  margin-bottom: 12px !important;
}

/* CTA */
#landing-screen .landing-cta,
#landing-screen #landing-cta-btn {
  display: block !important;
  width: 100% !important;
  margin-top: 28px !important;
  padding: 20px 24px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: 1.3rem !important;
  letter-spacing: .04em !important;
  font-weight: 400 !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  position: relative;
  transition: all .35s ease !important;
  box-shadow: 0 0 0 1px var(--gilt-hi) inset, 0 18px 40px -10px rgba(0,0,0,.5);
}
#landing-screen .landing-cta::before {
  content: "✦"; margin-right: 14px; color: var(--ember); font-size: .9em;
}
#landing-screen .landing-cta::after {
  content: "✦"; margin-left: 14px; color: var(--ember); font-size: .9em;
}
#landing-screen .landing-cta:hover:not(:disabled) {
  background: var(--gilt-hi) !important;
  color: var(--ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--paper) inset, 0 22px 50px -10px rgba(232,201,122,.45);
}
#landing-screen .landing-cta:disabled {
  opacity: .35 !important; cursor: not-allowed !important;
  transform: none !important;
}

#landing-screen .landing-sub-cta {
  font-family: var(--mono); font-size: .65rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gilt); margin-top: 14px;
  text-align: center;
}

/* sign-in line + lang bar */
#landing-screen #landingLangBar {
  margin: 24px 0 6px !important;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px;
  font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
}
#landing-screen #landingLangBar .lang-btn {
  background: none !important;
  border: 1px solid transparent !important;
  color: var(--gilt) !important;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  font-size: .62rem !important;
  letter-spacing: .2em !important;
}
#landing-screen #landingLangBar .lang-btn:hover { color: var(--gilt-hi) !important; }
#landing-screen #landingLangBar .lang-btn.active {
  color: var(--paper) !important;
  border-color: var(--rule-strong) !important;
  background: transparent !important;
}

.aeth-signin {
  text-align: center;
  margin-top: 22px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--paper-2);
  font-size: 1rem;
}
.aeth-signin a {
  color: var(--gilt-hi); text-decoration: none;
  border-bottom: 1px solid var(--gilt);
  cursor: pointer;
  font-style: italic;
}
.aeth-signin a:hover { color: var(--paper); border-bottom-color: var(--paper); }

/* ════════════════════════════════════════════════════════════════
   FOLIO HEADERS (numbered editorial sections)
   ═══════════════════════════════════════════════════════════════ */
.aeth-folio {
  padding: clamp(60px, 10vw, 130px) clamp(20px, 6vw, 80px);
  position: relative;
}
.aeth-folio + .aeth-folio { border-top: 1px solid var(--rule); }

.aeth-folio-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 28px;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.aeth-folio-num {
  font-family: var(--display);
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: .85;
  color: var(--gilt);
  letter-spacing: .02em;
}
.aeth-folio-title-block { padding-bottom: 14px; }
.aeth-folio-kicker {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: 10px;
}
.aeth-folio-title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  color: var(--paper);
  margin: 0;
}
.aeth-folio-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gilt-hi);
}

/* ════════════════════════════════════════════════════════════════
   THE COMPARISON (Other apps vs. Aethera)
   ═══════════════════════════════════════════════════════════════ */
.aeth-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 800px) {
  .aeth-compare { grid-template-columns: 1fr 1fr; gap: 0; }
  .aeth-compare > div:first-child { border-right: 1px solid var(--rule); padding-right: 40px; }
  .aeth-compare > div:last-child { padding-left: 40px; }
}
.aeth-compare h4 {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .35em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.aeth-compare .cold h4 { color: rgba(244,234,214,.45); }
.aeth-compare .hot  h4 { color: var(--ember-2); }
.aeth-compare blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--paper);
}
.aeth-compare .cold blockquote { color: rgba(244,234,214,.45); }
.aeth-compare .cold blockquote::before { content: "“"; }
.aeth-compare .cold blockquote::after  { content: "”"; }
.aeth-compare .hot blockquote {
  position: relative;
  padding-left: 0;
}
.aeth-compare .hot blockquote .drop {
  font-family: var(--display);
  float: left;
  font-size: 4.6em;
  line-height: .8;
  margin: .08em .12em -.05em 0;
  color: var(--gilt-hi);
}

/* ════════════════════════════════════════════════════════════════
   THE FACULTIES — feature grid
   ═══════════════════════════════════════════════════════════════ */
.aeth-faculties {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px)  { .aeth-faculties { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .aeth-faculties { grid-template-columns: repeat(4, 1fr); } }

.aeth-fac {
  padding: 36px 28px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background .4s ease;
}
@media (min-width: 700px) {
  .aeth-fac:nth-child(2n+1) { border-right: 1px solid var(--rule); }
}
@media (min-width: 1100px) {
  .aeth-fac { border-right: 1px solid var(--rule); }
  .aeth-fac:nth-child(4n) { border-right: 0; }
  .aeth-fac:nth-child(2n+1) { border-right: 1px solid var(--rule); }
}
.aeth-fac:hover { background: rgba(201,164,92,.04); }
.aeth-fac .roman {
  font-family: var(--mono);
  font-size: .65rem; letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: 18px;
}
.aeth-fac .glyph {
  font-family: var(--display);
  font-size: 2.8rem;
  color: var(--gilt-hi);
  line-height: 1;
  margin-bottom: 16px;
}
/* illuminated miniature replacing the unicode glyph */
.aeth-fac .fac-illum {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin: 4px 0 18px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)) sepia(.05);
  transition: transform .6s cubic-bezier(.16,.84,.32,1);
}
.aeth-fac:hover .fac-illum {
  transform: rotate(-3deg) scale(1.05);
}
@media (max-width: 699px) {
  .aeth-fac .fac-illum { width: 96px; height: 96px; margin: 0 auto 14px; }
  .aeth-fac { text-align: center; }
}
.aeth-fac h3 {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--paper);
  margin: 0 0 12px;
  font-weight: 400;
}
.aeth-fac p {
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.55;
  color: rgba(244,234,214,.7);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   NINE SYSTEMS — orbiting wheel
   ═══════════════════════════════════════════════════════════════ */
.aeth-systems-wrap { position: relative; }

.aeth-systems-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 8px;
}
@media (min-width: 720px) {
  .aeth-systems-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .aeth-systems-grid .sys:nth-child(odd) { border-right: 1px solid var(--rule); }
}
.aeth-systems-grid .sys {
  display: grid;
  grid-template-columns: 72px 56px 1fr;
  gap: 18px;
  padding: 28px 0 28px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.aeth-systems-grid .sys .sys-sigil {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-top: -4px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
@media (max-width: 719px) {
  .aeth-systems-grid .sys { grid-template-columns: 56px 40px 1fr; gap: 14px; }
  .aeth-systems-grid .sys .sys-sigil { width: 56px; height: 56px; }
}
@media (min-width: 720px) {
  .aeth-systems-grid .sys { padding: 32px 36px; }
  .aeth-systems-grid .sys:nth-child(odd) { padding-left: 0; }
  .aeth-systems-grid .sys:nth-child(even) { padding-right: 0; }
}
.aeth-systems-grid .sys .roman {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--gilt);
  line-height: 1;
  border-right: 1px solid var(--rule);
  padding-right: 22px;
}
.aeth-systems-grid .sys h4 {
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--paper);
  margin: -2px 0 8px;
  font-weight: 400;
}
.aeth-systems-grid .sys p {
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(244,234,214,.65);
  margin: 0;
}
.aeth-systems-grid .sys .src {
  display: inline-block;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-top: 10px;
}

/* ════════════════════════════════════════════════════════════════
   THE PROCESS — three numbered steps
   ═══════════════════════════════════════════════════════════════ */
.aeth-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 800px) {
  .aeth-process { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}
.aeth-step {
  position: relative;
  padding-top: 28px;
}
.aeth-step::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 60px; height: 1px;
  background: var(--gilt);
}
.aeth-step .num {
  font-family: var(--display);
  font-size: 5rem;
  line-height: .85;
  color: var(--gilt-hi);
  margin-bottom: 14px;
}
.aeth-step h4 {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--paper);
  margin: 0 0 8px;
  font-weight: 400;
}
.aeth-step p {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(244,234,214,.7);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   PULL QUOTE
   ═══════════════════════════════════════════════════════════════ */
.aeth-pullquote {
  text-align: center;
  padding: clamp(60px, 12vw, 140px) clamp(20px, 8vw, 120px);
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(180deg, rgba(11,8,21,.55), rgba(11,8,21,.85)),
    url("/v1/aethera/assets/panorama") center / cover no-repeat,
    radial-gradient(ellipse at center, rgba(201,164,92,.06) 0%, transparent 60%);
  isolation: isolate;
}
.aeth-pullquote::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(11,8,21,.4) 80%);
  pointer-events: none;
  z-index: -1;
}
.aeth-pullquote .moon {
  width: 84px; height: 84px;
  margin: 0 auto 28px;
  background-image: url("/v1/aethera/assets/ornament-moon");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .9;
}
.aeth-pullquote q {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  line-height: 1.35;
  color: var(--paper);
  max-width: 22ch;
  margin: 0 auto;
  quotes: "\201C" "\201D";
}
.aeth-pullquote q::before, .aeth-pullquote q::after {
  color: var(--gilt-hi);
  font-size: 1.4em;
  vertical-align: -.05em;
}
.aeth-pullquote .attrib {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-top: 28px;
}

/* ════════════════════════════════════════════════════════════════
   FINAL CALL — colophon
   ═══════════════════════════════════════════════════════════════ */
.aeth-colophon {
  text-align: center;
  padding: clamp(60px, 10vw, 140px) clamp(20px, 6vw, 80px) 64px;
  position: relative;
}
.aeth-colophon .sun {
  width: 110px; height: 110px;
  margin: 0 auto 24px;
  background-image: url("/v1/aethera/assets/ornament-sun");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(.95);
}
.aeth-colophon h2 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1;
  color: var(--paper);
  margin: 0 0 18px;
  font-weight: 400;
}
.aeth-colophon h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gilt-hi);
}
.aeth-colophon p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(244,234,214,.75);
  max-width: 36ch;
  margin: 0 auto 36px;
  line-height: 1.5;
}
#landing-screen .aeth-colophon .landing-cta {
  display: inline-block !important;
  width: auto !important;
  min-width: 280px;
  padding: 18px 56px !important;
  margin-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.aeth-foot {
  padding: 32px clamp(20px, 6vw, 80px) 56px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gilt);
  text-align: center;
}
@media (min-width: 700px) {
  .aeth-foot { grid-template-columns: 1fr auto 1fr; text-align: left; }
  .aeth-foot .center { text-align: center; }
  .aeth-foot .right { text-align: right; }
}
.aeth-foot a { color: var(--paper-2); text-decoration: none; border-bottom: 1px dotted var(--rule); }
.aeth-foot a:hover { color: var(--gilt-hi); }

/* ════════════════════════════════════════════════════════════════
   REVEAL ANIMATIONS — staggered on load, single orchestrated arrival
   ═══════════════════════════════════════════════════════════════ */
@keyframes aeth-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aeth-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes aeth-rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.aeth-masthead    { animation: aeth-fade 1.2s ease both; animation-delay: .1s; }
.aeth-rule        { animation: aeth-rule-draw 1.4s cubic-bezier(.7,.15,.2,1) both; animation-delay: .35s; transform-origin: left; }
.aeth-folio-tag   { animation: aeth-rise .9s ease both; animation-delay: .55s; }
.aeth-wordmark    { animation: aeth-rise 1.2s cubic-bezier(.16,.84,.32,1) both; animation-delay: .7s; }
.aeth-deck        { animation: aeth-rise 1s ease both; animation-delay: 1.05s; }
.aeth-dek-rule    { animation: aeth-rule-draw 1s ease both; animation-delay: 1.25s; transform-origin: left; }
.aeth-lede        { animation: aeth-rise 1s ease both; animation-delay: 1.4s; }
.aeth-attest      { animation: aeth-rise 1s ease both; animation-delay: 1.6s; }
.aeth-hero-figure { animation: aeth-fade 1.6s ease both; animation-delay: .9s; }

@media (prefers-reduced-motion: reduce) {
  .aeth-masthead, .aeth-rule, .aeth-folio-tag, .aeth-wordmark, .aeth-deck,
  .aeth-dek-rule, .aeth-lede, .aeth-attest, .aeth-hero-figure {
    animation: none !important;
  }
  .aeth-hero-figure .wheel { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   HIDE LEGACY landing markers we replaced
   ═══════════════════════════════════════════════════════════════ */
#landing-screen .proof-cards,
#landing-screen .landing-section,
#landing-screen > .landing-inner > div[style*="margin-top:12px"] /* sign-in legacy */
{ display: none !important; }