/* ============================================================
   Auvera — branding assistant (SkyeFire product)
   Dark-native shell + iridescent pearl/lavender/frost accents.
   Brand kit: heading = Space Grotesk Light, body = Inter.
   Palette: Pearl #F7F8FC, Lavender #E7E2FA, Frost #E2F2FB,
            Silver Mist #ECEEF3, Soft Gray #F3F4F7.
   ============================================================ */
:root {
  --auv-pearl: #F7F8FC;
  --auv-lavender: #E7E2FA;
  --auv-frost: #E2F2FB;
  --auv-silver: #ECEEF3;
  --auv-gray: #F3F4F7;
  /* accent working colors (deeper, for glow/lines on dark) */
  --auv-violet: #b7a6f5;
  --auv-blue: #9ec6f2;
  --auv-iris: linear-gradient(120deg, #E7E2FA 0%, #C9D8Fb 45%, #E2F2FB 100%);
  --auv-iris-strong: linear-gradient(120deg, #b7a6f5 0%, #9ec6f2 55%, #cfe6ff 100%);
  --auv-glow: 0 0 0 1px rgba(199, 191, 245, 0.28), 0 20px 60px -22px rgba(158, 140, 240, 0.45);
}

.auv-font { font-family: "Space Grotesk", system-ui, sans-serif; }

/* Page shell tweaks: Auvera pages use Space Grotesk for headings */
body[data-page^="auvera"] h1,
body[data-page^="auvera"] h2,
body[data-page^="auvera"] h3,
body[data-page^="auvera"] .auv-head {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
}

/* ---------- Hero ---------- */
.auv-hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding-block: calc(var(--header-h, 76px) + var(--sp-8)) var(--sp-8);
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 34%, rgba(158,140,240,0.14) 0%, transparent 62%),
    radial-gradient(80% 90% at 50% 120%, rgba(158,198,242,0.10) 0%, transparent 60%),
    var(--midnight);
}
.auv-hero__inner { position: relative; z-index: 2; max-width: 860px; padding-inline: var(--sp-4); }
.auv-hero__logo { width: min(340px, 72vw); height: auto; margin: 0 auto var(--sp-4); display: block;
  filter: drop-shadow(0 0 40px rgba(158,140,240,0.35)); }
.auv-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; margin-bottom: var(--sp-3);
  background: var(--auv-iris); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auv-hero__sub { color: var(--text-secondary); font-size: clamp(1rem, 2.2vw, 1.25rem); line-height: 1.6;
  max-width: 62ch; margin: 0 auto var(--sp-5); }
.auv-hero__tagline { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: 0.28em;
  text-transform: uppercase; font-size: var(--text-xs); color: var(--auv-violet); margin-bottom: var(--sp-4); }

/* soft star/particle backdrop layer (CSS only, no JS needed) */
.auv-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(231,226,250,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 22%, rgba(226,242,251,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 60%, rgba(199,191,245,0.6), transparent 60%),
    radial-gradient(2px 2px at 33% 72%, rgba(226,242,251,0.5), transparent 60%);
  opacity: 0.7;
}

/* ---------- Buttons (iridescent) ---------- */
.btn-auv {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border-radius: 999px;
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500; font-size: 0.98rem;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), filter .35s;
}
.btn-auv--primary { background: var(--auv-iris-strong); color: #1a1436;
  box-shadow: 0 12px 34px -14px rgba(158,140,240,0.7); }
.btn-auv--primary:hover { transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 18px 46px -14px rgba(158,140,240,0.85); }
.btn-auv--ghost { background: transparent; color: var(--auv-lavender);
  border-color: rgba(199,191,245,0.4); }
.btn-auv--ghost:hover { transform: translateY(-2px); border-color: var(--auv-violet);
  box-shadow: var(--auv-glow); }

/* ---------- Sections ---------- */
.auv-section { padding-block: var(--sp-8); }
.auv-section .container { max-width: 1100px; }
.auv-eyebrow { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: 0.24em;
  text-transform: uppercase; font-size: var(--text-xs); color: var(--auv-violet); }
.auv-section h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: var(--sp-2) 0 var(--sp-3); }
.auv-lead { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; max-width: 64ch; }

/* ---------- Capability tiers ---------- */
.auv-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
@media (max-width: 900px) { .auv-tiers { grid-template-columns: 1fr; } }
.auv-tier {
  position: relative; border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(180deg, rgba(231,226,250,0.04), rgba(255,255,255,0) 40%), var(--surface-1);
  padding: var(--sp-5) var(--sp-4);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .5s;
}
.auv-tier:hover { transform: translateY(-6px); border-color: rgba(199,191,245,0.4); box-shadow: var(--auv-glow); }
.auv-tier.is-featured { border-color: rgba(199,191,245,0.5); box-shadow: var(--auv-glow); }
.auv-tier__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--auv-iris-strong); color: #1a1436; font-family: "Space Grotesk"; font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.28em 0.9em; border-radius: 999px; }
.auv-tier__step { font-family: "Space Grotesk"; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--auv-violet); }
.auv-tier h3 { font-size: 1.35rem; margin: var(--sp-2) 0; }
.auv-tier p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--sp-3); }
.auv-tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.auv-tier li { color: var(--text-secondary); font-size: 0.9rem; display: flex; gap: 0.55rem; align-items: baseline; }
.auv-tier li::before { content: "✦"; color: var(--auv-violet); flex: 0 0 auto; font-size: 0.8em; }

/* ---------- How it works ---------- */
.auv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
@media (max-width: 900px) { .auv-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .auv-steps { grid-template-columns: 1fr; } }
.auv-step__n { font-family: "Space Grotesk"; font-size: 2rem; font-weight: 300;
  background: var(--auv-iris); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.auv-step h3 { font-size: 1.1rem; margin: 0.4rem 0; }
.auv-step p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }

/* ---------- Brand-kit showcase ---------- */
.auv-showcase { margin-top: var(--sp-5); border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; background: var(--surface-1); box-shadow: var(--e-shadow-md, 0 16px 40px -16px rgba(0,0,0,0.55)); }
.auv-showcase img { width: 100%; height: auto; display: block; }
.auv-showcase__cap { padding: var(--sp-3) var(--sp-4); color: var(--text-muted); font-size: var(--text-sm);
  border-top: 1px solid var(--border); }

/* palette chips */
.auv-palette { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.auv-swatch { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.auv-swatch__dot { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.15); }
.auv-swatch__name { font-size: 0.8rem; color: var(--text-secondary); }
.auv-swatch__hex { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }

/* ---------- CTA band ---------- */
.auv-cta {
  text-align: center; border-radius: 22px; padding: var(--sp-8) var(--sp-5); position: relative; overflow: hidden;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(158,140,240,0.18) 0%, transparent 60%),
    var(--surface-1);
  border: 1px solid var(--border);
}
.auv-cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: var(--sp-2); }
.auv-cta p { color: var(--text-secondary); margin-bottom: var(--sp-4); }

/* ---------- Access form page ---------- */
.auv-form-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; max-width: 1100px; margin-inline: auto; }
@media (max-width: 860px) { .auv-form-wrap { grid-template-columns: 1fr; gap: var(--sp-5); } }
.auv-form { border: 1px solid var(--border); border-radius: 20px; background: var(--surface-1); padding: var(--sp-5); }
.auv-field { margin-bottom: var(--sp-4); }
.auv-field label { display: block; font-family: "Space Grotesk"; font-size: var(--text-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }
.auv-field input, .auv-field select, .auv-field textarea {
  width: 100%; padding: 0.8rem 1rem; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-primary); font-size: 0.98rem; font-family: var(--font-body);
}
.auv-field input:focus, .auv-field select:focus, .auv-field textarea:focus {
  outline: none; border-color: var(--auv-violet); box-shadow: 0 0 0 3px rgba(158,140,240,0.2);
}
.auv-field textarea { min-height: 120px; resize: vertical; }
.auv-success { display: none; text-align: center; padding: var(--sp-7) var(--sp-4);
  border: 1px solid rgba(199,191,245,0.4); border-radius: 20px; background: var(--surface-1); }
.auv-success.show { display: block; }
.auv-success__badge { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--sp-4);
  display: grid; place-items: center; background: var(--auv-iris-strong); color: #1a1436; }
.auv-success__badge svg { width: 30px; height: 30px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-auv, .auv-tier { transition: none; }
}