/* =========================================================
   ui-overrides.css — NEXUS (blu-vjollcë) THEME – FINAL
   - Vendose si CSS i fundit që të mbulojë çdo stil tjetër
   - Sfond me foto + vello blu-vjollcë
   ========================================================= */

/* ============== 1) VARIABLAT KRYESORE ============== */
:root{
  /* Paletë bazë (dark) */
  --bg:        #0b1231;   /* sfondi i faqes */
  --surface:   #0f183d;   /* karta/modale */
  --surface-2: #121f4a;   /* sipërfaqe sekondare */

  --text:  #eaf0ff;
  --muted: #a7b2d8;
  --line:  rgba(255,255,255,.10);

  /* Aksentet si në screenshot (vjollcë + blu) */
  --brand:  #6A55FF;     /* primare (vjollcë) */
  --brand2: #1E9AFE;     /* sekondare (blu)  */

  /* Hijet + radius */
  --shadow:    0 12px 24px rgba(3,8,28,.55);
  --shadow-lg: 0 20px 60px rgba(3,8,28,.70);
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Focus ring */
  --ring:       #2a87ff;
  --ring-alpha: .35;
}

/* (Opsional) Light mode – nëse e detyron diku me data-theme="light" */
:root[data-theme="light"]{
  --bg:#f5f7ff;
  --surface:#ffffff;
  --surface-2:#ffffff;
  --text:#0f1630;
  --muted:#5a6a8d;
  --line:rgba(0,0,0,.08);
}

/* ============== 2) RESET I SFONDEVE TË VJETRA ============== */
html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
}
body{
  /* Hiq çdo background të mëparshëm që të mos ketë dublikatë */
  background-image: none !important;
  background-attachment: initial !important;
  background-size: auto !important;
}

/* ============== 3) FOTO + VELLO NË SFOND (NJË SHTRESË) ============== */
/* Vendos foton tënde tek /assets/img/background.jpg  */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* vello e errët për lexueshmëri */
    linear-gradient(0deg, rgba(10,15,45,.78), rgba(10,15,45,.78)),
    /* gradiente blu-vjollcë */
    linear-gradient(180deg, rgba(106,85,255,.38), rgba(30,154,254,.38)),
    /* foto */
    url('/assets/img/background.jpg') center/cover no-repeat;
  filter: saturate(112%);
}

/* ============== 4) HEADER & NAV ============== */
header{
  background: linear-gradient(180deg, rgba(10,15,36,.86), rgba(10,15,36,.78)) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 2px 12px rgba(4,8,22,.45) !important;
}
header .nav a,
header .nav button,
header .navbar-brand,
header .brand,
header .logo{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow: 0 0 12px rgba(106,85,255,.15);
}
header .nav a:hover,
header .nav button:hover{
  opacity:.9; transform: translateY(-1px);
}

/* ============== 5) HERO ============== */
section.hero{
  position: relative;
  background: transparent !important;
  padding: 96px 0 84px;
}
section.hero .h1{
  line-height: 1.15;
  color:#fff !important;
  text-shadow: 0 0 28px rgba(106,85,255,.55), 0 2px 0 rgba(0,0,0,.25);
}
/* brez i tejdukshëm poshtë hero-s (si në screenshot) */
section.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:140px;
  background: linear-gradient(180deg, rgba(106,85,255,.22), rgba(30,154,254,.20), transparent);
  pointer-events:none;
}

/* ============== 6) KARTA, MODALE, BADGE ============== */
.card, .modal-card{
  background: rgba(18, 25, 62, .55) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--radius-lg);
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}
.badge{
  border: none;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--brand2), var(--brand));
  color:#00161e;
  font-weight: 800;
}

/* ============== 7) BUTONAT ============== */
button, .btn{
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: linear-gradient(90deg, var(--brand2), var(--brand)) !important;
  box-shadow: 0 10px 28px rgba(30,154,254,.26) !important;
  transition: transform .12s ease, box-shadow .2s ease !important;
}
button:hover, .btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 36px rgba(106,85,255,.35) !important;
}
button:active, .btn:active{ transform: translateY(0) scale(.985) !important; }

/* ============== 8) FORMS ============== */
input, textarea, select{
  background:#10173f !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#eaf0ff !important;
  border-radius: 12px !important;
}
input::placeholder, textarea::placeholder{ color:#95a2c8 !important; }
:where(input, textarea, select):focus-visible{
  outline:none !important;
  border-color: var(--brand2) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) calc(var(--ring-alpha)*100%), transparent) !important;
}

/* ============== 9) TABELAT ============== */
thead th{
  position: sticky; top:0; z-index:1;
  background:#131c48 !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  color:#e5ecff !important;
  font-weight: 800;
}
tbody tr:nth-child(odd){ background: rgba(255,255,255,.02) }

/* ============== 10) TOAST/NOTIFIKIME ============== */
.toast{
  position: fixed; right:20px; bottom:20px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px 18px;
}

/* ============== 11) FOOTER ============== */
footer{
  background: rgba(10,14,34,.75) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color:#dfe6ff !important;
}

/* ============== 12) UTILS ============== */
a{ color: color-mix(in oklab, var(--brand2) 88%, white 12%); }
a:hover{ color:#fff; }
*{ letter-spacing:.1px; }

/* Fokus i unifikuar */
:where(a, button, input, textarea, select, .btn, .card):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) calc(var(--ring-alpha)*100%), transparent);
  border-radius: 10px;
}

/* Reduktim animacionesh nëse përdoruesi e preferon */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ================== PARTNER LOGOS (left -> right marquee) ================== */
:root{
  --partner-h: 36px;            /* lartësia e logos në mobile */
  --partner-gap: 44px;          /* hapësira mes logos */
  --partner-speed: 38s;         /* shpejtësia e animacionit */
}

#partner-logos{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 22px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border-top: 1px solid color-mix(in oklab, var(--text), transparent 90%);
  border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 92%);
}

#partner-logos .logos-track{
  display: inline-flex;
  align-items: center;
  gap: var(--partner-gap);
  width: max-content;                 /* le të zgjatet sa ka elementë */
  will-change: transform;
  animation: marqueeLTR var(--partner-speed) linear infinite;
}

#partner-logos .plogo{
  height: var(--partner-h);
  width: auto;
  opacity: .85;
  filter: drop-shadow(0 0 10px rgba(106,85,255,.25))
          brightness(1) saturate(1.1);
  transition: transform .2s var(--ease-fast),
              opacity .2s var(--ease-fast),
              filter .2s var(--ease-fast);
}

/* Hover: pauzo lëvizjen dhe thekso logon */
#partner-logos:hover .logos-track{ animation-play-state: paused; }
#partner-logos .plogo:hover{
  transform: translateY(-1px) scale(1.03);
  opacity: 1;
  filter: drop-shadow(0 0 16px color-mix(in oklab, var(--brand2), transparent 35%))
          brightness(1.08) saturate(1.15);
}

/* 🔁 Lëvizje nga e majta në të djathtë */
@keyframes marqueeLTR{
  0%   { transform: translateX(-50%); } /* nis nga gjysma majtas */
  100% { transform: translateX(0);     } /* përfundon në pozicionin fillestar */
}

/* Desktop: logo pak më e madhe dhe ritëm më i ngadaltë */
@media (min-width: 900px){
  :root{
    --partner-h: 42px;
    --partner-gap: 56px;
    --partner-speed: 46s;
  }
}

/* Aksesueshmëri: ç’aktivizo animacionet për përdoruesit që s’i preferojnë */
@media (prefers-reduced-motion: reduce){
  #partner-logos .logos-track{ animation: none; }
}



/* ===== Partner Logos — marquee i butë (majtas → djathtas) ===== */
#partner-logos{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 22px 0;
  border-top: 1px solid color-mix(in oklab, var(--text), transparent 88%);
  border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 92%);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}

#partner-logos .logos-track{
  display: flex;
  align-items: center;
  gap: 48px;                 /* hapësira mes logove */
  white-space: nowrap;
  will-change: transform;
  animation: partnersScroll 32s linear infinite;
}

#partner-logos .logos-track.clone{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);  /* qendro në të njëjtën vijë */
  left: 100%;
  animation: partnersScrollClone 32s linear infinite;
}

/* Madhësia e logos — ndrysho vlerën për t’i bërë më të vogla/më të mëdha */
#partner-logos img{
  height: 28px;              /* ← zvogëlimi (ndrysho p.sh. 22px, 26px, 32px) */
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(79,195,255,.35)) brightness(1)
          saturate(1.05);
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
  user-select: none;
  pointer-events: none;      /* që të mos klikohen */
}

#partner-logos img:hover{
  opacity: 1;
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 0 12px rgba(106,85,255,.55));
}

/* Animacioni i vazhdueshëm (majtas → djathtas) */
@keyframes partnersScroll{
  0%   { transform: translateX(0) }
  100% { transform: translateX(-100%) }
}
@keyframes partnersScrollClone{
  0%   { transform: translate(0, -50%) }
  100% { transform: translate(-100%, -50%) }
}

/* Light mode kompensim i lehtë */
:root[data-theme="light"] #partner-logos{
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent);
}

/* ====== Marquee i pafund i logos ====== */
#partner-logos{
  --speed: 32s;              /* ⏱ shpejtësia – rrite/ul sipas dëshirës */
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 22px 0;
  border-top: 1px solid color-mix(in oklab, var(--text), transparent 88%);
  border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 92%);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}

#partner-logos .logos-track{
  display: inline-flex;
  align-items: center;
  gap: 48px;                 /* hapësira mes logove */
  will-change: transform;
  animation: logos-left var(--speed) linear infinite;
}

/* Kloni nis fiks pas të parës → efekt “rrip transportieri” */
#partner-logos .logos-track.clone{
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  animation: logos-left-clone var(--speed) linear infinite;
}

/* Madhësia e logos (zvogëloje këtu) */
#partner-logos img{
  height: 26px;              /* ← bëji më të vogla p.sh. 22–28px */
  opacity: .9;
  filter: drop-shadow(0 0 8px rgba(79,195,255,.35));
  transition: transform .2s ease, opacity .2s ease;
  user-select: none;
  pointer-events: none;
}

#partner-logos img:hover{
  opacity: 1;
  transform: translateY(-1px) scale(1.03);
}

/* Lëvizje majtas → logo-t “hyjnë” nga djathta sërish */
@keyframes logos-left{
  0%   { transform: translateX(0) }
  100% { transform: translateX(-100%) }
}
@keyframes logos-left-clone{
  0%   { transform: translate(0, -50%) }
  100% { transform: translate(-100%, -50%) }
}

/* (OPSIONALE) nëse do drejtim të kundërt: zëvendëso ‘left’ me ‘right’
@keyframes logos-right{
  0%   { transform: translateX(-100%) }
  100% { transform: translateX(0) }
}
@keyframes logos-right-clone{
  0%   { transform: translate(-100%, -50%) }
  100% { transform: translate(0, -50%) }
}
#partner-logos .logos-track{ animation: logos-right var(--speed) linear infinite; }
#partner-logos .logos-track.clone{ animation: logos-right-clone var(--speed) linear infinite; }
*/

/* Respekt për përdoruesit me “reduced motion” */
@media (prefers-reduced-motion: reduce){
  #partner-logos .logos-track,
  #partner-logos .logos-track.clone{
    animation: none;
  }
}





/* === GLOBAL BACKGROUND (final, mbulon gjithçka) === */
html {
  background:
    linear-gradient(rgba(6,8,13,.92), rgba(6,8,13,.92)),
    url('/assets/img/background.png') center top / cover no-repeat fixed !important;
  background-color: #06080D !important;
}
body { background: transparent !important; }

html{
  background:
    linear-gradient(rgba(6,8,13,.92), rgba(6,8,13,.92)),
    url('/assets/img/background.png') center top / cover no-repeat fixed !important;
  background-color:#06080D !important;
}
body{ background:transparent !important; }

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* vello më e lehtë (transparent) */
    linear-gradient(0deg, rgba(10,15,45,.55), rgba(10,15,45,.55)),
    /* gradiente blu-vjollcë më e butë */
    linear-gradient(180deg, rgba(106,85,255,.25), rgba(30,154,254,.25)),
    /* foto */
    url('/assets/img/background.png') center/cover no-repeat;
  filter: brightness(1.05) saturate(115%);
}

/* === Butoni Close për të gjitha modalet === */
.modal-card {
  position: relative;
}

.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}


}

/* animacioni i levizjes nga e majta ne te djathe */
@keyframes scroll-logos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Duplikim i logos per levizje të pafundme */
.logo-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right,
    var(--surface) 0%, transparent 10%, transparent 90%, var(--surface) 100%);
  pointer-events: none;
}
/* === Logo carousel që qarkullon pa fund === */
#partners {
  padding: 40px 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.logo-marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.logo-track {
  display: inline-flex;
  gap: 60px;
  align-items: center;
  animation: logosScroll 30s linear infinite;
}

.logo-track img {
  height: 48px;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s, opacity 0.3s;
}

.logo-track img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* Lëvizje horizontale pa fund */
@keyframes logosScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Efekt fade në skaje (opsional) */
#partners::before,
#partners::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

#partners::before {
  left: 0;
  background: linear-gradient(to right, var(--surface), transparent);
}
#partners::after {
  right: 0;
  background: linear-gradient(to left, var(--surface), transparent);
}

/* === Efekt 5D për titullin kryesor === */
.h1 {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  text-align: center;
  position: relative;
  background: linear-gradient(90deg, #00e6c3, #4fc3ff, #ff61d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 12px rgba(0, 230, 195, 0.4),
    0 0 24px rgba(79, 195, 255, 0.3),
    0 0 36px rgba(255, 97, 216, 0.25);
  animation: glowPulse 4s ease-in-out infinite;
  letter-spacing: 0.5px;
}

/* efekti i pulsimit (ndriçim që rritet e zvogëlohet) */
@keyframes glowPulse {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(0, 230, 195, 0.4),
      0 0 25px rgba(79, 195, 255, 0.3),
      0 0 40px rgba(255, 97, 216, 0.25);
    transform: perspective(600px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    text-shadow:
      0 0 20px rgba(0, 230, 195, 0.8),
      0 0 35px rgba(79, 195, 255, 0.7),
      0 0 60px rgba(255, 97, 216, 0.6);
    transform: perspective(600px) rotateX(2deg) rotateY(-2deg);
  }
}


/* ====== NAVBAR MODERNE (2025 LOOK) ====== */
header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  backdrop-filter: blur(18px);
  background: radial-gradient(circle at top, rgba(59,130,246,0.18), transparent 55%)
              , rgba(15, 23, 42, 0.92);
}

/* logo + titulli majtas */
header .nav > div:first-child {
  padding: 6px 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, rgba(56,189,248,0.35), transparent 60%);
  box-shadow: 0 0 0 1px rgba(148,163,184,0.28);
}

/* linkët e menusë */
header nav a {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9CA3AF;
  padding: 4px 0;
  transition: color .18s ease;
}

header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,#22D3EE,#A855F7,#F97316);
  transition: width .22s ease;
}

header nav a:hover {
  color: #F9FAFB;
}
header nav a:hover::after {
  width: 100%;
}

/* kutia e user-it (Log in / Hi, user) */
#userBox button,
#openKycBtn {
  border-radius: 999px;
  padding-inline: 18px;
  font-size: 13px;
}

/* ====== BUTONA BAZË ====== */
.btn {
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,0.45);
  background: radial-gradient(circle at 0 0, rgba(148,163,184,0.25), transparent 55%)
              , rgba(15,23,42,0.96);
  color: #E5E7EB;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-inline: 20px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.65);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease,
              border-color .16s ease, color .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(209,213,219,0.8);
  box-shadow: 0 18px 40px rgba(15,23,42,0.9);
}

/* ====== BUTONAT KRYESORË (SIGN UP / START RECOVERY / PRIMARY) ====== */
.btn-brand {
  border: none;
  background:
    linear-gradient(120deg, #22D3EE, #4ADE80, #FBBF24);
  background-size: 200% 200%;
  color: #020617;
  text-shadow: 0 0 16px rgba(15,23,42,0.4);
  box-shadow:
    0 16px 40px rgba(34,197,94,0.55),
    0 0 0 1px rgba(15,23,42,0.85);
  animation: btnGradient 6s ease infinite;
}

.btn-brand:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    0 20px 55px rgba(34,197,94,0.70),
    0 0 0 1px rgba(15,23,42,0.9);
}

/* butoni i rrezikut (Withdraw) – më i pastër */
.btn-danger {
  border-radius: 999px !important;
  background: linear-gradient(135deg,#F97373,#EF4444);
  box-shadow: 0 14px 38px rgba(239,68,68,0.65);
}
.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 48px rgba(239,68,68,0.8);
}

/* ====== BUTONAT NË MODALE (report, login, kyc, withdraw) ====== */
#reportModal .btn-brand,
#loginModal .btn-brand,
#setPassModal .btn-brand,
#withdrawModal .btn-brand,
#kycModal .btn-brand {
  width: auto;
  padding-inline: 22px;
}

#reportModal .btn,
#loginModal .btn,
#setPassModal .btn,
#withdrawModal .btn,
#kycModal .btn {
  font-size: 12px;
}

/* ====== ANIMACION I GRADIENTIT ====== */
@keyframes btnGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ====== MOBILE NAV – PAK MË TË HAPUR ====== */
@media (max-width: 768px) {
  header .nav {
    padding-block: 10px;
  }
  header nav a {
    font-size: 12px;
    margin-left: 10px;
  }
  .btn,
  .btn-brand {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   NEXUS – Pro 2025+ refinements (pa ndryshuar HTML)
   ========================================================= */

/* 1) Background pak më “serioz” (më pak glow) */
html {
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.25), transparent 55%),
    linear-gradient(160deg, #020617 0%, #020617 36%, #020617 100%),
    url('/assets/img/background.png') center top / cover no-repeat fixed !important;
  background-color: #020617 !important;
}
body {
  background: transparent !important;
}

/* 2) Karta & modale – “fintech card” look */
.card,
.modal-card {
  background: radial-gradient(circle at top left, rgba(56,189,248,0.10), transparent 60%),
              radial-gradient(circle at bottom right, rgba(129,140,248,0.16), transparent 65%),
              rgba(15, 23, 42, 0.92) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow:
    0 22px 60px rgba(15,23,42,0.85),
    0 0 0 1px rgba(15,23,42,0.9) !important;
}

/* 3) Tituj më të pastër, më pak “gaming” */
.h1 {
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: none;
  background: linear-gradient(90deg, #e5f2ff, #c4d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 10px rgba(15,23,42,0.65),
    0 16px 40px rgba(15,23,42,0.85);
  animation: none; /* heq pulsimin për më shumë seriozitet */
}

/* 4) Header më i rrafshët, corporate */
header {
  background:
    radial-gradient(circle at top, rgba(59,130,246,0.22), transparent 55%),
    rgba(15, 23, 42, 0.96);
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow:
    0 14px 40px rgba(15,23,42,0.9);
}
header nav a {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
header nav a:hover {
  color: #f9fafb;
}

/* 5) Forma – input profesional, i qetë */
input,
textarea,
select {
  background: rgba(15,23,42,0.95) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148,163,184,0.6) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,0.8);
}
input::placeholder,
textarea::placeholder {
  color: #6b7280 !important;
}
:where(input, textarea, select):focus-visible {
  border-color: #38bdf8 !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,1),
    0 0 0 2px rgba(56,189,248,0.85) !important;
}

/* 6) Butonat – më premium, më pak “shkëlqim loje” */
.btn {
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 0 0, rgba(148,163,184,0.22), transparent 55%),
    linear-gradient(135deg, #0f172a, #020617);
  border: 1px solid rgba(148,163,184,0.65);
  color: #e5e7eb !important;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow:
    0 18px 45px rgba(15,23,42,0.95);
  transform: translateY(0);
}
.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(229,231,235,0.9);
  box-shadow:
    0 24px 60px rgba(15,23,42,1);
}

/* Primary brand (Sign up, Start, KYC) */
.btn-brand {
  background:
    linear-gradient(120deg, #22c1ee, #4ade80, #fbbf24);
  background-size: 220% 220%;
  color: #020617 !important;
  border: none;
  box-shadow:
    0 18px 50px rgba(56,189,248,0.55),
    0 0 0 1px rgba(15,23,42,0.85);
  animation: btnGradient 6s ease infinite;
}
.btn-brand:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    0 26px 70px rgba(56,189,248,0.75),
    0 0 0 1px rgba(15,23,42,0.95);
}

/* Danger (Withdraw) – më serioz */
.btn-danger {
  background: linear-gradient(135deg,#f97373,#ef4444);
  box-shadow: 0 18px 48px rgba(239,68,68,0.85);
}
.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 60px rgba(239,68,68,0.95);
}

/* 7) Modale – layout më i pastër */
.modal-card {
  max-width: 520px;
  margin-inline: auto;
  padding: 22px 22px 20px;
}
.modal-card .modal-body {
  padding-top: 8px;
}

/* 8) Butoni Close për Sign up & KYC (stilim profesional) */
/* Ky CSS NUK krijon butonin, vetëm e stilizon nëse ekziston. */

#kycModal .modal-close-btn,
#kycModal .btn-close,
#signUpModal .modal-close-btn,
#signUpModal .btn-close,
#signupModal .modal-close-btn,
#signupModal .btn-close,
#loginModal .modal-close-btn,
#loginModal .btn-close,
.modal-card .modal-close-btn,
.modal-header .btn-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.55);
  background: radial-gradient(circle at 0 0, rgba(148,163,184,0.25), transparent 60%),
              rgba(15,23,42,0.96);
  color: #e5e7eb;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(15,23,42,0.9);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}
#kycModal .modal-close-btn:hover,
#kycModal .btn-close:hover,
#signUpModal .modal-close-btn:hover,
#signUpModal .btn-close:hover,
#signupModal .modal-close-btn:hover,
#signupModal .btn-close:hover,
#loginModal .modal-close-btn:hover,
#loginModal .btn-close:hover,
.modal-card .modal-close-btn:hover,
.modal-header .btn-close:hover {
  transform: translateY(-1px);
  border-color: rgba(229,231,235,0.9);
  color: #f9fafb;
}

/* Nëse butoni është thjesht <button class="modal-close-btn"> pa ikonë, vendos X me CSS */
.modal-card .modal-close-btn::before {
  content: "×";
}

/* 9) Partner logos – pak më “restrained” */
#partner-logos {
  background: radial-gradient(circle at top, rgba(30,64,175,0.18), transparent 60%),
              rgba(15,23,42,0.98);
  border-top: 1px solid rgba(15,23,42,1);
  border-bottom: 1px solid rgba(15,23,42,1);
}
#partner-logos img {
  opacity: 0.8;
  filter: grayscale(1) brightness(1.05);
}
#partner-logos img:hover {
  opacity: 1;
  filter: grayscale(0) brightness(1.05);
}

/* 10) Footer – më i qetë */
footer {
  background: linear-gradient(180deg, #020617, #020617) !important;
  border-top: 1px solid rgba(30,64,175,0.8) !important;
  color: #9ca3af !important;
}