/* Hide Joiner tab from the primary nav; route remains accessible directly */
#tab-join { display: none !important; }
/* ===============================
   CSS Reset (modern-lite)
   =============================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; margin: 0; }
button { background: none; border: none; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ===============================
   Design Tokens
   =============================== */
:root {
  /* Palette */
  --bg: #0b0e13;
  --grid: rgba(255,255,255,0.05);
  --text: #e7ebf2;
  --muted: #a6afc3;
  --accent: #f4b000;

  /* Home (Showcase) accents */
  --home-star-a: rgba(123,97,255,0.20);
  --home-star-b: rgba(0,224,255,0.18);
  --home-sheen: rgba(255,255,255,0.04);

  /* Home card outline (very subtle) */
  --home-outline-size: 1.5px;
  --home-outline-size-hover: 2px;
  --home-ring-a: rgba(160,180,255,0.35);
  --home-ring-b: rgba(120,140,220,0.28);

  /* Motion for Home */
  /* Snappier ease-out curve and shorter durations for instant hover response */
  --home-ease: cubic-bezier(.2, .8, .2, 1);
  --home-in: 120ms;
  --home-out: 100ms;

  --card-dark-top: #0f1218;
  --card-dark-bot: #1a1f2b;

  --purple-top: #6a2bd9;
  --purple-bot: #7b3ff2;

  --orange-top: #b5420f;
  --orange-bot: #d95a18;

  /* Green (Work.ink) - darker, richer, less eye strain */
  --green-top: #0b2f22;   /* deep teal-green */
  --green-mid: #0f4934;   /* mid tone for smoother blend */
  --green-bot: #136043;   /* dark jade */

  --brand-grad-a: #00E0FF;
  --brand-grad-b: #7B61FF;
  --brand-grad-c: #FF3D81;
  --brand-grad-d: #FFC300;

  /* Glow hues for luminous card outline */
  --card-glow-orange-a: #ffb86b;
  --card-glow-orange-b: #ff7a3d;
  --card-glow-green-a: #8cf5c1;
  --card-glow-green-b: #39e39a;
  --card-glow-purple-a: #b499ff;
  --card-glow-purple-b: #7c5cff;

  /* Outline + motion tokens */
  /* Key tab outline thickness (thinner per feedback) */
  --card-outline-size: 2px;
  --card-outline-size-hover: 3px;
  /* Faster, responsive hover timings */
  --card-ease: cubic-bezier(.2, .8, .2, 1);
  --card-in: 140ms;   /* hover-in */
  --card-out: 100ms;  /* hover-out */

  /* Shadows */
  --shadow-soft: 0 10px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-depth: 0 16px 40px rgba(0,0,0,0.45);
  --inner-soft: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.35);

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 64px;

  /* Sizes */
  --container: 1200px;

  /* Focus color */
  --focus: #5b8cff;

  /* Buttons */
  --btn-dark: #1b2130;
  --btn-dark-hover: #262e41;

  /* Font stacks */
  --font-display: "Chakra Petch", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ===============================
   Base
   =============================== */
html { background-color: var(--bg); }
body {
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--bg);
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

/* Background subtle grid + animated glow layers (lightweight) */
.bg-grid {
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 23px,
      var(--grid) 24px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 23px,
      var(--grid) 24px
    );
  opacity: 0.6;
  pointer-events: none;
  will-change: transform, background-position, filter, opacity;
  transform: translateZ(0);
  z-index: 0;
}

/* Grid-aligned glow sweep layers */
.bg-grid::before,
.bg-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 220px at var(--gx, 15%) var(--gy, 8%), rgba(80,110,220,0.18), transparent 60%),
    radial-gradient(700px 200px at calc(var(--gx, 15%) + 35%) calc(var(--gy, 8%) + 2%), rgba(160,90,255,0.14), transparent 65%);
  mix-blend-mode: screen;
  filter: blur(0.5px);
  opacity: 0.7;
  animation: gridSweep 16s ease-in-out infinite;
}
.bg-grid::after {
  background:
    radial-gradient(780px 200px at calc(var(--gx, 15%) + 55%) calc(var(--gy, 8%) + 1%), rgba(60,200,255,0.10), transparent 65%),
    radial-gradient(900px 240px at calc(var(--gx, 15%) + 80%) calc(var(--gy, 8%) + 0%), rgba(255,90,160,0.10), transparent 70%);
  animation: gridSweepReverse 22s ease-in-out infinite;
  opacity: 0.55;
}

@keyframes gridSweep {
  0%,100% { --gx: 10%; --gy: 6%; }
  50%     { --gx: 28%; --gy: 10%; }
}
@keyframes gridSweepReverse {
  0%,100% { --gx: 70%; --gy: 6%; }
  50%     { --gx: 40%; --gy: 9%; }
}

/* ===============================
   Header / Hero
   =============================== */
.site-header {
  padding-top: var(--space-12);
  padding-bottom: var(--space-6);
  text-align: center;
}
/* header layout container so CTA can sit top-right */
.header-bar{
  position: relative;
}
/* removed obsolete Discord CTA block and its responsive rules */

/* Chiyo-style Features (Home) */
.chiyo-hero {
  /* move heading closer to the Discord button */
  margin-top: var(--space-6);
  text-align: center;
  position: relative;
  isolation: isolate;
}

/* 3D tilt follow: establish perspective on the grid container */
.chiyo-grid {
  perspective: none;
  transform-style: flat;
}

/* Add a subtle constellation-like ambient layer behind Home grid */
.chiyo-hero::after {
  content: "";
  position: absolute;
  inset: -40px -20px -20px;
  z-index: -1;
  background:
    radial-gradient(12px 12px at 12% 8%, var(--home-star-a), transparent 60%),
    radial-gradient(10px 10px at 88% 10%, var(--home-star-b), transparent 60%),
    radial-gradient(14px 14px at 28% 22%, rgba(255,61,129,0.12), transparent 60%),
    radial-gradient(10px 10px at 72% 28%, rgba(255,195,0,0.12), transparent 60%);
  opacity: .75;
  filter: blur(.2px);
  transform: translateZ(0);
  will-change: opacity, transform;
  animation: homeAmbientDrift 18s var(--home-ease) infinite alternate;
}

@keyframes homeAmbientDrift {
  0%   { transform: translate3d(0, 0, 0); opacity: .7; }
  50%  { transform: translate3d(0, -4px, 0); opacity: .85; }
  100% { transform: translate3d(0, 0, 0); opacity: .7; }
}
/* removed .chiyo-chip */
.chiyo-title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  color: #eef1ff;
  position: relative; /* enable caret pseudo-element */
}

/* Natural typing caret for the hero title */
.chiyo-title.typing::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  background: #e9edff;
  opacity: 0.9;
  transform: translateY(2px);
  animation: caretBlink 900ms steps(1, end) infinite;
}
@keyframes caretBlink {
  0%, 49% { opacity: 0.9; }
  50%, 100% { opacity: 0.1; }
}
@media (prefers-reduced-motion: reduce) {
  .chiyo-title.typing::after { animation: none; opacity: 0.9; }
}
.chiyo-subtitle {
  margin-top: 8px;
  color: #9aa6cf;
  max-width: 680px;
  margin-inline: auto;
}

/* grid */
.chiyo-grid {
  position: relative;
  /* pull cards up closer to the heading */
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  isolation: isolate; /* keep overlay behind content */
  --cell-w: calc((min(var(--container), 100vw) - (2 * var(--space-8))) / 3);
}
@media (max-width: 1100px) {
  .chiyo-grid {
    grid-template-columns: 1fr;
    max-width: 860px;
    margin-inline: auto;
  }
}

/* dark nebula-like overlay to match screenshot mood */
/* Removed top-edge lighting above cards (problematic alignment) */
.chiyo-grid::before,
.chiyo-grid::after {
  content: none;
}

/* card */
.chiyo-card {
  position: relative;
  border-radius: 18px;
  padding: 28px;
  background:
    radial-gradient(120px 120px at 20% 10%, rgba(50,70,120,0.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018));
  border: 1px solid rgba(140,160,220,0.16);
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;

  /* 3D base (disabled) */
  --rx: 0deg;    /* rotateX (tilt forward/back) */
  --ry: 0deg;    /* rotateY (tilt left/right) */
  --tz: 0px;     /* depth push (disabled) */
  --gx: 50%;     /* glare x */
  --gy: 50%;     /* glare y */
  transform: none;
  transform-style: flat;

  will-change: transform, box-shadow;
  transition:
    transform var(--card-in) var(--home-ease),
    box-shadow var(--card-in) var(--home-ease);
}
/* animated corner light (kept) */
.chiyo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(360px 180px at 100% 0%, rgba(90,110,190,0.08), transparent 60%);
  pointer-events: none;
  animation: cardSweep 11s ease-in-out infinite;
}

/* interactive glare that follows cursor (activated on hover) */
.chiyo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(300px 180px at var(--gx) var(--gy),
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.04) 35%,
      transparent 60%);
  transition: opacity var(--card-in) var(--home-ease);
  filter: blur(0.2px);
  display: none; /* disable glare layer */
}

@keyframes cardSweep {
  0%,100% { transform: translateX(0); opacity: 0.7; }
  50%     { transform: translateX(-6px); opacity: 0.9; }
}

/* hover motion: scale up gently and enable glare */
@media (hover: hover) and (pointer: fine) {
  .chiyo-card:hover { transform: none; box-shadow: 0 18px 40px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05); }
  .chiyo-card:hover::before { opacity: 0; }
}

/* content subtle parallax on hover */
.chiyo-card .chiyo-card__icon,
.chiyo-card .chiyo-card__title,
.chiyo-card .chiyo-card__text {
  transform: translateZ(0.01px);
  transition: transform var(--card-in) var(--home-ease);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .chiyo-card:hover .chiyo-card__icon  { transform: none; }
  .chiyo-card:hover .chiyo-card__title { transform: none; }
  .chiyo-card:hover .chiyo-card__text  { transform: none; }
}

/* Reduced motion: disable tilt/glare */
@media (prefers-reduced-motion: reduce) {
  .chiyo-card {
    transition: none !important;
    transform: none !important;
  }
  .chiyo-card::before { display: none !important; }
}
.chiyo-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #cfd6ff;
  border: 1px solid rgba(123, 97, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(18,22,40,0.90), rgba(18,22,40,0.58));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 24px rgba(0,0,0,0.45);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.chiyo-card__icon::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(80px 24px at var(--mx,60%) var(--my,10%), rgba(123,97,255,0.20), transparent 60%);
  filter: blur(6px);
  opacity: .7;
}
.chiyo-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: #f0f3ff;
}
.chiyo-card__text {
  margin-top: 8px;
  color: #9fb0df;
}

/* Tabs */
.tabs {
  margin-top: var(--space-4);
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
  margin-left: auto;
  margin-right: auto;
  position: sticky; /* keep tabs visible while scrolling */
  top: 12px;
  z-index: 2147482800;
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
}

/* Force Inter for any tabs wrapped in .tabs--inter without affecting global var usage */
.tabs--inter,
.tabs--inter .tab {
  font-family: var(--font-body) !important; /* Inter is mapped to --font-body via next/font */
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cfd6ff;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 13px;
  gap: 8px;
  transition: background-color 100ms ease, color 100ms ease, transform 100ms ease, box-shadow 120ms ease;
}
.tab:is(:hover, :focus-visible) { transform: translateY(-1px); }
.tab:not(.is-active):is(:hover, :focus-visible) {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
.tabs .tab#tab-getkey:is(:hover, :focus-visible) { transform: none !important; }
.tab.is-active {
  background: linear-gradient(180deg, #2a3250, #1f2740);
  color: #e9edff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 16px rgba(0,0,0,0.35);
  border: 1px solid rgba(133,170,255,0.25);
}

/* Icon + label inside tabs */
.tab__icon {
  width: 16px;
  height: 16px;
  opacity: .86;
}
.tab:is(:hover, :focus-visible) .tab__icon { opacity: 1; }
.tab.is-active .tab__icon { opacity: 1; }
.tab__label { line-height: 1; }

/* Slightly enlarge the Discord icon for better optical balance */
#tab-discord .tab__icon {
  width: 20px !important;
  height: 20px !important;
}

/* Enlarge Discord icon everywhere it's used */
.discord-icon {
  width: 20px !important;
  height: 20px !important;
}

/* Make the Discord glyph visually larger within its box */
.discord-icon path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(1.3);
}

/* Tab panels */
.tab-panel { display: none; }
.tab-panel.is-visible { display: block; }
[hidden].tab-panel { display: none !important; }

/* Executors grid */
.executors .executor-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
}
@media (max-width: 1100px) {
  .executors .executor-cards {
    grid-template-columns: 1fr;
    max-width: 1100px;
    margin-inline: auto;
  }
}

.executors .exec-section { margin-top: var(--space-12); }
.exec-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 30px);
  color: #eef1ff;
  letter-spacing: 0.2px;
}

.executor-grid {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.executor-grid--top3 { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.executor-grid--others { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
  .executor-grid--top3,
  .executor-grid--others { grid-template-columns: 1fr; }
}

.executor-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  padding: var(--space-5);
  /* Chip is now inline with the title, so no extra reserved space needed */
  padding-top: var(--space-5);
  /* Tighten bottom to improve visual symmetry */
  padding-bottom: var(--space-2);
  display: grid;
  grid-template-rows: auto auto 1fr auto auto auto;
  gap: var(--space-3);
  /* Shorter card height to remove excess bottom space */
  min-height: 240px;
  /* Enable Solara-like visual layers */
  overflow: hidden;
  isolation: isolate;
  /* Ring/glow tokens */
  --exec-ring-w: 3px;
  --exec-ring-speed: 26s;
  --exec-ring-opacity: 0.8;
  /* Neutral gray ring for non-featured cards by default */
  --exec-ring-a: #dbe2f1;
  --exec-ring-b: #b7c0d6;
  --exec-ring-c: #eef2fb;
  /* Smooth hover motion */
  will-change: transform, box-shadow;
  transition: transform var(--card-in) var(--card-ease), box-shadow var(--card-in) var(--card-ease);
}

/* Keep all card content above decorative layers */
.executor-card > * { position: relative; z-index: 2; }

/* Animated conic gradient outer ring */
.executor-card::before {
  content: "";
  position: absolute;
  inset: -1px; /* bleed slightly to avoid internal seams */
  border-radius: inherit;
  padding: var(--exec-ring-w);
  background: conic-gradient(
    from var(--exec-ring-angle, 0deg),
    color-mix(in oklab, var(--exec-ring-a) 92%, transparent) 0deg,
    color-mix(in oklab, var(--exec-ring-b) 92%, transparent) 120deg,
    color-mix(in oklab, var(--exec-ring-c) 92%, transparent) 240deg,
    color-mix(in oklab, var(--exec-ring-a) 92%, transparent) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude; /* cut out center */
  opacity: var(--exec-ring-opacity);
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 14px rgba(190, 198, 220, 0.30)) drop-shadow(0 0 4px rgba(190, 198, 220, 0.30));
  animation: execRingSpin var(--exec-ring-speed) linear infinite;
}

/* Ambient inner glow field: soft stars + top vignette + bottom horizon */
.executor-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1.6px) 0 0 / 26px 26px,
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1.6px) 13px 13px / 26px 26px,
    radial-gradient(780px 260px at 50% -40%, rgba(0,0,0,0.66), transparent 60%),
    radial-gradient(900px 220px at 8% 102%, rgba(124, 74, 255, 0.25), transparent 60%),
    radial-gradient(900px 220px at 92% 102%, rgba(124, 74, 255, 0.25), transparent 60%);
  mix-blend-mode: normal;
  opacity: 0.9;
  animation: execAmbientDrift 18s ease-in-out infinite;
}

/* Stop moving dots/ambient drift in Executors tab */
.executors .executor-card::after {
  animation: none !important;
  /* Remove purple bottom ambients entirely; keep only neutral vignette */
  background: radial-gradient(780px 260px at 50% -40%, rgba(0,0,0,0.66), transparent 60%) !important;
}
/* Featured variant: keep green ambients without dot grid */
.executors .executor-card.executor-card--featured::after {
  background: radial-gradient(780px 260px at 50% -40%, rgba(0,0,0,0.66), transparent 60%) !important;
}

/* Hover/focus: brighten ring and ambient slightly */
.executor-card:is(:hover, :focus-within)::before {
  /* Remove light-up effect on hover */
  filter: none !important;
  opacity: var(--exec-ring-opacity);
  animation-duration: var(--exec-ring-speed);
}
.executor-card:is(:hover, :focus-within)::after { opacity: 0.9; filter: none !important; }
.executor-card:is(:hover, :focus-within) {
  transform: none;
  box-shadow: var(--shadow-soft);
}

@keyframes execRingSpin {
  0%   { --exec-ring-angle: 0deg; }
  100% { --exec-ring-angle: 360deg; }
}

@keyframes execAmbientDrift {
  0%   { background-position: 0 0, 13px 13px, 0 0, 0 0, 0 0; }
  50%  { background-position: -20px -10px, -7px -3px, 0 0, 0 3px, 0 3px; }
  100% { background-position: 0 0, 13px 13px, 0 0, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .executor-card::before,
  .executor-card::after { animation: none !important; }
}
.executor-card--ok { outline: 2px solid rgba(125, 255, 164, 0.24); outline-offset: -2px; }
.executor-card--warn { outline: 2px solid rgba(255, 94, 94, 0.28); outline-offset: -2px; }

/* Ranked variants */
.executor-card--featured {
  background:
    radial-gradient(480px 200px at 50% -40%, rgba(255,210,90,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  border-color: rgba(255, 200, 90, 0.35);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  /* Switch featured to vibrant green theme and a tad quicker */
  --exec-ring-a: #92ffd1;
  --exec-ring-b: #43e9a5;
  --exec-ring-c: #c7ffe6;
  --exec-ring-speed: 18s;
  /* Slightly thicker ring for emphasis */
  --exec-ring-w: 4px;
  --exec-ring-opacity: 1;
}
.executor-card--second {
  background:
    radial-gradient(420px 180px at 50% -40%, rgba(210,220,240,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-color: rgba(210,220,240,0.35);
}
.executor-card--third {
  background:
    radial-gradient(420px 180px at 50% -40%, rgba(230,170,110,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-color: rgba(230,170,110,0.35);
}

/* Subtle pulsing halo for featured card's animated outline */
.executor-card--featured::before {
  animation:
    execRingSpin var(--exec-ring-speed) linear infinite,
    featuredRingPulse 2600ms ease-in-out infinite;
  /* start with a vibrant green halo */
  filter:
    drop-shadow(0 0 20px rgba(67, 233, 165, 0.55))
    drop-shadow(0 0 10px rgba(67, 233, 165, 0.45));
}

@keyframes featuredRingPulse {
  0%, 100% {
    opacity: 0.9;
    filter:
      drop-shadow(0 0 20px rgba(67, 233, 165, 0.50))
      drop-shadow(0 0 10px rgba(67, 233, 165, 0.40));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 34px rgba(67, 233, 165, 0.75))
      drop-shadow(0 0 18px rgba(67, 233, 165, 0.55));
  }
}

@media (prefers-reduced-motion: reduce) {
  .executor-card--featured::before { animation: none !important; }
}

/* Enrich featured inner ambient with green tones */
.executor-card--featured::after {
  background:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1.6px) 0 0 / 26px 26px,
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1.6px) 13px 13px / 26px 26px,
    radial-gradient(780px 260px at 50% -40%, rgba(0,0,0,0.66), transparent 60%),
    radial-gradient(900px 220px at 8% 102%, rgba(67, 233, 165, 0.28), transparent 60%),
    radial-gradient(900px 220px at 92% 102%, rgba(67, 233, 165, 0.28), transparent 60%);
}

/* Keep non-featured rings static and neutral */
.executor-card:not(.executor-card--featured)::before { animation: none; }

/* Top rank chip tones */
.chip--gold {
  position: relative;
  background: linear-gradient(180deg, rgba(255,220,120,0.26), rgba(255,210,90,0.16));
  border-color: rgba(255,210,90,0.55);
  color: #fff7d6;
  text-shadow: 0 1px 8px rgba(255,210,90,0.35);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,210,90,0.28) inset,
    0 0 14px rgba(255,210,90,0.25);
}
.chip--gold .chip__icon {
  /* subtle gold tone; avoid excessive brightness */
  color: #f2d184;
  margin-right: 0; /* rely on chip gap for spacing */
}
.chip--silver {
  background: linear-gradient(180deg, rgba(220,228,240,0.22), rgba(210,220,235,0.16));
  border-color: rgba(210,220,235,0.45);
  color: #f3f6ff;
}
.chip--bronze {
  background: linear-gradient(180deg, rgba(240,190,140,0.22), rgba(230,170,110,0.16));
  border-color: rgba(230,170,110,0.45);
  color: #fff1e2;
}

.executor-card__header { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.executor-card__header .chip { margin-left: auto; }
.executor-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.executor-icons .icon-square { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,0.24); border-radius: 4px; display: inline-block; opacity: .6; }
.executor-icons svg.icon-square { padding: 2px; background: rgba(255,255,255,0.04); border-radius: 6px; }

.executor-badges { display: flex; gap: 8px; align-items: center; }
.badge { font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); }
.badge svg { margin-right: 6px; }
.badge--verified { background: rgba(120, 236, 180, 0.18); color: #b7ffd9; }
.badge--premium { background: rgba(255, 211, 120, 0.18); color: #ffe8b0; }

.executor-desc { color: #cdd6f6; }
.executor-meta { display: flex; gap: 10px; color: var(--muted); font-size: 13px; }
.executor-pros { background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md); padding: var(--space-4); }
.executor-pros .pros-title { font-weight: 800; color: #dfe7ff; margin-bottom: 8px; }
.executor-pros ul { margin: 0; padding-left: 18px; list-style: disc; color: #cad3ec; }

.executor-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; }
.ex-btn, .ex-btns-right > span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); font-weight: 800; text-transform: uppercase; font-size: 12px; border: 1px solid rgba(255,255,255,0.14); }
/* Ensure button shine is clipped to the button to avoid lighting seams on cards */
.ex-btn { position: relative; overflow: hidden; isolation: isolate; }
.ex-btn--primary, .ex-btns-right > span.ex-btn--primary {
  /* Paid: rich indigo → royal violet for premium vibe */
  background: linear-gradient(180deg, #3f3ab7, #2c2f86);
  color: #ffffff;
  border-color: rgba(148, 163, 255, 0.45);
  box-shadow: 0 8px 16px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
}
.ex-btn--primary svg {
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.ex-btn--ghost { background: rgba(255,255,255,0.06); }
.ex-btn:is(:hover, :focus-visible) { transform: translateY(-1px); transition-duration: 100ms; }
.ex-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.24) 50%, transparent 60%);
  transform: translateX(-80%);
  opacity: 0;
  transition: transform 420ms var(--card-ease), opacity 420ms var(--card-ease);
}
.ex-btn:is(:hover, :focus-visible)::after {
  opacity: 0.35;
  transform: translateX(80%);
}
.ex-btns-right { display: inline-flex; gap: 10px; }

/* Inside executor cards: remove sweep to avoid seams and only light the hovered button */
.executor-card .ex-btn:is(:hover, :focus-visible)::after {
  opacity: 0 !important;
  transform: translateX(-80%) !important; /* keep off-canvas */
}
/* Subtle background-only hover per variant inside executor cards */
.executor-card .ex-btn--ghost:is(:hover, :focus-visible) { background: rgba(255,255,255,0.10); }
.executor-card .ex-btn--primary:is(:hover, :focus-visible) { background: linear-gradient(180deg, #4a46c6, #343798); }
.executor-card .ex-btn--green:is(:hover, :focus-visible) { background: linear-gradient(180deg, #14795a, #0f5a43); }

/* Key System (green) and danger price accents */
.ex-btn--green, .ex-btns-right > span.ex-btn--green {
  /* Key System: vibrant emerald/teal to read as “access/keys” */
  background: linear-gradient(180deg, #0f6f50, #0c4f3a);
  color: #ffffff;
  border-color: rgba(67, 233, 165, 0.35);
}
/* Text-only color accents for price labels */
.price-text--green { color: #88ffcc; }
.price-text--primary { color: #bfc5ff; }
.price-text--danger { color: #ffb7c2; }
.ex-btn--danger {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #b4444c, #8e2a31);
  color: #fff3f5;
  border-color: rgba(255,120,140,0.42);
  box-shadow:
    0 10px 22px rgba(180, 40, 60, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
  transition: box-shadow 220ms var(--card-ease), filter 220ms var(--card-ease);
  animation: dangerBreath 2600ms ease-in-out infinite;
}
.ex-btn--danger svg {
  background: rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.ex-btn--danger::after {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,0.30) 50%, transparent 55%);
  transform: translateX(-60%);
  opacity: 0;
  pointer-events: none;
  transition: transform 520ms var(--card-ease), opacity 520ms var(--card-ease);
}
.ex-btn--danger:is(:hover, :focus-visible) {
  filter: brightness(1.02);
  box-shadow:
    0 12px 26px rgba(180, 40, 60, 0.32),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.ex-btn--danger:is(:hover, :focus-visible)::after { opacity: 0.35; transform: translateX(60%); }

@keyframes dangerBreath {
  0%,100% { box-shadow: 0 10px 22px rgba(180, 40, 60, 0.22), inset 0 1px 0 rgba(255,255,255,0.08); }
  50%     { box-shadow: 0 12px 26px rgba(180, 40, 60, 0.30), inset 0 1px 0 rgba(255,255,255,0.10); }
}
@media (prefers-reduced-motion: reduce) {
  .ex-btn--danger { animation: none !important; }
  .ex-btn--danger::after { transition: none !important; }
}

/* Disable hover/focus animations for buttons inside executor cards */
.executor-card .ex-btn:is(:hover, :focus-visible) { transform: none; }
.executor-card .ex-btn--danger:is(:hover, :focus-visible) {
  filter: none;
  box-shadow: 0 10px 22px rgba(180, 40, 60, 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.executor-card .ex-btn--danger:is(:hover, :focus-visible)::after {
  opacity: 0;
  transform: translateX(-60%);
}

.executor-price { display: flex; align-items: center; gap: 10px; }
.price-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(80, 160, 100, 0.14); border: 1px solid rgba(80,160,100,0.35); color: #c9ffdf; }
.executor-card--warn .price-pill { background: rgba(180, 60, 60, 0.14); border-color: rgba(180,60,60,0.35); color: #ffd4d4; }
.price-term { color: var(--muted); font-size: 12px; }

/* Joiner styles */
.joiner-card { margin-top: 0; }
/* (intro removed) */

/* Dedicated two-column layout for Joiner */
.joiner .joiner-layout {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  align-items: stretch; /* equal heights */
}
/* When invalid, show only one centered column */
.joiner .joiner-layout.is-invalid {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-inline: auto;
}
/* Ensure cards stretch and keep actions pinned to bottom gracefully */
.joiner .joiner-layout > .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.joiner .joiner-layout > .card .joiner-actions { margin-top: auto; }
.joiner .joiner-layout #joiner-script-card .code-block { flex: 1; }
@media (max-width: 1200px) {
  .joiner .joiner-layout {
    grid-template-columns: 1fr;
    max-width: 860px;
    margin-inline: auto;
  }
}
.joiner-status {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #d7ddff;
}
.loading-dots {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.loading-dots .dots {
  display: inline-flex;
  gap: 6px;
}
.loading-dots .dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cfd6ff;
  opacity: 0.35;
  animation: dotBlink 1100ms ease-in-out infinite;
}
.loading-dots .dots span:nth-child(1) { animation-delay: 0ms; }
.loading-dots .dots span:nth-child(2) { animation-delay: 180ms; }
.loading-dots .dots span:nth-child(3) { animation-delay: 360ms; }

@keyframes dotBlink {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}
.joiner-actions { margin-top: var(--space-6); }
.joiner #joiner-script-card .btn { margin-top: var(--space-4); }
.code-block {
  background: #0f1218;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-md);
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: 13px;
  color: #e9edff;
  overflow: auto;
}
.copy-feedback {
  text-align: center;
  margin-top: var(--space-3);
  color: var(--muted);
  min-height: 1.2em;
}
.error-details {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: var(--space-5);
  margin: var(--space-5) 0;
  color: #cad3ec;
}

/* Danger variant for Invalid state */
.card--danger {
  color: #ffecef;
  background: linear-gradient(180deg, #2a1216, #3a1b21);
  border-color: #ff6b81;
}
.card--danger .card__icon--circle {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,120,140,0.18), rgba(255,120,140,0.08) 60%, transparent 70%),
    linear-gradient(180deg, rgba(18,22,40,0.88), rgba(18,22,40,0.55));
  border-color: rgba(255,120,140,0.35);
  color: #ffb7c3;
}

.display-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 64px);
  letter-spacing: 0.3px;
  line-height: 1.05;
  margin-bottom: var(--space-4);
}

/* Animated brand gradient (professional rainbow with subtle effects) */
.brand-gradient {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg,
    var(--brand-grad-a) 0%,
    var(--brand-grad-b) 25%,
    var(--brand-grad-c) 50%,
    var(--brand-grad-d) 75%,
    var(--brand-grad-a) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(123,97,255,0.12);
  animation: brandRainbow 14s linear infinite;
  will-change: background-position;
  isolation: isolate; /* keep pseudo glows behind */
}

/* Soft spectral outer glow halo (restrained) */
.brand-gradient::before {
  content: "";
  position: absolute;
  inset: -6px -8px;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 20% 40%, color-mix(in oklab, var(--brand-grad-b) 14%, transparent), transparent 60%),
    radial-gradient(120% 120% at 80% 60%, color-mix(in oklab, var(--brand-grad-c) 12%, transparent), transparent 60%);
  filter: blur(10px);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
  animation: brandBreath 6s ease-in-out infinite;
}


/* Executors: disable hover light-up on Recommended (featured) cards */
.executors .executor-card.executor-card--featured:is(:hover, :focus-within) {
  /* keep the featured base shadow and no motion */
  transform: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,200,90,0.25) inset !important;
}
.executors .executor-card.executor-card--featured:is(:hover, :focus-within)::before {
  /* restore featured halo instead of hover neutralization */
  filter:
    drop-shadow(0 0 20px rgba(67, 233, 165, 0.55))
    drop-shadow(0 0 10px rgba(67, 233, 165, 0.45)) !important;
}
.executors .executor-card.executor-card--featured:is(:hover, :focus-within)::after {
  /* do not brighten/dim inner ambient */
  opacity: 0.9 !important;
  filter: none !important;
}

/* Keyframes */
@keyframes brandRainbow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@keyframes brandBreath {
  0%,100% { opacity: 0.28; transform: translateY(0); }
  50%     { opacity: 0.40; transform: translateY(-1px); }
}

/* Reduced motion: static gradient */
@media (prefers-reduced-motion: reduce) {
  .brand-gradient { animation: none !important; }
  .brand-gradient::before { display: none !important; }
}

.subheading {
  color: var(--muted);
  font-size: 16px;
  margin-top: 4px;
}
.subheading-accent {
  color: #cdd7ff;
  opacity: 0.9;
}

/* ===============================
   Cards Section
   =============================== */
.site-main { padding-bottom: var(--space-12); }
.cards {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  align-items: stretch;
}
/* Prevent global .cards grid from affecting the joiner panel */
.joiner #panel-join .cards { display: contents; }

.card {
  position: relative;
  border-radius: var(--r-xl);
  padding: calc(var(--space-8) + 8px) var(--space-8) var(--space-8);
  /* Glass base similar to swift-card: faint sheen + depth */
  background:
    radial-gradient(120px 120px at 20% 10%, rgba(50,70,120,0.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018));
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  border: 1px solid rgba(140,160,220,0.16);
  transform: translateZ(0);
  isolation: isolate;

  /* Glassmorphism clarity (bounded blur) */
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);

  /* Prepare for GPU-friendly hover */
  will-change: transform, box-shadow;
  transition:
    transform var(--card-in) var(--card-ease),
    box-shadow var(--card-in) var(--card-ease);
}

.card--dark {
  background: linear-gradient(180deg, var(--card-dark-top), var(--card-dark-bot));
}

.card--purple {
  /* Glass + preserved purple gradient tint using overlay with mix-blend */
  color: #fff;
  /* Base glass from .card remains; add a purple tint overlay via pseudo */
}

/* Per-variant luminous outline colors (distinct for each Get Key card) */
.card--orange { --card-ring-a: var(--card-glow-orange-a); --card-ring-b: var(--card-glow-orange-b); }
.card--green  { --card-ring-a: var(--card-glow-green-a);  --card-ring-b: var(--card-glow-green-b);  }
.card--purple { --card-ring-a: var(--card-glow-purple-a); --card-ring-b: var(--card-glow-purple-b); }

/* Slightly strengthen hue separation per variant while keeping border thin */
.card--orange.cards .card::before,
.cards .card.card--orange::before { background: linear-gradient(180deg, var(--card-glow-orange-a), var(--card-glow-orange-b)); }

.card--green.cards .card::before,
.cards .card.card--green::before { background: linear-gradient(180deg, var(--card-glow-green-a), var(--card-glow-green-b)); }

.card--purple.cards .card::before,
.cards .card.card--purple::before { background: linear-gradient(180deg, var(--card-glow-purple-a), var(--card-glow-purple-b)); }
.card--purple::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--purple-top) 18%, transparent), color-mix(in oklab, var(--purple-bot) 18%, transparent));
  mix-blend-mode: plus-lighter;
  opacity: 0.9;
  z-index: -1;
}
.card--purple::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px 180px at 100% 0%, rgba(90,110,190,0.10), transparent 60%);
  pointer-events: none;
  animation: cardSweep 11s ease-in-out infinite;
}

.card--orange {
  color: #fff;
}
.card--orange::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--orange-top) 18%, transparent), color-mix(in oklab, var(--orange-bot) 18%, transparent));
  mix-blend-mode: plus-lighter;
  opacity: 0.95;
  z-index: -1;
}
.card--orange::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 200px at 95% 0%, rgba(255,200,150,0.10), transparent 60%);
  pointer-events: none;
  animation: cardSweep 11s ease-in-out infinite;
}

.card__icon {
  width: 64px;
  height: 64px;
  margin-inline: auto;
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
  color: rgba(255,255,255,0.9);
  display: grid;
  place-items: center;
}
.card--dark .card__icon { color: #a7b5ff; }
.card--purple .card__icon { color: #ffffff; }
.card--orange .card__icon { color: #fff5e9; }

.card--green {
  color: #ecfff6;
}
.card--green::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 120px at 30% 20%, rgba(40, 168, 116, 0.10), transparent 60%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--green-top) 18%, transparent),
      color-mix(in oklab, var(--green-mid) 18%, transparent) 58%,
      color-mix(in oklab, var(--green-bot) 18%, transparent));
  mix-blend-mode: plus-lighter;
  opacity: 0.95;
  z-index: -1;
}
.card--green::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(380px 180px at 100% 0%, rgba(120,236,185,0.10), transparent 60%);
  pointer-events: none;
  animation: cardSweep 11s ease-in-out infinite;
}

.card__icon--circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* unify to simple Loot.Labs-style circle: subtle inner glass, no under-glow */
  background:
    radial-gradient(ellipse at 30% 30%, rgba(167,181,255,0.16), rgba(167,181,255,0.06) 60%, transparent 70%),
    linear-gradient(180deg, rgba(18,22,40,0.88), rgba(18,22,40,0.55));
  border: 1px solid rgba(183,196,255,0.22);
  box-shadow: var(--inner-soft), 0 6px 12px rgba(0,0,0,0.28); /* toned down to remove lighting underneath */
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  position: relative;
  overflow: hidden; /* confine inner glow */
}

/* Luminous outline + ambient glow using pseudo-elements */
.cards .card {
  /* default gradient seed (fallback); variant overrides set --card-ring-a/b */
  --card-ring-a: var(--brand-grad-a);
  --card-ring-b: var(--brand-grad-b);
}

/* Outline ring: keep disabled to avoid hover color/thickness changes */
.cards .card::before {
  content: none !important;
  opacity: 0 !important;
  filter: none !important;
  padding: 0 !important;
}

/* Ambient outer glow: disabled for steady outline */
.cards .card::after {
  content: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Re-enable luminous outline/halo specifically for Get Key tab (ads emphasis) */
#panel-getkey .cards .card:not(.card--premium)::before {
  content: "" !important;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: var(--card-outline-size);
  background: linear-gradient(180deg, var(--card-ring-a), var(--card-ring-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.9 !important;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 18px rgba(140, 160, 220, 0.22)) drop-shadow(0 0 6px rgba(140, 160, 220, 0.22));
  transition: opacity var(--card-in) var(--card-ease), filter var(--card-in) var(--card-ease);
}
#panel-getkey .cards .card:not(.card--premium)::after {
  content: "" !important;
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(180px 40px at 20% 0%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(240px 60px at 80% 0%, rgba(255,255,255,0.04), transparent 65%);
  opacity: 0.28 !important;
  filter: blur(0.3px);
  z-index: 1;
  transition: opacity var(--card-in) var(--card-ease);
}
#panel-getkey .cards .card.card--premium::before { content: "" !important; }
#panel-getkey .cards .card.card--premium::after  { content: "" !important; }
#panel-getkey .cards .card:not(.card--premium):is(:hover, :focus-within)::before {
  opacity: 1 !important;
  filter: drop-shadow(0 0 26px rgba(140, 160, 220, 0.35)) drop-shadow(0 0 10px rgba(140, 160, 220, 0.30));
}
#panel-getkey .cards .card:not(.card--premium):is(:hover, :focus-within)::after { opacity: 0.38 !important; }

/* Hover/focus activation - smoothed upscale with slight lift */
.cards .card {
  /* upgrade transition for smoother feel */
  transition:
    transform var(--card-in) var(--card-ease),
    box-shadow var(--card-in) var(--card-ease);
  transform-style: preserve-3d;
}
.cards .card:is(:hover, :focus-within) {
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 26px 70px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.06);
}
@media (hover: hover) and (pointer: fine) {
  .cards .card:hover { transform: translateY(-2px) scale(1.04); }
}

/* Disable enlarge/raise hover effect specifically on Get Key tab cards */
#panel-getkey .cards .card:is(:hover, :focus-within) {
  transform: none !important;
  box-shadow: var(--shadow-soft) !important;
}
#panel-getkey .cards .card:is(:hover, :focus-within) .card__mono-title,
#panel-getkey .cards .card:is(:hover, :focus-within) .card__subtitle,
#panel-getkey .cards .card:is(:hover, :focus-within) .bullet-list,
#panel-getkey .cards .card:is(:hover, :focus-within) .btn { transform: none !important; }
@media (hover: hover) and (pointer: fine) {
  #panel-getkey .cards .card:hover { transform: none !important; }
}

/* Kill all button hover sweeps and transforms in Get Key panel */
#panel-getkey .cards .card .btn { transition: none !important; }
#panel-getkey .cards .card .btn::after { content: none !important; }
#panel-getkey .cards .card .btn:is(:hover, :focus-visible) { transform: none !important; box-shadow: none !important; }

/* Keep base appearance on hover for Get Key buttons */
#panel-getkey .cards .card .btn--primary:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #2a3250, #1f2740) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#panel-getkey .cards .card .btn--orange:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #a43f14, #8c330f) !important;
  box-shadow: none !important;
}
#panel-getkey .cards .card .btn--green:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #114b36, #0e3e2d) !important;
  box-shadow: none !important;
}
#panel-getkey .cards .card .btn--premium:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #ffe08a 0%, #ffc85a 54%, #f1ad3f 100%) !important;
  filter: none !important;
  box-shadow: 0 10px 24px rgba(255, 196, 94, 0.22), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.12) !important;
}

/* Remove any background light-up on hover for Get Key cards */
#panel-getkey .cards .card::before,
#panel-getkey .cards .card::after { content: none !important; opacity: 0 !important; filter: none !important; }
#panel-getkey .cards .card:is(:hover, :focus-within) {
  transform: none !important;
  box-shadow: var(--shadow-soft) !important;
  filter: none !important;
}
#panel-getkey .cards .card:is(:hover, :focus-within)::before,
#panel-getkey .cards .card:is(:hover, :focus-within)::after { content: none !important; opacity: 0 !important; filter: none !important; }

/* Content easing (tiny parallax) */
.cards .card .card__mono-title,
.cards .card .card__subtitle,
.cards .card .bullet-list,
.cards .card .btn {
  transition: transform var(--card-in) var(--card-ease), opacity var(--card-in) var(--card-ease);
  will-change: transform;
}
.cards .card:is(:hover, :focus-within) .card__mono-title { transform: translateY(-1px); }
.cards .card:is(:hover, :focus-within) .card__subtitle   { transform: translateY(-0.5px); opacity: 0.98; }
.cards .card:is(:hover, :focus-within) .bullet-list      { transform: translateY(-0.5px); }
.cards .card:is(:hover, :focus-within) .btn              { transform: translateY(-1px); }

/* On hover/focus: DO NOT change outline; keep only enlarge effect */
.cards .card:is(:hover, :focus-within)::before {
  opacity: 0;                   /* keep ring hidden */
  padding: var(--card-outline-size); /* prevent thickness change */
}
.cards .card:is(:hover, :focus-within)::after {
  opacity: 0;                   /* keep halo off */
  filter: none;
}

/* Removed ringSpin as rotating outline can create diagonal line artifacts */

/* Accessibility: keep focus-visible ring */
.cards .card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Improve legibility on glass */
.cards .card .card__mono-title { text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
.cards .card .card__subtitle   { text-shadow: 0 1px 10px rgba(0,0,0,0.35); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cards .card,
  .cards .card::before,
  .cards .card::after {
    transition: none !important;
    animation: none !important;
  }
}
.card--orange .card__icon--circle {
  /* copy Loot.Labs simplicity: remove extra orange under-lighting */
  background:
    radial-gradient(ellipse at 30% 30%, rgba(167,181,255,0.16), rgba(167,181,255,0.06) 60%, transparent 70%),
    linear-gradient(180deg, rgba(18,22,40,0.88), rgba(18,22,40,0.55));
  border-color: rgba(183,196,255,0.22);
  color: #eaf2ff;
  box-shadow: var(--inner-soft), 0 6px 12px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.card--green .card__icon--circle {
  /* match Loot.Labs: neutral inner glass only */
  background:
    radial-gradient(ellipse at 30% 30%, rgba(167,181,255,0.16), rgba(167,181,255,0.06) 60%, transparent 70%),
    linear-gradient(180deg, rgba(18,22,40,0.88), rgba(18,22,40,0.55));
  border-color: rgba(183,196,255,0.22);
  color: #eaf2ff;
  box-shadow: var(--inner-soft), 0 6px 12px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
/* Premium crown icon should be gold, not white */
.card--premium .card__icon--circle {
  color: #ffd46a;
}

.card__title {
  font-family: var(--font-display);
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.6px;
  margin-bottom: var(--space-2);
}
.card__mono-title {
  font-family: var(--font-mono);
  text-align: center;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.2px;
  color: #e9edff;
  margin-bottom: var(--space-2);
}

/* Premium title styling: subtle gold text with a gentle underline glow */
.card--premium .card__mono-title {
  background: linear-gradient(90deg, #ffe27a 0%, #ffc85a 55%, #ffb03a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 2px 14px rgba(0,0,0,0.45),
    0 0 12px rgba(255,212,106,0.22);
}
.card--premium .card__mono-title::after {
  content: none !important;
}
.cards .card.card--premium:is(:hover, :focus-within) .card__mono-title::after {
  opacity: 1;
  box-shadow: none;
}

.card__subtitle, .card__desc {
  text-align: center;
  color: var(--muted);
  margin-bottom: var(--space-6);
}

.card--purple .card__desc { color: rgba(255,255,255,0.9); }

.bullet-list {
  display: grid;
  gap: 10px;
  margin-bottom: var(--space-8);
  font-size: 15px;
  color: #cad3ec;
}
.card--dark .bullet-list { color: #c6cfec; }
.card--orange .bullet-list { color: #fff2e6; }

.bullet-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bullet-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(244,176,0,0.12), 0 0 10px rgba(244,176,0,0.35);
  flex: 0 0 8px;
}

/* Context-colored dots for each card variant */
.card--green .bullet-list .dot {
  background: #1ec97f;
  box-shadow: 0 0 0 3px rgba(30,201,127,0.12), 0 0 10px rgba(30,201,127,0.35);
}
.card--orange .bullet-list .dot {
  background: #ff8a3a;
  box-shadow: 0 0 0 3px rgba(255,138,58,0.12), 0 0 10px rgba(255,138,58,0.35);
}
.card--purple .bullet-list .dot {
  background: #8a5cff;
  box-shadow: 0 0 0 3px rgba(138,92,255,0.12), 0 0 10px rgba(138,92,255,0.35);
}
.card--premium .bullet-list .dot {
  background: #ffd46a;
  box-shadow: 0 0 0 3px rgba(255,212,106,0.18), 0 0 12px rgba(255,212,106,0.45);
}
.card--premium .bullet-list .bullet-icon {
  color: #ffd46a;
  filter: none;
}

/* Chips */
.chip {
  position: absolute;
  top: 14px;
  left: var(--space-6);
  transform: none;
  background: rgba(255,255,255,0.08);
  color: #e9edff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  /* prevent text from overlapping neighboring content */
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 3;
  isolation: isolate;
}
.executor-card__header .chip {
  /* Place the chip directly beside the executor title */
  position: static;
  top: auto;
  left: auto;
  margin-left: 0;
}
.card--dark .chip { background: rgba(255,255,255,0.06); }
.card--orange .chip { background: rgba(0,0,0,0.18); }
.card--purple .chip { background: rgba(0,0,0,0.2); }

.chip--recommended {
  background: linear-gradient(180deg, rgba(91,140,255,0.18), rgba(91,140,255,0.08));
  border-color: rgba(133,170,255,0.35);
}

.chip__icon {
  /* soften star color and glow */
  color: #f2d184;
  filter: drop-shadow(0 1px 3px rgba(255, 210, 90, 0.28));
}

/* Add a star and shimmer sweep for Best Recommended without markup changes */
/* Replace text star with actual icon in markup; keep spacing if icon absent */
.chip--gold::before { content: none; }
.chip--gold::after {
  content: "";
  position: absolute;
  left: -70%;
  top: 0;
  bottom: 0;
  width: 140%; /* extend seam to travel fully across the pill */
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  transform: translateX(-120%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: chipShine 4800ms cubic-bezier(.22,.61,.36,1) infinite 600ms;
}

@keyframes chipShine {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%  { opacity: .9; }
  70%  { opacity: .7; }
  100% { transform: translateX(180%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chip--gold::after { animation: none !important; opacity: 0; }
}

/* Harmonize featured badge with green featured card styling */
.executor-card--featured .chip {
  position: relative; /* contain its own shine */
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, rgba(60,200,150,0.22), rgba(60,200,150,0.12));
  border-color: rgba(60,200,150,0.45);
  color: #e9fff5;
  text-shadow: 0 1px 6px rgba(60,200,150,0.25);
  box-shadow: 0 6px 16px rgba(0,0,0,0.28), 0 0 0 1px rgba(60,200,150,0.22) inset;
  /* Push to the right edge when in header */
  margin-left: auto;
  overflow: hidden; /* clip shine to pill */
}
.executor-card--featured .chip::before {
  color: #d6ffe9;
  filter: drop-shadow(0 0 6px rgba(60,200,150,0.55));
}
.executor-card--featured .chip::after {
  animation-duration: 6000ms;
  opacity: 0.35;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 14px;
  text-transform: uppercase;
  transition: transform 100ms ease, background-color 100ms ease, box-shadow 100ms ease, color 100ms ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}
/* Reduce button width on larger screens to avoid overly wide CTA */
.joiner .joiner-layout #joiner-launch-card .btn { max-width: 540px; margin-inline: auto; }

.btn--primary {
  background: linear-gradient(180deg, #2a3250, #1f2740);
  color: #e9edff;
  border: 1px solid rgba(133,170,255,0.25);
  box-shadow: 0 10px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: linear-gradient(180deg, #34406a, #283151);
  transform: translateY(-1px);
}

.btn--orange {
  /* Remove lighting/outer-glow to match the flat purple button */
  background: linear-gradient(180deg, #a43f14, #8c330f);
  color: #fff6ef;
  border: 1px solid rgba(255,255,255,0.2);
  /* kill halo/glow */
  box-shadow: none;
  /* ensure no extra filter-based glow from ancestors */
  filter: none;
}
.btn--orange:hover, .btn--orange:focus-visible {
  background: linear-gradient(180deg, #bb4a17, #a03e13);
  transform: translateY(-1px);
  box-shadow: none;
  filter: none;
}

.btn--green {
  /* Remove lighting/outer-glow to match the flat purple button */
  background: linear-gradient(180deg, #114b36, #0e3e2d);
  color: #eafff5;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: none; /* kill halo/glow */
  filter: none;
}
.btn--green:hover, .btn--green:focus-visible {
  background: linear-gradient(180deg, #155a41, #114b36);
  transform: translateY(-1px);
  box-shadow: none;
  filter: none;
}

/* Modern shimmer sweep for standard buttons (avoid premium which has custom layers) */
.btn:not(.btn--premium)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,0.22) 50%, transparent 58%);
  transform: translateX(-90%);
  opacity: 0;
  transition: transform 420ms var(--card-ease), opacity 420ms var(--card-ease);
}
.btn:not(.btn--premium):is(:hover, :focus-visible)::after {
  opacity: 0.35;
  transform: translateX(90%);
}

.btn--disabled {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.28);
  cursor: not-allowed;
}

/* Premium CTA - flat, no hover animation or inner glow */
.btn--premium {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #ffe08a 0%, #ffc85a 54%, #f1ad3f 100%);
  color: #1b1408;
  border: 1.5px solid rgba(255, 212, 106, 0.65);
  box-shadow: none; /* remove outer halo and inner glow */
  overflow: hidden;
}
/* remove gloss and underglow layers */
.btn--premium::before { content: none; }
.btn--premium::after  { content: none; }
.btn--premium:hover,
.btn--premium:focus-visible {
  transform: none;
  filter: none;
  box-shadow: none;
}
.btn--premium:hover::after,
.btn--premium:focus-visible::after { opacity: 0; transform: none; }

/* ===============================
   Features Row
   =============================== */
.features {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.feature {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--shadow-soft);
}

.feature__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #b7c4ff;
  background: radial-gradient(circle at 30% 30%, rgba(183,196,255,0.25), rgba(183,196,255,0.08) 60%, transparent 70%);
  border: 1px solid rgba(183,196,255,0.25);
  box-shadow: var(--inner-soft), 0 10px 24px rgba(0,0,0,0.35);
}

.feature__title {
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 4px;
}
.feature__text {
  color: var(--muted);
  font-size: 15px;
}

/* ===============================
   Footer
   =============================== */
.site-footer {
  margin-top: var(--space-12);
  padding-bottom: var(--space-10);
  text-align: center;
  color: var(--muted);
}
.footnote { font-size: 13px; }

/* Purchase page */
.pricing-grid {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: stretch;
  max-width: 860px;
  margin-inline: auto;
}
@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }
}
.price-card { position: relative; }
#panel-purchase .price-card { max-width: 720px; justify-self: center; padding: var(--space-6); }
.pricing-grid .price-card .btn { transition: none !important; }
/* Ensure the premium CTA on Purchase page has zero hover/shine and no under-glow */
#panel-purchase .price-card .btn--premium,
#panel-purchase .price-card .btn--premium:is(:hover, :focus-visible) {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, #ffe08a 0%, #ffc85a 54%, #f1ad3f 100%) !important;
}
#panel-purchase .price-card .bullet-list { width: auto; margin-inline: 0; margin-left: -12px; }
#panel-purchase .price-card .btn--premium::before,
#panel-purchase .price-card .btn--premium::after { content: none !important; }
/* Remove bottom ambient glow on the premium card itself for Purchase page */
#panel-purchase .card--premium::after { content: none !important; opacity: 0 !important; }
.pricing-grid > .card {
  display: flex;
  flex-direction: column;
}
.pricing-grid > .card .pay-badges { margin-top: var(--space-4); }
.price-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.price-badge--best { background: rgba(255,212,106,.16); border-color: rgba(255,212,106,.45); color: #fff2d0; }
.price-badge--cheap { background: rgba(255,146,74,.16); border-color: rgba(255,146,74,.45); color: #fff1e6; }
.pay-badges { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.pay-badge { padding: 6px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; font-size: 12px; color: #dfe7ff; background: rgba(255,255,255,.04); }


/* Hero price styling */
.price-hero { display: inline-flex; align-items: flex-end; gap: 6px; justify-content: center; width: 100%; margin-bottom: 8px; }
.price-hero__amount { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.5px; font-size: clamp(44px, 6.5vw, 72px); line-height: 0.9; background: linear-gradient(180deg, #fff7d6, #ffd46a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 4px 24px rgba(255,212,106,0.25); }
.price-hero__currency { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3vw, 32px); color: #ffe9a6; transform: translateY(-4px); opacity: 0.95; }

/* ===============================
   Accessibility / Misc
   =============================== */
.card a.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(91,140,255,0.35);
}
/* Remove global .card hover lift to avoid compounding with .cards context */
.card:hover {
  filter: none;
  /* transform handled specifically under .cards .card hover */
  transform: none;
}
.card--purple:hover {
  transform: none; /* non-interactive coming soon card */
}

/* Responsive polish (keep desktop focus, but reasonable downscaling) */
@media (max-width: 1280px) {
  .container { padding-inline: var(--space-6); }
  .cards, .features { gap: var(--space-6); }
}

@media (max-width: 1100px) {
  .cards { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
  .features { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }
  .site-header { padding-top: var(--space-10); }
}

/* ===============================
   Scripts Spec - Tokens (renamed from My Scripts)
   =============================== */
:root {
  --ms-ease: cubic-bezier(.2,.8,.2,1);
  --ms-ease-out: cubic-bezier(.2,.8,.2,1);
  --ms-fast: 110ms;
  --ms-med: 150ms;
  --ms-slow: 200ms;

  --ms-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.35);
  --ms-ring: 0 0 0 3px rgba(91,140,255,0.35);

  /* legacy var aliases for new rules */
  --ms-t-fast: var(--ms-fast);
  --ms-t-slow: var(--ms-slow);
  --ms-e-out: var(--ms-ease-out);
}

/* ===============================
   Tabs and Indicator
   =============================== */
.ms-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ms-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: #cfd6ff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  transition: color var(--ms-fast) var(--ms-ease), transform var(--ms-fast) var(--ms-ease);
}
.ms-tab:is(:hover, :focus-visible) { transform: translateY(-1px); }
.ms-tab[aria-selected="true"] { color: #e9edff; }
.ms-tab__label { pointer-events: none; }
.ms-tabs__indicator {
  position: absolute;
  bottom: 4px;
  height: 32px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #2a3250, #1f2740);
  border: 1px solid rgba(133,170,255,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 16px rgba(0,0,0,0.35);
  transition: transform var(--ms-med) var(--ms-ease), width var(--ms-med) var(--ms-ease), opacity var(--ms-fast) var(--ms-ease);
  transform: translateZ(0);
  opacity: 0.9;
  z-index: -1;
}

/* ===============================
   Panels Visibility/Transitions
   =============================== */
.ms-panel{
  display:none;
  opacity:0;
  transform:translateY(8px);
  transition: opacity var(--ms-med) var(--ms-ease), transform var(--ms-med) var(--ms-ease);
}
.ms-panel.is-active{display:block;}
.ms-panel.is-visible{opacity:1;transform:none;}

/* ===============================
   Responsive Grid
   =============================== */
[data-ms-grid] {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-10);
  grid-template-columns: 1fr;
}
@media (min-width: 1101px) {
  [data-ms-grid] {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  .ms-card--featured {
    grid-column: span 2;
  }
}

/* ===============================
   Card Component
   =============================== */
.ms-card {
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform, box-shadow;
  transition: transform var(--ms-med) var(--ms-ease), box-shadow var(--ms-med) var(--ms-ease);
  box-shadow:none;
}
.ms-card:hover,.ms-card:focus-within{transform:translateY(-4px);box-shadow:var(--ms-shadow);}
/* Banner overlay presentation */
.ms-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#111;}
.ms-card__img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform var(--ms-t-slow) var(--ms-e-out);will-change:transform;}
.ms-card__overlay{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:10px;}
.ms-card__title{margin:0;color:#fff;font-weight:800;font-size:1.15rem;text-shadow:0 2px 14px rgba(0,0,0,.6);}
.ms-status{padding:6px 10px;border-radius:999px;font-size:.8rem;font-weight:600;backdrop-filter:saturate(140%) blur(6px);border:1px solid rgba(255,255,255,.12);}
.ms-status--ok{background:rgba(36,167,93,.18);color:#a8f5c2;}
.ms-status--info{background:rgba(104,146,255,.18);color:#cfe0ff;}
.ms-status--warn{background:rgba(189,142,19,.2);color:#ffe6a3;}
.ms-card__gloss{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55) 100%);pointer-events:none;}
.ms-card:hover .ms-card__img,.ms-card:focus-within .ms-card__img{transform:scale(1.08);}
/* remove legacy spacing reserved for actions/body in banner mode */
.ms-card__body,.ms-card__text,.ms-card__actions{display:none !important;}

/* ===============================
   Buttons
   =============================== */
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 14px;
  text-transform: uppercase;
  transition: transform var(--ms-fast) var(--ms-ease), background-color var(--ms-fast) var(--ms-ease), box-shadow var(--ms-fast) var(--ms-ease), color var(--ms-fast) var(--ms-ease);
  border: 1px solid transparent;
}
.ms-btn:focus-visible { box-shadow: var(--ms-ring); }
.ms-btn--primary {
  background: linear-gradient(180deg, #2a3250, #1f2740);
  color: #e9edff;
  border-color: rgba(133,170,255,0.25);
  box-shadow: 0 10px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.ms-btn--primary:hover,
.ms-btn--primary:focus-visible {
  background: linear-gradient(180deg, #34406a, #283151);
  transform: translateY(-1px);
}
.ms-btn--ghost {
  background: rgba(255,255,255,0.06);
  color: #e9edff;
  border-color: rgba(255,255,255,0.12);
}
.ms-btn--ghost:hover,
.ms-btn--ghost:focus-visible {
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

/* ===============================
   Reduced Motion
   =============================== */
@media (prefers-reduced-motion: reduce) {
  .ms-tabs__indicator,
  .ms-panel,
  .ms-card,
  .ms-card__media img {
    transition: none !important;
  }
}

/* ===============================
   Scripts cards grid and card sizing
   =============================== */
.scripts {
  margin-top: var(--space-12);
}

/* Scripts tab: enlarge-only hover (outline/glow disabled) */
:root {
  --scripts-outline: 0px;
  --scripts-outline-hover: 0px;
  --scripts-ring-a: transparent;
  --scripts-ring-b: transparent;
  --scripts-ease: cubic-bezier(.2,.8,.2,1);
  --scripts-in: 130ms;
  --scripts-out: 100ms;
  /* Scripts hover ring */
  --scripts-ring-w: 3px;
  --scripts-ring-speed: 3200ms;
  --scripts-ring-opacity: 1;
}

/* Base improvements and transitions */
.scripts .script-card {
  position: relative;
  will-change: transform, box-shadow, filter;
  transition:
    transform var(--scripts-in) var(--scripts-ease),
    box-shadow var(--scripts-in) var(--scripts-ease);
  transform: translateZ(0);
  overflow: hidden;
  isolation: isolate;
}
.scripts .script-card *,
.scripts .script-card::before,
.scripts .script-card::after {
  /* ensure children remain interactive; pseudo-elements already set to not intercept */
  pointer-events: auto;
}

/* Outline removed for Scripts tab cards per request */
.scripts .script-card::before {
  content: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* Halo removed for Scripts tab cards per request */
.scripts .script-card::after {
  content: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Hover behavior: enlarge only (no color changes) */
/* Ensure the hovered card stacks above neighbors and does not block its own buttons */
.scripts .script-card:is(:hover, :focus-within) {
  transform: scale(1.03);
  /* neutral, non-colored shadow */
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.35);
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .scripts .script-card:hover { transform: scale(1.045); }
}

/* Remove outline/halo activation; keep only enlargement */
/* allow pseudo ring on hover; no legacy halo */
.scripts .script-card:is(:hover, :focus-within)::before { content: none !important; }

/* Proper rainbow border as an overlay ring (inner cut-out) */
.scripts .script-card:is(:hover, :focus-within)::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  padding: var(--scripts-ring-w);
  background:
    conic-gradient(from 0deg,
      var(--brand-grad-a) 0deg,
      var(--brand-grad-b) 90deg,
      var(--brand-grad-c) 180deg,
      var(--brand-grad-d) 270deg,
      var(--brand-grad-a) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--scripts-ring-opacity);
  pointer-events: none;
  z-index: 4;
  will-change: opacity;
  animation: none !important;
}

/* 3D rainbow gradient outline on hover */
.scripts .script-card:is(:hover, :focus-within)::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  padding: var(--scripts-ring-w);
  background:
    conic-gradient(from 0deg,
      var(--brand-grad-a) 0deg,
      var(--brand-grad-b) 90deg,
      var(--brand-grad-c) 180deg,
      var(--brand-grad-d) 270deg,
      var(--brand-grad-a) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--scripts-ring-opacity) !important;
  pointer-events: none;
  z-index: 4;
  transform: translateZ(0);
  animation: none !important;
}
.scripts .script-card:is(:hover, :focus-within)::after {
  content: "" !important;
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--r-xl) - 1px);
  pointer-events: none;
  background:
    radial-gradient(180px 40px at 20% 0%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(240px 60px at 80% 0%, rgba(255,255,255,0.04), transparent 65%);
  opacity: 0.35 !important;
  filter: blur(0.4px);
  z-index: 1;
}

/* Defensive: remove hover ring while any interactive footer control is focused */
.scripts .script-card:has(.card-footer :focus-visible)::before,
.scripts .script-card:has(.card-footer :focus-visible)::after {
  content: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Keep focus-visible accessible */
.scripts .script-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .scripts .script-card,
  .scripts .script-card::before,
  .scripts .script-card::after {
    transition: none !important;
    animation: none !important;
  }
}

.scripts .script-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  align-items: stretch;
  position: relative;
  overflow: visible; /* prevent clipping of scaled cards */
}

@media (max-width: 1100px) {
  .scripts .script-cards {
    grid-template-columns: 1fr;
    max-width: 860px;
    margin-inline: auto;
  }
}

.scripts .script-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  min-height: 340px; /* uniform height */
  position: relative; /* establish stacking for z-index on hover */
}

.scripts .script-card .thumb {
  position: relative;
  background: #0f1218;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.scripts .script-card .thumb img.card-thumb[data-thumb="roblox"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scripts .script-card .card-body {
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.scripts .script-card .card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.scripts .status-pill {
  padding: 6px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: saturate(140%) blur(6px);
}
.scripts .status-ok { background: rgba(36,167,93,.18); color: #a8f5c2; }
.scripts .status-info { background: rgba(104,146,255,.18); color: #cfe0ff; }
.scripts .status-warn { background: rgba(189,142,19,.2); color: #ffe6a3; }

.scripts .script-card .card-footer {
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.16));
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 3; /* above decorative layers */
}

.scripts .copy-btn,
.scripts .features-btn {
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255,255,255,0.14);
  color: #e9edff;
  background: linear-gradient(180deg, #2a3250, #1f2740);
  transition: transform 100ms ease, background 100ms ease, box-shadow 100ms ease;
  box-shadow: 0 8px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.scripts .copy-btn.copy-btn--copied {
  background: linear-gradient(180deg, #34406a, #283151);
  border-color: rgba(133,170,255,0.35);
  box-shadow: 0 10px 22px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.10);
  color: #e9edff;
}
.scripts .copy-btn:hover,
.scripts .features-btn:hover,
.scripts .copy-btn:focus-visible,
.scripts .features-btn:focus-visible {
  background: linear-gradient(180deg, #34406a, #283151);
  /* Remove hover lift to avoid perceived enlargement on 'See features' */
  transform: none;
}

/* ===============================
   Modal styles
   =============================== */
/* Modal visibility + animations */
.modal {
  --modal-dur: 240ms;
  --modal-ease: cubic-bezier(.22,.61,.36,1);
  /* Modern accent hooks */
  --modal-accent-a: var(--brand-grad-b);
  --modal-accent-b: var(--brand-grad-a);
  --modal-accent-c: var(--brand-grad-c);
  /* Click pulse origin (set via JS) */
  --pulse-x: 50vw;
  --pulse-y: 10vh;
}
/* Keep modal in DOM for exit animations; hide via visibility/opacity */
.modal { visibility: hidden; }
.modal[aria-hidden="true"] { visibility: hidden; }
.modal[aria-hidden="false"] { visibility: visible; }

/* When visible, prevent page scroll via body helper (set by JS fallback too) */
body.modal-open {
  overflow: hidden !important;
}

.modal {
  position: fixed;
  inset: 0;
  /* Ensure we are above all site chrome (tabs/cta). Use very high stacking context. */
  z-index: 2147483000;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--modal-dur) var(--modal-ease), transform var(--modal-dur) var(--modal-ease);
  pointer-events: none; /* disabled until shown */
  will-change: opacity, transform;
}
.modal[aria-hidden="false"] {
  opacity: 1;
  transform: none;
  pointer-events: auto; /* enable interaction when visible */
}

.modal .modal-backdrop {
  position: absolute;
  inset: 0;
  /* subtle vignette and blur to match reference mood while using site theme */
  background:
    radial-gradient(1200px 400px at 50% 10%, rgba(123,97,255,0.10), transparent 60%),
    rgba(0,0,0,0.62);
  /* Slightly lighter blur for better perf */
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--modal-dur) var(--modal-ease);
  z-index: 0;
}
.modal[aria-hidden="false"] .modal-backdrop {
  opacity: 1;
}

/* Backdrop decorative dots drift (very subtle) */
.modal .modal-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1.6px);
  background-size: 28px 28px;
  background-position: 0 0;
  mix-blend-mode: overlay;
  opacity: 0.16;
  pointer-events: none;
  /* Disable drifting dots animation for performance */
  animation: none;
}

/* Click-origin pulse flash layer */
.modal .modal-backdrop::after {
  content: "";
  position: absolute;
  width: 120vmax;
  height: 120vmax;
  left: calc(var(--pulse-x, 50vw) - 60vmax);
  top: calc(var(--pulse-y, 10vh) - 60vmax);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    color-mix(in oklab, var(--modal-accent-a) 35%, transparent) 0%,
    color-mix(in oklab, var(--modal-accent-b) 18%, transparent) 28%,
    transparent 60%);
  filter: blur(2px);
  transform: scale(0.7);
  opacity: 0;
  pointer-events: none;
}
.modal.has-pulse .modal-backdrop::after { animation: none; }

.modal .modal-dialog {
  position: relative;
  z-index: 1; /* above backdrop */
  width: min(860px, 92vw);
  margin: 7vh auto;
  padding: var(--space-8);
  border-radius: var(--r-xl);
  background:
    radial-gradient(600px 220px at 15% 0%, rgba(90,110,190,0.10), transparent 60%),
    linear-gradient(180deg, var(--card-dark-top), var(--card-dark-bot));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow-depth);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  opacity: 0.98;
  transition: transform var(--modal-dur) var(--modal-ease), opacity var(--modal-dur) var(--modal-ease), box-shadow var(--modal-dur) var(--modal-ease);
  will-change: transform, opacity, box-shadow;
}
.modal[aria-hidden="false"] .modal-dialog {
  transform: none;
  opacity: 1;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  /* Enhanced entrance: slight overshoot pop */
  animation: modalIn var(--modal-dur) var(--modal-ease);
}

/* Luminous gradient ring (conic) */
.modal .modal-dialog::before {
  content: "";
  position: absolute;
  inset: -1px; /* bleed slightly outside to avoid inner overlay */
  border-radius: calc(var(--r-xl) + 1px);
  /* Switch to subtle inner gradient edge to avoid rendering seams */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06), /* inner hairline */
    0 0 0 0 rgba(0,0,0,0); /* no outer ring */
  opacity: 1;
  pointer-events: none;
}
.modal[aria-hidden="false"] .modal-dialog::before { animation: none; }

/* Glossy diagonal shine sweep on open */
/* Remove glossy sweep on open for performance */
.modal .modal-dialog::after { content: none !important; }
.modal[aria-hidden="false"] .modal-dialog::after { animation: none; }

/* Animate backdrop subtly on entrance */
.modal[aria-hidden="false"] .modal-backdrop { animation: backdropIn var(--modal-dur) var(--modal-ease); }

/* When closing, play exit animations before hiding via JS */
.modal.is-closing .modal-dialog { animation: modalOut var(--modal-dur) var(--modal-ease) forwards; }
.modal.is-closing .modal-backdrop { animation: backdropOut var(--modal-dur) var(--modal-ease) forwards; }

@keyframes modalIn {
  0% { transform: translateY(18px) scale(0.96); opacity: 0; }
  60% { transform: translateY(-2px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes modalOut {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(12px) scale(0.98); opacity: 0; }
}

@keyframes backdropIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes backdropOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes dotsDrift {
  0% { background-position: 0 0; }
  50% { background-position: -60px -30px; }
  100% { background-position: 0 0; }
}

@keyframes pulseFlash {
  0% { transform: scale(0.65); opacity: 0.35; }
  60% { transform: scale(1.2); opacity: 0.18; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes ringSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shineSweep {
  0% { transform: translateX(-65%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(65%); opacity: 0; }
}

/* Scripts ring rotation */
@keyframes scriptsRingRotate {
  0% { --scripts-ring-angle: 0deg; }
  100% { --scripts-ring-angle: 360deg; }
}

/* Fallback for ring spin used on hover */
@keyframes scriptRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Replaced by transform-based underline for full-width, perf-friendly */
@keyframes underlineGrow { 0% { } 100% { } }

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal .modal-dialog,
  .modal .modal-backdrop,
  .modal .modal-backdrop::before,
  .modal .modal-backdrop::after,
  .modal .modal-dialog::before,
  .modal .modal-dialog::after { transition: none !important; animation: none !important; }
}

.modal .modal-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: #eef1ff;
}

/* Title underline accent bar (animated width) */
.modal .modal-title {
  position: relative;
}
.modal .modal-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--modal-accent-a), var(--modal-accent-b), var(--modal-accent-c));
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
}
.modal[aria-hidden="false"] .modal-title::after {
  transition: transform 260ms var(--modal-ease) 80ms;
  transform: scaleX(1);
}

/* Sections inside modal to clone reference composition */
.modal-section {
  position: relative;
  margin: var(--space-6) 0;
  padding: var(--space-6);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.modal-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(180px 60px at 12% 0%, rgba(123,97,255,0.10), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}
.modal-section--card {
  background:
    radial-gradient(500px 160px at 10% 0%, rgba(123,97,255,0.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
}
.modal-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: #f0f3ff;
  margin-bottom: 6px;
}
.modal-section__subtitle {
  color: #9fb0df;
}

.modal .modal-features-list,
.modal .modal-bullets {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  color: #cad3ec;
}
.modal .modal-features-list li { opacity: 0; transform: translateY(6px); }
.modal[aria-hidden="false"] .modal-features-list li { animation: fadeUp var(--modal-dur) var(--modal-ease) forwards; }
.modal[aria-hidden="false"] .modal-features-list li:nth-child(1) { animation-delay: 40ms; }
.modal[aria-hidden="false"] .modal-features-list li:nth-child(2) { animation-delay: 80ms; }
.modal[aria-hidden="false"] .modal-features-list li:nth-child(3) { animation-delay: 120ms; }
.modal[aria-hidden="false"] .modal-features-list li:nth-child(4) { animation-delay: 160ms; }
.modal[aria-hidden="false"] .modal-features-list li:nth-child(5) { animation-delay: 200ms; }
.modal[aria-hidden="false"] .modal-features-list li:nth-child(6) { animation-delay: 240ms; }
.modal[aria-hidden="false"] .modal-features-list li:nth-child(7) { animation-delay: 280ms; }
.modal[aria-hidden="false"] .modal-features-list li:nth-child(8) { animation-delay: 320ms; }
.modal .modal-bullets li strong,
.modal .modal-features-list li strong { color: #e9edff; }
.modal code {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0 6px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.95em;
}

.modal .modal-actions {
  margin-top: var(--space-6);
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.modal .modal-actions::before {
  content: "";
  position: absolute;
  left: var(--space-8);
  right: var(--space-8);
  height: 1px;
  transform: translateY(-10px);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--modal-accent-a) 35%, transparent),
    color-mix(in oklab, var(--modal-accent-b) 25%, transparent),
    transparent);
  opacity: 0.5;
}

.modal .btn-close {
  /* Disable animated transitions to avoid visual pulsing */
  transition: none;
  /* smaller, brighter red per spec */
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 12px;
  background:
    radial-gradient(140% 140% at 20% 10%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(180deg, #b4444c, #8e2a31);
  color: #fff3f5;
  border: 1px solid rgba(255, 120, 140, 0.35);
  box-shadow:
    0 10px 22px rgba(180, 40, 60, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.modal .btn-close:hover,
.modal .btn-close:focus-visible {
  /* Disable hover animation/light-up for modal close button */
  background: linear-gradient(180deg, #b4444c, #8e2a31); /* keep base state */
  transform: none;
  box-shadow:
    0 10px 22px rgba(180, 40, 60, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.modal .modal-close {
  position: absolute;
  /* lower and more to the left from the dialog edge */
  top: 22px;
  right: 24px;
  /* reduce icon text size for "✕" */
  font-size: 18px;
  line-height: 1;
  color: #ffecef;
}

/* Floating Discord FAB */
.discord-fab {
  position: fixed;
  /* Brighten the button background slightly for contrast with brighter icon */
  box-shadow: 0 0 0 2px rgba(124, 136, 255, 0.12), 0 10px 24px rgba(88, 101, 242, 0.25), inset 0 0 18px rgba(124, 136, 255, 0.15);
  right: max(32px, env(safe-area-inset-right));
  bottom: max(32px, env(safe-area-inset-bottom));
  z-index: 2147483001; /* above modal */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #e9edff;
  background:
    radial-gradient(140% 140% at 20% 10%, rgba(90,120,255,0.28), transparent 60%),
    linear-gradient(180deg, #3b49b8, #2b3177);
  border: 1px solid rgba(160,180,255,0.45);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 8px rgba(90,120,255,0.08);
  transition: transform 100ms ease, filter 150ms ease, box-shadow 150ms ease, background 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.discord-fab:hover,
.discord-fab:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 10px rgba(90,120,255,0.12);
  outline: none;
}
.discord-fab__icon {
  width: 26px;
  /* Increase perceived brightness by ensuring full opacity and no dimming */
  opacity: 1;
  height: 26px;
  filter: drop-shadow(0 2px 10px rgba(90,120,255,0.45));
}
@media (max-width: 680px) {
  .discord-fab {
    width: 60px;
    height: 60px;
    right: max(6px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
  }
  .discord-fab__icon {
    width: 28px;
    height: 28px;
  }
}
/* Hover: thinner border + brighter color for cards and their buttons */
.card {
  transition: border-color 200ms var(--card-ease), border-width 200ms var(--card-ease), filter 200ms var(--card-ease), box-shadow 200ms var(--card-ease);
  border-width: 2px;
  border-style: solid;
}
.card:hover {
  border-width: 2px; /* keep same thickness on hover */
  filter: none; /* remove dim/bright shift on hover */
}

/* Orange (Linkvertise) */
.card--orange {
  border-color: #ff8a3a;
}
.card--orange:hover {
  border-color: #ff8a3a; /* keep base color on hover */
}
.card--orange .btn--orange {
  transition: background-color 160ms ease, border-color 160ms ease, border-width 160ms ease, filter 160ms ease;
  border: 2px solid #ff8a3a;
}
.card--orange .btn--orange:hover {
  border-width: 2px; /* keep button border thickness */
  background-color: #ff8a3a; /* keep existing color change if desired */
  filter: none; /* remove extra brightness to avoid wash-out */
  border-color: #ff8a3a; /* keep base border color */
}

/* Green (Work.ink) */
.card--green {
  border-color: #1ec97f;
}
.card--green:hover {
  border-color: #1ec97f; /* keep base color on hover */
}
.card--green .btn--green {
  transition: background-color 160ms ease, border-color 160ms ease, border-width 160ms ease, filter 160ms ease;
  border: 2px solid #1ec97f;
}
.card--green .btn--green:hover {
  border-width: 2px; /* keep button border thickness */
  background-color: #1ec97f;
  filter: none; /* remove extra brightness */
  border-color: #1ec97f; /* keep base border color */
}

/* Purple (Loot.Labs) */
.card--purple {
  border-color: #8a5cff;
}
.card--purple:hover {
  border-color: #8a5cff; /* keep base color on hover */
}
.card--purple .btn--primary {
  transition: background-color 160ms ease, border-color 160ms ease, border-width 160ms ease, filter 160ms ease;
  border: 2px solid #8a5cff;
}
.card--purple .btn--primary:hover {
  border-width: 2px; /* keep button border thickness */
  background-color: #8a5cff;
  filter: none; /* remove extra brightness */
  border-color: #8a5cff; /* keep base border color */
}

/* Premium card: luminous gold focus for advertising */
.card--premium {
  position: relative;
  color: #fff7e0;
  border-color: #ffd46a;
  background:
    radial-gradient(500px 200px at 50% -40%, rgba(255,220,120,0.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
}
.card--premium::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(
    from 0deg,
    #ffe27a 0deg,
    #ffc74a 120deg,
    #ffb03a 240deg,
    #ffe27a 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(255, 212, 106, 0.35)) drop-shadow(0 0 8px rgba(255, 212, 106, 0.35));
  animation: premiumRing 2600ms ease-in-out infinite;
}
.card--premium::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(780px 260px at 50% -40%, rgba(0,0,0,0.55), transparent 60%),
    radial-gradient(900px 220px at 10% 100%, rgba(255,212,106,0.18), transparent 60%),
    radial-gradient(900px 220px at 90% 100%, rgba(255,212,106,0.18), transparent 60%);
  opacity: 0.9;
}

@keyframes premiumRing {
  0%, 100% { opacity: 0.9; filter: drop-shadow(0 0 18px rgba(255, 212, 106, 0.35)) drop-shadow(0 0 6px rgba(255, 212, 106, 0.35)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 32px rgba(255, 212, 106, 0.55)) drop-shadow(0 0 14px rgba(255, 212, 106, 0.45)); }
}

/* Extra hover accent animations for Get Key cards */
.cards .card.card--premium:is(:hover, :focus-within) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,212,106,0.28) inset;
}
.cards .card.card--premium:is(:hover, :focus-within)::before { animation-duration: 1800ms; }

/* Subtle pulse on icon circle for premium */
.card--premium .card__icon--circle::after {
  content: none;
}
/* ensure the crown icon sits above the glow */
.card--premium .card__icon--circle > svg { position: relative; z-index: 1; }
@keyframes premiumIconPulse {
  0%,100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-1px); }
}

/* Optional: brighten circular icon on hover */
.card:hover .card__icon--circle,
.card:hover .card__icon--circle--light {
  filter: none; /* prevent icon color/brightness shift on hover */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card,
  .btn,
  .card .btn {
    transition: none !important;
  }
}

/* Discord gradient link styling for inline word highlight */
.discord-link {
  position: relative;
  font-weight: 800;
  text-decoration: none;
  /* Darker Discord-themed gradient (remove light grey tail) */
  background: linear-gradient(90deg, #4b59d9 0%, #3c47b3 50%, #2b3177 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 1px;
  /* Darker underline to match text tone */
  border-bottom: 2px solid rgba(60, 71, 179, 0.55);
  transition: border-color 160ms ease, filter 160ms ease, text-shadow 160ms ease;
  cursor: pointer;
  white-space: nowrap;
}
.discord-link:hover {
  border-color: #3c47b3;
  filter: brightness(1.03);
  text-shadow: 0 0 6px rgba(60, 71, 179, 0.35);
}
.discord-link:active {
  filter: brightness(0.95);
}
.discord-link:focus-visible {
  outline: none;
  border-color: #2b3177;
  box-shadow: 0 0 0 3px rgba(60, 71, 179, 0.25);
  border-radius: 4px;
}

/* ==============================================
   Global hover reset (except Scripts cards and
   Executor card buttons)
   ============================================== */
/* Tabs */
.tab:hover,
.ms-tab:hover {
  transform: none !important;
  background: none !important;
  color: inherit !important;
}

/* Generic buttons (keep script card buttons and executor ex-btns) */
.btn:hover {
  transform: none !important;
  background: inherit !important;
  box-shadow: inherit !important;
  filter: none !important;
}

/* Cards (site-wide) */
.cards .card:is(:hover, :focus-within) {
  transform: none !important;
  box-shadow: var(--shadow-soft) !important;
}
.cards .card:is(:hover, :focus-within) .card__mono-title,
.cards .card:is(:hover, :focus-within) .card__subtitle,
.cards .card:is(:hover, :focus-within) .bullet-list,
.cards .card:is(:hover, :focus-within) .btn {
  transform: none !important;
}

/* Home feature cards parallax off */
.chiyo-card:hover .chiyo-card__icon,
.chiyo-card:hover .chiyo-card__title,
.chiyo-card:hover .chiyo-card__text {
  transform: none !important;
}

/* My Scripts banner cards */
.ms-card:hover,
.ms-card:focus-within { transform: none !important; box-shadow: none !important; }
.ms-card:hover .ms-card__img,
.ms-card:focus-within .ms-card__img { transform: none !important; }

/* Discord FAB + link */
.discord-fab:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 8px rgba(90,120,255,0.08) !important;
}
.discord-link:hover {
  border-color: rgba(60, 71, 179, 0.55) !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Executor card buttons: keep hover lift/background, but no card light-up */
.executor-card .ex-btn:is(:hover, :focus-visible) {
  transform: translateY(-1px) !important;
}
/* keep variant background hovers already defined; no shine needed */

/* MS buttons */
.ms-btn:hover {
  transform: none !important;
  background: inherit !important;
  box-shadow: inherit !important;
  filter: none !important;
}

/* Home feature cards: keep base shadow on hover */
.chiyo-card:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* removed: reintroduced hover halo on Get Key cards */
/* ======================================================
   Get Key: remove ALL hover effects on cards and buttons
   ======================================================
   This section hard-disables any visual changes on hover
   for the three Get Key cards and their CTAs only. It is
   intentionally more specific and uses !important to win
   over earlier styles without affecting other pages.
*/
#panel-getkey .cards .card,
#panel-getkey .cards .card .btn {
  transition: none !important;
}

#panel-getkey .cards .card:is(:hover, :focus-within),
#panel-getkey .cards .card:is(:hover, :focus-within)::before,
#panel-getkey .cards .card:is(:hover, :focus-within)::after {
  transform: none !important;
  filter: none !important;
  /* keep the exact base shadow from .card (no lighting change) */
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  opacity: 1 !important;
}

#panel-getkey .cards .card:is(:hover, :focus-within) .card__mono-title,
#panel-getkey .cards .card:is(:hover, :focus-within) .card__subtitle,
#panel-getkey .cards .card:is(:hover, :focus-within) .bullet-list,
#panel-getkey .cards .card:is(:hover, :focus-within) .btn {
  transform: none !important;
}

#panel-getkey .cards .card::before,
#panel-getkey .cards .card::after {
  /* nuke any glow/halo layers entirely */
  content: none !important;
  opacity: 0 !important;
  filter: none !important;
  background: none !important;
  animation: none !important;
}

#panel-getkey .cards .card .btn::after { content: none !important; }
#panel-getkey .cards .card .btn:is(:hover, :focus-visible) {
  transform: none !important;
  box-shadow: none !important; /* no lighting change */
  filter: none !important;
}

/* Remove focus outline/shadow for Get Key CTAs */
#panel-getkey .cards .card a.btn:focus,
#panel-getkey .cards .card a.btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure variant buttons keep their base colors on hover within Get Key */
#panel-getkey .cards .card .btn--primary:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #2a3250, #1f2740) !important;
  color: #e9edff !important;
  border-color: rgba(133,170,255,0.25) !important;
}
#panel-getkey .cards .card .btn--orange:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #a43f14, #8c330f) !important;
  color: #fff6ef !important;
  border-color: #ff8a3a !important;
  border-width: 2px !important;
}
#panel-getkey .cards .card .btn--green:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #114b36, #0e3e2d) !important;
  color: #eafff5 !important;
  border-color: #1ec97f !important;
  border-width: 2px !important;
}
#panel-getkey .cards .card .btn--premium:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #ffe08a 0%, #ffc85a 54%, #f1ad3f 100%) !important;
  color: #1b1408 !important;
  border-color: rgba(255, 212, 106, 0.65) !important;
  border-width: 1.5px !important;
}