@import url("./styles/motion.css");

@font-face {
  font-family: "Geist Variable";
  src: url("./assets/fonts/geist/GeistVariable.woff2?v=0358e2d1e4fe41d9fc4344f6fa1fdc4b543bfebd")
    format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi Variable";
  src: url("./assets/fonts/satoshi/Satoshi-Variable.woff2?v=0358e2d1e4fe41d9fc4344f6fa1fdc4b543bfebd")
    format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* === Typography tokens === */
html {
  font-family: "Geist Variable", Geist, ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, h4 {
  font-family: "Satoshi Variable", Satoshi, "Geist Variable", Geist,
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter,
    "Helvetica Neue", Arial, sans-serif;
}

/* === Brand & Logo (single canonical block) === */
.brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  white-space: nowrap; /* keep bird + text together */
}

.brand {
  font-family: "Satoshi Variable", "Geist Variable", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1;
  color: #111827; /* gray-900 */
  display: inline-block;
  vertical-align: middle;
}

.brand__mark {
  /* ~85–90% of text height, responsive but gentle */
  height: clamp(22px, 2vw, 32px);
  width: auto;                 /* preserve aspect ratio */
  margin-right: 0.4rem;        /* space between bird + text */
  vertical-align: middle;
  object-fit: contain;
  image-rendering: auto;
  contain: paint;
}

/* === Hero background === */
.hero-bg {
  background: var(--hero-gradient);
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* === Buttons === */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: var(--brand-500);
  color: #fff;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(1px);
  box-shadow: 0 10px 30px rgba(20, 184, 166, 0.25);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: transparent;
  color: var(--brand-500);
  font-weight: 600;
  border: 1.5px solid rgba(14, 165, 164, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease,
    border-color 0.2s ease, color 0.2s ease;
}
.btn-ghost:hover {
  transform: translateY(1px);
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.2);
  border-color: var(--brand-400);
  color: var(--brand-400);
}
.btn-ghost:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

/* === Cards === */
.card {
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.06);
}

/* === Premium Polish v1 — headline aurora & shine === */
.headline-aurora {
  background: linear-gradient(135deg, var(--brand-400), #8b5cf6 40%, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.headline-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-120%);
  filter: blur(6px);
  animation: shine 1.2s ease-out .3s 1 both;
}
@keyframes shine { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .headline-aurora::after { display: none; }
}

/* === Premium Polish v1 — growing underline (nav/footer links) === */
.u-underline {
  position: relative;
  text-decoration: none;
}
.u-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: currentColor;
  transform: translateX(-50%);
  transition: width .2s ease;
}
.u-underline:hover::after { width: 100%; }

/* === Premium Polish v1 — card lift + hairline gradient border === */
.card {
  position: relative;
  transition: transform .18s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(20,184,166,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* === Premium Polish v1 — section reveal (IO toggles .is-in) === */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: all .45s ease;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* === Premium Polish v1 — CTA ring ping (one-time) === */
.cta-ping { position: relative; display: inline-block; }
.cta-ping::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 2px solid var(--brand-400);
  opacity: 0;
  transform: scale(.9);
  animation: ping-once 1.6s ease-out .8s 1 both;
}
@keyframes ping-once {
  0% { opacity: .35; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-ping::after { display: none; }
}

/* === Premium Polish v1 — nav blur on scroll (toggle via JS) === */
.nav-blur {
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(2,6,23,.06);
}

/* === Premium Polish v1 — underline utility for hero secondary CTA too === */
.btn-ghost.u-underline::after { bottom: 0; height: 2px; }

/* === Premium Polish v1.2 — CSS Utilities === */
.subnote-lg {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.6;
  color: var(--gray-600);
  font-weight: 400;
}

.k-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.k-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
}

.k-item::before {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--brand-500);
  border-radius: 50%;
  margin-top: 0.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

/* === Premium Polish v1.2 — Section Soft Background === */
.section-soft {
  position: relative;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
  backdrop-filter: blur(8px);
  border-radius: 2rem;
  padding: clamp(2rem, 5vw, 4rem);
  margin: clamp(2rem, 4vw, 4rem) 0;
  overflow: hidden;
}

.section-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%);
  border-radius: inherit;
  z-index: -1;
}

/* === Premium Polish v1.2 — How it Works Cards === */
.how-step {
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(148, 163, 184, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: translateZ(0);
  will-change: transform;
}

.how-step:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.08);
}

.step-num {
  position: absolute;
  top: -1rem;
  left: clamp(1.5rem, 3vw, 2.5rem);
  width: 2.5rem;
  height: 2.5rem;
  background: var(--brand-500);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  font-family: "Satoshi Variable", Satoshi, sans-serif;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

/* === Premium Polish v1.2 — Feature Cards === */
.feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 1.25rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid rgba(148, 163, 184, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
  will-change: transform;
}

.feature-card:hover {
  transform: translateY(-6px) translateZ(0);
  box-shadow: 0 25px 50px rgba(2, 6, 23, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
}

.feature-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3rem, 4vw, 3.5rem);
  height: clamp(3rem, 4vw, 3.5rem);
  background: linear-gradient(135deg, var(--brand-500), #3b82f6);
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.feature-icon-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.feature-card:hover .feature-icon-wrap::before {
  transform: translateX(100%);
}

.feature-icon {
  width: clamp(1.5rem, 2vw, 1.75rem);
  height: clamp(1.5rem, 2vw, 1.75rem);
  color: white;
  z-index: 1;
  position: relative;
}

/* === Premium Polish v1.2 — Quote Cards === */
.quote-card {
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 1.5rem;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(148, 163, 184, 0.15);
  font-style: italic;
  line-height: 1.7;
}

.quote-card::before,
.quote-card::after {
  content: '"';
  position: absolute;
  font-family: "Satoshi Variable", Satoshi, sans-serif;
  font-size: clamp(3rem, 6vw, 4rem);
  color: var(--brand-400);
  opacity: 0.3;
  font-weight: 700;
  line-height: 1;
}

.quote-card::before {
  top: clamp(0.5rem, 2vw, 1rem);
  left: clamp(0.5rem, 2vw, 1rem);
}

.quote-card::after {
  bottom: clamp(0.5rem, 2vw, 1rem);
  right: clamp(0.5rem, 2vw, 1rem);
  transform: rotate(180deg);
}

/* === Premium Polish v1.2 — Hero Aurora Enhanced === */
.headline-aurora {
  background: linear-gradient(135deg, var(--brand-400), #8b5cf6 40%, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}

.headline-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-120%);
  filter: blur(6px);
  animation: shine-sweep 1.8s ease-out 0.5s 1 both;
}

@keyframes shine-sweep {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .headline-aurora::after { display: none; }
}

/* === Premium Polish v1.2 — CTA Ping Enhanced === */
.cta-ping {
  position: relative;
  display: inline-block;
}

.cta-ping::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 3px solid var(--brand-400);
  opacity: 0;
  transform: scale(0.8);
  animation: ring-ping 2s ease-out 1s infinite;
}

@keyframes ring-ping {
  0% { opacity: 0.6; transform: scale(0.8); }
  50% { opacity: 0.3; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-ping::after { animation: none; }
}

/* === Premium Polish v1.2 — Performance Optimizations === */
.how-step,
.feature-card,
.quote-card {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* === Premium Polish v1.2 — Responsive Utilities === */
@media (max-width: 768px) {
  .section-soft {
    padding: clamp(1.5rem, 4vw, 2rem);
    margin: clamp(1.5rem, 3vw, 2rem) 0;
  }
  
  .how-step,
  .feature-card,
  .quote-card {
    padding: clamp(1rem, 2vw, 1.5rem);
  }
}

/* === Premium Polish v1.2 — Dark Mode Support === */
@media (prefers-color-scheme: dark) {
  .section-soft::before {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(17, 24, 39, 0.4) 100%);
  }
  
  .how-step,
  .feature-card,
  .quote-card {
    background: rgba(17, 24, 39, 0.8);
    border-color: rgba(148, 163, 184, 0.1);
  }
  
  .how-step:hover,
  .feature-card:hover,
  .quote-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
  }
}
/* === Onbrd micro-fixes (safe, additive) === */

/* Header brand spacing & overflow safety */
.brand-wrap { display: inline-flex; align-items: center; gap: .5rem; }
.brand__mark { width: 28px; height: 28px; display: block; }
.brand { font-weight: 700; font-size: 1.0625rem; line-height: 1; white-space: nowrap; }

/* Prevent overlap in cramped widths */
@media (max-width: 380px) {
  .brand { font-size: .98rem; }
}

/* Header download CTA sizing to match nav scale */
.btn-download {
  min-height: 40px;
  padding: 8px 14px;
  font-size: .95rem;
  font-weight: 600;
  border-radius: 8px;
}

/* Hero secondary CTA legibility on dark */
.btn-ghost {
  color: #fff; /* on dark hero */
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 4px 12px rgba(14,165,164,.12), 0 0 0 1px rgba(14,165,164,.15);
  outline: none;
  transform: translateY(-1px);
}

/* Vertical rhythm nudge (no layout shifts, just breathing room) */
.hero h1 { margin-bottom: 1rem; }
.hero p { margin-top: .5rem; margin-bottom: 1.25rem; }
.hero .flex.gap-4 { margin-bottom: 1rem; }

/* Remove idle pulse on main CTA if any pre-existing pulse styles apply */
.cta-ping { animation: none !important; }

/* Swoosh: drive fully off-screen and fade out cleanly */
.hero .hero-swoosh {
  will-change: transform, opacity;
  animation: onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;
}
@keyframes onbrd-swoosh-exit {
  0%   { transform: translateX(0%);   opacity: 0; }
  10%  { opacity: .75; }
  55%  { opacity: .45; }
  100% { transform: translateX(180%); opacity: 0; }
}
/* === Onbrd micro-fixes (safe, additive) — 2025-10-02 === */

/* Header brand spacing & overflow safety */
.brand-wrap { display:inline-flex; align-items:center; gap:.5rem; }
.brand__mark { width:28px; height:28px; display:block; }
.brand { font-weight:700; font-size:1.0625rem; line-height:1; white-space:nowrap; }
@media (max-width: 380px){ .brand{ font-size:.98rem } }

/* Header CTA sizing */
.btn-download {
  min-height:40px;
  padding:8px 14px;
  font-size:.95rem;
  font-weight:600;
  border-radius:8px;
}

/* Secondary CTA legibility on dark hero */
.btn-ghost {
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  padding:10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color:rgba(255,255,255,.38);
  box-shadow:0 4px 12px rgba(14,165,164,.12), 0 0 0 1px rgba(14,165,164,.15);
  outline:none;
  transform:translateY(-1px);
}

/* Hero typographic rhythm */
.hero h1 { margin-bottom:1rem; }
.hero p { margin:.5rem 0 1.25rem; }
.hero .flex.gap-4 { margin-bottom:1rem; }

/* Kill idle pulse */
.cta-ping { animation:none !important; }

/* Swoosh exit animation — fully off-screen, no lingering tail */
.hero .hero-swoosh{
  will-change: transform, opacity;
  animation: onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;
}
@keyframes onbrd-swoosh-exit{
  0%   { transform:translateX(0%);   opacity:0;   }
  10%  {                           opacity:.75; }
  55%  {                           opacity:.45; }
  100% { transform:translateX(180%); opacity:0;   }
}
/* === Onbrd micro-fixes (safe, additive) === */

/* Brand spacing & overflow safety */
.brand-wrap { display:inline-flex; align-items:center; gap:.5rem; }
.brand__mark { width:28px; height:28px; display:block; }
.brand { font-weight:700; font-size:1.0625rem; line-height:1; white-space:nowrap; }
@media (max-width: 380px){ .brand{ font-size:.98rem } }

/* Make the header CTA not gigantic */
.btn-download {
  min-height:40px;
  padding:8px 14px;
  font-size:.95rem;
  font-weight:600;
  border-radius:8px;
}

/* Secondary CTA legible on dark */
.btn-ghost {
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  padding:10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color:rgba(255,255,255,.38);
  box-shadow:0 4px 12px rgba(14,165,164,.12), 0 0 0 1px rgba(14,165,164,.15);
  outline:none;
  transform:translateY(-1px);
}

/* Hero typographic rhythm */
.hero h1 { margin-bottom:1rem; }
.hero p  { margin:.5rem 0 1.25rem; }
.hero .flex.gap-4 { margin-bottom:1rem; }

/* Ensure the CTA row sits above the parallax sweep */
.hero .flex.gap-4 { position:relative; z-index:2; }

/* Remove any idle pulse if present */
.cta-ping { animation:none !important; }

/* Swoosh exit animation — fully off-screen, no tail */
.hero .hero-swoosh{
  will-change: transform, opacity;
  animation: onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;
}
@keyframes onbrd-swoosh-exit{
  0%   { transform:translateX(0%);   opacity:0;   }
  10%  {                           opacity:.75; }
  55%  {                           opacity:.45; }
  100% { transform:translateX(180%); opacity:0;   }
}

/* Slightly brighten microcopy on hero */
.hero .hero-privacy { color: rgba(255,255,255,.78); }
/* ===== Proportional rhythm & micro-fixes (additive) ===== */

/* Spacing scale used across hero */
:root{
  --space-0: 0;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --leading-tight: 1.15;
  --leading-copy: 1.6;
}

/* Brand spacing is deterministic */
.brand-wrap{ display:inline-flex; align-items:center; gap:.5rem; }
.brand__mark{ width:28px; height:28px; display:block; }
.brand{ font-weight:700; font-size:1.0625rem; line-height:1; white-space:nowrap; }
@media (max-width:380px){ .brand{ font-size:.98rem } }

/* Header download button not oversized */
.btn-download{ min-height:40px; padding:8px 14px; font-size:.95rem; font-weight:600; border-radius:8px; }

/* Hero proportional rhythm (no layout change, just rhythm) */
.hero .headline-aurora,
.hero h1{
  font-size: clamp(36px, 6vw, 72px);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.hero p{
  max-width: 68ch;
  margin: var(--space-2) auto var(--space-5);
  line-height: var(--leading-copy);
}
.hero .flex.gap-4{
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 2; /* ensures CTAs above sweep */
}

/* Secondary CTA must be legible on dark */
.btn-ghost{
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 4px 12px rgba(14,165,164,.12), 0 0 0 1px rgba(14,165,164,.15);
  outline: none;
  transform: translateY(-1px);
}

/* Brighten microcopy slightly for contrast */
.hero .hero-privacy{ color: rgba(255,255,255,.78); }

/* Kill any idle pulse if still around */
.cta-ping{ animation: none !important; }

/* Swoosh: fully exit and fade with no tail */
.parallax{ position: relative; overflow: clip; }
.hero .hero-swoosh{
  pointer-events: none;
  will-change: transform, opacity;
  animation: onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;
  z-index: 1;
}
@keyframes onbrd-swoosh-exit{
  0%   { transform: translateX(0%);   opacity: 0;   }
  12%  {                           opacity: .85; }
  60%  {                           opacity: .45; }
  100% { transform: translateX(180%); opacity: 0;   } /* fully off to right */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .hero-swoosh{ animation: none; opacity: 0; }
}
/* ===== Proportional rhythm & micro-fixes (additive) ===== */

/* Spacing scale used across hero */
:root{
  --space-0: 0;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --leading-tight: 1.15;
  --leading-copy: 1.6;
}

/* Brand spacing is deterministic */
.brand-wrap{ display:inline-flex; align-items:center; gap:.5rem; }
.brand__mark{ width:28px; height:28px; display:block; }
.brand{ font-weight:700; font-size:1.0625rem; line-height:1; white-space:nowrap; }
@media (max-width:380px){ .brand{ font-size:.98rem } }

/* Header download button not oversized */
.btn-download{ min-height:40px; padding:8px 14px; font-size:.95rem; font-weight:600; border-radius:8px; }

/* Hero proportional rhythm (no layout change, just rhythm) */
.hero .headline-aurora,
.hero h1{
  font-size: clamp(36px, 6vw, 72px);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.hero p{
  max-width: 68ch;
  margin: var(--space-2) auto var(--space-5);
  line-height: var(--leading-copy);
}
.hero .flex.gap-4{
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 2; /* ensures CTAs above sweep */
}

/* Secondary CTA must be legible on dark */
.btn-ghost{
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 4px 12px rgba(14,165,164,.12), 0 0 0 1px rgba(14,165,164,.15);
  outline: none;
  transform: translateY(-1px);
}

/* Brighten microcopy slightly for contrast */
.hero .hero-privacy{ color: rgba(255,255,255,.78); }

/* Kill any idle pulse if still around */
.cta-ping{ animation: none !important; }

/* Swoosh: fully exit and fade with no tail */
.parallax{ position: relative; overflow: clip; }
.hero .hero-swoosh{
  pointer-events: none;
  will-change: transform, opacity;
  animation: onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;
  z-index: 1;
}
@keyframes onbrd-swoosh-exit{
  0%   { transform: translateX(0%);   opacity: 0;   }
  12%  {                           opacity: .85; }
  60%  {                           opacity: .45; }
  100% { transform: translateX(180%); opacity: 0;   } /* fully off to right */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .hero-swoosh{ animation: none; opacity: 0; }
}
/* ===== Proportional rhythm & micro-fixes (additive) ===== */

/* Spacing scale used across hero */
:root{
  --space-0: 0;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --leading-tight: 1.15;
  --leading-copy: 1.6;
}

/* Brand spacing is deterministic */
.brand-wrap{ display:inline-flex; align-items:center; gap:.5rem; }
.brand__mark{ width:28px; height:28px; display:block; }
.brand{ font-weight:700; font-size:1.0625rem; line-height:1; white-space:nowrap; }
@media (max-width:380px){ .brand{ font-size:.98rem } }

/* Header download button not oversized */
.btn-download{ min-height:40px; padding:8px 14px; font-size:.95rem; font-weight:600; border-radius:8px; }

/* Hero proportional rhythm (no layout change, just rhythm) */
.hero .headline-aurora,
.hero h1{
  font-size: clamp(36px, 6vw, 72px);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.hero p{
  max-width: 68ch;
  margin: var(--space-2) auto var(--space-5);
  line-height: var(--leading-copy);
}
.hero .flex.gap-4{
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 2; /* ensures CTAs above sweep */
}

/* Secondary CTA must be legible on dark */
.btn-ghost{
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 4px 12px rgba(14,165,164,.12), 0 0 0 1px rgba(14,165,164,.15);
  outline: none;
  transform: translateY(-1px);
}

/* Brighten microcopy slightly for contrast */
.hero .hero-privacy{ color: rgba(255,255,255,.78); }

/* Kill any idle pulse if still around */
.cta-ping{ animation: none !important; }

/* Swoosh: fully exit and fade with no tail */
.parallax{ position: relative; overflow: clip; }
.hero .hero-swoosh{
  pointer-events: none;
  will-change: transform, opacity;
  animation: onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;
  z-index: 1;
}
@keyframes onbrd-swoosh-exit{
  0%   { transform: translateX(0%);   opacity: 0;   }
  12%  {                           opacity: .85; }
  60%  {                           opacity: .45; }
  100% { transform: translateX(180%); opacity: 0;   } /* fully off to right */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .hero-swoosh{ animation: none; opacity: 0; }
}
/* ===== Proportional rhythm & micro-fixes (additive) ===== */

/* Spacing scale used across hero */
:root{
  --space-0: 0;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --leading-tight: 1.15;
  --leading-copy: 1.6;
}

/* Brand spacing is deterministic */
.brand-wrap{ display:inline-flex; align-items:center; gap:.5rem; }
.brand__mark{ width:28px; height:28px; display:block; }
.brand{ font-weight:700; font-size:1.0625rem; line-height:1; white-space:nowrap; }
@media (max-width:380px){ .brand{ font-size:.98rem } }

/* Header download button not oversized */
.btn-download{ min-height:40px; padding:8px 14px; font-size:.95rem; font-weight:600; border-radius:8px; }

/* Hero proportional rhythm (no layout change, just rhythm) */
.hero .headline-aurora,
.hero h1{
  font-size: clamp(36px, 6vw, 72px);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.hero p{
  max-width: 68ch;
  margin: var(--space-2) auto var(--space-5);
  line-height: var(--leading-copy);
}
.hero .flex.gap-4{
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 2; /* ensures CTAs above sweep */
}

/* Secondary CTA must be legible on dark */
.btn-ghost{
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 4px 12px rgba(14,165,164,.12), 0 0 0 1px rgba(14,165,164,.15);
  outline: none;
  transform: translateY(-1px);
}

/* Brighten microcopy slightly for contrast */
.hero .hero-privacy{ color: rgba(255,255,255,.78); }

/* Kill any idle pulse if still around */
.cta-ping{ animation: none !important; }

/* Swoosh: fully exit and fade with no tail */
.parallax{ position: relative; overflow: clip; }
.hero .hero-swoosh{
  pointer-events: none;
  will-change: transform, opacity;
  animation: onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;
  z-index: 1;
}
@keyframes onbrd-swoosh-exit{
  0%   { transform: translateX(0%);   opacity: 0;   }
  12%  {                           opacity: .85; }
  60%  {                           opacity: .45; }
  100% { transform: translateX(180%); opacity: 0;   } /* fully off to right */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .hero-swoosh{ animation: none; opacity: 0; }
}
/* ===== Proportional rhythm & micro-fixes (additive) ===== */

/* Spacing scale used across hero */
:root{
  --space-0: 0;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --leading-tight: 1.15;
  --leading-copy: 1.6;
}

/* Brand spacing is deterministic */
.brand-wrap{ display:inline-flex; align-items:center; gap:.5rem; }
.brand__mark{ width:28px; height:28px; display:block; }
.brand{ font-weight:700; font-size:1.0625rem; line-height:1; white-space:nowrap; }
@media (max-width:380px){ .brand{ font-size:.98rem } }

/* Header download button not oversized */
.btn-download{ min-height:40px; padding:8px 14px; font-size:.95rem; font-weight:600; border-radius:8px; }

/* Hero proportional rhythm (no layout change, just rhythm) */
.hero .headline-aurora,
.hero h1{
  font-size: clamp(36px, 6vw, 72px);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.hero p{
  max-width: 68ch;
  margin: var(--space-2) auto var(--space-5);
  line-height: var(--leading-copy);
}
.hero .flex.gap-4{
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 2; /* ensures CTAs above sweep */
}

/* Secondary CTA must be legible on dark */
.btn-ghost{
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 4px 12px rgba(14,165,164,.12), 0 0 0 1px rgba(14,165,164,.15);
  outline: none;
  transform: translateY(-1px);
}

/* Brighten microcopy slightly for contrast */
.hero .hero-privacy{ color: rgba(255,255,255,.78); }

/* Kill any idle pulse if still around */
.cta-ping{ animation: none !important; }

/* Swoosh: fully exit and fade with no tail */
.parallax{ position: relative; overflow: clip; }
.hero .hero-swoosh{
  pointer-events: none;
  will-change: transform, opacity;
  animation: onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;
  z-index: 1;
}
@keyframes onbrd-swoosh-exit{
  0%   { transform: translateX(0%);   opacity: 0;   }
  12%  {                           opacity: .85; }
  60%  {                           opacity: .45; }
  100% { transform: translateX(180%); opacity: 0;   } /* fully off to right */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .hero-swoosh{ animation: none; opacity: 0; }
}
/* ===== Proportional rhythm & micro-fixes (additive) ===== */

/* Spacing scale used across hero */
:root{
  --space-0: 0;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --leading-tight: 1.15;
  --leading-copy: 1.6;
}

/* Brand spacing is deterministic */
.brand-wrap{ display:inline-flex; align-items:center; gap:.5rem; }
.brand__mark{ width:28px; height:28px; display:block; }
.brand{ font-weight:700; font-size:1.0625rem; line-height:1; white-space:nowrap; }
@media (max-width:380px){ .brand{ font-size:.98rem } }

/* Header download button not oversized */
.btn-download{ min-height:40px; padding:8px 14px; font-size:.95rem; font-weight:600; border-radius:8px; }

/* Hero proportional rhythm (no layout change, just rhythm) */
.hero .headline-aurora,
.hero h1{
  font-size: clamp(36px, 6vw, 72px);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.hero p{
  max-width: 68ch;
  margin: var(--space-2) auto var(--space-5);
  line-height: var(--leading-copy);
}
.hero .flex.gap-4{
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 2; /* ensures CTAs above sweep */
}

/* Secondary CTA must be legible on dark */
.btn-ghost{
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 4px 12px rgba(14,165,164,.12), 0 0 0 1px rgba(14,165,164,.15);
  outline: none;
  transform: translateY(-1px);
}

/* Brighten microcopy slightly for contrast */
.hero .hero-privacy{ color: rgba(255,255,255,.78); }

/* Kill any idle pulse if still around */
.cta-ping{ animation: none !important; }

/* Swoosh: fully exit and fade with no tail */
.parallax{ position: relative; overflow: clip; }
.hero .hero-swoosh{
  pointer-events: none;
  will-change: transform, opacity;
  animation: onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;
  z-index: 1;
}
@keyframes onbrd-swoosh-exit{
  0%   { transform: translateX(0%);   opacity: 0;   }
  12%  {                           opacity: .85; }
  60%  {                           opacity: .45; }
  100% { transform: translateX(180%); opacity: 0;   } /* fully off to right */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .hero-swoosh{ animation: none; opacity: 0; }
}

/* ===== Mobile & desktop proportional polish (additive) ===== */

/* 0) Kill horizontal scroll from visual layers */
html, body { max-width: 100%; overflow-x: hidden; }
.hero, .parallax { overflow: hidden; }  /* use hidden (wider support than clip) */

/* 1) Deterministic header spacing */
.brand-wrap{ display:inline-flex; align-items:center; gap:.5rem; }
.brand__mark{ width:28px; height:28px; display:block; }
.brand{ font-weight:700; font-size:1.0625rem; line-height:1; white-space:nowrap; }
@media (max-width:380px){ .brand{ font-size:.98rem } }

/* Optional: tame the header download button scale */
.btn-download{ min-height:40px; padding:8px 14px; font-size:.95rem; font-weight:600; border-radius:8px; }

/* 2) Proportional hero rhythm using a single scale */
:root{
  --rhythm-1: clamp(12px, 2.6vw, 16px);
  --rhythm-2: calc(var(--rhythm-1) * 1.5);
  --rhythm-3: calc(var(--rhythm-1) * 2.0);
}
.hero h1{ 
  font-size: clamp(32px, 6.2vw, 72px);
  line-height: 1.12; letter-spacing: -0.01em;
  margin-bottom: var(--rhythm-2);
}
.hero p{
  max-width: 68ch; margin: var(--rhythm-1) auto var(--rhythm-3);
  line-height: 1.6;
}
.hero .flex.gap  

/* === Onbrd mobile/hero polish (additive, safe) === */

/* 0) Never allow sideways scroll */
html, body { max-width: 100%; overflow-x: hidden; }

/* 1) Clip all hero visual layers inside the hero */
.hero, .parallax { position: relative; overflow: hidden; }
.parallax__layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100vw; }

/* 2) Swoosh: exit fully but never widen page */
.hero .hero-swoosh {
  pointer-events: none;
  will-change: transform, opacity;
  animation: onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;
  z-index: 1;
}
@keyframes onbrd-swoosh-exit {
  0%   { transform: translateX(0%);   opacity: 0; }
  12%  {                           opacity: .85; }
  60%  {                           opacity: .45; }
  100% { transform: translateX(150%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-swoosh { animation: none; opacity: 0; }
}

/* 3) Mobile niceties */
@media (max-width: 640px) {
  nav .btn-download { display: none; }           /* avoid header crowding on phones */
  .hero .flex.gap-4 { flex-direction: column; }  /* stack CTAs */
  .hero .flex.gap-4 .btn,
  .hero .flex.gap-4 .btn-primary,
  .hero .flex.gap-4 .btn-ghost { width: 100%; justify-content: center; min-height: 44px; }
}
/* onbrd: mobile+overflow+swoosh fix v2 */
html,body{max-width:100%;overflow-x:hidden}
.parallax,.hero{overflow:hidden}
.parallax{position:relative}
.parallax__layer{position:absolute;inset:-1px}
.hero .hero-swoosh{pointer-events:none;will-change:transform,opacity;animation:onbrd-swoosh-exit 2.8s ease-out 120ms 1 forwards;z-index:1}
@keyframes onbrd-swoosh-exit{0%{transform:translateX(0%);opacity:0}12%{opacity:.85}60%{opacity:.45}100%{transform:translateX(180%);opacity:0}}
@media (max-width:640px){
  nav .btn-download{display:none}
  .hero .flex.gap-4{flex-direction:column}
  .hero .flex.gap-4 .btn,.hero .flex.gap-4 .btn-primary,.hero .flex.gap-4 .btn-ghost{width:100%;justify-content:center;min-height:44px}
}
/* end */

/* Mobile responsive navigation */
.site-header {
  z-index: 60;
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 21px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.mobile-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: currentColor;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.mobile-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.open span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

@media (max-width: 768px) {
  .mobile-toggle {
    display: flex;
    color: inherit;
  }

  .site-nav .desktop-nav {
    display: none;
  }

  .site-nav.open .desktop-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-top: 1px solid #e5e7eb;
    padding: 1rem 0;
    z-index: 50;
  }

  .site-nav.open .desktop-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0 1rem;
  }

  .site-nav.open .desktop-nav li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
  }

  .site-nav.open .desktop-nav li:last-child {
    border-bottom: none;
  }

  .site-nav.open .desktop-nav a {
    display: block;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .site-nav.open .desktop-nav a:hover {
    background-color: #f9fafb;
  }

  body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  .site-nav {
    position: relative;
  }
}

@media (min-width: 769px) {
  .mobile-toggle {
    display: none !important;
  }

  .site-nav .desktop-nav {
    display: flex !important;
  }
}

@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  body.ovh { overflow: hidden; }

  .site-header { position: sticky; top: 0; z-index: 60; }
  .header-inner { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 1rem; box-sizing: border-box; max-width: 100vw; }
  .nav-toggle { display: inline-flex; align-items:center; justify-content:center; width:40px; height:40px; font-size:20px; background:transparent; border:0; }

  .site-nav { position: fixed; left: 0; right: 0; top: 56px;
    background: #0b0b0b; max-height: calc(100vh - 56px);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .site-nav[data-state="open"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .site-nav ul { list-style: none; margin:0; padding:.5rem 1rem; }
  .site-nav li { border-bottom: 1px solid rgba(255,255,255,.08); }
  .site-nav a { display:block; padding:.9rem 0; color:#fff; text-decoration:none; }

  /* hide desktop CTA in collapsed header */
  header a#download { display: none !important; }

  /* harden overflow culprits */
  img, svg, canvas, video { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  .hero .hero-swoosh { display: none !important; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav { position: static; transform: none; opacity: 1; pointer-events: auto; background: transparent; }
  .site-nav ul { display: flex; gap: 1.25rem; padding: 0; }
  .site-nav li { border: 0; }
  header a#download { display: inline-block !important; }
}

/* global safety */
*, *::before, *::after { box-sizing: border-box; }

/* Mobile base guards */
html, body { max-width: 100%; overflow-x: hidden; }
img,svg,video { max-width: 100%; height: auto; }
pre,code { white-space: pre-wrap; word-break: break-word; }
table { display: block; max-width: 100%; overflow-x: auto; }

header { position: sticky; top: 0; z-index: 60; }
.hamburger { display:inline-flex; gap:4px; flex-direction:column; width:36px; height:28px; align-items:center; justify-content:center; }
.hamburger span { display:block; height:2px; width:24px; background: currentColor; }

.site-nav { position: fixed; left: 0; right: 0; top: 56px; transform: translateY(-100%); transition: transform .2s ease; background: rgba(255,255,255,.98); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(0,0,0,.06); }
.site-nav[data-open="true"] { transform: translateY(0); }

@media (min-width: 769px) {
  #navToggle { display: none !important; }
  .site-nav { position: static; transform: none; background: transparent; border: 0; }
}

/* Hide big hero swoosh on mobile if present */
@media (max-width:768px) {
  .hero .hero-swoosh { display: none !important; opacity: 0 !important; }
}