/* ===================== RESET & BASE ===================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Inter', sans-serif;
background: #050505;
color: white;
overflow-x: hidden;
cursor: default;
}

body::before {
content: '';
position: fixed;
width: 900px;
height: 900px;
background: radial-gradient(circle, #7c3aed33 0%, transparent 70%);
top: -350px;
left: -300px;
filter: blur(40px);
z-index: -1;
animation: move1 10s infinite alternate;
}

body::after {
content: '';
position: fixed;
width: 700px;
height: 700px;
background: radial-gradient(circle, #2563eb22 0%, transparent 70%);
bottom: -250px;
right: -250px;
filter: blur(40px);
z-index: -1;
animation: move2 12s infinite alternate;
}

@keyframes move1 {
0% { transform: translate(0,0); }
100% { transform: translate(60px,40px); }
}

@keyframes move2 {
0% { transform: translate(0,0); }
100% { transform: translate(-40px,-30px); }
}

/* ===================== SCROLLBAR ===================== */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #050505; }
body::-webkit-scrollbar-thumb {
background: linear-gradient(#7c3aed, #60a5fa);
border-radius: 999px;
}

/* ===================== GRID ===================== */
.grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
z-index: -2;
}

/* ===================== HEADER ===================== */
header {

    width: 100%;

    padding: 20px 8%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 2147483000;

    backdrop-filter: blur(20px);

    background: rgba(0,0,0,.25);

    border-bottom: 1px solid rgba(255,255,255,.05);

    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, padding .25s ease;
}

header.scrolled {
    background: rgba(5,5,16,.72);
    border-bottom-color: rgba(124,58,237,.22);
    box-shadow: 0 18px 70px rgba(0,0,0,.28), 0 0 42px rgba(124,58,237,.12);
}

.logo {

    position: absolute;

    left: 8%;

    font-size: 28px;

    font-weight: 900;

    letter-spacing: 5px;
}

/* ===================== NAVIGATION ===================== */
nav {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 12px;
border-radius: 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(20px);
overflow-x: auto;
}

nav a {
position: relative;
color: #d4d4d8;
text-decoration: none;
font-size: 14px;
font-weight: 600;
padding: 10px 14px;
border-radius: 12px;
transition: .3s;
overflow: hidden;
white-space: nowrap;
}

nav a::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0%;
height: 2px;
background: linear-gradient(to right, #7c3aed, #60a5fa);
transition: .3s;
transform: translateX(-50%);
box-shadow: 0 0 10px #7c3aed, 0 0 20px #60a5fa;
}

nav a:hover {
color: white;
background: rgba(255,255,255,.04);
backdrop-filter: blur(12px);
}

nav a:hover::before { width: 60%; }

.discord-login {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 12px;
background: linear-gradient(135deg, #5865F2, #7c3aed);
color: white !important;
font-weight: 700;
text-decoration: none !important;
transition: .25s;
box-shadow: 0 10px 40px rgba(88,101,242,.25);
margin-left: 4px;
flex-shrink: 0;
}

.discord-login:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 20px 60px rgba(88,101,242,.35);
}

/* ===================== ANNOUNCEMENT BAR ===================== */
#announcement-bar {
position: fixed;
top: 86px;
left: 50%;
transform: translateX(-50%);
width: min(1180px, calc(100% - 32px));
display: flex;
justify-content: center;
padding: 0;
margin-top: 0;
z-index: 2147482999;
pointer-events: none;
}

body, button, input, textarea, select {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.announcement {
width: 92%;
padding: 16px 22px;
border-radius: 18px;
background: linear-gradient(90deg, #5865F2, #7c3aed);
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 15px;
box-shadow: 0 0 40px rgba(88,101,242,.25);
}

.announcement-content { display: flex; align-items: center; gap: 10px; }

.announcement-modern {
width: 100%;
max-width: 1400px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
padding: 14px 18px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(37,99,235,.12));
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(20px);
box-shadow: 0 18px 70px rgba(0,0,0,.26), 0 0 60px rgba(124,58,237,.22);
pointer-events: auto;
animation: announcementFloat .5s ease both, announcementGlow 3.5s ease-in-out infinite;
position: relative;
overflow: hidden;
}

.announcement-modern.announcement-enter { animation: announcementFloat .5s ease both, announcementGlow 3.5s ease-in-out infinite; }
.announcement-modern.announcement-leave { animation: announcementLeave .42s ease both; }

.announcement-modern::before {
content: '';
position: absolute;
inset: 0 auto 0 -40%;
width: 34%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
transform: skewX(-18deg);
animation: announcementSweep 4.8s ease-in-out infinite;
pointer-events: none;
will-change: transform, opacity;
}

.announcement-left { flex: 1; min-width: 280px; }
.announcement-left h3 { font-size: 16px; margin-bottom: 4px; position: relative; z-index: 1; }
.announcement-left p { color: #eef2ff; line-height: 1.5; font-size: 13px; position: relative; z-index: 1; }

.announcement-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

@keyframes announcementFloat {
from { opacity: 0; transform: translateY(-14px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes announcementGlow { 50% { box-shadow: 0 22px 80px rgba(0,0,0,.30), 0 0 90px rgba(124,58,237,.30); } }
@keyframes announcementLeave {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(-14px) scale(.98); }
}
@keyframes announcementSweep { 0%,55%,100% { transform: translateX(0) skewX(-18deg); opacity:0; } 70%{opacity:1} 92%{transform:translateX(440%) skewX(-18deg);opacity:0} }

.promo-chip { padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: 14px; color:#fff; box-shadow:0 12px 32px rgba(0,0,0,.18); }
.promo-code { background: rgba(34,197,94,.18); border: 1px dashed rgba(134,239,172,.55); }
.promo-timer,.promo-countdown { background: linear-gradient(135deg,rgba(245,158,11,.24),rgba(124,58,237,.18)); border: 1px solid rgba(245,158,11,.34); animation: countdownPulse 1.7s ease-in-out infinite; }
.promo-countdown.ended { background:rgba(239,68,68,.18); border-color:rgba(248,113,113,.35); animation:none; }

.promo-btn {
padding: 13px 20px;
border-radius: 14px;
background: #f5ebc7;
color: #111;
font-weight: 800;
text-decoration: none;
transition: .25s;
}

.promo-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(245,235,199,.18); }
@keyframes countdownPulse { 50% { box-shadow:0 0 28px rgba(245,158,11,.20),0 0 42px rgba(124,58,237,.12); } }

/* ===================== HERO ===================== */
.hero {

    min-height: calc(100vh - 80px);

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 0 8%;

    position: relative;

    overflow: hidden;
}


.hero::before {
content: '';
position: absolute;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(124,58,237,.16), transparent 70%);
filter: blur(60px);
animation: pulseHero 5s infinite;
z-index: -1;
}

@keyframes pulseHero {
0% { transform: scale(1); opacity: .6; }
50% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: .6; }
}

.hero::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(124,58,237,.18), transparent 25%),
radial-gradient(circle at 80% 30%, rgba(37,99,235,.16), transparent 25%),
radial-gradient(circle at 50% 80%, rgba(168,85,247,.12), transparent 30%);
animation: bgMove 14s infinite alternate ease-in-out;
pointer-events: none;
}

@keyframes bgMove {
0% { transform: scale(1) translate(0,0); }
100% { transform: scale(1.08) translate(-20px,-20px); }
}

.hero-content {

    max-width: 1000px;

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    z-index: 5;

    transform: translateY(-60px);
}

.hero-subline {
margin-top: 18px;
font-size: 14px;
letter-spacing: 3px;
color: #8b5cf6;
text-transform: uppercase;
opacity: .8;
}

.hero h1 {
font-size: clamp(64px, 9vw, 120px);
line-height: .92;
font-weight: 900;
letter-spacing: -4px;
margin-bottom: 30px;
background: linear-gradient(90deg, #fff, #c084fc, #60a5fa, #fff);
background-size: 300% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: heroGradient 5s linear infinite, heroDepth 4s ease-in-out infinite;
}

@keyframes heroGradient {
to { background-position: 300% center; }
}

@keyframes heroDepth {
50% { filter: drop-shadow(0 0 32px rgba(139,92,246,.28)); transform: translateZ(12px); }
}

.hero p {
font-size: 19px;
line-height: 1.9;
color: #a1a1aa;
max-width: 760px;
margin: auto;
margin-bottom: 45px;
font-weight: 750;
}

.badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border-radius: 999px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(20px);
margin-bottom: 35px;
color: #d4d4d8;
font-size: 14px;
}

.badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 15px #22c55e;
}

.buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* ===================== BUTTONS ===================== */
.primary-btn {
padding: 18px 34px;
border: none;
border-radius: 18px;
background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(96,165,250,.85));
border: 1px solid rgba(255,255,255,.14);
color: white;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .25s ease, filter .25s ease;
box-shadow: 0 10px 40px rgba(124,58,237,.28), 0 0 80px rgba(96,165,250,.08);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
letter-spacing: .4px;
transform-style: preserve-3d;
will-change: transform, box-shadow, filter;
}

.primary-btn::before {
content: '';
position: absolute;
top: -120%;
left: -40%;
width: 60%;
height: 320%;
background: linear-gradient(to right, transparent, rgba(255,255,255,.35), transparent);
transform: rotate(25deg);
transition: .7s;
pointer-events: none;
}

.primary-btn:hover::before { left: 130%; }

.primary-btn::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.24), rgba(147,197,253,.10) 18%, transparent 48%);
opacity: 0;
transition: .25s;
pointer-events: none;
}

.primary-btn:hover::after { opacity: 1; }

.primary-btn:hover {
box-shadow: 0 22px 70px rgba(124,58,237,.46), 0 0 135px rgba(96,165,250,.24), inset 0 1px 0 rgba(255,255,255,.26);
}

.bot-card.is-tilting,
.why-card.is-tilting,
.stat-card.is-tilting,
.dashboard-card.is-tilting,
.premium-plan.is-tilting,
.commands-preview.is-tilting,
.ultra-mini-card.is-tilting,
.hero-action.is-tilting {
box-shadow: 0 22px 82px rgba(124,58,237,.18), 0 0 54px rgba(96,165,250,.12);
filter: brightness(1.04) saturate(1.08);
}

.secondary-btn {
padding: 18px 34px;
min-width: 260px;
height: 64px;
border-radius: 18px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
backdrop-filter: blur(18px);
color: white;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .25s ease, filter .25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
position: relative;
overflow: hidden;
letter-spacing: .4px;
transform-style: preserve-3d;
will-change: transform, box-shadow, filter;
}

.secondary-btn::before {
content: '';
position: absolute;
top: -120%;
left: -40%;
width: 60%;
height: 320%;
background: linear-gradient(to right, transparent, rgba(255,255,255,.35), transparent);
transform: rotate(25deg);
transition: .7s;
pointer-events: none;
}

.secondary-btn:hover::before { left: 130%; }

.secondary-btn::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), rgba(167,139,250,.10) 18%, transparent 48%);
opacity: 0;
transition: .25s;
pointer-events: none;
}

.secondary-btn:hover::after { opacity: 1; }

.secondary-btn:hover {
background: rgba(255,255,255,.09);
box-shadow: 0 20px 70px rgba(124,58,237,.28), 0 0 120px rgba(96,165,250,.14), inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-action {
animation: heroButtonGlow 2.65s ease-in-out infinite, heroButtonBreath 5.8s ease-in-out infinite;
position: relative;
isolation: isolate;
overflow: hidden;
will-change: transform, box-shadow, filter;
transform: translate3d(0,0,0);
backface-visibility: hidden;
transform-style: flat;
transition: box-shadow .24s ease, filter .24s ease, background .24s ease;
}

.hero-action:hover {
filter: brightness(1.1) saturate(1.18);
animation: heroButtonGlow 1.45s ease-in-out infinite, heroButtonLift .42s ease both, heroButtonBreath 3.2s ease-in-out infinite;
transform: translate3d(0,-4px,0) scale(1.075);
}
.hero-action-live {
box-shadow: 0 24px 76px rgba(124,58,237,.40), 0 0 120px rgba(96,165,250,.22), inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-action::after {
content:'';
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),rgba(139,92,246,.14) 24%,transparent 52%);
opacity:0;
transition:opacity .22s ease;
z-index:-1;
}

.hero-action-live::after { opacity:1; }

.hero-action:active {
filter: brightness(.98);
transform: translate3d(0,1px,0);
}

.discord-action {
display: inline-flex;
align-items: center;
gap: 12px;
}

.hero-terminal {
width: min(520px, 100%);
margin: 26px auto 0;
padding: 18px 20px;
border-radius: 18px;
border: 1px solid rgba(139,92,246,.22);
background: rgba(5,5,12,.58);
backdrop-filter: blur(18px);
box-shadow: 0 24px 90px rgba(0,0,0,.32), 0 0 50px rgba(139,92,246,.16);
text-align: left;
font-family: "Consolas", monospace;
color: #c4b5fd;
line-height: 1.75;
position: relative;
overflow: hidden;
}

.hero-terminal::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,.22), transparent 38%);
opacity: .85;
pointer-events: none;
}

.terminal-dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
margin-right: 6px;
position: relative;
z-index: 1;
}
.terminal-dot.red{background:#fb7185}.terminal-dot.yellow{background:#fbbf24}.terminal-dot.green{background:#34d399}
.hero-terminal .typing-line{position:relative;z-index:1;margin-top:10px;min-height:76px}

.terminal-cursor {
display: inline-block;
margin-left: 2px;
color: #a78bfa;
animation: cursorBlink .7s steps(2,end) infinite;
}

.primary-btn.active-glow { box-shadow: 0 0 34px rgba(34,197,94,.34); background: linear-gradient(135deg,#22c55e,#60a5fa); }
.primary-btn.warn-glow { box-shadow: 0 0 34px rgba(245,158,11,.42); background: linear-gradient(135deg,#f59e0b,#fbbf24); }
.primary-btn.danger-glow { box-shadow: 0 0 34px rgba(239,68,68,.42); background: linear-gradient(135deg,#ef4444,#fb7185); }

@keyframes actionPulse {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-4px); box-shadow: 0 18px 80px rgba(124,58,237,.42), 0 0 40px rgba(96,165,250,.26); filter: saturate(1.15); }
}

@keyframes cursorBlink {
50% { opacity: 0; }
}

/* ===================== SECTION COMMON ===================== */
.section { padding: 140px 8%; }
.section-title { margin-bottom: 70px; }
.section-title span { color: #8b5cf6; letter-spacing: 3px; font-size: 13px; }
.section-title h2 {
font-size: clamp(42px, 5vw, 72px);
margin-top: 15px;
background: linear-gradient(to right, #ffffff, #9ca3af);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* ===================== BOT GRID / CARDS ===================== */
.bot-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
align-items: stretch;
overflow: visible;
}

.bot-card {
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
border-radius: 30px;
padding: 40px;
backdrop-filter: blur(30px);
transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .25s ease, filter .25s ease;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
will-change: transform;
perspective: 1000px;
min-height: 430px;
display: flex;
flex-direction: column;
}

.bot-card::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(124,58,237,.22), transparent 40%);
opacity: 0;
transition: .25s;
pointer-events: none;
}

.bot-card:hover::after,
.bot-card.is-tilting::after { opacity: 1; }

.camera-tilt {
transform-style: preserve-3d;
will-change: transform, filter, box-shadow;
transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .25s ease, border-color .25s ease;
}

.camera-tilt.is-tilting {
border-color: rgba(167,139,250,.44) !important;
filter: brightness(1.035) saturate(1.07);
}

.why-card,
.stat-card,
.dashboard-card,
.ultra-mini-card,
.premium-plan,
.commands-preview {
position: relative;
overflow: hidden;
transform-style: preserve-3d;
will-change: transform;
perspective: 1000px;
}

.why-card::after,
.stat-card::after,
.dashboard-card::after,
.ultra-mini-card::after,
.premium-plan::after,
.commands-preview::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.16), transparent 0 10%, transparent 32%),
radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(196,181,253,.18), transparent 0 22%, transparent 42%),
radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(96,165,250,.12), transparent 52%);
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
}

.why-card.is-tilting::after,
.stat-card.is-tilting::after,
.dashboard-card.is-tilting::after,
.ultra-mini-card.is-tilting::after,
.premium-plan.is-tilting::after,
.commands-preview.is-tilting::after {
opacity: 1;
}

.bot-card:hover {
border-color: #7c3aed;
box-shadow: 0 35px 120px rgba(124,58,237,.25), 0 0 60px rgba(124,58,237,.12);
}

.bot-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }

.bot-icon {
width: 68px;
height: 68px;
border-radius: 22px;
background: linear-gradient(to right, #7c3aed, #2563eb);
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
box-shadow: 0 0 35px rgba(124,58,237,.4);
animation: iconFloat 4s infinite ease-in-out;
}

@keyframes iconFloat {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}

.bot-status {
padding: 10px 16px;
border-radius: 999px;
background: #22c55e22;
border: 1px solid #22c55e55;
color: #4ade80;
font-size: 13px;
}

.bot-card h3 { font-size: 32px; margin-bottom: 20px; }
.bot-card p { color: #b8bac6; line-height: 1.9; margin-bottom: 30px; font-weight: 650; }
.bot-features { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 35px; }
.bot-features span {
padding: 10px 16px;
border-radius: 999px;
background: rgba(124,58,237,.14);
border: 1px solid rgba(124,58,237,.25);
font-size: 13px;
color: #d4d4d8;
}

/* ===================== STATS ===================== */
.stats-section { padding: 80px 8%; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; }

.stat-card {
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
border-radius: 28px;
padding: 40px;
text-align: center;
backdrop-filter: blur(30px);
transition: .35s;
transform-style: preserve-3d;
will-change: transform;
}

.stat-card:hover {
box-shadow: 0 0 50px rgba(124,58,237,.15);
border-color: #7c3aed;
}

.stat-number {
font-size: 64px;
font-weight: 900;
margin-bottom: 10px;
background: linear-gradient(to right, #7c3aed, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.stat-text { color: #a1a1aa; }
.stat-card{min-height:170px;display:grid;place-items:center}
.stat-card .stat-number{line-height:1}

/* ===================== DASHBOARD ===================== */
.dashboard {
margin-top: 80px;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
border-radius: 35px;
overflow: hidden;
backdrop-filter: blur(30px);
}

.dashboard-top {
height: 70px;
display: flex;
align-items: center;
padding: 0 30px;
border-bottom: 1px solid rgba(255,255,255,.06);
gap: 10px;
}

.dashboard-dot { width: 14px; height: 14px; border-radius: 50%; background: #7c3aed; }

.dashboard-body {
padding: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}

.dashboard-card {
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
padding: 30px;
border-radius: 24px;
backdrop-filter: blur(30px);
transform-style: preserve-3d;
will-change: transform;
}

.dashboard-card h3 { margin-bottom: 20px; font-size: 22px; }

.dashboard-progress {
height: 12px;
border-radius: 999px;
background: rgba(255,255,255,.06);
overflow: hidden;
margin-top: 15px;
}

.dashboard-progress span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(to right, #7c3aed, #60a5fa);
}

/* ===================== WHY SECTION ===================== */
.why-section { padding: 140px 8%; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 60px; }

.why-card {
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
border-radius: 30px;
padding: 35px;
text-align: center;
backdrop-filter: blur(30px);
transition: .35s;
transform-style: preserve-3d;
will-change: transform;
}

.why-card:hover {
border-color: #7c3aed;
box-shadow: 0 0 50px rgba(124,58,237,.16), 0 0 90px rgba(96,165,250,.08);
}

.why-icon { font-size: 54px; margin-bottom: 22px; }
.why-card h3 { font-size: 30px; margin-bottom: 18px; }
.why-card p { color: #b8bac6; line-height: 1.8; font-weight: 650; }

/* ===================== TERMINAL BOX ===================== */
.terminal-box {
margin-top: 70px;
background: #0d1117;
border: 1px solid rgba(255,255,255,.06);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 0 40px rgba(124,58,237,.12);
}

.terminal-top {
height: 55px;
display: flex;
align-items: center;
padding: 0 22px;
gap: 10px;
background: #161b22;
border-bottom: 1px solid rgba(255,255,255,.05);
}

.term-dot { width: 12px; height: 12px; border-radius: 50%; background: #7c3aed; }

.terminal-body {
padding: 28px;
font-family: monospace;
font-size: 15px;
line-height: 2;
color: #60a5fa;
min-height: 180px;
}

.typing-line::after { content: '_'; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ===================== MARQUEE ===================== */
.marquee {
width: 100%;
overflow: hidden;
padding: 22px 0;
border-top: 1px solid rgba(255,255,255,.05);
border-bottom: 1px solid rgba(255,255,255,.05);
background: rgba(255,255,255,.02);
backdrop-filter: blur(20px);
}

.marquee-track {
display: flex;
gap: 80px;
white-space: nowrap;
animation: marquee 18s linear infinite;
font-weight: 700;
font-size: 18px;
color: #d4d4d8;
}

@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

/* ===================== BANNERS ===================== */
.premium-banner {
margin: 80px 8%;
padding: 55px;
border-radius: 35px;
background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(37,99,235,.10));
border: 1px solid rgba(255,255,255,.08);
text-align: center;
position: relative;
overflow: hidden;
}

.premium-banner h2 { font-size: 54px; margin-bottom: 20px; }
.premium-banner p { color: #d4d4d8; font-size: 18px; line-height: 1.8; max-width: 800px; margin: auto; }
.premium-banner::before {
content: '';
position: absolute;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
top: -250px; right: -250px;
}

.super-banner {
margin: 120px 8%;
padding: 90px 70px;
border-radius: 42px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(37,99,235,.15), rgba(255,255,255,.04));
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 0 120px rgba(124,58,237,.18);
}

.super-banner::before {
content: '';
position: absolute;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
top: -320px; right: -250px;
}

.super-banner h2 { font-size: 72px; margin-bottom: 24px; line-height: 1; }
.super-banner p { font-size: 20px; line-height: 2; max-width: 900px; color: #d4d4d8; }

.super-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 60px; }

.super-stat {
padding: 30px;
border-radius: 28px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(20px);
}

.super-stat h3 {
font-size: 54px;
margin-bottom: 12px;
background: linear-gradient(to right, #7c3aed, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.super-stat p { font-size: 15px; line-height: 1.8; }

/* ===================== CARD STACK ===================== */
.ultra-card-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 80px; }

.ultra-mini-card {
padding: 30px;
border-radius: 28px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(30px);
transition: .4s;
position: relative;
overflow: hidden;
}

.ultra-mini-card:hover { box-shadow: 0 0 70px rgba(124,58,237,.18); }
.ultra-mini-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(124,58,237,.15), transparent 40%);
pointer-events: none;
}

.ultra-mini-card h3 { font-size: 28px; margin-bottom: 15px; }
.ultra-mini-card p { color: #b8bac6; line-height: 1.8; font-weight: 650; }

.ultra-number {
font-size: 58px;
font-weight: 900;
margin-bottom: 18px;
background: linear-gradient(to right, #7c3aed, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* ===================== FOOTER ===================== */
footer {
padding: 80px 8%;
border-top: 1px solid rgba(255,255,255,.06);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
position: relative;
overflow: hidden;
}

.footer-logo { font-size: 30px; font-weight: 900; letter-spacing: 5px; }
.footer-text { color: #71717a; }

/* ===================== SCROLL REVEAL ===================== */
.reveal { opacity: 0; transform: translateY(40px); transition: 1s; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
z-index: 999999;
background: linear-gradient(to right, #7c3aed, #60a5fa);
box-shadow: 0 0 20px #7c3aed, 0 0 40px #60a5fa;
}

/* ===================== SCROLL TOP ===================== */
.scroll-top {
position: fixed;
right: 25px;
bottom: 25px;
width: 58px;
height: 58px;
border-radius: 50%;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(20px);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: white;
z-index: 999999;
cursor: pointer;
transition: .35s;
box-shadow: 0 0 30px rgba(124,58,237,.18);
}

.scroll-top:hover {
transform: translateY(-6px) scale(1.06);
background: rgba(124,58,237,.12);
box-shadow: 0 0 40px rgba(124,58,237,.35);
}

/* ===================== LOADER ===================== */
.loader-screen {
position: fixed;
inset: 0;
background: #050505;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 99999999;
transition: opacity 1s ease;
}

.loader-screen.hide { opacity: 0; pointer-events: none; }

.loader-logo {
font-size: 110px;
font-weight: 900;
letter-spacing: 14px;
background: linear-gradient(to right, #7c3aed, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: loaderGlow 2.5s infinite;
}

.loader-bar { margin-top: 30px; width: 240px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }

.loader-progress {
height: 100%;
width: 0%;
background: linear-gradient(to right, #7c3aed, #60a5fa);
animation: loadingBar 2s ease forwards;
box-shadow: 0 0 20px #7c3aed, 0 0 40px #60a5fa;
}

@keyframes loadingBar { 0% { width: 0%; } 100% { width: 100%; } }

@keyframes loaderGlow {
0% { transform: scale(1); filter: drop-shadow(0 0 0px #7c3aed); }
50% { transform: scale(1.04); filter: drop-shadow(0 0 25px #7c3aed); }
100% { transform: scale(1); filter: drop-shadow(0 0 0px #60a5fa); }
}

/* ===================== DECORATIVE / BACKGROUND ELEMENTS ===================== */
.stars-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -30; }

.star {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: white;
opacity: .7;
animation: twinkle linear infinite;
}

@keyframes twinkle {
0% { opacity: .1; transform: scale(.4); }
50% { opacity: 1; transform: scale(1.3); }
100% { opacity: .1; transform: scale(.4); }
}

.scanline {
position: fixed;
inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(255,255,255,.015) 51%);
background-size: 100% 4px;
pointer-events: none;
z-index: 999999;
opacity: .18;
}

.hologram {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 900px;
height: 900px;
border-radius: 50%;
border: 1px solid rgba(124,58,237,.06);
pointer-events: none;
z-index: -15;
animation: hologramSpin 24s linear infinite;
}

.hologram::before, .hologram::after {
content: '';
position: absolute;
inset: 70px;
border-radius: 50%;
border: 1px solid rgba(96,165,250,.06);
}

.hologram::after { inset: 150px; }

@keyframes hologramSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}

.glass-floating-nav {
position: fixed;
top: 50%;
right: 30px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 16px;
z-index: 999999;
}

.glass-floating-nav a,
.glass-floating-nav div {
width: 14px; height: 14px;
border-radius: 50%;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.2);
backdrop-filter: blur(10px);
transition: .3s;
}

.glass-floating-nav a:hover,
.glass-floating-nav div:hover { transform: scale(1.4); background: #7c3aed; box-shadow: 0 0 20px #7c3aed; }

.glass-topbar {
position: fixed;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: 92%;
height: 72px;
border-radius: 28px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(25px);
z-index: 998;
pointer-events: none;
}

.energy-lines { position: fixed; inset: 0; pointer-events: none; z-index: -2; }

.energy-line {
position: absolute;
width: 2px;
height: 180px;
background: linear-gradient(to bottom, transparent, rgba(124,58,237,.45), transparent);
filter: blur(.5px);
animation: energyMove 8s linear infinite;
}

.energy-line:nth-child(1) { left: 15%; animation-delay: 0s; }
.energy-line:nth-child(2) { left: 35%; animation-delay: 2s; }
.energy-line:nth-child(3) { left: 55%; animation-delay: 4s; }
.energy-line:nth-child(4) { left: 75%; animation-delay: 6s; }

@keyframes energyMove {
0% { transform: translateY(-200px); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(120vh); opacity: 0; }
}

.mega-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(124,58,237,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(124,58,237,.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at center, black 20%, transparent 90%);
pointer-events: none;
z-index: -3;
}

.glass-line {
position: absolute;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,.08), transparent);
left: 20%;
top: 0;
}

.glass-line.two { left: 80%; }

.noise {
position: fixed;
inset: 0;
background-image: url('https://grainy-gradients.vercel.app/noise.svg');
opacity: .035;
pointer-events: none;
z-index: 9999;
}

.glow-orb {
position: fixed;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124,58,237,.18), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: -2;
animation: orbFloat 10s infinite alternate ease-in-out;
}

.glow-orb.one { left: 5%; top: 20%; }
.glow-orb.two { right: 10%; top: 60%; animation-delay: 5s; }

@keyframes orbFloat {
0% { transform: translateY(0px); }
100% { transform: translateY(-50px); }
}

.floating-line {
position: fixed;
height: 1px;
width: 220px;
background: linear-gradient(to right, transparent, rgba(124,58,237,.55), transparent);
animation: floatingLine 8s linear infinite;
pointer-events: none;
opacity: .35;
}

.floating-line.one { top: 20%; left: -220px; }
.floating-line.two { top: 70%; left: -220px; animation-delay: 4s; }

@keyframes floatingLine {
0% { transform: translateX(0); }
100% { transform: translateX(140vw); }
}

.light-beam {
position: fixed;
top: -20%;
width: 220px;
height: 140vh;
background: linear-gradient(to bottom, transparent, rgba(124,58,237,.08), transparent);
filter: blur(30px);
transform: rotate(18deg);
animation: beamMove 12s linear infinite;
pointer-events: none;
z-index: -4;
}

.light-beam.two { left: 65%; animation-delay: 6s; }

@keyframes beamMove {
0% { transform: translateY(-120%) rotate(18deg); }
100% { transform: translateY(120%) rotate(18deg); }
}

.aurora-bg { position: fixed; inset: 0; z-index: -20; overflow: hidden; pointer-events: none; }

.aurora {
position: absolute;
width: 700px;
height: 700px;
border-radius: 50%;
filter: blur(120px);
opacity: .14;
animation: auroraMove 18s infinite alternate ease-in-out;
}

.aurora.one { background: #7c3aed; top: -250px; left: -150px; }
.aurora.two { background: #2563eb; bottom: -250px; right: -150px; animation-delay: 4s; }

@keyframes auroraMove {
0% { transform: translate(0,0) scale(1); }
50% { transform: translate(80px,-40px) scale(1.15); }
100% { transform: translate(-40px,60px) scale(.95); }
}

.spotlight {
position: fixed;
width: 500px; height: 500px;
border-radius: 50%;
pointer-events: none;
z-index: -5;
background: radial-gradient(circle, rgba(124,58,237,.10), rgba(96,165,250,.05), transparent 70%);
transform: translate(-50%,-50%);
filter: blur(30px);
}

/* ===================== CYBER BG ===================== */
.cyber-bg { position: fixed; inset: 0; pointer-events: none; z-index: -10; overflow: hidden; }

.cyber-terminal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 1200px;
max-width: 90%;
opacity: .06;
font-family: monospace;
font-size: 19px;
line-height: 2.4;
color: #60a5fa;
filter: blur(.3px);
}

.cyber-line {
opacity: 0;
animation: fadeLine 14s linear infinite;
white-space: nowrap;
}

.cyber-line:nth-child(1) { animation-delay: 0s; }
.cyber-line:nth-child(2) { animation-delay: 1.75s; }
.cyber-line:nth-child(3) { animation-delay: 3.5s; }
.cyber-line:nth-child(4) { animation-delay: 5.25s; }
.cyber-line:nth-child(5) { animation-delay: 7s; }
.cyber-line:nth-child(6) { animation-delay: 8.75s; }
.cyber-line:nth-child(7) { animation-delay: 10.5s; }
.cyber-line:nth-child(8) { animation-delay: 12.25s; }

@keyframes fadeLine {
0% { opacity: 0; transform: translateX(-20px); }
8% { opacity: 1; }
40% { opacity: 1; }
100% { opacity: 0; transform: translateX(20px); }
}

/* ===================== PARTICLES ===================== */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }

.particle {
position: absolute;
width: 3px; height: 3px;
border-radius: 50%;
background: #8b5cf6;
box-shadow: 0 0 10px #8b5cf6, 0 0 20px #60a5fa;
opacity: .5;
animation: floatParticle linear infinite;
}

@keyframes floatParticle {
0% { transform: translateY(100vh) scale(0); opacity: 0; }
10% { opacity: .6; }
100% { transform: translateY(-120px) scale(1); opacity: 0; }
}

/* ===================== FLOATING ELEMENTS ===================== */
.floating-cards { position: absolute; inset: 0; pointer-events: none; }

.float-card {
position: absolute;
padding: 18px 16px;
border-radius: 22px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(25px);
box-shadow: 0 0 40px rgba(124,58,237,.18);
animation: floatCard 7s infinite ease-in-out;
font-weight: 700;
color: #fff;
font-size: 13px;
}

.float-card.one { top: 20%; left: 8%; }
.float-card.two { top: 18%; right: 8%; animation-delay: 2.3s; }
.float-card.three { bottom: 22%; left: 12%; animation-delay: 4.6s; }

@keyframes floatCard {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-14px) rotate(2deg); }
100% { transform: translateY(0px) rotate(0deg); }
}

.pulse-ring {
position: absolute;
width: 460px;
height: 460px;
border: 1px solid rgba(124,58,237,.12);
border-radius: 50%;
animation: pulseRing 6s infinite;
}

@keyframes pulseRing {
0% { transform: scale(.7); opacity: 0; }
50% { opacity: 1; }
100% { transform: scale(1.4); opacity: 0; }
}

.hero-planet {
position: absolute;
right: -140px;
top: 80px;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #8b5cf6, #312e81 55%, transparent 70%);
filter: blur(1px);
opacity: .35;
box-shadow: 0 0 120px rgba(124,58,237,.45);
animation: planetRotate 20s linear infinite;
}

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

.hero-grid {
position: absolute;
bottom: -200px;
left: -10%;
width: 140%;
height: 400px;
background:
linear-gradient(rgba(124,58,237,.18) 2px, transparent 2px),
linear-gradient(90deg, rgba(124,58,237,.18) 2px, transparent 2px);
background-size: 80px 80px;
transform: perspective(1000px) rotateX(80deg);
opacity: .22;
}

.hero-glow-text {
position: absolute;
font-size: 180px;
font-weight: 900;
opacity: .03;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
letter-spacing: 14px;
white-space: nowrap;
pointer-events: none;
}

.massive-text {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
font-size: 180px;
font-weight: 900;
opacity: .03;
letter-spacing: 14px;
white-space: nowrap;
pointer-events: none;
}

.hero-3d-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.floating-orb {
position: absolute;
border-radius: 50%;
filter: blur(6px);
opacity: .3;
animation: orbMove 14s infinite ease-in-out alternate;
}

.floating-orb.one { width: 220px; height: 220px; background: #7c3aed; top: 18%; left: 8%; }
.floating-orb.two { width: 160px; height: 160px; background: #2563eb; right: 12%; top: 30%; animation-delay: 4.6s; }
.floating-orb.three { width: 100px; height: 100px; background: #8b5cf6; bottom: 20%; left: 30%; animation-delay: 9s; }

@keyframes orbMove {
0% { transform: translateY(0px) scale(1); }
100% { transform: translateY(-40px) scale(1.18); }
}

.voice-waves { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; overflow: hidden; opacity: .12; pointer-events: none; }

.wave {
position: absolute;
width: 200%;
height: 100%;
border-radius: 45%;
background: radial-gradient(circle, #7c3aed55, transparent 70%);
animation: waveMove 14s linear infinite;
}

.wave.two { animation-duration: 20s; opacity: .5; }

@keyframes waveMove {
0% { transform: translateX(0) rotate(0deg); }
100% { transform: translateX(-25%) rotate(360deg); }
}

/* ===================== MOUSE / CURSOR ===================== */
.cursor-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 999999; }

.cursor-core {
position: fixed;
width: 7px;
height: 7px;
border-radius: 50%;
background: #e8f7ff;
pointer-events: none;
z-index: 9999999;
transform: translate(-50%,-50%);
box-shadow: 0 0 12px #ffffff, 0 0 26px #62c8ff, 0 0 54px #60a5fa;
}

.mouse-ring {
position: fixed;
width: 18px;
height: 18px;
border: 1px solid rgba(125,210,255,.45);
border-radius: 50%;
pointer-events: none;
z-index: 999998;
transform: translate(-50%,-50%);
transition: width .25s ease, height .25s ease, border-color .25s ease;
}

/* ===================== LIVE FEED ===================== */
.live-feed { position: fixed; top: 250px; right: 20px; width: min(360px, calc(100vw - 40px)); display: flex; flex-direction: column; gap: 10px; z-index: 2147482998; pointer-events: none; }

.feed-item {
background: linear-gradient(135deg, rgba(18,18,32,.84), rgba(9,9,16,.78));
border: 1px solid rgba(139,92,246,.24);
backdrop-filter: blur(24px);
padding: 14px;
border-radius: 20px;
display: flex;
gap: 12px;
align-items: center;
animation: feedIn .6s cubic-bezier(.2,.8,.2,1), feedPulse 3.2s ease-in-out infinite;
box-shadow: 0 18px 48px rgba(0,0,0,.28), 0 0 34px rgba(124,58,237,.18);
transform-origin:right center;
}
.feed-item.feed-out { animation: feedOut .52s ease forwards; }

.feed-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #60a5fa); display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; flex-shrink: 0; }
.feed-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.feed-text { font-size: 13px; line-height: 1.5; color: #eef2ff; text-shadow: 0 1px 12px rgba(0,0,0,.34); }
.feed-text b { color:#fff; }

@keyframes feedIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes feedOut { to { opacity: 0; transform: translateX(60px) scale(.96); max-height:0; padding-top:0; padding-bottom:0; margin-top:-10px; } }
@keyframes feedPulse { 50% { box-shadow: 0 20px 56px rgba(0,0,0,.34), 0 0 48px rgba(96,165,250,.17); } }

/* ===================== LIVE NOTIFICATION ===================== */
.live-notification {
position: fixed;
left: 20px;
top: 166px;
padding: 16px 20px;
background: linear-gradient(135deg, rgba(24,24,42,.88), rgba(9,9,18,.82));
border: 1px solid rgba(139,92,246,.24);
border-radius: 20px;
backdrop-filter: blur(20px);
z-index: 2147482998;
display: flex;
align-items: center;
gap: 14px;
opacity: 0;
transform: translateY(32px) scale(.96);
pointer-events: none;
transition: opacity .28s ease, transform .28s ease;
}

.live-notification.show {
opacity: 1;
transform: translateY(0) scale(1);
animation: livePopup 1s ease, liveGlow 2.6s ease-in-out infinite;
}

.live-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(to right, #7c3aed, #60a5fa); display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; padding: 0; flex-shrink: 0; }
.live-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

@keyframes livePopup { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== LIVE TOAST ===================== */
.live-toast {
position: fixed;
right: 20px;
top: 166px;
padding: 16px 20px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(18,18,34,.92), rgba(8,8,16,.88));
border: 1px solid rgba(96,165,250,.20);
backdrop-filter: blur(20px);
z-index: 2147482998;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 0 30px rgba(124,58,237,.15);
opacity: 0;
transform: translateY(32px) scale(.96);
pointer-events: none;
transition: opacity .28s ease, transform .28s ease;
}

.live-toast.show {
opacity: 1;
transform: translateY(0) scale(1);
animation: toastSlide 1s ease, liveGlow 2.8s ease-in-out infinite;
}

.toast-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 12px #22c55e; flex-shrink: 0; }

@keyframes toastSlide { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes liveGlow { 50% { box-shadow: 0 0 48px rgba(124,58,237,.28), 0 0 80px rgba(96,165,250,.16); } }

/* ===================== AI HELPER ===================== */
.ai-helper {
position: fixed;
top: auto;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #60a5fa);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
box-shadow: 0 0 30px rgba(124,58,237,.35), 0 0 60px rgba(96,165,250,.18);
z-index: 2147482998;
animation: helperPulse 3s infinite;
}

@keyframes helperPulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

.ai-helper-msg {
position: fixed;
top: auto;
bottom: 92px;
right: 20px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(10,10,10,.8);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(20px);
max-width: 220px;
font-size: 13px;
line-height: 1.6;
z-index: 2147482998;
animation: feedIn .6s ease;
}

.site-fixed-ui{
position:fixed!important;
z-index:2147482998!important;
}

/* ===================== DIVIDERS ===================== */
.fancy-divider { width: 100%; display: flex; justify-content: center; padding: 30px 0; }
.fancy-divider span { width: 220px; height: 2px; background: linear-gradient(to right, transparent, rgba(124,58,237,.85), transparent); box-shadow: 0 0 30px rgba(124,58,237,.4); }

.section-divider { width: 100%; display: flex; justify-content: center; padding: 20px 0 60px; }
.section-divider span { width: 260px; height: 2px; background: linear-gradient(to right, transparent, #7c3aed, transparent); box-shadow: 0 0 30px rgba(124,58,237,.4); }

/* ===================== TRAIL ===================== */
.trail { position: fixed; border-radius: 50%; pointer-events: none; z-index: 99999; filter: blur(1px); mix-blend-mode: screen; }

/* ===================== HERO LOGO ===================== */
.hero-logo {
width: 110px;
height: 110px;
object-fit: cover;
border-radius: 28px;
display: block;
margin: 0 auto 30px auto;
box-shadow: 0 0 30px rgba(124,58,237,.35), 0 0 60px rgba(37,99,235,.25);
animation: floatLogo 4s ease-in-out infinite;
}

@keyframes floatLogo {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}

/* ===================== DISCORD WIDGET / PREVIEW ===================== */
.discord-widget {
margin-top: 40px;
padding: 24px;
border-radius: 24px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(20px);
}

.widget-online { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: #d4d4d8; }
.widget-online span { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 12px #22c55e; display: block; }

.discord-preview { margin-top: 60px; background: #313338; border-radius: 24px; padding: 24px; border: 1px solid rgba(255,255,255,.05); }
.discord-message { display: flex; gap: 14px; align-items: flex-start; }
.discord-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(to right, #7c3aed, #60a5fa); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; flex-shrink: 0; }
.discord-content h4 { font-size: 16px; margin-bottom: 8px; }
.discord-content p { color: #d4d4d8; line-height: 1.7; }

/* ===================== RIPPLE ===================== */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: rippleAnim .6s linear; background: rgba(255,255,255,.25); pointer-events: none; }
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ===================== MISC ===================== */
.magnetic { transition: transform .18s ease; }
.nav-scrolled { background: rgba(5,5,5,.75) !important; border-bottom: 1px solid rgba(124,58,237,.15) !important; box-shadow: 0 0 30px rgba(124,58,237,.08); }
.hero-parallax { transform-style: preserve-3d; transition: transform .15s linear; }
.hero-buttons-glow { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(124,58,237,.18), transparent 70%); filter: blur(60px); bottom: -80px; z-index: -1; }

.empty-bots {
grid-column: 1 / -1;
padding: 34px;
border: 1px dashed rgba(255,255,255,.18);
border-radius: 24px;
background: rgba(255,255,255,.04);
color: #a1a1aa;
text-align: center;
font-weight: 700;
}

.commands-preview {
display: grid;
grid-template-columns: 52px .85fr 1.15fr 52px;
gap: 28px;
align-items: center;
padding: 48px 34px;
border: 1px solid rgba(167,139,250,.32);
border-radius: 22px;
background:
radial-gradient(circle at var(--x,70%) var(--y,20%), rgba(167,139,250,.20), transparent 26%),
linear-gradient(135deg, rgba(255,255,255,.035), rgba(96,165,250,.035) 42%, rgba(124,58,237,.045));
backdrop-filter: blur(10px);
transform-style: preserve-3d;
min-height: 420px;
box-shadow: 0 24px 100px rgba(0,0,0,.10), 0 0 95px rgba(124,58,237,.20), inset 0 1px 0 rgba(255,255,255,.06);
}

.command-copy { text-align: center; display: grid; gap: 24px; justify-items: center; }
.commands-preview h3 { font-size: clamp(34px,4vw,56px); margin: 0; }
.commands-preview p { color: #c3c5d1; line-height: 1.8; max-width: 620px; font-size: 18px; font-weight: 800; }
.commands-preview strong { font-size: 20px; font-weight: 950; }
.command-arrow {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.75);
background: rgba(255,255,255,.02);
color: white;
font-size: 34px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
transition: .25s;
}
.command-arrow:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 34px rgba(139,92,246,.32); border-color: #a78bfa; }
.single-command-slide .command-arrow { opacity: .35; cursor: default; }
.single-command-slide .command-arrow:hover { transform: none; box-shadow: none; border-color: rgba(255,255,255,.75); }
.command-arrow.left { justify-self:start; }
.command-arrow.right { justify-self:end; }
.commands-image-shell {
position: relative;
border-radius: 24px;
padding: 0;
background: transparent;
box-shadow: 0 0 80px rgba(124,58,237,.20), 0 0 110px rgba(96,165,250,.12);
transform: translateZ(26px);
}
.commands-image-shell::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
border: 0;
pointer-events: none;
}
.commands-preview img { width: 100%; display: block; border-radius: 12px; border: 0; box-shadow: none; object-fit: contain; max-height: 420px; background-color: transparent !important; mix-blend-mode: normal; }
.slide-in-right { animation: commandSlideRight .32s ease both; }
.slide-in-left { animation: commandSlideLeft .32s ease both; }
@keyframes commandSlideRight { from{opacity:.65;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
@keyframes commandSlideLeft { from{opacity:.65;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }

.billing-tabs {
display: flex;
width: max-content;
margin-left: auto;
margin-right: auto;
justify-content: center;
gap: 10px;
padding: 8px;
border-radius: 22px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
margin-bottom: 34px;
overflow: visible;
box-shadow: 0 16px 44px rgba(0,0,0,.24);
}
.billing-tabs button {
position: relative;
min-width: 118px;
min-height: 50px;
padding: 14px 28px;
border: 0;
border-radius: 16px;
background: rgba(124,58,237,.12);
color: white;
font-weight: 750;
}
.billing-tabs span {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
background: #f59e0b;
color: #fff;
padding: 6px 10px;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 10px 30px rgba(245,158,11,.32);
}
.billing-tabs button.active {
background: linear-gradient(135deg,#7c3aed,#60a5fa);
box-shadow: 0 16px 44px rgba(124,58,237,.35);
}

.premium-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 24px;
}
.premium-plan {
position: relative;
padding: 34px;
border-radius: 28px;
background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
border: 1px solid rgba(255,255,255,.09);
box-shadow: 0 24px 90px rgba(0,0,0,.28), 0 0 50px rgba(124,58,237,.12);
overflow: hidden;
transform-style: preserve-3d;
}
.premium-plan.featured { border-color: rgba(124,58,237,.55); box-shadow: 0 28px 120px rgba(124,58,237,.22); }
.plan-badge {
position: absolute;
top: 0;
right: 0;
padding: 10px 22px;
border-bottom-left-radius: 18px;
background: #10b981;
font-size: 12px;
font-weight: 900;
box-shadow: 0 14px 34px rgba(16,185,129,.3);
}
.premium-plan h3 { color: #c4b5fd; font-size: 22px; margin-bottom: 14px; }
.plan-price { font-size: 42px; font-weight: 800; margin-bottom: 26px; }
.plan-price span { font-size: 16px; color: #a1a1aa; }
.plan-line { height: 1px; background: rgba(255,255,255,.1); margin-bottom: 24px; }
.premium-plan ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; color: #d4d4d8; }
.premium-plan li::before { content: '✓'; color: #22c55e; margin-right: 8px; }
.premium-plan .primary-btn { width: 100%; }

@media(max-width:800px){
.commands-preview{grid-template-columns:44px 1fr 44px}.command-copy,.commands-image-shell{grid-column:1/-1}.command-arrow.left{grid-column:1}.command-arrow.right{grid-column:3;grid-row:3}
.billing-tabs{display:grid;width:100%}
}

.floating-cards {
perspective: 900px;
}

.float-card {
transform-style: preserve-3d;
box-shadow: 0 20px 80px rgba(124,58,237,.18), inset 0 1px 0 rgba(255,255,255,.12);
}

.hero-content {
transform-style: preserve-3d;
animation: heroCamera 8s ease-in-out infinite;
}

@keyframes heroCamera {
0%, 100% { transform: rotateX(0deg) rotateY(0deg) translateZ(0); }
35% { transform: rotateX(1.4deg) rotateY(-1.8deg) translateZ(8px); }
70% { transform: rotateX(-1deg) rotateY(1.4deg) translateZ(4px); }
}

.cursor-star {
position: fixed;
z-index: 999997;
pointer-events: none;
border-radius: 50%;
background: white;
box-shadow: 0 0 12px #fff, 0 0 20px #8b5cf6;
animation: cursorStar .65s ease-out forwards;
}

@keyframes cursorStar {
0% { opacity: 1; transform: translate(0,0) scale(1); }
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}

.cursor-core {
box-shadow: 0 0 16px #d8b4fe, 0 0 36px #8b5cf6;
}

.mouse-ring {
box-shadow: 0 0 24px rgba(139,92,246,.28);
}

body.cursor-hover .mouse-ring {
width: 28px;
height: 28px;
border-color: rgba(96,165,250,.72);
box-shadow: 0 0 30px rgba(96,165,250,.45), inset 0 0 14px rgba(96,165,250,.16);
}

body.cursor-hover .cursor-core {
width: 7px;
height: 7px;
background: #ffffff;
}

body.cursor-press .mouse-ring {
width: 30px;
height: 30px;
}

.hero-content,
.buttons,
.primary-btn,
.secondary-btn {
z-index: 5;
}

.hero .primary-btn,
.hero .secondary-btn {
animation: heroButtonGlow 2.65s ease-in-out infinite, heroButtonBreath 5.8s ease-in-out infinite;
transform: translate3d(0,0,0);
backface-visibility: hidden;
box-shadow: 0 13px 48px rgba(124,58,237,.30), 0 0 82px rgba(96,165,250,.11);
transform-style: flat;
}

.hero .primary-btn:hover,
.hero .secondary-btn:hover {
box-shadow: 0 20px 80px rgba(124,58,237,.52), 0 0 145px rgba(96,165,250,.26), inset 0 1px 0 rgba(255,255,255,.25);
transform: translate3d(0,-4px,0) scale(1.075);
}

.hero .secondary-btn {
animation-delay: .35s;
}

@keyframes heroButtonGlow {
0%, 100% { box-shadow: 0 12px 48px rgba(124,58,237,.32), 0 0 78px rgba(96,165,250,.12); }
50% { box-shadow: 0 18px 68px rgba(124,58,237,.48), 0 0 126px rgba(96,165,250,.24); }
}

@keyframes heroButtonLift {
from { transform: translate3d(0,0,0); }
to { transform: translate3d(0,-3px,0); }
}

@keyframes heroButtonBreath {
0%, 100% { filter: saturate(1); }
50% { filter: saturate(1.2) brightness(1.04); }
}

@keyframes buttonFloat {
0%, 100% { filter: saturate(1); }
50% { filter: saturate(1.35) brightness(1.08); }
}

.premium-grid-in {
animation: premiumGridIn .35s ease both;
}

@keyframes premiumGridIn {
from { opacity: 0; transform: translateY(18px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}

.bot-card,
.premium-plan,
.why-card,
.commands-preview {
animation: softRise .7s ease both;
}

.bot-card.camera-tilt,
.premium-plan.camera-tilt,
.why-card.camera-tilt,
.stat-card.camera-tilt,
.dashboard-card.camera-tilt,
.commands-preview.camera-tilt,
.ultra-mini-card.camera-tilt {
animation: none;
}

@keyframes softRise {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}

body{
animation:novarisSitePulse 7s ease-in-out infinite;
}

.hero-content,.bot-card,.why-card,.premium-plan,.commands-preview,.stat-card,.dashboard,.terminal-box{
box-shadow:0 22px 90px rgba(0,0,0,.30),0 0 38px rgba(139,92,246,.14),0 0 22px rgba(96,165,250,.08);
}

.bot-card:hover,.why-card:hover,.premium-plan:hover,.commands-preview:hover,.stat-card:hover,.dashboard-card:hover{
box-shadow:0 30px 120px rgba(0,0,0,.38),0 0 64px rgba(139,92,246,.24),0 0 36px rgba(96,165,250,.14);
filter:brightness(1.035) saturate(1.08);
}

.primary-btn,.secondary-btn,.discord-login{
box-shadow:0 16px 48px rgba(124,58,237,.30),0 0 28px rgba(96,165,250,.16);
}

.primary-btn:hover,.secondary-btn:hover,.discord-login:hover{
box-shadow:0 22px 70px rgba(124,58,237,.42),0 0 42px rgba(96,165,250,.24);
transform: translateY(-4px) scale(1.065);
}

.hero-action.hero-action-live{
animation:novarisButtonPulse 1.8s ease-in-out infinite;
}

@keyframes novarisSitePulse{
50%{filter:saturate(1.10) brightness(1.018)}
}

@keyframes novarisButtonPulse{
50%{filter:brightness(1.08) saturate(1.16)}
}

body{
animation:none!important;
filter:none!important;
}

header,#announcement-bar,.site-fixed-ui,.ai-helper,.ai-helper-msg,.live-feed,.live-notification,.live-toast{
position:fixed!important;
}

.ai-helper{top:auto!important;bottom:20px!important}
.ai-helper-msg{top:auto!important;bottom:92px!important}
.live-feed{top:250px!important}
.live-toast{top:166px!important}

/* Novaris visual polish */
.commands-preview {
  grid-template-columns: 52px minmax(260px, .9fr) minmax(360px, 1.1fr) 52px;
  min-height: 360px;
  isolation: isolate;
  border-radius: 20px;
  background:
    linear-gradient(120deg, rgba(10, 12, 24, .94), rgba(20, 18, 38, .88) 52%, rgba(9, 14, 30, .94)),
    linear-gradient(90deg, rgba(45, 212, 191, .08), rgba(139, 92, 246, .12));
  box-shadow: 0 30px 110px rgba(0, 0, 0, .38), 0 0 54px rgba(96, 165, 250, .12), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.commands-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.035) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: .25;
  mask-image: linear-gradient(90deg, transparent, black 16%, black 84%, transparent);
  z-index: -1;
}

.command-copy {
  text-align: left;
  justify-items: start;
}

.commands-preview h3 {
  letter-spacing: 0;
  line-height: 1.05;
  background: linear-gradient(135deg, #fff, #dbeafe 54%, #a5f3fc);
  -webkit-background-clip: text;
  color: transparent;
}

.commands-preview p {
  max-width: 560px;
  color: #dbe4ff;
}

.commands-preview strong {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(45, 212, 191, .28);
  border-radius: 999px;
  background: rgba(45, 212, 191, .08);
  color: #f8fbff;
}

.commands-image-shell {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 260px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(135deg, rgba(5, 9, 20, .80), rgba(20, 20, 42, .66));
  background-size: 32px 32px, 32px 32px, auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .32), 0 0 42px rgba(45, 212, 191, .08);
}

.commands-image-shell img,
.commands-preview img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 14px;
  padding: 10px;
}

.commands-preview.image-broken .commands-image-shell::after {
  content: 'Görsel yüklenemedi';
  display: grid;
  place-items: center;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 14px;
  color: #c7d2fe;
  font-weight: 800;
  background: rgba(15, 23, 42, .46);
}

.command-arrow {
  backdrop-filter: blur(10px);
  background: rgba(15, 23, 42, .52);
  border-color: rgba(226, 232, 240, .46);
}

.command-arrow:hover {
  background: linear-gradient(135deg, rgba(45, 212, 191, .22), rgba(139, 92, 246, .20));
}

.bot-card,
.why-card,
.premium-plan,
.dashboard-card,
.stat-card,
.ultra-mini-card {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, filter .24s ease;
}

.bot-card:hover,
.why-card:hover,
.premium-plan:hover,
.dashboard-card:hover,
.stat-card:hover,
.ultra-mini-card:hover {
  transform: translateY(-5px);
  border-color: rgba(45, 212, 191, .26);
}

@media(max-width:900px) {
  .commands-preview {
    grid-template-columns: 44px 1fr 44px;
    padding: 28px 18px;
    gap: 18px;
  }

  .command-copy {
    text-align: center;
    justify-items: center;
  }

  .commands-image-shell {
    min-height: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bot-card,
  .why-card,
  .premium-plan,
  .dashboard-card,
  .stat-card,
  .ultra-mini-card,
  .commands-preview {
    animation: none !important;
    transition: none !important;
  }
}