/* ═══════════════════════════════════════════════════════════════════════════
   ENI — SITE REFRESH
   Loads after eni.css. Every rule here is additive: delete the <link> in the
   three HTML files and the site returns exactly to how it was.

   The idea: the loader has a signature — a violet→magenta action gradient with
   a soft glow, sitting on violet-biased near-black. The site had none of that
   on its buttons, so the page and the product looked like different companies.
   This carries the loader's language onto the site's primary surfaces.

   It also settles a conflict the palette already had. eni.css says --acid means
   "protected / active / locked". But the acid was also being spent on Buy key
   and on every button hover, which is decoration — and once a colour decorates,
   it stops meaning anything. Here, commercial and primary actions move to the
   violet gradient, and acid goes back to meaning one thing.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* the loader's action gradient, verbatim */
  --act:    linear-gradient(100deg, #6E2BD0 0%, #9B3BE0 46%, #DC4FD6 100%);
  --act-lo: 0 0 0 1px rgba(255,255,255,.10) inset, 0 10px 30px -10px rgba(150,50,220,.80);
  --act-hi: 0 0 0 1px rgba(255,255,255,.18) inset, 0 16px 44px -10px rgba(185,70,245,.95);
}

/* ── 1. PRIMARY ACTION ─────────────────────────────────────────────────────
   Add class="btn--act" to any .btn that should read as "this is the thing to
   press". Used on both Download loader buttons and on Buy key.              */
.btn--act{
  border-color:transparent;
  background:var(--act);
  background-size:170% 100%;
  background-position:0 0;
  color:#fff;
  box-shadow:var(--act-lo);
  transition:background-position .5s cubic-bezier(.4,0,.2,1),
             box-shadow .35s, filter .35s, transform .12s;
}
.btn--act .btn__fill{ display:none; }          /* the acid wipe is not wanted here */
.btn--act:hover{
  color:#fff; border-color:transparent;
  background-position:100% 0;
  filter:brightness(1.07);
  box-shadow:var(--act-hi);
}
.btn--act:active{ transform:translateY(1px) scale(.995); }
.btn--act svg{ stroke:currentColor; }

/* the shimmer from the loader's Activate button — one band, slow, never on
   more than one element in view at a time */
.btn--act::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:34%;
  z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation:eniSheen 3.4s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes eniSheen{
  0%       { transform:translateX(-140%) skewX(-18deg); }
  62%,100% { transform:translateX(420%)  skewX(-18deg); }
}
/* the hero one is the loudest thing on the page, so nothing else competes */
.hero .btn--act{ box-shadow:var(--act-lo), 0 0 90px -30px rgba(190,80,245,.9); }

/* ── 2. NAV ───────────────────────────────────────────────────────────────
   Buy key was acid-outlined, which spent the state colour on a purchase.  */
.nav__right .btn--act{ padding:9px 16px; }
.nav.is-stuck{ backdrop-filter:blur(14px); }

/* the status pill reads as instrumentation, so give it the mono/ink treatment
   the loader uses for the same job */
.status{
  border-radius:999px; background:rgba(255,255,255,.03);
  transition:border-color .4s, color .4s, background .4s;
}
.status.is-live{ background:rgba(198,242,78,.07); border-color:rgba(198,242,78,.34); }

/* ── 3. SURFACES ──────────────────────────────────────────────────────────
   The loader's panels are a violet-biased fill with a hairline, never a drop
   shadow. Matching that here is most of what makes the two feel related.   */
.step, .st, .odo__cell{
  border-radius:12px;
  background:
    linear-gradient(150deg, rgba(123,47,213,.075), transparent 62%),
    var(--ink);
  transition:border-color .4s, background .4s, transform .4s;
}
.step{ border-color:var(--line); }
.step:hover{
  border-color:rgba(139,64,255,.55);
  background:linear-gradient(150deg, rgba(123,47,213,.14), transparent 62%), var(--ink-2);
}
.step--hi{ border-color:rgba(198,242,78,.34); }   /* 03 is the "covered" step: acid earns it */
.step--end{ background:none; border-color:transparent; }

/* the status board sits directly under the loader preview, so it should feel
   like the same object */
.st{ border-color:var(--line); }
.st__row{ transition:background .3s; }
.st__row:hover{ background:rgba(255,255,255,.02); }

/* ── 4. SECTION RHYTHM ────────────────────────────────────────────────────
   A soft violet bloom behind the big moments, echoing the glow behind the
   loader window. Very low alpha — it should register as depth, not as fog.  */
.status-sec, .get{ position:relative; isolation:isolate; }
.status-sec::before, .get::before{
  content:""; position:absolute; left:50%; top:-6%;
  width:min(1100px, 92%); height:60%;
  transform:translateX(-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
             rgba(139,64,255,.16), rgba(123,47,213,.05) 45%, transparent 72%);
  filter:blur(26px);
}

/* ── 5. TYPE ──────────────────────────────────────────────────────────────
   The kicker is the site's most repeated element; tightening it lifts every
   section at once. */
.kick{ letter-spacing:.22em; }
.kick__sq{ box-shadow:0 0 10px rgba(198,242,78,.55); }

/* ── 6. FOCUS ─────────────────────────────────────────────────────────────
   eni.css leans on hover; keyboard users need the same clarity.            */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--orchid); outline-offset:3px; border-radius:4px;
}

/* ── 7. MOTION BUDGET ─────────────────────────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  .btn--act::after{ animation:none; opacity:0; }
  .status-sec::before, .get::before{ filter:none; }
}

/* ── 8. PURCHASE PAGE ─────────────────────────────────────────────────────
   purchase.html is self-contained (its own inline <style>), so this sheet is
   linked last on that page to win the cascade. The Stripe buttons are where
   the money happens, so they get the loudest version of the action gradient. */
.plan__btn{
  position:relative; overflow:hidden; isolation:isolate;
  border-color:transparent !important;
  background:var(--act) !important;
  background-size:170% 100% !important;
  color:#fff !important;
  box-shadow:var(--act-lo);
  transition:background-position .5s cubic-bezier(.4,0,.2,1), box-shadow .35s, filter .35s;
}
.plan__btn:hover{
  background-position:100% 0 !important;
  filter:brightness(1.07);
  box-shadow:var(--act-hi);
}
/* the featured plan keeps a brighter halo so the tier hierarchy still reads */
.plan--hi .plan__btn, .plan__btn[data-plan="permanent"]{
  box-shadow:var(--act-lo), 0 0 70px -26px rgba(190,80,245,.95);
}

/* ── 9. ACTION HIERARCHY ──────────────────────────────────────────────────
   Download and Discord sat side by side in the hero, both filled violet, so
   neither led. Discord becomes a ghost button: still prominent, clearly the
   second choice, and it stops competing with the gradient. */
.hero__acts .btn--discord,
.get__acts  .btn--discord{
  background:transparent;
  border-color:var(--line-2);
  color:var(--paper);
  box-shadow:none;
}
.hero__acts .btn--discord .btn__fill,
.get__acts  .btn--discord .btn__fill{ display:none; }
.hero__acts .btn--discord:hover,
.get__acts  .btn--discord:hover{
  border-color:var(--violet-2);
  background:rgba(139,64,255,.12);
  color:#fff;
}
/* the nav Discord button keeps its fill - up there it is the only CTA of its
   kind and has no gradient neighbour to fight with */