/* Header and first screen editorial serif layout + responsive scaling.
   One design pixel is var(--u): on a 2000×1116 viewport the screen matches the design 1:1,
   on other screens it scales proportionally as a whole. Load after style.css, hero-responsive.css, pixel-scene.css. */
:root {
  --u: min(calc(100vw / 2000), calc(100vh / 1116));
  --hx-ink: 12, 16, 46;
  --hx-curve: cubic-bezier(.22, 1, .36, 1);
  --hx-serif: 'Old Standard TT', Georgia, 'Times New Roman', serif;
}
@supports (height: 100svh) { :root { --u: min(calc(100vw / 2000), calc(100svh / 1116)); } }

/* Clean minimal header: left brand + right dashboard link */
.header {
  height: calc(var(--u) * 114);
  padding: 0 calc(var(--u) * 90) 0 calc(var(--u) * 84);
  gap: 0;
  font-family: Inter, Manrope, sans-serif;
  animation: none;
}
.header .logo {
  gap: calc(var(--u) * 11);
  font-size: calc(var(--u) * 23);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
}
.spark { display: block; flex: none; fill: currentColor; }
.logo-spark { width: calc(var(--u) * 21); height: calc(var(--u) * 23); }
.desktop-nav { display: none; }
.header-actions { margin-left: auto; }
.login {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: calc(var(--u) * 20);
  font-weight: 400;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .93);
  line-height: 1;
}
.arrow { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.login .arrow { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }

/* First screen */
.hero { height: 100vh; height: 100svh; min-height: 0; max-height: none; background: #1d2458; font-family: Inter, Manrope, sans-serif; }
.hero-art {
  background:
    radial-gradient(ellipse 36% 24% at 41% 52%, rgba(255, 184, 128, .62) 0%, rgba(235, 124, 132, .25) 52%, transparent 100%),
    linear-gradient(180deg, #132650 0%, #243c72 16%, #4c518e 31%, #8e649c 45%, #da7f82 57%, #f8ab82 63.55%, #4b3968 63.7%, #2b2858 75%, #18214e 88%, #101940 100%);
}
.hero-shade {
  background:
    radial-gradient(ellipse 26% 28% at 22% 48%, rgba(var(--hx-ink), .22) 0%, rgba(var(--hx-ink), .09) 56%, rgba(var(--hx-ink), 0) 100%),
    linear-gradient(180deg, rgba(var(--hx-ink), .10) 0%, rgba(var(--hx-ink), 0) 18%);
}
.hx-inner { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hx-copy {
  position: absolute;
  left: calc(var(--u) * 212);
  top: calc(50% - var(--u) * 206);
  pointer-events: auto;
}
.hero .hx-title {
  margin: 0;
  font-family: var(--hx-serif);
  font-size: calc(var(--u) * 134);
  line-height: calc(var(--u) * 107);
  font-weight: 400;
  letter-spacing: -.028em;
  color: #fff;
  -webkit-text-stroke: calc(var(--u) * .65) #fff;
  text-wrap: nowrap;
}
.hero .hx-title span {
  color: #fff;
}
.hx-sub {
  margin: calc(var(--u) * 28) 0 0;
  font-family: Inter, Manrope, sans-serif;
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 38);
  font-weight: 400;
  letter-spacing: -.012em;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}
.hx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 9);
  height: calc(var(--u) * 60);
  margin-top: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 36);
  border-radius: 999px;
  background: #fff;
  color: #0c1024;
  font-family: Inter, Manrope, sans-serif;
  font-size: calc(var(--u) * 21);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  transition: transform .5s var(--hx-curve), background-color .3s var(--hx-curve), box-shadow .3s var(--hx-curve);
}
.hx-button .arrow { width: calc(var(--u) * 17); height: calc(var(--u) * 17); stroke-width: 2.1; }
.hx-button:hover { transform: translateY(-2px); background: #f5f3ff; box-shadow: 0 10px 28px rgba(10, 14, 45, .22); }
.hx-button:active { transform: scale(.98); }

/* Harmonize editorial serif display headings down the page */
.intro h2, .statement h2, .steps h2, .faq h2, .final-cta h2 {
  font-family: var(--hx-serif);
  font-weight: 400;
  letter-spacing: -.024em;
  line-height: 1.02;
}

/* Living background (hero-motion.js): WebGL2 canvas shown immediately once baked & drawn. */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0;
}
.hero-canvas.is-on { opacity: 1; }

/* Debug view of the bare animated background (hero-motion.js, ?bare). */
.motion-bare .header, .motion-bare .hx-inner, .motion-bare .hero-shade { display: none; }
.motion-frozen .hx-appear { animation: none; }

/* Hero appear: smooth staggered rise from background. */
.hx-line { display: block; }
.hx-appear {
  animation: hx-rise .8s cubic-bezier(.16, 1, .3, 1) both, hx-fade .6s cubic-bezier(.33, 1, .68, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 140ms);
}
@keyframes hx-rise { from { transform: translateY(6px); filter: blur(2px); } }
@keyframes hx-fade { from { opacity: 0; } }

/* Phones and narrow windows: clean editorial typography low over the sea. */
@media (max-width: 800px), (orientation: portrait) {
  :root { --u: calc(100vw / 860); }
  .login { display: none; }
  .header { height: 80px; padding: 0 6%; }
  .header .logo { font-size: 19px; gap: 9px; }
  .logo-spark { width: 18px; height: 20px; }
  .hero-art { background-position: 64% 50%; }
  .hero-shade {
    background:
      linear-gradient(0deg, rgba(var(--hx-ink), .72) 0%, rgba(var(--hx-ink), .42) 36%, rgba(var(--hx-ink), 0) 64%),
      linear-gradient(180deg, rgba(var(--hx-ink), .24) 0%, rgba(var(--hx-ink), 0) 18%);
  }
  .hx-copy { left: 7%; right: 7%; top: auto; bottom: calc(var(--u) * 150); }
  .hero .hx-title { font-size: calc(var(--u) * 124); line-height: calc(var(--u) * 112); text-wrap: balance; }
  .hx-sub { white-space: normal; margin-top: calc(var(--u) * 30); font-size: calc(var(--u) * 36); line-height: calc(var(--u) * 48); }
  .hx-button { height: calc(var(--u) * 98); padding: 0 calc(var(--u) * 54); font-size: calc(var(--u) * 32); margin-top: calc(var(--u) * 44); gap: calc(var(--u) * 14); }
  .hx-button .arrow { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
}
@media (prefers-reduced-motion: reduce) {
  .hx-appear { animation: hx-fade .4s linear both; animation-delay: 0s; }
  .hx-button { transition: opacity .3s linear; }
  .hx-button:hover { transform: none; }
}