/* SUCCESS Coin — site layer
   styles.css is a pre-compiled Tailwind build: any utility class that was not
   already used when it was generated has no rule behind it. Anything new the
   site needs is declared here by hand instead, as sc-* classes, so it never
   collides with the generated utilities.

   Theme colours match the original page (glass / gold-text / gold-gradient are
   defined in the inline <style> that home.js renders). */

:root {
  --sc-bg: #050508;
  --sc-panel: #111115;
  --sc-gold: #FFD700;
  --sc-gold-mid: #FFC300;
  --sc-gold-deep: #FF8C00;
  --sc-up: #22c55e;
  --sc-down: #ef4444;
  --sc-line: rgba(255, 255, 255, 0.08);
}

/* ---------- utilities the Tailwind build is missing ----------
   styles.css only contains classes the original page happened to use. These
   are the standard Tailwind rules for the ones the new sections need, written
   out by hand. Verify with the browser before using any further utility: a
   class with no rule behind it fails silently. */

.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.mt-7 { margin-top: 1.75rem; }
.items-baseline { align-items: baseline; }
.text-white\/35 { color: rgba(255, 255, 255, .35); }

@media (min-width: 1024px) {
  .lg\:p-6 { padding: 1.5rem; }
  .lg\:p-8 { padding: 2rem; }
  .lg\:text-\[34px\] { font-size: 34px; }
}

.sc-up { color: var(--sc-up); }
.sc-down { color: var(--sc-down); }
.sc-center { text-align: center; }

/* Section titles: centred on a phone, where a stacked left-aligned block reads
   as unfinished, and left-aligned from the desktop breakpoint up. */
.sc-head { text-align: center; }

.sc-head__sub {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .sc-head { text-align: left; }
  .sc-head__sub { margin-left: 0; margin-right: 0; }
}
.sc-num { font-variant-numeric: tabular-nums; }
.sc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- grids (Tailwind's 4-column utilities are not in the build) ---------- */

.sc-grid-2,
.sc-grid-4 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .sc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sc-analytics {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .sc-analytics { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  /* the swap panel is much shorter than the chart, so the stats run the full
     width underneath instead of leaving a hole beside it */
  .sc-analytics__stats { grid-column: 1 / -1; }
}

/* ---------- platform badges ---------- */

.sc-plat {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--sc-line);
  transition: border-color .3s, background .3s, transform .3s;
}

.sc-plat:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 215, 0, .35);
  transform: translateY(-2px);
}

/* Several of these logos are dark on transparent, so desaturating them makes
   them vanish against the black page. Dim with opacity instead. */
.sc-plat__img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: .75;
  transition: opacity .3s;
}

.sc-plat:hover .sc-plat__img { opacity: 1; }

.sc-plat__name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
}

.sc-plat:hover .sc-plat__name { color: #fff; }

/* ---------- chart ---------- */

.sc-chart {
  height: 240px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--sc-line);
  overflow: hidden;
}

.sc-chart__svg { display: block; width: 100%; height: 100%; }

.sc-chart__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 13px;
  color: rgba(255, 255, 255, .3);
}

.sc-chip {
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--sc-line);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}

.sc-chip:hover { color: #fff; }

.sc-chip--on {
  color: #050508;
  background: linear-gradient(135deg, var(--sc-gold), var(--sc-gold-deep));
  border-color: transparent;
}

/* ---------- stat tiles ---------- */

.sc-tile {
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--sc-line);
}

.sc-tile__label {
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
}

.sc-tile__value {
  margin-top: .25rem;
  font-size: 16px;
  font-weight: 700;
}

/* ---------- buttons ---------- */

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 1.1rem;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--sc-line);
  transition: color .2s, background .2s, transform .2s;
}

.sc-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); transform: translateY(-1px); }

.sc-btn--gold {
  color: #050508;
  background: linear-gradient(135deg, var(--sc-gold), var(--sc-gold-deep));
  border-color: transparent;
}

.sc-btn--gold:hover { color: #050508; }

/* A row of links sitting directly under a dense tile grid reads as part of the
   grid; a rule and some air separate it into the panel's footer. */
.sc-panelActions {
  margin-top: .5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--sc-line);
}

/* ---------- FAQ ---------- */

.sc-faq { display: flex; flex-direction: column; gap: .75rem; }

.sc-faq__item {
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--sc-line);
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}

.sc-faq__item.is-open {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 215, 0, .18);
}

.sc-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sc-faq__qText { font-size: 15px; font-weight: 600; }

.sc-faq__mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  color: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.sc-faq__item.is-open .sc-faq__mark {
  color: #050508;
  background: var(--sc-gold);
  border-color: var(--sc-gold);
}

.sc-faq__a {
  padding: 0 1.35rem 1.35rem;
  margin-top: -.25rem;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .5);
}

.sc-faq__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sc-gold);
  background: rgba(255, 215, 0, .06);
  border: 1px solid rgba(255, 215, 0, .25);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.sc-faq__more:hover {
  color: #050508;
  background: linear-gradient(135deg, var(--sc-gold), var(--sc-gold-deep));
  border-color: transparent;
  transform: translateY(-2px);
}

/* ---------- wallets row ---------- */

/* Full-bleed so the logos travel in from the screen edges rather than from an
   invisible 1280px boundary, with the ends faded out so nothing pops. */
.sc-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.sc-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 4rem;
  padding-right: 4rem;      /* keeps the gap even across the loop seam */
  animation: scMarquee 38s linear infinite;
  will-change: transform;
}

/* one full run is exactly half the track, so -50% lands on an identical frame */
@keyframes scMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.sc-marquee:hover .sc-marquee__track { animation-play-state: paused; }

.sc-wallet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 .35rem;
  transition: transform .3s ease;
}

/* The logos are full-colour lockups on transparent; muting them to a soft
   monochrome keeps the row calm and lets the gold theme stay dominant, and
   hover brings the real brand colour back. */
.sc-wallet__img {
  max-height: 100%;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.9) opacity(.55);
  transition: filter .3s ease;
}

.sc-wallet:hover { transform: translateY(-3px); }
.sc-wallet:hover .sc-wallet__img { filter: none; }

/* ---------- closing call to action ---------- */

/* The page behind this is near-black, so a translucent wash disappears into it.
   The card sits on its own opaque base and only then takes the warm gradient,
   which is what makes it read as a distinct panel rather than a stain. */
.sc-cta {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(255, 200, 60, .38);
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(255, 205, 90, .42), transparent 62%),
    linear-gradient(135deg, #2A1904 0%, #3E2606 42%, #1C1204 100%);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 215, 0, .08),
    inset 0 1px 0 rgba(255, 235, 170, .18);
}

.sc-cta__inner {
  position: relative;
  z-index: 1;
  padding: 3.5rem 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .sc-cta__inner { padding: 4.5rem 4.5rem; }
}

.sc-cta__title {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #fff;
}

@media (min-width: 768px) {
  .sc-cta__title { font-size: 44px; }
}

.sc-cta__sub {
  margin: 1rem auto 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 245, 220, .82);
}

.sc-cta__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}

.sc-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 1.4rem;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  transition: transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}

.sc-cta__btn--primary {
  color: #050508;
  background: linear-gradient(120deg, var(--sc-gold) 0%, var(--sc-gold-mid) 45%, var(--sc-gold-deep) 100%);
  box-shadow: 0 10px 30px rgba(255, 165, 0, .45), 0 0 0 1px rgba(255, 240, 190, .35) inset;
}

.sc-cta__btn--primary:hover { transform: translateY(-2px); filter: brightness(1.07); }

.sc-cta__btn--ghost {
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .38);
}

.sc-cta__btn--ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 215, 0, .45);
}

.sc-cta__arrow { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .sc-wallet:hover,
  .sc-cta__btn:hover { transform: none; }
}

/* ---------- contract details ---------- */

.sc-copy {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--sc-line);
  cursor: pointer;
  transition: color .2s, background .2s;
}

.sc-copy:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* An ellipsised address is useless for verification, so wrap it instead — it
   takes two lines on a phone and one on a desktop. */
.sc-addr { word-break: break-all; line-height: 1.45; }

.sc-fact { display: flex; align-items: center; gap: .4rem; }

.sc-fact__chip {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  color: #08131F;
  background: linear-gradient(135deg, var(--sc-gold), #E0A020);
}

/* full width inside the panel, unlike the pill-sized buttons elsewhere */
.sc-contract__add { width: 100%; height: 46px; }

/* ---------- hero order on small screens ----------
   Stacked, the copy pushed the coin most of a screen down. Leading with the
   artwork gives the page an image above the fold on a phone; the two-column
   desktop layout is untouched. */

@media (max-width: 1023px) {
  .sc-hero__art { order: -1; }
}

/* ---------- fx canvases ---------- */

/* The hero section is max-w-[1280px] and centred, so on a wider screen a canvas
   pinned to it stops dead at the section edge and the glow reads as a rectangle.
   Both canvases break out to the full viewport width instead, and the section
   stops clipping so they can. The page wrapper still has overflow-x: hidden, so
   nothing escapes horizontally. */
.sc-fx-host { position: relative; overflow: visible; }

.sc-fx-canvas,
.sc-fx-dust {
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

/* Sits behind the hero content; the hero's own children are all z-10 or above.

   No mix-blend-mode here. `screen` looked right in Chromium but WebKit paints
   the blended compositing layer's own bounds, which showed up as a faint
   rectangle around the coin on iPhones. Against a #050508 page the two modes
   are visually the same for a warm translucent overlay, so plain alpha
   compositing gets the look without the artefact.

   Both canvases carry the same soft radial mask: a canvas is a rectangle, and
   feathering its edges to zero is what guarantees no straight line can appear
   no matter how the browser composites it. */
.sc-fx-canvas,
.sc-fx-dust {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 45%, #000 30%, transparent 82%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 45%, #000 30%, transparent 82%);
}

.sc-fx-canvas { opacity: .68; }
.sc-fx-dust { opacity: .9; }

/* ---------- sparkles around the coin ---------- */

/* Must out-specify `.sc-coin > div` above, which would otherwise force
   position:relative and drop the whole layer into normal flow. */
.sc-coin > .sc-sparks {
  position: absolute;
  inset: -4%;
  pointer-events: none;
  z-index: 2;
}

.sc-spark {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  opacity: 0;
  transform: scale(var(--s, 1)) rotate(0deg);
  animation: scSpark 5.5s ease-in-out infinite;
}

/* two crossed bars make a four-point star without an image */
.sc-spark::before,
.sc-spark::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: linear-gradient(currentColor, currentColor);
  color: #FFF6D0;
  border-radius: 999px;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.576));
}

.sc-spark::before { width: 100%; height: 1.6px; }
.sc-spark::after { width: 1.6px; height: 100%; }

@keyframes scSpark {
  0%, 72%, 100% { opacity: 0; transform: scale(calc(var(--s, 1) * .35)) rotate(0deg); }
  80% { opacity: 1; transform: scale(var(--s, 1)) rotate(45deg); }
  88% { opacity: .35; transform: scale(calc(var(--s, 1) * .7)) rotate(80deg); }
}

.sc-fx-burst {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
}

/* ---------- reveal on scroll ----------
   Scroll-driven animations need no JS and no observer. Browsers without
   animation-timeline simply show the sections, which is the correct fallback. */

@keyframes scReveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  .sc-reveal {
    animation: scReveal linear both;
    animation-timeline: view();
    /* Finish while the section is still entering. A range that ends deeper into
       `cover` leaves tall sections — the closing CTA especially — sitting at
       partial opacity for the whole time they are actually being read. */
    animation-range: entry 0% entry 45%;
  }
}

/* ---------- scroll progress bar ---------- */

.sc-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  background: linear-gradient(90deg, var(--sc-gold), var(--sc-gold-deep) 55%, #FFF3C4);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.44);
}

@supports (animation-timeline: scroll()) {
  .sc-progress {
    animation: scProgressGrow linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes scProgressGrow {
  to { transform: scaleX(1); }
}

/* ---------- pointer spotlight on cards ---------- */

.sc-spot {
  position: relative;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* A soft gold pool that tracks the cursor. Alpha is low enough to warm the
   card without washing out the text underneath it. */
.sc-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 215, 0, 0.104), transparent 62%);
}

.sc-spot:hover::after { opacity: 1; }

.sc-spot:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 0, .3);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.36), 0 0 26px rgba(255, 215, 0, 0.08);
}

/* ---------- gold heading sheen ---------- */

.gold-text {
  background-image: linear-gradient(100deg,
      #FFD700 0%, #FFA500 30%, #FFF6C8 46%, #FFA500 62%, #FFD700 100%);
  background-size: 260% 100%;
  animation: scSheen 7s ease-in-out infinite;
}

@keyframes scSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- back to top ---------- */

.sc-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: #050508;
  background: linear-gradient(135deg, var(--sc-gold), var(--sc-gold-deep));
  box-shadow: 0 6px 26px rgba(255, 215, 0, 0.28);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 120;
}

.sc-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sc-top:hover { transform: translateY(-2px); }

/* ---------- hero coin ----------
   The coin already floats and pulses from home.js. These add the depth:
   a slow conic halo turning behind it, a thin ring orbiting the rim, and a
   light sweep that crosses the face every few seconds. */

/* The coin's column in home.js is overflow:hidden and leaves only ~13px around
   the rim, so any glow wider than that gets sliced into a hard-edged rectangle.
   Unclipping the column lets the halo fall off naturally; the hero <section>
   above it still clips, so nothing escapes the page. */
.sc-hero__art { overflow: visible; }
div:has(> .sc-coin) { overflow: visible; }

.sc-coin { position: relative; }

.sc-coin > div { position: relative; z-index: 1; }

.sc-coin::before {
  content: '';
  position: absolute;
  inset: -16%;
  border-radius: 999px;
  background: conic-gradient(from 0deg,
      rgba(255, 215, 0, 0) 0deg,
      rgba(255, 215, 0, 0.44) 55deg,
      rgba(255, 140, 0, 0.16) 125deg,
      rgba(255, 215, 0, 0) 195deg,
      rgba(255, 215, 0, 0.32) 295deg,
      rgba(255, 215, 0, 0) 360deg);
  filter: blur(30px);
  animation: scCoinSpin 16s linear infinite;
  pointer-events: none;
}

.sc-coin::after {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 0, .18);
  border-top-color: rgba(255, 215, 0, .9);
  border-right-color: rgba(255, 215, 0, .45);
  animation: scCoinSpin 9s linear infinite;
  pointer-events: none;
}

@keyframes scCoinSpin {
  to { transform: rotate(360deg); }
}

/* Measured, not guessed: the faint square on iPhones was 275.6 CSS px across,
   calibrated against the 48px .grid-bg squares in the same screenshot. That is
   .sc-coin__face exactly (280px coin - 2px of gold rim on each side).

   The cause is compositing, not blending. Anything inside this element that
   gets its own compositing layer -- a `filter`, an animated `transform`, a
   `will-change` hint -- is clipped by WebKit to the RECTANGLE of this box
   instead of to its border-radius. Whatever that layer paints outside the
   circle then lands in the four corners, and the corners are what you see.

   Chromium clips composited layers to the rounded shape correctly, which is
   why this never reproduced on the desktop and cost several rounds to find.

   So the rule for this element is simple: nothing inside it may be promoted.
   No filter, no animated transform, no will-change. The two offenders were:

     * the coin <img>, which carried drop-shadow(0 0 40px gold) -- always on,
       which is why the square was in every screenshot;
     * the shine sweep below, which animated translateX.

   Both are gone. The lost glow comes back as an inset shadow, which paints
   inside the border-radius as part of this element's own background and needs
   no layer of its own. */
.sc-coin__face {
  position: relative;
  box-shadow:
    inset 0 0 46px rgba(255, 215, 0, .30),
    inset 0 0 16px rgba(255, 190, 60, .20);
}

/* The sweep now moves its gradient instead of the element. background-position
   is not a compositable property, so this stays on the main thread, inside the
   layer, and clipped by its own border-radius on every engine. Visually it is
   the same light crossing the face every six seconds. */
.sc-coin__face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-image: linear-gradient(115deg,
      transparent 44%,
      rgba(255, 250, 225, .40) 50%,
      transparent 56%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  pointer-events: none;
  animation: scCoinShine 6s ease-in-out infinite 1.4s;
}

@keyframes scCoinShine {
  0%, 70%   { background-position: 100% 0; }
  92%, 100% { background-position: 0% 0; }
}

/* The coin halo, ring, shine and sparkles keep animating regardless of
   prefers-reduced-motion: they are slow, low-contrast and never flash, and the
   brand identity of the page rests on them. The motion that setting really
   guards against — the pointer tilt, the swap burst and the scroll reveals —
   stays switched off in fx.js and in the reveal rule above. */

/* The "Buy Token" pill is rounded with overflow:hidden, and its highlight used
   to sweep with an animated transform -- the same shape as the hero coin bug:
   composited layer, rectangular clip on WebKit, white bleeding into the pill's
   rounded ends. This moves the gradient instead, and border-radius:inherit
   makes the highlight round on its own so it never depends on the clip. */
.sc-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(115deg,
      transparent 42%,
      rgba(255, 255, 255, .34) 50%,
      transparent 58%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  animation: scPillShine 2.5s linear infinite;
}

@keyframes scPillShine {
  0%        { background-position: 100% 0; }
  55%, 100% { background-position: -25% 0; }
}

/* ---------- security / audit ---------- */

.sc-sec__lede { max-width: 620px; margin-left: auto; margin-right: auto; }

.sc-sec {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .sc-sec { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

.sc-sec__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sc-sec__shield {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--sc-gold);
  background: radial-gradient(circle at 50% 40%, rgba(255, 215, 0, 0.144), rgba(255, 215, 0, 0.032));
  border: 1px solid rgba(255, 215, 0, 0.24);
  box-shadow: 0 0 44px rgba(255, 215, 0, 0.115);
}

.sc-sec__shieldIcon { width: 38px; height: 38px; }

.sc-sec__addr {
  margin-top: 1.25rem;
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--sc-line);
  transition: color .2s, border-color .2s;
}

.sc-sec__addr:hover { color: #fff; border-color: rgba(255, 215, 0, .4); }

.sc-sec__grid {
  display: grid;
  gap: 1.4rem 2rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .sc-sec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sc-sec__item { display: flex; gap: .75rem; align-items: flex-start; }

.sc-sec__tick {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--sc-gold);
  background: rgba(255, 215, 0, .1);
  border: 1px solid rgba(255, 215, 0, .28);
}

.sc-sec__tick svg { width: 12px; height: 12px; }

.sc-sec__itemTitle { font-size: 15px; font-weight: 700; }

.sc-sec__itemBody {
  margin-top: .3rem;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .45);
}

.sc-sec__cta {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 48px;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: #050508;
  background: linear-gradient(135deg, var(--sc-gold), var(--sc-gold-deep));
  box-shadow: 0 0 34px rgba(255, 215, 0, 0.224);
  transition: transform .2s, filter .2s;
}

.sc-sec__cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.sc-sec__arrow { font-size: 13px; }

.sc-sec__reportHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.sc-sec__sev { display: flex; gap: 1.5rem; }
.sc-sec__sevN { font-size: 20px; font-weight: 800; }
.sc-sec__sevK { font-size: 11px; color: rgba(255, 255, 255, .35); }

.sc-sec__note {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--sc-line);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .45);
}

/* ---------- swap panel ---------- */

.sc-swap { display: flex; flex-direction: column; gap: .75rem; }

.sc-swap__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sc-swap__title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.sc-swap__sub { margin-top: .15rem; font-size: 12px; color: rgba(255, 255, 255, .35); }

.sc-swap__acct {
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sc-gold);
  background: rgba(255, 215, 0, .08);
  border: 1px solid rgba(255, 215, 0, .25);
}

.sc-swap__field {
  padding: .9rem 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--sc-line);
}

.sc-swap__fieldTop {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
  min-height: 15px;
}

.sc-swap__fieldRow {
  margin-top: .5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sc-swap__input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.sc-swap__input::placeholder { color: rgba(255, 255, 255, .2); }
.sc-swap__input--out { color: rgba(255, 255, 255, .85); overflow: hidden; text-overflow: ellipsis; }

.sc-swap__tokenBox {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .5rem .35rem .4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--sc-line);
  flex: 0 0 auto;
}

.sc-swap__icon {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--sc-gold), var(--sc-gold-deep));
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.28), 0 0 12px rgba(255, 215, 0, 0.2);
  overflow: hidden;
  transition: box-shadow .3s, transform .3s;
}

.sc-swap__iconLetter {
  grid-area: 1 / 1;
  font-size: 12px;
  font-weight: 900;
  color: #050508;
}

.sc-swap__iconImg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

/* A light sweep that crosses the coin on hover. It moves its gradient rather
   than itself, for the same reason as the hero coin: a transform inside a
   rounded overflow clip is composited on its own layer, and WebKit clips that
   layer to the RECTANGLE, so the sweep would paint into the icon's corners.
   background-position is never promoted, and inset:0 + border-radius:inherit
   means the pseudo-element is already round on its own. */
.sc-swap__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .75) 50%, transparent 58%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  transition: background-position .65s ease;
}

.sc-swap__tokenBox:hover .sc-swap__icon {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.48), 0 0 18px rgba(255, 215, 0, 0.4);
}

.sc-swap__tokenBox:hover .sc-swap__icon::after { background-position: 0% 0; }

.sc-swap__select {
  background: none;
  border: 0;
  outline: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  padding-right: .2rem;
}

.sc-swap__select option { background: var(--sc-panel); color: #fff; }

.sc-swap__max {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--sc-gold);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 .15rem;
}

.sc-swap__flipRow { display: flex; justify-content: center; margin: -1.35rem 0; position: relative; z-index: 1; }

.sc-swap__flip {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #050508;
  background: linear-gradient(135deg, var(--sc-gold), var(--sc-gold-deep));
  border: 3px solid var(--sc-panel);
  cursor: pointer;
  transition: transform .2s;
}

.sc-swap__flip:hover { transform: rotate(180deg); }

.sc-swap__details {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .1rem .25rem;
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
}

.sc-swap__details > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.sc-swap__details > div > span:last-child {
  color: rgba(255, 255, 255, .75);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sc-swap__slip { display: flex; gap: .3rem; }

.sc-swap__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .01em;
  color: #050508;
  background: linear-gradient(135deg, var(--sc-gold), var(--sc-gold-deep));
  cursor: pointer;
  transition: transform .2s, filter .2s;
}

.sc-swap__cta:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }

.sc-swap__cta:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .06);
}

.sc-swap__status {
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
}

.sc-swap__status a { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .sc-plat, .sc-btn, .sc-chip, .sc-swap__cta, .sc-swap__flip { transition: none; }
  .sc-plat:hover, .sc-btn:hover, .sc-swap__cta:hover:not(:disabled) { transform: none; }
  .sc-swap__flip:hover { transform: none; }
}