/* SitePe "Aurora" visual layer. Loaded after style.css.
   Colours stay within the brand: logo purple #641D95, its lighter/darker shades
   (mixed with white or the neutral ink) and neutrals. */
:root {
  --brand-hi: #7a2db0; /* fallback */
  --brand-lo: #2a0c40; /* fallback */
  --brand-hi: color-mix(in srgb, var(--brand), #fff 16%);
  --brand-lo: color-mix(in srgb, var(--brand), var(--ink) 72%);
}
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- header + scroll progress ---------- */
.site-header { transition: background .3s, box-shadow .3s; }
.site-header.scrolled { background: rgba(100, 29, 149, 0.78); box-shadow: 0 10px 30px rgba(20, 5, 35, 0.35); }
.fx-progress { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, rgba(255,255,255,.35), #fff); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---------- aurora backgrounds ---------- */
.hero, .brief-hero, .final, #pricing {
  background:
    radial-gradient(90% 70% at 85% 0%, var(--brand-hi) 0%, transparent 60%),
    radial-gradient(80% 90% at 0% 100%, var(--brand-lo) 0%, transparent 65%),
    var(--brand);
  isolation: isolate;
}
.fx-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; will-change: transform; }
.fx-orb.a { width: 520px; height: 520px; left: -140px; top: -120px; background: rgba(255,255,255,.22); animation: orb-a 18s ease-in-out infinite alternate; }
.fx-orb.b { width: 620px; height: 620px; right: -200px; bottom: -220px; background: var(--brand-lo); opacity: .85; animation: orb-b 22s ease-in-out infinite alternate; }
.fx-orb.c { width: 340px; height: 340px; left: 45%; top: 10%; background: rgba(255,255,255,.14); animation: orb-c 26s ease-in-out infinite alternate; }
@keyframes orb-a { to { transform: translate(180px, 120px) scale(1.15); } }
@keyframes orb-b { to { transform: translate(-200px, -120px) scale(1.1); } }
@keyframes orb-c { to { transform: translate(-220px, 160px) scale(.8); } }
/* film grain for depth */
.hero::after, .final::after, #pricing::after, .brief-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* cursor spotlight */
.hero { --mx: 70%; --my: 30%; }
.hero .fx-spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.16), transparent 60%); }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- hero ---------- */
.hero { padding: 72px 0 110px; }
.hero h1 { text-wrap: balance; }
.hero .mark { background: linear-gradient(100deg, #fff 20%, rgba(255,255,255,.55) 45%, #fff 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4.5s linear infinite; }
.hero .mark::after { background: linear-gradient(90deg, #fff, rgba(255,255,255,.35)); }
@keyframes shimmer { to { background-position: -220% 0; } }
.hero .pill { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero .pill, .hero h1, .hero .lead, .hero .cta-row, .hero .price-line { animation: rise .9s var(--ease) both; }
.hero h1 { animation-delay: .08s; } .hero .lead { animation-delay: .18s; } .hero .cta-row { animation-delay: .28s; } .hero .price-line { animation-delay: .38s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-visual { perspective: 1100px; }
.hero-visual::before { content: ""; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); filter: blur(30px); }
.hero-visual img { transition: transform .25s ease-out; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }

/* buttons: sheen + magnetic */
.btn { position: relative; overflow: hidden; }
.btn-light::after, .btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); pointer-events: none; }
.btn-primary::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); }
.btn-light:hover::after, .btn-primary:hover::after { left: 130%; }
.btn.fx-mag { transition: transform .2s ease-out, box-shadow .2s, background-color .15s, color .15s; }

/* ---------- ticker ---------- */
.ticker { background: var(--brand-lo); padding: 20px 0; -webkit-mask-image: none; }
.ticker span { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.85); }
.ticker span:nth-child(even) { color: #fff; -webkit-text-stroke: 0; }
.ticker span::after { content: "✦"; color: #fff; -webkit-text-stroke: 0; opacity: .6; right: -8px; }

/* ---------- stats (glass + count up) ---------- */
.stats { background: linear-gradient(var(--white), var(--bg-alt)); padding: 64px 0 24px; }
.stats-grid li { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(145deg, var(--brand), rgba(100,29,149,.12) 50%, var(--brand)) border-box; box-shadow: 0 14px 34px rgba(100,29,149,.12); }
.stats-grid strong { background: linear-gradient(180deg, var(--brand), var(--brand-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }

/* ---------- why ---------- */
.section.why h2 { background: linear-gradient(100deg, var(--ink) 30%, var(--brand) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- how it works: dark stage ---------- */
#how { background: radial-gradient(70% 60% at 50% 0%, rgba(100,29,149,.55), transparent 70%), var(--ink); color: #fff; position: relative; overflow: hidden; }
#how h2 { color: #fff; }
#how .eyebrow { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); }
#how .steps li { background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14); box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#how .steps li:hover { border-color: rgba(255,255,255,.5); box-shadow: 0 20px 50px rgba(100,29,149,.55); }
#how .steps h3 { color: #fff; }
#how .steps p { color: rgba(255,255,255,.74); }
#how .step-n { background: #fff; color: var(--brand); box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 10px 30px rgba(100,29,149,.6); }
#how .btn-primary { background: #fff; color: var(--brand); box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* ---------- cards: spotlight ---------- */
.card { position: relative; overflow: hidden; }
.card > * { position: relative; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(280px circle at var(--x, 50%) var(--y, 0%), rgba(100,29,149,.16), transparent 65%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.card:hover::before { opacity: 1; }
.card svg { box-shadow: 0 8px 20px rgba(100,29,149,.12); }

/* ---------- example tiles ---------- */
.ex-thumb { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out, box-shadow .35s var(--ease); will-change: transform; }
.ex-btn:hover .ex-thumb { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }

/* ---------- pricing: glowing animated border ---------- */
.price-card { border: 3px solid transparent; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ang), #fff, rgba(255,255,255,.15) 25%, var(--brand-hi) 50%, rgba(255,255,255,.15) 75%, #fff) border-box; animation: ang 7s linear infinite; box-shadow: 0 0 80px rgba(255,255,255,.18), 0 30px 70px rgba(10,0,20,.45); }
@keyframes ang { to { --ang: 360deg; } }
.amt { background: linear-gradient(180deg, var(--brand), var(--brand-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- FAQ / compare polish ---------- */
.cmp-table { box-shadow: 0 24px 60px rgba(100,29,149,.12); }

/* ---------- final CTA ---------- */
.final h2 { text-wrap: balance; }

/* ---------- footer ---------- */
.site-footer { background: radial-gradient(60% 100% at 100% 0%, rgba(100,29,149,.35), transparent 60%), var(--ink); }

/* section dividers: soft wave from dark to light */
#how::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0)); pointer-events: none; }

@media (max-width: 639px) {
  .fx-orb.a { width: 360px; height: 360px; } .fx-orb.b { width: 420px; height: 420px; } .fx-orb.c { display: none; }
  .ticker span { font-size: 1rem; }
  }

/* reduced motion: stop the new decorative motion (static look stays) */
@media (prefers-reduced-motion: reduce) {
  .fx-orb, .hero .mark, .price-card, .hero .pill, .hero h1, .hero .lead, .hero .cta-row, .hero .price-line { animation: none !important; }
  .hero .mark { color: #fff; background: none; -webkit-text-fill-color: #fff; }
  .fx-progress, .fx-canvas, .hero .fx-spot { display: none; }
  .hero-visual img, .ex-thumb { transform: none !important; transition: none; }
  .btn-light::after, .btn-primary::after { display: none; }
}
.brief-hero { position: relative; overflow: hidden; }

/* comparison table ticks */
.cmp-row .yes, .cmp-row .no { font-weight: 800; margin-right: 6px; }
.cmp-row .yes { color: var(--brand); }
.cmp-row .no { color: #9a9aa3; }
.cmp-row .yes, .cmp-row .no { font-size: 1.15rem; line-height: 1; }
@media (max-width: 639px) { .cmp-row .yes, .cmp-row .no { margin-right: 4px; } }