/* ═══════════════════════════════════════════════════════════════════════════
   ClearGlass · Aurora Glass — futuristic 2050 UI design system (v1.0)
   ───────────────────────────────────────────────────────────────────────────
   A layered-glass, holographic control-surface language built on top of the
   canonical brand tokens (tokens.css) and the global theme layer (theme.css).
   Everything here is namespaced --ag-* (Aurora Glass) so it never collides with
   a page's own variables or the shared --cg-* primitives it reuses.

   Design pillars: layered refractive glass · luminous prism gradients ·
   holographic hairline borders · calm ambient motion · cinematic contrast.

   Performance contract (enforced by the "do not do" section in the docs):
     • blur is applied to a small, fixed number of surfaces — never nested
     • only transform / opacity / filter are animated (compositor-friendly)
     • all motion is gated behind prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── background system ─────────────────────────────────────────────────── */
  --ag-void:        #05070f;   /* deepest canvas                        */
  --ag-void-2:      #0a0e1c;   /* raised canvas / section wash          */
  --ag-nebula:      radial-gradient(120% 120% at 50% -10%,
                      rgba(56,189,248,.14) 0%, rgba(167,139,250,.10) 32%,
                      rgba(5,7,15,0) 68%);

  /* ── glass surface levels (increasing opacity = increasing elevation) ──── */
  --ag-glass-0:     rgba(148,170,255,.04);  /* ambient / rails            */
  --ag-glass-1:     rgba(20,26,52,.42);     /* resting card               */
  --ag-glass-2:     rgba(24,30,58,.58);     /* raised card / nav          */
  --ag-glass-3:     rgba(28,34,66,.74);     /* hover / focused module     */
  --ag-glass-4:     rgba(16,20,40,.92);     /* modal / overlay surface    */

  /* ── blur intensity rules (bind to backdrop-filter, capped for GPU cost) ─ */
  --ag-blur-sm:     blur(8px)  saturate(1.2);
  --ag-blur-md:     blur(16px) saturate(1.3);
  --ag-blur-lg:     blur(28px) saturate(1.4);   /* reserve for hero + modal */

  /* ── border / hairline treatments (holographic edges) ──────────────────── */
  --ag-edge:        1px solid rgba(150,175,255,.22);
  --ag-edge-strong: 1px solid rgba(150,175,255,.40);
  --ag-edge-holo:   linear-gradient(135deg,
                      rgba(56,189,248,.65), rgba(167,139,250,.15) 40%,
                      rgba(244,114,182,.55) 70%, rgba(52,211,153,.55));
  --ag-inner-sheen: inset 0 1px 0 rgba(255,255,255,.10),
                    inset 0 0 0 1px rgba(150,175,255,.06);

  /* ── highlight / accent colors (from the brand prism) ──────────────────── */
  --ag-hi-sky:      #38bdf8;
  --ag-hi-violet:   #a78bfa;
  --ag-hi-pink:     #f472b6;
  --ag-hi-mint:     #34d399;
  --ag-hi-amber:    #fbbf24;
  --ag-prism:       linear-gradient(135deg,#38bdf8 0%,#a78bfa 35%,#f472b6 65%,#34d399 100%);

  /* ── glow intensity limits (never exceed --ag-glow-lg on a single element) */
  --ag-glow-sm:     0 0 18px -6px rgba(96,165,250,.55);
  --ag-glow-md:     0 0 34px -8px rgba(124,150,255,.55);
  --ag-glow-lg:     0 0 60px -12px rgba(124,150,255,.60);

  /* ── shadow language (soft diffusion, tinted cool) ─────────────────────── */
  --ag-sh-1:        0 8px 28px -14px rgba(4,7,20,.7);
  --ag-sh-2:        0 20px 60px -24px rgba(4,7,20,.85);
  --ag-sh-3:        0 40px 90px -36px rgba(4,7,20,.92);

  /* ── typography scale (fluid, clamp-based; serif display + sans body) ──── */
  --ag-fs-display:  clamp(2.6rem, 6vw + 1rem, 5.5rem);
  --ag-fs-h1:       clamp(2rem, 3.4vw + 1rem, 3.4rem);
  --ag-fs-h2:       clamp(1.5rem, 1.6vw + 1rem, 2.2rem);
  --ag-fs-h3:       clamp(1.15rem, .6vw + 1rem, 1.4rem);
  --ag-fs-body:     clamp(1rem, .3vw + .95rem, 1.12rem);
  --ag-fs-small:    .82rem;
  --ag-tracking:    .01em;
  --ag-tracking-wide: .28em;

  /* ── spacing rhythm (8px base, generous section gutters) ────────────────── */
  --ag-sp-1: 8px; --ag-sp-2: 16px; --ag-sp-3: 24px;
  --ag-sp-4: 40px; --ag-sp-5: 64px; --ag-sp-6: 96px; --ag-sp-7: 128px;

  /* ── radii ─────────────────────────────────────────────────────────────── */
  --ag-r-xl: 32px; --ag-r-lg: 24px; --ag-r-md: 18px; --ag-r-sm: 12px;
  --ag-r-pill: 999px;

  /* ── motion (cinematic, physically believable) ─────────────────────────── */
  --ag-ease:    cubic-bezier(.4,0,.2,1);
  --ag-spring:  cubic-bezier(.16,1,.3,1);
  --ag-glide:   cubic-bezier(.22,.61,.36,1);
  --ag-dur-1: .22s; --ag-dur-2: .42s; --ag-dur-3: .7s; --ag-dur-slow: 1.1s;

  /* on-surface text (dark-context default) */
  --ag-on:      #eaf0ff;
  --ag-on-dim:  #9fabce;
  --ag-on-mute: #6c7699;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE CANVAS
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-root {
  color: var(--ag-on);
  background: var(--ag-void);
  font-family: var(--cg-sans, 'Urbanist', system-ui, sans-serif);
  font-size: var(--ag-fs-body);
  line-height: 1.6;
  letter-spacing: var(--ag-tracking);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fixed ambient backdrop: nebula wash + drifting aurora blobs + starfield grid.
   Lives behind everything, pointer-events:none, single paint layer. */
.ag-backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--ag-nebula),
    radial-gradient(60% 50% at 85% 20%, rgba(167,139,250,.10), transparent 60%),
    radial-gradient(50% 40% at 12% 80%, rgba(52,211,153,.08), transparent 60%),
    var(--ag-void);
}
.ag-backdrop::before {   /* faint holographic grid */
  content: ""; position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(124,150,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,150,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
}
/* Two slow-drifting aurora orbs — the "breathing" of the interface. */
.ag-aurora {
  position: fixed; z-index: 0; pointer-events: none;
  width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
  border-radius: 50%; filter: blur(80px); opacity: .5;
  will-change: transform;
}
.ag-aurora--a { top: -8vw; left: 4vw;
  background: radial-gradient(circle, rgba(56,189,248,.55), transparent 62%);
  animation: ag-drift-a 24s var(--ag-ease) infinite alternate; }
.ag-aurora--b { bottom: -10vw; right: 2vw;
  background: radial-gradient(circle, rgba(167,139,250,.5), transparent 62%);
  animation: ag-drift-b 30s var(--ag-ease) infinite alternate; }
@keyframes ag-drift-a { to { transform: translate3d(8vw, 6vw, 0) scale(1.15); } }
@keyframes ag-drift-b { to { transform: translate3d(-6vw, -5vw, 0) scale(1.1); } }

/* Cursor-reactive specular field (position fed by JS via --ag-mx/--ag-my). */
.ag-cursor-field {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .9;
  background: radial-gradient(360px circle at var(--ag-mx,-200px) var(--ag-my,-200px),
    rgba(124,150,255,.10), rgba(167,139,250,.05) 40%, transparent 66%);
  transition: opacity .5s ease;
}

.ag-shell { position: relative; z-index: 2; }
.ag-wrap  { width: min(1200px, 92vw); margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS PRIMITIVE — the single reusable surface every component composes
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-glass {
  position: relative;
  background: var(--ag-glass-1);
  border: var(--ag-edge);
  border-radius: var(--ag-r-lg);
  backdrop-filter: var(--ag-blur-md);
  -webkit-backdrop-filter: var(--ag-blur-md);
  box-shadow: var(--ag-sh-1), var(--ag-inner-sheen);
  overflow: hidden;
  isolation: isolate;
}
/* refractive top-edge sheen — the light source reads from top-left */
.ag-glass::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.10), transparent 32%);
  opacity: .8;
}
/* liquid specular streak that shifts with the cursor (--ag-mx normalized 0..1) */
.ag-glass--reflective::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%,
    rgba(255,255,255,.10) 48%, rgba(124,150,255,.12) 52%, transparent 60%);
  transform: translateX(calc((var(--ag-tilt-x, .5) - .5) * 40%));
  transition: transform .3s var(--ag-ease); mix-blend-mode: screen;
}

/* Holographic bordered variant — animated prism edge via mask compositing. */
.ag-glass--holo { border: 1px solid transparent; }
.ag-glass--holo::after {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: var(--ag-edge-holo); background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ag-holo 8s linear infinite; pointer-events: none;
}
@keyframes ag-holo { to { background-position: 300% 300%; } }

/* elevation utility */
.ag-e2 { box-shadow: var(--ag-sh-2), var(--ag-inner-sheen); }
.ag-e3 { box-shadow: var(--ag-sh-3), var(--ag-inner-sheen); }

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING GLASS NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-nav {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 1000; width: min(1120px, 94vw);
  display: flex; align-items: center; gap: var(--ag-sp-3);
  padding: 10px 14px 10px 18px;
  background: var(--ag-glass-2);
  border: var(--ag-edge); border-radius: var(--ag-r-pill);
  backdrop-filter: var(--ag-blur-md); -webkit-backdrop-filter: var(--ag-blur-md);
  box-shadow: var(--ag-sh-2), var(--ag-inner-sheen);
  transition: box-shadow var(--ag-dur-2) var(--ag-ease),
              background var(--ag-dur-2) var(--ag-ease), transform var(--ag-dur-2) var(--ag-spring);
}
.ag-nav.is-scrolled { box-shadow: var(--ag-sh-3), var(--ag-glow-sm), var(--ag-inner-sheen); }
.ag-nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700;
  letter-spacing: var(--ag-tracking); color: var(--ag-on); text-decoration: none; }
.ag-nav__mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--ag-prism); box-shadow: var(--ag-glow-sm); font-size: 15px; }
.ag-nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ag-nav__link { position: relative; padding: 8px 14px; border-radius: var(--ag-r-pill);
  color: var(--ag-on-dim); text-decoration: none; font-size: .92rem; font-weight: 500;
  transition: color var(--ag-dur-1) var(--ag-ease); }
.ag-nav__link:hover, .ag-nav__link.is-active { color: var(--ag-on); }
/* glide pill that tracks the hovered link */
.ag-nav__glide { position: absolute; z-index: -1; border-radius: var(--ag-r-pill);
  background: var(--ag-glass-3); border: var(--ag-edge); opacity: 0;
  transition: all var(--ag-dur-2) var(--ag-spring); }
.ag-nav__toggle { display: none; }

@media (max-width: 860px) {
  .ag-nav__links { position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    background: var(--ag-glass-4); border: var(--ag-edge); border-radius: var(--ag-r-lg);
    backdrop-filter: var(--ag-blur-lg); -webkit-backdrop-filter: var(--ag-blur-lg);
    box-shadow: var(--ag-sh-3);
    opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none;
    transition: opacity var(--ag-dur-2) var(--ag-ease), transform var(--ag-dur-2) var(--ag-spring); }
  .ag-nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .ag-nav__glide { display: none; }
  .ag-nav__toggle { display: grid; place-items: center; margin-left: auto;
    width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
    background: var(--ag-glass-3); border: var(--ag-edge); color: var(--ag-on); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — primary (luminous) · secondary (ghost glass) · magnetic-ready
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-btn { position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--ag-r-pill); font-weight: 600; font-size: .96rem;
  letter-spacing: var(--ag-tracking); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; will-change: transform;
  transition: transform var(--ag-dur-1) var(--ag-spring), box-shadow var(--ag-dur-2) var(--ag-ease),
              filter var(--ag-dur-1) var(--ag-ease); }
.ag-btn--primary { color: #05070f; background: var(--ag-prism); background-size: 180% 180%;
  box-shadow: var(--ag-glow-md), var(--ag-sh-1);
  animation: ag-btn-breathe 9s var(--ag-ease) infinite; }
@keyframes ag-btn-breathe { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.ag-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.06) saturate(1.1);
  box-shadow: var(--ag-glow-lg), var(--ag-sh-2); }
.ag-btn--ghost { color: var(--ag-on); background: var(--ag-glass-2); border: var(--ag-edge-strong);
  backdrop-filter: var(--ag-blur-sm); -webkit-backdrop-filter: var(--ag-blur-sm); }
.ag-btn--ghost:hover { transform: translateY(-2px); background: var(--ag-glass-3);
  box-shadow: var(--ag-glow-sm), var(--ag-sh-1); }
.ag-btn:active { transform: translateY(0) scale(.97); }
/* luminous animated border for the ghost CTA */
.ag-btn--luminous { overflow: hidden; }
.ag-btn--luminous::before { content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; background: var(--ag-edge-holo); background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ag-holo 6s linear infinite; }

/* ═══════════════════════════════════════════════════════════════════════════
   PILLS · CHIPS · SIGNAL INDICATORS
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border-radius: var(--ag-r-pill); font-size: var(--ag-fs-small); font-weight: 600;
  letter-spacing: var(--ag-tracking-wide); text-transform: uppercase;
  color: var(--ag-on-dim); background: var(--ag-glass-1); border: var(--ag-edge); }
.ag-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ag-hi-mint);
  box-shadow: 0 0 10px var(--ag-hi-mint); animation: ag-pulse 2.4s var(--ag-ease) infinite; }
@keyframes ag-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.ag-stat { display: flex; flex-direction: column; gap: 4px; padding: var(--ag-sp-3);
  border-radius: var(--ag-r-md); background: var(--ag-glass-1); border: var(--ag-edge); }
.ag-stat__num { font-family: var(--cg-mono, 'IBM Plex Mono', monospace);
  font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem); font-weight: 700; line-height: 1;
  background: var(--ag-prism); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.ag-stat__label { font-size: var(--ag-fs-small); color: var(--ag-on-dim);
  letter-spacing: var(--ag-tracking-wide); text-transform: uppercase; }
/* signal bars */
.ag-signal { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.ag-signal i { width: 4px; border-radius: 2px; background: var(--ag-prism);
  animation: ag-eq 1.4s var(--ag-ease) infinite; }
.ag-signal i:nth-child(1){height:40%;animation-delay:0s}
.ag-signal i:nth-child(2){height:70%;animation-delay:.2s}
.ag-signal i:nth-child(3){height:100%;animation-delay:.4s}
.ag-signal i:nth-child(4){height:55%;animation-delay:.6s}
@keyframes ag-eq { 0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1)} }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS · FEATURE TILES · MODULES
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-card { padding: var(--ag-sp-4); border-radius: var(--ag-r-lg);
  transition: transform var(--ag-dur-2) var(--ag-spring),
              box-shadow var(--ag-dur-2) var(--ag-ease), background var(--ag-dur-2) var(--ag-ease); }
.ag-card:hover { transform: translateY(-6px); background: var(--ag-glass-3);
  box-shadow: var(--ag-sh-2), var(--ag-glow-sm), var(--ag-inner-sheen); }
.ag-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 24px; margin-bottom: var(--ag-sp-2);
  background: var(--ag-glass-3); border: var(--ag-edge); box-shadow: var(--ag-glow-sm); }
.ag-card__title { font-size: var(--ag-fs-h3); font-weight: 700; margin: 0 0 8px; color: var(--ag-on); }
.ag-card__body { color: var(--ag-on-dim); font-size: .98rem; margin: 0; }

.ag-grid { display: grid; gap: var(--ag-sp-3); }
.ag-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ag-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ag-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .ag-grid--3, .ag-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ag-grid--2, .ag-grid--3, .ag-grid--4 { grid-template-columns: 1fr; } }

/* section divider — a thin luminous line that fades at the ends */
.ag-divider { height: 1px; border: 0; margin: var(--ag-sp-5) 0;
  background: linear-gradient(90deg, transparent, rgba(124,150,255,.4), transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-eyebrow { font-size: var(--ag-fs-small); font-weight: 600; letter-spacing: var(--ag-tracking-wide);
  text-transform: uppercase; color: var(--ag-hi-sky); }
.ag-display { font-family: var(--cg-serif, 'Cormorant Garamond', serif); font-weight: 600;
  font-size: var(--ag-fs-display); line-height: 1.02; letter-spacing: -.01em; margin: 0; }
.ag-h2 { font-family: var(--cg-serif, serif); font-weight: 600; font-size: var(--ag-fs-h2);
  line-height: 1.1; margin: 0 0 var(--ag-sp-2); }
.ag-lede { font-size: var(--ag-fs-h3); color: var(--ag-on-dim); font-weight: 400; margin: 0; }
.ag-prism-text { background: var(--ag-prism); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: ag-shimmer 7s linear infinite; }
@keyframes ag-shimmer { to { background-position: 220% 50%; } }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION SCAFFOLD + SCROLL REVEAL (opt-in via [data-ag-reveal])
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-section { position: relative; padding: var(--ag-sp-7) 0; }
.ag-section--tight { padding: var(--ag-sp-6) 0; }

[data-ag-reveal] { opacity: 0; transform: translateY(28px);
  transition: opacity var(--ag-dur-3) var(--ag-spring), transform var(--ag-dur-3) var(--ag-spring); }
[data-ag-reveal].is-in { opacity: 1; transform: none; }
/* staggered children */
[data-ag-stagger] > * { opacity: 0; transform: translateY(22px);
  transition: opacity var(--ag-dur-3) var(--ag-spring), transform var(--ag-dur-3) var(--ag-spring); }
[data-ag-stagger].is-in > * { opacity: 1; transform: none; }
[data-ag-stagger].is-in > *:nth-child(1){transition-delay:.05s}
[data-ag-stagger].is-in > *:nth-child(2){transition-delay:.13s}
[data-ag-stagger].is-in > *:nth-child(3){transition-delay:.21s}
[data-ag-stagger].is-in > *:nth-child(4){transition-delay:.29s}
[data-ag-stagger].is-in > *:nth-child(5){transition-delay:.37s}
[data-ag-stagger].is-in > *:nth-child(6){transition-delay:.45s}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-hero { position: relative; min-height: 100svh; display: grid; place-items: center;
  text-align: center; padding: 160px 0 var(--ag-sp-6); }
.ag-hero__aura { position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%);
  width: min(70vw, 780px); aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(124,150,255,.28), transparent 60%);
  filter: blur(30px); animation: ag-aura-breathe 8s var(--ag-ease) infinite; }
@keyframes ag-aura-breathe { 0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)} }
.ag-hero__panel { max-width: 860px; }
.ag-hero__cta { display: flex; gap: var(--ag-sp-2); justify-content: center; flex-wrap: wrap;
  margin-top: var(--ag-sp-4); }
.ag-hero__stats { display: flex; gap: var(--ag-sp-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--ag-sp-5); }
.ag-scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: var(--ag-fs-small); color: var(--ag-on-mute); letter-spacing: var(--ag-tracking-wide);
  animation: ag-float 2.6s var(--ag-ease) infinite; }
@keyframes ag-float { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

/* ═══════════════════════════════════════════════════════════════════════════
   FINALE / LAUNCH SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-finale { position: relative; text-align: center; padding: var(--ag-sp-7) var(--ag-sp-3);
  border-radius: var(--ag-r-xl); overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(56,189,248,.16), transparent 60%), var(--ag-glass-2);
  border: var(--ag-edge); box-shadow: var(--ag-sh-3), var(--ag-glow-md);
  backdrop-filter: var(--ag-blur-lg); -webkit-backdrop-filter: var(--ag-blur-lg); }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-footer { padding: var(--ag-sp-5) 0; color: var(--ag-on-mute); font-size: var(--ag-fs-small);
  text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY / REDUCED MOTION — collapse all ambient + kinetic motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ag-aurora, .ag-hero__aura, .ag-glass--holo::after, .ag-btn--primary,
  .ag-btn--luminous::before, .ag-chip__dot, .ag-signal i, .ag-prism-text,
  .ag-scroll-cue { animation: none !important; }
  .ag-cursor-field { display: none; }
  [data-ag-reveal], [data-ag-stagger] > * { opacity: 1 !important; transform: none !important;
    transition: none !important; }
  .ag-card:hover, .ag-btn:hover { transform: none !important; }
}