/* ============================================================
   ASTRA — AI Systems for Local Business
   Design tokens · liquid glass · type · reveal
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500;600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&display=swap');

:root{
  /* surfaces */
  --bg:#0A0A0A;
  --bg-2:#0D0D0D;
  --surface:#141414;
  --surface-2:#181818;
  --border:#262626;
  --hairline:rgba(255,255,255,.08);

  /* text */
  --text:#F1F0EC;
  --muted:#8A8A85;
  --faint:rgba(255,255,255,.42);

  /* accents (tweakable) */
  --gold:#C9A84C;
  --gold-soft:rgba(201,168,76,.14);
  --blue:#4B7BEC;
  --blue-soft:rgba(75,123,236,.16);
  --accent:var(--gold);       /* primary CTA accent, overridden by tweaks */
  --accent-soft:var(--gold-soft);

  /* type */
  --display:'Bebas Neue', 'Oswald', sans-serif;
  --body:'DM Sans', system-ui, sans-serif;
  --mono:'DM Mono', ui-monospace, monospace;

  --maxw:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#0A0A0A}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}

/* ---------- LIQUID GLASS ---------- */
.glass{
  background:rgba(255,255,255,.012);
  background-blend-mode:luminosity;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  border:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10), 0 18px 50px -28px rgba(0,0,0,.9);
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.45) 0%,
    rgba(255,255,255,.14) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,.14) 80%,
    rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
/* glass that glows with the accent on hover */
.glass-accent::before{
  background:linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 70%, white) 0%,
    rgba(255,255,255,.14) 26%,
    rgba(255,255,255,0) 46%,
    rgba(255,255,255,0) 56%,
    var(--accent-soft) 80%,
    var(--accent) 100%);
}

/* ---------- TYPE HELPERS ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.92;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.font-oswald .display{ font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:-.005em; text-transform:none; line-height:1.0; }
.font-dmsans .display{ font-family:'DM Sans', sans-serif; font-weight:600; letter-spacing:-.03em; text-transform:none; line-height:1.0; }

.serif-em{ font-family:'DM Sans',sans-serif; font-style:normal; }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--faint);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:18px;height:1px;background:var(--accent);
  display:inline-block;
}
.eyebrow.no-tick::before{display:none}

.amount{ font-family:var(--display); letter-spacing:.01em; }

/* ---------- LAYOUT ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
section{ position:relative; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, box-shadow .25s, color .25s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97) }
.btn-gold{ background:var(--accent); color:#0A0A0A; box-shadow:0 10px 34px -12px var(--accent); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 44px -12px var(--accent); }
.btn-ghost{ color:var(--text); }
.btn-ghost.glass{ background:rgba(255,255,255,.02) }
.btn-ghost:hover{ background:rgba(255,255,255,.06) }

/* ---------- SCROLL REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}
/* fallback when requestAnimationFrame is frozen (background/headless): show everything */
.reduce-anim .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
.reduce-anim *{animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important;transition-delay:0s !important;}

/* ---------- PLACEHOLDER (drop zone) ---------- */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, rgba(255,255,255,.005) 12px 24px),
    var(--surface);
  display:flex; align-items:center; justify-content:center;
}
.ph span{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.34); border:1px dashed rgba(255,255,255,.18);
  padding:7px 13px; border-radius:6px; background:rgba(0,0,0,.25);
}

/* ---------- AMBIENT GLOW ---------- */
.glow{ position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }

/* divider */
.hr{ height:1px; width:100%; background:var(--hairline); }