/* ============================================================
   VARIABLES & RESET
============================================================ */
:root {
  --bg:        #030812;
  --bg-s:      #070F22;
  --bg-card:   rgba(10,16,34,0.72);
  --v:   #7C3AED; --vl:  #8B5CF6; --vx:  #A78BFA;
  --ind: #4338CA;
  --cy:  #06B6D4; --cyl: #22D3EE;
  --em:  #10B981; --eml: #34D399;
  --am:  #F59E0B; --aml: #FCD34D;
  --pk:  #EC4899; --pkl: #F9A8D4;
  --t1: #F8FAFC; --t2: #CBD5E1; --t3: #94A3B8; --t4: #475569; --t5: #1E293B;
  --bdr: rgba(255,255,255,0.06);
  --fh: 'Space Grotesk', sans-serif;
  --fb: 'Inter', sans-serif;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --t: 0.28s cubic-bezier(0.4,0,0.2,1);
  --ts: 0.55s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; overflow-x: hidden; }
body { font-family: var(--fb); background: var(--bg); color: var(--t1);
       overflow-x: hidden;
       -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
/* Prevent orphan words globally */
h1,h2,h3,h4,h5,h6 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(139,92,246,0.28); color: #C4B5FD; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 99px; }

/* ============================================================
   BACKGROUND
============================================================ */
.bg-wrap {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  transform: translateZ(0);
}
.bg-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(124,58,237,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 10% 90%,  rgba(6,182,212,0.09)  0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 90% 55%,  rgba(67,56,202,0.09)  0%, transparent 55%);
}
.bg-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 15%, black 0%, transparent 100%);
}
.orb {
  position: absolute; border-radius: 50%;
  filter: none; pointer-events: none;
  animation: none;
}
.orb-1 { width: 880px; height: 880px; top: -24%; left: 50%; transform: translate3d(-50%, 0, 0);
          background: radial-gradient(circle, rgba(124,58,237,0.16) 0%, rgba(124,58,237,0.05) 42%, transparent 72%); }
.orb-2 { width: 560px; height: 560px; bottom: 4%; left: -12%;
          background: radial-gradient(circle, rgba(6,182,212,0.11) 0%, rgba(6,182,212,0.03) 45%, transparent 72%); }
.orb-3 { width: 480px; height: 480px; top: 38%; right: -8%;
          background: radial-gradient(circle, rgba(67,56,202,0.11) 0%, rgba(67,56,202,0.03) 45%, transparent 72%); }
.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at  8% 12%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 40%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 68%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 20%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 55%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 18%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 74%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 14% 48%, rgba(167,139,250,0.65) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 35%, rgba(34,211,238,0.55)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 17%, rgba(255,255,255,0.72) 0%, transparent 100%);
}

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes odrift {
  0%,100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(-30px, -40px, 0); }
  66%      { transform: translate3d(30px, 20px, 0); }
}
@keyframes gpan {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes ping {
  0%        { transform: scale(1); opacity: 1; }
  75%,100%  { transform: scale(2.3); opacity: 0; }
}
@keyframes pglow {
  0%,100% { box-shadow: 0 0 25px rgba(124,58,237,0.4); }
  50%      { box-shadow: 0 0 50px rgba(124,58,237,0.7), 0 0 90px rgba(124,58,237,0.2); }
}
@keyframes spinring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes tbounce {
  0%,100% { transform: translateY(0);  opacity: 0.4; }
  50%      { transform: translateY(-5px); opacity: 1; }
}
@keyframes slideup { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes chatfade { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }
@keyframes userfade { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.on { opacity:1; transform:translateY(0); }
.d1{transition-delay:.08s} .d2{transition-delay:.17s} .d3{transition-delay:.26s}
.d4{transition-delay:.35s} .d5{transition-delay:.46s}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb, .grad { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   LAYOUT UTILS
============================================================ */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
section { position: relative; z-index: 1; }
.sep {
  width:100%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 25%,
              rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.06) 75%, transparent);
}
.tc { text-align: center; }

/* ============================================================
   TYPOGRAPHY
============================================================ */
.grad {
  background: linear-gradient(135deg, #A78BFA 0%, #818CF8 40%, #22D3EE 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; background-size: 100% auto;
}
.stag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(124,58,237,0.1);
  border: 1px solid rgba(124,58,237,0.22);
  border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vx);
}
.stag i { font-size: 9px; }
.stit {
  font-family: var(--fh); font-size: clamp(1.6rem, 3.8vw, 2.55rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--t1);
}
.sdesc { font-size: clamp(.875rem,1.5vw,1rem); color: var(--t3); line-height: 1.8; max-width: 580px; margin: 0 auto; }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 14px;
  font-size: 14px; font-weight: 600; transition: var(--t); white-space: nowrap;
}
.btn-p {
  background: linear-gradient(135deg,#7C3AED,#4338CA);
  color:#fff; position:relative; overflow:hidden;
  box-shadow: 0 4px 20px rgba(124,58,237,.32);
}
.btn-p::before { content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,#8B5CF6,#6366F1); opacity:0; transition:opacity var(--t); }
.btn-p:hover::before { opacity:1; }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(124,58,237,.5); }
.btn-p > * { position:relative; z-index:1; }
.btn-s {
  background: rgba(12,18,36,.8); color:var(--t2);
  border:1px solid rgba(255,255,255,.08);
}
.btn-s:hover { background:rgba(22,32,56,.9); border-color:rgba(139,92,246,.3); color:var(--t1); }

/* ============================================================
   CARD BASE
============================================================ */
.card {
  background: rgba(10, 16, 34, 0.92); border:1px solid var(--bdr);
  border-radius: 22px;
  transition: var(--t); position: relative; overflow: hidden;
}
.card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  border-radius: 22px 22px 0 0;
}
.card:hover { border-color:rgba(139,92,246,.22);
  box-shadow:0 16px 40px -16px rgba(124,58,237,.14); }

.chip {
  display:inline-flex; align-items:center; padding:4px 11px;
  background:rgba(10,16,30,.9); border:1px solid rgba(255,255,255,.07);
  border-radius:99px; font-size:11px; font-weight:500; color:var(--t3);
}

.logo { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.lmark {
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,#7C3AED,#06B6D4);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 20px rgba(124,58,237,.4); transition:var(--t);
}
.logo:hover .lmark { transform:scale(1.06); box-shadow:0 0 34px rgba(124,58,237,.6); }
.lmark i { color:#fff; font-size:16px; }
.lname {
  font-family:var(--fh); font-size:17px; font-weight:800; letter-spacing:.04em; line-height:1;
  background:linear-gradient(135deg,#A78BFA,#818CF8,#22D3EE);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.lsub { display:block; font-size:9px; font-weight:700; letter-spacing:.16em;
        text-transform:uppercase; color:var(--t4); margin-top:2px; }

/* ============================================================
   TOAST
============================================================ */
.toast {
  position:fixed; bottom:22px; right:22px; z-index:1000;
  display:flex; align-items:center; gap:12px; padding:13px 17px;
  background: rgba(8,14,28,.98); border:1px solid rgba(124,58,237,.28);
  border-radius:18px;
  box-shadow:0 10px 48px rgba(0,0,0,.45); max-width:330px;
  transform:translateY(calc(100% + 28px)); opacity:0;
  transition:all .4s var(--ease); pointer-events:none;
}
.toast.show { transform:translateY(0); opacity:1; pointer-events:all; }
.toast-ico { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; }
.toast-msg { font-size:13px; font-weight:500; color:var(--t2); line-height:1.45; }

.lang-switch {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(255,255,255,.04); border: 1px solid var(--bdr);
  border-radius: 10px;
}
.lang-btn {
  font-family: var(--fh); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; padding: 6px 10px; border-radius: 7px;
  border: none; background: transparent; color: var(--t3);
  cursor: pointer; transition: var(--t);
}
.lang-btn:hover { color: var(--t1); }
.lang-btn.active {
  background: rgba(124,58,237,.25); color: var(--cyl);
  box-shadow: 0 0 12px rgba(124,58,237,.2);
}
.lang-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 200;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.lang-float .lang-btn {
  padding: 8px 12px;
  font-size: 11px;
}

.scroll-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 190;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(8, 14, 28, .92);
  color: var(--t2);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  transition: color var(--t), background var(--t), border-color var(--t), transform var(--t), opacity var(--t);
}
.scroll-fab:hover,
.scroll-fab:focus-visible {
  color: #fff;
  border-color: rgba(124,58,237,.45);
  background: rgba(124,58,237,.22);
  outline: none;
}
.scroll-fab:active { transform: scale(.96); }
.scroll-fab[hidden] { display: none !important; }
.scroll-fab.is-to-top .scroll-fab-icon--bottom { display: none; }
.scroll-fab.is-to-bottom .scroll-fab-icon--top { display: none; }
@media (max-width: 480px) {
  .scroll-fab { right: 16px; bottom: 16px; }
}

/* ============================================================
   UTILITIES
============================================================ */
.hidden { display: none !important; }