:root{
  --bg:#070512;
  --purple:#a855f7;
  --cyan:#22d3ee;
  --pink:#ec4899;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(168,85,247,0.18), transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, rgba(34,211,238,0.15), transparent 55%),
    radial-gradient(800px 500px at 50% 110%, rgba(236,72,153,0.12), transparent 55%),
    var(--bg);
  color:#fff;
  font-family:'Bricolage Grotesque', sans-serif;
  min-height:100vh;
}

/* animated starfield */
.starfield{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 25% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 45% 80%, rgba(168,85,247,0.6), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(34,211,238,0.6), transparent),
    radial-gradient(1px 1px at 15% 70%, rgba(236,72,153,0.5), transparent);
  background-size:300px 300px;
  animation:drift 60s linear infinite;
  opacity:0.8;
}
@keyframes drift{ from{ background-position:0 0; } to{ background-position:300px 300px; } }

.gradient-text{
  background:linear-gradient(90deg,#a855f7,#22d3ee,#ec4899,#a855f7);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{ to{ background-position:200% center; } }

.nav-glass{
  background:rgba(10,7,22,0.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(8px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(34,211,238,0.4);
  box-shadow:0 12px 40px rgba(34,211,238,0.12), 0 0 0 1px rgba(168,85,247,0.2);
}
.card-solid{
  background:linear-gradient(160deg, rgba(24,16,44,0.98), rgba(10,7,22,0.98));
  border:1px solid rgba(168,85,247,0.35);
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(168,85,247,0.15);
}

.future-card{
  background:rgba(255,255,255,0.03);
  border:1.5px dashed rgba(236,72,153,0.35);
  position:relative; overflow:hidden;
  transition:transform .25s ease, border-color .25s;
}
.future-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent,rgba(236,72,153,0.08),transparent);
  transform:translateX(-100%);
  animation:shine 4s ease-in-out infinite;
}
@keyframes shine{ 0%,60%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }
.future-card:hover{ transform:translateY(-4px); border-color:rgba(236,72,153,0.7); }

.stat-pill{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  animation:fadeUp .6s both;
}

.glow-btn{
  background:linear-gradient(90deg,#a855f7,#22d3ee);
  box-shadow:0 4px 20px rgba(34,211,238,0.35);
  transition:transform .2s, box-shadow .2s;
}
.glow-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 28px rgba(168,85,247,0.5); }

.float-btn{ animation:pulse 2.5s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 4px 20px rgba(34,211,238,0.4);} 50%{ box-shadow:0 4px 34px rgba(236,72,153,0.6);} }

.backdrop{ background:rgba(4,2,10,0.75); backdrop-filter:blur(6px); }
.modal-in{ animation:modalIn .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes modalIn{ from{ opacity:0; transform:scale(.92) translateY(10px);} to{ opacity:1; transform:scale(1) translateY(0);} }

.fade-up{ animation:fadeUp .6s both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.scroll-x::-webkit-scrollbar{ height:6px; }
.scroll-x::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); border-radius:3px; }

select option{ background:#12091f; color:#fff; }

/* RTL tweaks */
[dir="rtl"] .ml-auto{ margin-left:0; margin-right:auto; }
[dir="rtl"] .float-btn{ right:auto; left:1.25rem; }
</parameter>