/*
 * ╔══════════════════════════════════════════════════════════╗
 * ║  SELLAUTH — OBSIDIAN DEEP  (v4)                         ║
 * ║  Accent  : #22d3ee  electric cyan                       ║
 * ║  BG      : #030c16  deep ocean dark                     ║
 * ║  Card    : #061628  dark navy                           ║
 * ║  Font    : Outfit                                       ║
 * ╠══════════════════════════════════════════════════════════╣
 * ║  Dark Reader : color-scheme:dark  → DR leaves us alone  ║
 * ║  Readability : NO gradient-clip on body text            ║
 * ║  Performance : transform+opacity ONLY in @keyframes     ║
 * ║  Safety      : NO transform on .fixed (z-index bug)     ║
 * ╚══════════════════════════════════════════════════════════╝
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1 · DARK READER + RENDER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* Tell Dark Reader (and browsers) this is a dark page — hands off! */
  color-scheme: dark;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Prevent Windows Forced Colours from overriding our palette */
  forced-color-adjust: none;
}

/* GPU layer only on nav, NEVER on .fixed (stacking-context bug) */
nav.component { will-change: transform; transform: translateZ(0); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2 · DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* Glassmorphism blur levels */
  --b1: blur(8px)  saturate(130%);
  --b2: blur(20px) saturate(160%);
  --b3: blur(36px) saturate(190%);

  /* Shadows */
  --s0: 0 2px 10px  rgba(0,0,0,.45);
  --s1: 0 6px 28px  rgba(0,0,0,.55);
  --s2: 0 20px 64px rgba(0,0,0,.68);
  --sg: 0 0 28px    rgba(var(--cl-accent),.32);
  --sG: 0 0 60px    rgba(var(--cl-accent),.5);
  --st: inset 0 1px 0 rgba(255,255,255,.07);
  --sb: inset 0 -1px 0 rgba(0,0,0,.25);

  /* Easing — feels great at 240Hz */
  --e:  cubic-bezier(.22,1,.36,1);
  --es: cubic-bezier(.34,1.56,.64,1);
  --ei: cubic-bezier(.87,0,.13,1);

  /* Radii system */
  --r1:.375rem; --r2:.625rem; --r3:.875rem;
  --r4:1.25rem; --r5:1.75rem; --r6:2.5rem;

  /* Gradient accent — used only on decorative elements, NOT body text */
  --ga: linear-gradient(135deg, #22d3ee 0%, #38bdf8 40%, #818cf8 100%);
  --ga2: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3 · GLOBAL RADIUS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

* { border-radius: var(--r3); }
.rounded-full,[class*="rounded-full"] { border-radius: 9999px !important; }

/* Layout wrappers — no radius */
html,body,#app,#particles-js,[id="snow"],
.fixed.inset-0,section.component,
.announcement.component,.announcement.component>div { border-radius: 0 !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4 · KEYFRAMES (transform + opacity ONLY → GPU only)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes up    { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
@keyframes dn    { from{opacity:0;transform:translateY(-24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fi    { from{opacity:0} to{opacity:1} }
@keyframes si    { from{opacity:0;transform:scale(.91)} to{opacity:1;transform:scale(1)} }
@keyframes puls  { 0%{opacity:.5;transform:scale(1)} 100%{opacity:0;transform:scale(2.2)} }

/* Drifting gradient orbs */
@keyframes orbA {
  0%,100%{transform:translate(0,0) scale(1)}
  38%    {transform:translate(2.5%,3.5%)  scale(1.04)}
  72%    {transform:translate(-2%,-2.5%)  scale(.96)}
}
@keyframes orbB {
  0%,100%{transform:translate(0,0) scale(1)}
  42%    {transform:translate(-2.2%,-3%) scale(1.03)}
  70%    {transform:translate(1.8%,2.2%) scale(.97)}
}

/* Running light strip */
@keyframes run  { from{left:-70%} to{left:110%} }

/* Accent button shine */
@keyframes shine {
  0%  {left:-90%;opacity:0}
  18% {opacity:.45}
  82% {opacity:.45}
  100%{left:120%;opacity:0}
}

/* Slow gradient pulse for decorative borders */
@keyframes gborder { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5 · SCROLL-PROGRESS BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body::before {
  content:''; position:fixed; top:0; left:0; right:0; height:2px;
  z-index:9999; border-radius:0 !important;
  background: var(--ga);
  transform-origin: left center;
  transform: scaleX(var(--sp,0));
  box-shadow: 0 0 14px rgba(var(--cl-accent),.75);
  transition: transform 80ms linear;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6 · SCROLL REVEAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sr {
  opacity:0; transform:translateY(28px);
  will-change:opacity,transform;
  transition: opacity .72s var(--e), transform .72s var(--e);
}
.sr.in { opacity:1; transform:translateY(0); will-change:auto; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7 · ANNOUNCEMENT — premium dark pill with animated border
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.announcement.component > div {
  position:relative; overflow:hidden;
  /* Override bg-accent-500 to a readable dark bar */
  background: rgba(var(--cl-background),.98) !important;
  color: rgb(var(--cl-t-primary)) !important;
  border-top: none !important; border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(var(--cl-accent),.28) !important;
  animation: fi .4s var(--e) both;
}

/* Animated running light on bottom border */
.announcement.component > div::after {
  content:''; position:absolute; bottom:0; left:-70%;
  width:40%; height:1px; border-radius:0 !important;
  background: linear-gradient(90deg,transparent,rgb(var(--cl-accent)),transparent);
  animation: run 2.8s linear infinite;
}

/* Ensure text inside announcement is readable (override text-t-accent which might be dark) */
.announcement.component p,
.announcement.component span,
.announcement.component a {
  color: rgb(var(--cl-t-primary)) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8 · NAVBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

nav.component {
  position:sticky; top:0; z-index:100;
  border-radius:0 !important;
  animation: dn .55s var(--e) .06s both;
}

nav.component > div {
  background: rgba(var(--cl-card),.7) !important;
  backdrop-filter: var(--b3) !important;
  -webkit-backdrop-filter: var(--b3) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: var(--r6) !important;
  margin:.5rem 0;
  box-shadow: var(--s1), var(--st), var(--sb);
  transition: background 280ms var(--e), box-shadow 280ms var(--e), border-color 280ms var(--e) !important;
}

nav.component.scrolled > div {
  background: rgba(var(--cl-card),.95) !important;
  border-color: rgba(var(--cl-accent),.16) !important;
  box-shadow: 0 14px 56px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--cl-accent),.1), var(--st);
}

/* Guarantee logo is readable and not giant */
nav img {
  max-height:2.25rem !important; max-width:7rem !important;
  width:auto !important; height:auto !important; object-fit:contain !important;
}

nav a, nav button {
  transition: color 130ms var(--e), background-color 130ms var(--e),
    border-color 130ms var(--e), box-shadow 180ms var(--e), transform 180ms var(--es) !important;
  border-radius: var(--r2) !important;
}
nav a:hover, nav button:hover { transform:translateY(-2px); }
nav a:active, nav button:active { transform:translateY(0) scale(.96); transition-duration:60ms !important; }
nav a[href*="cart"]:hover { box-shadow: var(--sg) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9 · HERO — gradient mesh + dramatic orbs
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

section[id="hero"],
section[data-component-id="hero"] {
  position:relative; overflow:hidden; border-radius:0 !important;
  /* 4-radial gradient mesh — creates depth without any images */
  background:
    radial-gradient(ellipse 100% 80% at -10% 5%,  rgba(var(--cl-accent),.18) 0%, transparent 52%),
    radial-gradient(ellipse  70% 60% at 108% 8%,  rgba(var(--cl-accent),.12) 0%, transparent 52%),
    radial-gradient(ellipse  80% 50% at  55% 105%, rgba(var(--cl-accent),.09) 0%, transparent 52%),
    radial-gradient(ellipse  40% 40% at  50%  50%, rgba(var(--cl-accent),.03) 0%, transparent 60%),
    rgb(var(--cl-background));
}

/* Orb A — top-right */
section[id="hero"]::before {
  content:''; position:absolute; border-radius:50% !important;
  width:min(80vw,1000px); height:min(80vw,1000px);
  background:radial-gradient(circle,rgba(var(--cl-accent),.16) 0%,transparent 68%);
  top:-30%; right:-18%; pointer-events:none;
  animation:orbA 11s ease-in-out infinite; will-change:transform;
}
/* Orb B — bottom-left */
section[id="hero"]::after {
  content:''; position:absolute; border-radius:50% !important;
  width:min(60vw,720px); height:min(60vw,720px);
  background:radial-gradient(circle,rgba(var(--cl-accent),.08) 0%,transparent 68%);
  bottom:-22%; left:-12%; pointer-events:none;
  animation:orbB 15s ease-in-out infinite; will-change:transform;
}

/* GRADIENT TEXT on accent spans in hero h1 — with solid color fallback for readability */
section[id="hero"] h1 .text-accent-500,
section[data-component-id="hero"] h1 .text-accent-500 {
  color: rgb(var(--cl-accent)); /* fallback — always readable */
  background: var(--ga);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero h1 — tight, dramatic, fluid size */
section[id="hero"] h1,
section[data-component-id="hero"] h1 {
  font-size: clamp(2.4rem, 4.8vw, 4.8rem) !important;
  line-height: 1.07 !important;
  letter-spacing: -.03em !important;
  font-weight: 800 !important;
  animation: up .95s var(--e) .18s both;
}

/* Constrain images inside hero headings (admins sometimes embed logos in title HTML) */
section[id="hero"] h1 img, section[data-component-id="hero"] h1 img,
section[id="hero"] p img,  section[data-component-id="hero"] p img {
  max-height:4rem !important; max-width:100% !important;
  width:auto !important; height:auto !important; vertical-align:middle;
}

section[id="hero"] > div > div > div > p,
section[data-component-id="hero"] > div > div > div > p {
  animation: up .95s var(--e) .34s both;
  opacity: 1; /* ensure always readable */
  color: rgba(var(--cl-t-primary), .72) !important;
}
section[id="hero"] form,section[data-component-id="hero"] form {
  animation: up .95s var(--e) .44s both;
}
section[id="hero"] .flex-wrap,section[data-component-id="hero"] .flex-wrap {
  animation: up .95s var(--e) .52s both;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10 · SECTION TITLE UNDERLINE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.section-title-bar {
  display:block; height:2px; width:3rem;
  margin:.55rem auto 0; border-radius:99px !important;
  background: var(--ga2);
  box-shadow: 0 0 16px rgba(var(--cl-accent),.55);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11 · STAT CARDS — READABLE solid color, not gradient-clip
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

section[id="stats"],section[data-component-id="stats"] { border-radius:0 !important; }

.stat-card {
  position:relative; overflow:hidden; border-radius:var(--r5) !important;
  transition: transform 250ms var(--es), box-shadow 250ms var(--e), border-color 250ms var(--e) !important;
}
.stat-card:hover {
  transform:translateY(-7px);
  border-color:rgba(var(--cl-accent),.35) !important;
  box-shadow: var(--s2), 0 0 44px rgba(var(--cl-accent),.14) !important;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px; border-radius:0 !important;
  background:linear-gradient(90deg,transparent,rgba(var(--cl-accent),.6),transparent);
  opacity:0; transition:opacity 250ms ease !important;
}
.stat-card:hover::before { opacity:1; }

.stat-icon {
  transition: transform 250ms var(--es), box-shadow 250ms ease !important;
}
.stat-card:hover .stat-icon { transform:scale(1.2); box-shadow:0 0 28px rgba(var(--cl-accent),.5) !important; }

/* Stat number: solid accent color + glow (NO gradient-clip = always readable) */
.stat-number {
  color: rgb(var(--cl-accent)) !important;
  text-shadow:
    0 0 28px rgba(var(--cl-accent),.45),
    0 0 56px rgba(var(--cl-accent),.2) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12 · FEATURE CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.feature-card {
  border-radius:var(--r5) !important;
  transition: transform 250ms var(--es), box-shadow 250ms var(--e), border-color 250ms var(--e) !important;
}
.feature-card:hover {
  transform:translateY(-8px);
  border-color:rgba(var(--cl-accent),.32) !important;
  box-shadow: var(--s2), 0 0 44px rgba(var(--cl-accent),.14) !important;
}
.feature-glow { transition:opacity 250ms ease !important; }
.feature-card:hover .feature-glow { opacity:1 !important; }
.feature-line  { transition:opacity 250ms ease !important; }
.feature-card:hover .feature-line  { opacity:1 !important; }
.feature-icon-wrap {
  transition: transform 250ms var(--es), box-shadow 250ms ease, background-color 250ms ease !important;
}
.feature-card:hover .feature-icon-wrap {
  transform:scale(1.16);
  background-color:rgba(var(--cl-accent),.22) !important;
  box-shadow:0 0 26px rgba(var(--cl-accent),.42) !important;
}
.feature-icon { transition:filter 250ms ease !important; }
.feature-card:hover .feature-icon { filter:drop-shadow(0 0 9px rgba(var(--cl-accent),.9)); }
.feature-num {
  position:absolute; top:.75rem; right:.75rem;
  font-size:3.75rem; font-weight:800; line-height:1;
  color:rgba(var(--cl-accent),.055);
  transition:color 250ms ease !important; pointer-events:none;
}
.feature-card:hover .feature-num { color:rgba(var(--cl-accent),.1); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13 · PRODUCT CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.product-card {
  position:relative; border-radius:var(--r5) !important; overflow:hidden;
  transition: transform 270ms var(--es), box-shadow 270ms var(--e), border-color 270ms var(--e) !important;
  will-change:transform;
}
.product-card:hover {
  transform:translateY(-10px) scale(1.018) !important;
  border-color:rgba(var(--cl-accent),.25) !important;
  box-shadow: var(--s2), var(--sg) !important;
}
/* Gradient border via CSS mask — appears on hover, 0 DOM overhead */
.product-card::after {
  content:''; position:absolute; inset:0;
  border-radius:var(--r5) !important; padding:1px;
  background: linear-gradient(135deg,
    rgba(var(--cl-accent),0) 0%,
    rgba(var(--cl-accent),.65) 50%,
    rgba(var(--cl-accent),0) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity 270ms ease !important; pointer-events:none;
}
.product-card:hover::after { opacity:1; }
.product-card-img { transition:transform 450ms var(--e) !important; }
.product-card:hover .product-card-img { transform:scale(1.09) !important; }
.product-cta { border-radius:var(--r2) !important; }
.product-cta-arrow { transition:transform 200ms var(--es) !important; }
.product-cta:hover .product-cta-arrow { transform:translateX(5px); }
.product-card:hover .product-cta { box-shadow:0 0 24px rgba(var(--cl-accent),.36) !important; }

/* Product price — SOLID accent color (no gradient-clip) for readability */
.product-price {
  color: rgb(var(--cl-accent)) !important;
  text-shadow: 0 0 18px rgba(var(--cl-accent),.3) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14 · BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

button,[role="button"] {
  border-radius:var(--r2) !important;
  transition: color 130ms var(--e), background-color 130ms var(--e),
    border-color 130ms var(--e), box-shadow 180ms var(--e),
    transform 180ms var(--es), opacity 130ms var(--e) !important;
  will-change:transform;
}
button:hover,[role="button"]:hover { transform:translateY(-2px); }
button:active,[role="button"]:active { transform:translateY(0) scale(.965); transition-duration:60ms !important; }

/* Accent buttons */
.bg-accent-500,.bg-accent-600 {
  position:relative; overflow:hidden;
  /* Ensure text_accent_color (dark) is readable on bright accent bg */
  color: rgb(var(--cl-t-accent)) !important;
  box-shadow: 0 4px 26px rgba(var(--cl-accent),.42), var(--st) !important;
}
.bg-accent-500:hover,.bg-accent-600:hover {
  box-shadow: 0 8px 44px rgba(var(--cl-accent),.58), var(--st) !important;
}
/* Running shine animation on accent buttons */
.bg-accent-500::after,.bg-accent-600::after {
  content:''; position:absolute; top:0; left:-90%;
  width:55%; height:100%; border-radius:0 !important; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-22deg);
  animation: shine 3.5s ease infinite;
}

.border-accent-500:is(a):hover,.border-accent-500:is(button):hover {
  background:rgba(var(--cl-accent),.1) !important;
  box-shadow:0 0 28px rgba(var(--cl-accent),.26) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15 · INPUTS — clearly readable
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

input:not([type="checkbox"]):not([type="radio"]),select,textarea {
  border-radius:var(--r2) !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:rgb(var(--cl-t-primary)) !important;
  transition: border-color 150ms var(--e), box-shadow 180ms var(--e), background-color 150ms var(--e) !important;
}
input:focus,select:focus,textarea:focus {
  border-color:rgba(var(--cl-accent),.55) !important;
  background:rgba(255,255,255,.07) !important;
  box-shadow:0 0 0 3px rgba(var(--cl-accent),.16), 0 2px 14px rgba(0,0,0,.28) !important;
  outline:none;
}
input::placeholder { color:rgba(var(--cl-t-primary),.38) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16 · GLASSMORPHISM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

[class*="bg-card"] {
  backdrop-filter: var(--b1) !important;
  -webkit-backdrop-filter: var(--b1) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17 · MODALS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.fixed.inset-0[class*="bg-black"] {
  backdrop-filter:blur(10px) brightness(.5) !important;
  -webkit-backdrop-filter:blur(10px) brightness(.5) !important;
}
.fixed.inset-0>[class*="bg-card"],
.fixed.inset-0>[class*="bg-background"],
.fixed.inset-x-0>[class*="bg-card"] {
  border-radius:var(--r6) !important;
  backdrop-filter:var(--b2) !important; -webkit-backdrop-filter:var(--b2) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--cl-accent),.1), var(--st) !important;
  animation:si .28s var(--e) both;
  /* Ensure modal text is readable */
  color:rgb(var(--cl-t-primary)) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18 · FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

footer {
  border-radius:var(--r6) !important; margin-top:2rem; overflow:hidden;
  background:rgba(var(--cl-card),.72) !important;
  backdrop-filter:var(--b2) !important; -webkit-backdrop-filter:var(--b2) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 -14px 60px rgba(0,0,0,.3), var(--st);
}
footer a {
  transition: color 140ms var(--e), transform 180ms var(--es) !important;
  /* Ensure footer links are always visible */
  opacity:1 !important;
}
footer a:hover { transform:translateY(-2px); }
footer a[target="blank"]:hover,footer a[target="_blank"]:hover {
  transform:translateY(-4px) scale(1.22);
  filter:drop-shadow(0 4px 12px currentColor);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19 · TABLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

table {
  border-collapse:separate !important; border-spacing:0 !important;
  border-radius:var(--r5) !important; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
table th,table td { border-radius:0 !important; padding:.9rem 1rem !important; }
table th {
  background:rgba(255,255,255,.03); font-size:.68rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:rgba(var(--cl-t-primary),.6) !important;
  border-bottom:1px solid rgba(255,255,255,.07);
}
table td {
  border-top:1px solid rgba(255,255,255,.035);
  color:rgba(var(--cl-t-primary),.85) !important;
  transition:background 130ms var(--e) !important;
}
table tr:hover td { background:rgba(255,255,255,.018); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20 · CHOICES DROPDOWNS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.choices{margin-bottom:0 !important}
.choices.is-open{border-radius:var(--r2) var(--r2) 0 0 !important}
.choices .choices__inner{
  min-height:2.5rem !important; border-radius:var(--r2) !important;
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.1) !important;
  padding:.5rem 1rem !important; transition:border-color 140ms var(--e) !important;
  color:rgb(var(--cl-t-primary)) !important;
}
.choices.is-open .choices__inner{
  border-radius:var(--r2) var(--r2) 0 0 !important; border-color:rgba(var(--cl-accent),.45) !important;
}
.choices .choices__list--dropdown{
  background:rgb(var(--cl-card)) !important; backdrop-filter:var(--b2) !important;
  border:1px solid rgba(255,255,255,.09) !important; border-top:none !important;
  border-radius:0 0 var(--r2) var(--r2) !important; box-shadow:0 14px 40px rgba(0,0,0,.55) !important;
}
.choices .choices__list--dropdown .choices__item {
  color:rgb(var(--cl-t-primary)) !important;
}
.currency-selector.xs .choices.is-open{box-shadow:none !important}
.currency-selector.xs .choices__inner{background:transparent !important;border:none !important}
.currency-selector.lg .choices__inner{
  min-width:5rem !important; height:44px !important;
  background:transparent !important; border:1px solid rgba(255,255,255,.08) !important;
  border-radius:var(--r2) !important;
}
.currency-selector.lg .choices.is-open .choices__inner{border-color:rgba(var(--cl-accent),.45) !important}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21 · SPLIDE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.splide .splide__arrow{
  background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.1) !important;
  border-radius:50% !important; backdrop-filter:var(--b1);
  transition:background 180ms var(--e),transform 180ms var(--es),box-shadow 180ms var(--e) !important;
}
.splide .splide__arrow:hover{
  background:rgba(var(--cl-accent),.22) !important;
  transform:scale(1.15) !important; box-shadow:var(--sg) !important;
}
.splide .splide__arrow svg{fill:rgb(var(--cl-accent)) !important}
.splide .splide__pagination__page.is-active{
  background:rgb(var(--cl-accent)) !important; transform:scale(1.4); box-shadow:var(--sg);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   22 · SCROLLBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--cl-accent),.32);border-radius:99px !important}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--cl-accent),.62)}
::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-width:thin;scrollbar-color:rgba(var(--cl-accent),.32) transparent}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   23 · PULSATING
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pulsating {
  position:absolute;top:0;left:0;width:100%;height:100%;
  border-radius:100% !important;opacity:0;pointer-events:none;
  animation:puls 1.25s linear infinite;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   24 · GENERAL TEXT READABILITY SAFETY NET
   Ensures text is never invisible regardless of what Tailwind
   utility class opacity values are applied.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Minimum opacity for readable text elements */
p, h1, h2, h3, h4, h5, h6, span, a, li, td, th, label {
  /* Don't override — just ensure the color-scheme declaration
     keeps Dark Reader from inverting our already-dark text */
}

/* Ensure accent-colored text is always fully opaque and readable */
.text-accent-500,
[class*="text-accent"] {
  color: rgb(var(--cl-accent)) !important;
  /* No -webkit-text-fill-color override here — we want solid color */
}