/* =====================================================================
   Glow layer for the landing + terms pages: gradients and glow FX on the
   same palette (paper, ink, signal orange, graduation green). Loaded after
   styles.css. Animations stop under prefers-reduced-motion.
   ===================================================================== */
:root {
  --amber: #FFB13B;
  --grad-signal: linear-gradient(135deg, #FF4F1A 0%, #FF7A2F 55%, #FFB13B 100%);
  --grad-signal-x: linear-gradient(90deg, #FF4F1A 0%, #FF7A2F 60%, #FFB13B 100%);
  --grad-signal-soft: linear-gradient(135deg, #FFE0D2 0%, #FFEBD6 100%);
  --grad-ink: linear-gradient(160deg, #25221E 0%, #141412 55%, #0C0B0A 100%);
  --grad-good: linear-gradient(135deg, #1D7A4B 0%, #34B27A 100%);
  --glow-signal: 0 12px 30px -12px rgba(255, 79, 26, .75), 0 0 0 1px rgba(255, 122, 47, .25);
  --glow-signal-lg: 0 30px 80px -30px rgba(255, 79, 26, .65);
  --glow-good: 0 10px 28px -12px rgba(29, 122, 75, .7);
  --edge-glow: linear-gradient(140deg, rgba(255, 79, 26, .55), rgba(216, 209, 194, .9) 32%, rgba(216, 209, 194, .9) 68%, rgba(255, 177, 59, .55));
}

body {
  background-image:
    radial-gradient(900px 560px at 88% -6%, rgba(255, 122, 47, .16), transparent 62%),
    radial-gradient(760px 520px at -12% 22%, rgba(255, 177, 59, .10), transparent 60%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
::selection { background: rgba(255, 122, 47, .28); }

/* nav */
/* the floating nav capsule: src/shared/nav-glow.css */
.mark-dot { filter: drop-shadow(0 0 3px rgba(255, 79, 26, .8)); }

/* buttons */
.btn-ink { background: var(--grad-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 26px -16px rgba(20, 20, 18, .9); }
.btn-ink:hover { background: var(--grad-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--glow-signal); }
.btn-ink.is-soon:hover { background: var(--grad-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 26px -16px rgba(20, 20, 18, .9); }
.btn-glow {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-signal); color: var(--ink); box-shadow: var(--glow-signal);
}
.btn-glow::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-glow:hover { box-shadow: 0 18px 44px -14px rgba(255, 79, 26, .85), 0 0 0 1px rgba(255, 177, 59, .45); }
.btn-glow:hover::after { transform: translateX(120%); }
.btn-signal { background: var(--grad-signal); box-shadow: var(--glow-signal); }
.btn-signal:hover { background: var(--grad-signal); box-shadow: 0 18px 44px -14px rgba(255, 79, 26, .85); }
.btn-line:hover { box-shadow: 0 12px 26px -16px rgba(20, 20, 18, .9); }
.btn-line.is-soon:hover { box-shadow: none; }

/* hero */
.hero { isolation: isolate; overflow-x: clip; }
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: max(-80px, calc(50% - 760px)); top: 4%;
  width: min(760px, 70vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 79, 26, .26), rgba(255, 177, 59, .12) 55%, transparent 76%);
  filter: blur(8px);
  animation: glow-drift 14s ease-in-out infinite alternate;
}
@keyframes glow-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-30px, 24px, 0) scale(1.06); } }
.hl {
  background: var(--grad-signal-x); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 22px rgba(255, 79, 26, .32));
}
.eyebrow { box-shadow: 0 10px 26px -18px rgba(255, 79, 26, .8); }

.curve-card {
  border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--edge-glow) border-box;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 40px 80px -48px rgba(60, 40, 10, .5), 0 30px 90px -50px rgba(255, 79, 26, .55);
}
.c-trail { stroke: url(#ccTrail); filter: drop-shadow(0 0 6px rgba(255, 79, 26, .55)); }
.c-area { fill: url(#ccArea); opacity: 1; }
.c-dot { fill: #FF5A22; filter: drop-shadow(0 0 7px rgba(255, 79, 26, .9)); }
.c-ring { fill: none; stroke: #FF7A2F; stroke-width: 2; opacity: .6; transform-box: fill-box; transform-origin: center; animation: ring-pulse 2s var(--ease) infinite; }
@keyframes ring-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(3); opacity: 0; } }
[data-state="grad"] .c-trail { stroke: url(#ccTrailGood); filter: drop-shadow(0 0 6px rgba(52, 178, 122, .55)); }
[data-state="grad"] .c-area { fill: url(#ccAreaGood); }
[data-state="grad"] .c-dot { fill: #2FA36A; filter: drop-shadow(0 0 7px rgba(52, 178, 122, .9)); }
[data-state="grad"] .c-ring { stroke: #34B27A; }
input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #FF4F1A 0%, #FFB13B var(--p, 0%), var(--paper-2) var(--p, 0%));
}
input[type="range"]::-moz-range-progress { background: var(--grad-signal-x); }
input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ink), 0 0 0 6px rgba(255, 79, 26, .14), 0 6px 16px -4px rgba(255, 79, 26, .6); }
[data-state="grad"] input[type="range"]::-webkit-slider-runnable-track { background: var(--grad-good); }
.state-pill { box-shadow: 0 6px 18px -10px rgba(255, 79, 26, .8); }
[data-state="grad"] .state-pill { box-shadow: var(--glow-good); }
.chip[aria-pressed="true"] { background: var(--grad-ink); box-shadow: 0 8px 20px -12px rgba(255, 79, 26, .9); }

/* Built with Meteora */
.powered { padding: 0 0 clamp(56px, 8vw, 96px); }
.powered-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 18px 24px; border-radius: 18px; border: 1px solid transparent;
  background: linear-gradient(rgba(251, 250, 246, .88), rgba(251, 250, 246, .88)) padding-box, var(--edge-glow) border-box;
  box-shadow: 0 24px 60px -44px rgba(255, 79, 26, .7);
}
.built-with { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; }
.built-with img { flex: none; filter: drop-shadow(0 0 10px rgba(245, 75, 0, .45)); transition: transform .3s var(--ease), filter .3s; }
.built-with:hover img { transform: rotate(-8deg) scale(1.06); filter: drop-shadow(0 0 14px rgba(245, 75, 0, .7)); }
.built-with b { font-weight: 800; }
.built-with-lg { font-size: 20px; letter-spacing: -.01em; }
.built-with-sm { margin-left: 12px; font-size: 13px; color: var(--ink-2); }
.powered-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.powered-list li { padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.foot-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* compare */
.cmp-new { background: var(--grad-ink); box-shadow: var(--glow-signal-lg); }
.cmp-new li::before { background: var(--grad-signal); box-shadow: 0 0 10px rgba(255, 79, 26, .6); }

/* how it works stage */
.ca { box-shadow: inset 0 -2px 0 var(--signal), 0 0 14px -2px rgba(255, 79, 26, .45); }
.ov { background: var(--grad-ink); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 122, 47, .12), 0 24px 60px -28px rgba(255, 79, 26, .55); }
.ov-open, .ov-buy { background: var(--grad-signal); box-shadow: var(--glow-signal); }
.ov-buy:hover { background: var(--grad-signal); filter: brightness(1.05); }
.bar i { background: var(--grad-signal-x); box-shadow: 0 0 12px rgba(255, 79, 26, .6); }
.tg.is-on { background: var(--grad-signal); box-shadow: 0 0 10px rgba(255, 79, 26, .5); }
.amt[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--signal), 0 0 16px -4px rgba(255, 79, 26, .7); }

/* curve states */
.st-card { transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.st-card:hover { transform: translateY(-3px); border-color: rgba(255, 122, 47, .45); box-shadow: 0 26px 60px -40px rgba(255, 79, 26, .7); }
.st-grad .st-node { background: var(--grad-good); box-shadow: var(--glow-good); }
.st:not(.st-grad) .st-node { box-shadow: 0 8px 20px -12px rgba(255, 79, 26, .7); }
.f-hot { filter: drop-shadow(0 0 6px rgba(255, 79, 26, .6)); }
.f-trail { filter: drop-shadow(0 0 4px rgba(255, 79, 26, .5)); }
.f-trail-good { filter: drop-shadow(0 0 4px rgba(52, 178, 122, .5)); }
.f-dot { filter: drop-shadow(0 0 6px rgba(255, 79, 26, .8)); }
.f-dot-good { filter: drop-shadow(0 0 6px rgba(52, 178, 122, .8)); }

/* toolkit + roadmap */
.spec-wrap { box-shadow: 0 30px 70px -50px rgba(60, 40, 10, .45); }
.p1 { background: var(--grad-signal-soft); }
.p-live { position: relative; padding-left: 22px; background: linear-gradient(135deg, #D8EDDF, #E6F5EB); box-shadow: var(--glow-good); }
.p-live::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #34B27A; animation: live-ping 2s infinite; }
@keyframes live-ping { 0% { box-shadow: 0 0 0 0 rgba(52, 178, 122, .6); } 70% { box-shadow: 0 0 0 6px rgba(52, 178, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 178, 122, 0); } }
.road-track i { background: linear-gradient(90deg, #34B27A 0%, #FF4F1A 60%, #FFB13B 100%); box-shadow: 0 0 14px rgba(255, 79, 26, .55); }
.stop.is-done::before { background: var(--grad-good); box-shadow: var(--glow-good); }
.stop.is-now::before { background: var(--grad-signal); box-shadow: 0 0 0 6px var(--signal-soft), 0 0 18px rgba(255, 79, 26, .7); }

/* partners band */
.band { overflow: hidden; isolation: isolate; background: var(--grad-ink); }
.band::before, .band::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.band::before { width: 620px; height: 620px; right: -160px; top: -260px; background: radial-gradient(closest-side, rgba(255, 79, 26, .32), transparent 72%); }
.band::after { width: 520px; height: 520px; left: -200px; bottom: -280px; background: radial-gradient(closest-side, rgba(255, 177, 59, .16), transparent 72%); }
.pcard { transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.pcard:hover { transform: translateY(-2px); border-color: rgba(255, 122, 47, .5); box-shadow: 0 24px 50px -30px rgba(255, 79, 26, .7); }
.pnum { background: linear-gradient(160deg, rgba(255, 79, 26, .16), rgba(255, 177, 59, .06)); box-shadow: inset 0 0 0 1px rgba(255, 122, 47, .25); }

/* $CTAP card */
.ctap-card { position: relative; overflow: hidden; isolation: isolate; background: var(--grad-ink); box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .7), 0 30px 90px -40px rgba(255, 79, 26, .5); }
.ctap-card::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 79, 26, .3), transparent 72%); pointer-events: none; }
.ctap-bar i { background: var(--grad-signal-x); box-shadow: 0 0 14px rgba(255, 79, 26, .7); }
.ctap-card[data-state="grad"] .ctap-bar i { background: var(--grad-good); box-shadow: var(--glow-good); }
.ctap-card .btn-ink, .ctap-card .btn-ink:hover, .ctap-card .btn-ink.is-soon:hover { background: var(--grad-signal); box-shadow: var(--glow-signal); }

/* CTA */
.cta-box {
  border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--edge-glow) border-box;
  box-shadow: 0 40px 100px -60px rgba(255, 79, 26, .6);
}
.cta-curve path { stroke: url(#ctaGrad); opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 79, 26, .45)); }
.cta-curve circle { fill: #FF7A2F; opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 79, 26, .9)); }

/* FAQ + footer */
details[open] .plus { background: var(--grad-ink); box-shadow: 0 8px 18px -10px rgba(255, 79, 26, .8); }
.foot-word { background: linear-gradient(180deg, #141412 30%, #4B4840 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-word span { background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255, 79, 26, .45)); }

@media (max-width: 960px) {
  /* On one-column layouts the halo would sit on top of the copy: the card keeps its own glow. */
  .hero::before { display: none; }
}
@media (max-width: 720px) {
  .powered-row { padding: 16px; }
  .built-with-lg { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .c-ring, .p-live::before { animation: none !important; }
  .c-ring { display: none; }
}