/* ==========================================
ROOT VARIABLES
========================================== */

:root{

--bg:#0b1020;

--card:#121a2f;
--card2:#1a2540;

--primary:#6366f1;
--secondary:#8b5cf6;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--text:#ffffff;
--muted:#94a3b8;

--border:
rgba(255,255,255,.08);

}

/* ==========================================
RESET
========================================== */

*{

margin:0;
padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

}

/* ==========================================
BACKGROUND
========================================== */

.bg-gradient{

position:fixed;

inset:0;

z-index:-1;

background:

radial-gradient(
circle at top left,
rgba(99,102,241,.18),
transparent 40%
),

radial-gradient(
circle at bottom right,
rgba(139,92,246,.18),
transparent 40%
);

}

/* ==========================================
NAVBAR
========================================== */

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:24px 40px;

position:sticky;

top:0;

z-index:999;

background:
rgba(11,16,32,.85);

backdrop-filter:blur(20px);

border-bottom:
1px solid var(--border);

}

.logo{

font-size:1.8rem;

font-family:'Syne',sans-serif;

font-weight:800;

background:
linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.navbar nav{

display:flex;

gap:16px;

}

.navbar nav a{

text-decoration:none;

color:#cbd5e1;

padding:10px 16px;

border-radius:999px;

transition:.3s;

}

.navbar nav a:hover{

background:
rgba(255,255,255,.06);

color:white;

}

.nav-actions{

display:flex;

gap:12px;

}

/* ==========================================
BUTTONS
========================================== */

.primary-btn{

padding:14px 24px;

border:none;

border-radius:14px;

cursor:pointer;

font-weight:700;

color:white;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

transition:.3s;

}

.outline-btn{

padding:14px 24px;

border-radius:14px;

background:none;

border:
1px solid var(--border);

color:white;

cursor:pointer;

transition:.3s;

}

/* ==========================================
SECTION BASE
========================================== */

section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.section-header{

text-align:center;

margin-bottom:60px;

}

.section-header span{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
rgba(99,102,241,.15);

color:#c7d2fe;

font-weight:700;

margin-bottom:14px;

}

.section-header h2{

font-size:3rem;

font-family:'Syne',sans-serif;

}

/* ==========================================
HERO
========================================== */

.hero{

max-width:1400px;

margin:auto;

padding:120px 40px;

display:grid;

grid-template-columns:
1.1fr .9fr;

gap:60px;

align-items:center;

}

.hero-badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
rgba(99,102,241,.15);

color:#c7d2fe;

font-weight:700;

margin-bottom:24px;

}

.hero h1{

font-size:
clamp(
3.5rem,
8vw,
6rem
);

line-height:1.05;

font-family:'Syne',sans-serif;

margin-bottom:20px;

}

.hero h1 span{

background:
linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

max-width:650px;

font-size:1.1rem;

line-height:1.9;

color:var(--muted);

margin-bottom:30px;

}

.hero-actions{

display:flex;

gap:14px;

flex-wrap:wrap;

}

/* ==========================================
HERO PREVIEW
========================================== */

.hero-preview{

display:flex;

justify-content:center;

align-items:center;

}

.preview-card{

width:100%;

max-width:380px;

padding:34px;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

display:flex;

flex-direction:column;

gap:20px;

}

.preview-card p{

display:flex;

justify-content:space-between;

align-items:center;

}

/* ==========================================
OVERVIEW STATS
========================================== */

.stats-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.stat-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.stat-card h1{

font-size:2.8rem;

font-family:'Syne',sans-serif;

margin-bottom:12px;

background:
linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.stat-card p{

color:var(--muted);

}

/* ==========================================
CATEGORY GRID
========================================== */

.category-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.category-card{

padding:40px;

text-align:center;

font-size:2rem;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

transition:.35s ease;

}

.category-card:hover{

transform:
translateY(-8px);

}

.category-card h3{

font-size:1.2rem;

margin:16px 0;

}

.category-card p{

font-size:1rem;

line-height:1.8;

color:var(--muted);

}

/* ==========================================
STATUS SECTION
========================================== */

.status-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.status-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}
/* ==========================================
STATUS INDICATORS
========================================== */

.online,
.offline,
.busy,
.away{

display:inline-flex;

align-items:center;

gap:8px;

padding:12px 18px;

border-radius:999px;

font-weight:700;

}

.online{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.offline{

background:
rgba(148,163,184,.15);

color:#cbd5e1;

}

.busy{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.away{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

/* ==========================================
BADGES
========================================== */

.badge-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.badge-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.badge{

width:60px;
height:60px;

display:inline-flex;

align-items:center;
justify-content:center;

border-radius:50%;

font-weight:700;

font-size:1.1rem;

margin-bottom:18px;

}

.badge.red{

background:#ef4444;

}

.badge.green{

background:#22c55e;

}

.badge.orange{

background:#f59e0b;

}

.badge.purple{

background:#8b5cf6;

}

/* ==========================================
TAGS & CHIPS
========================================== */

.tag-showcase{

display:flex;

flex-wrap:wrap;

gap:14px;

justify-content:center;

}

.tag{

padding:12px 18px;

border-radius:999px;

background:
rgba(255,255,255,.06);

border:
1px solid var(--border);

font-weight:600;

}

.tag.red{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.tag.green{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.tag.orange{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.tag.purple{

background:
rgba(139,92,246,.15);

color:#c4b5fd;

}

.tag.cyan{

background:
rgba(6,182,212,.15);

color:#67e8f9;

}

/* ==========================================
PILLS
========================================== */

.pill-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.pill-card{

padding:30px;

text-align:center;

border-radius:24px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.pill{

padding:12px 22px;

border-radius:999px;

font-weight:700;

}

.pill.accent{

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

.pill.success{

background:#22c55e;

}

.pill.danger{

background:#ef4444;

}

.pill.warning{

background:#f59e0b;

}

.pill.purple{

background:#8b5cf6;

}

.pill.dark{

background:#0f172a;

border:
1px solid var(--border);

}

/* ==========================================
VERSION LABELS
========================================== */

.version-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.version-card{

padding:30px;

text-align:center;

border-radius:24px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.version{

padding:12px 18px;

border-radius:999px;

font-weight:700;

}

.version.stable{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.version.beta{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.version.alpha{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.version.release{

background:
rgba(99,102,241,.15);

color:#a5b4fc;

}

/* ==========================================
HIGHLIGHT TEXT
========================================== */

.highlight-card{

padding:40px;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

line-height:2.2;

font-size:1.1rem;

}

.highlight{

padding:4px 10px;

border-radius:8px;

background:
rgba(99,102,241,.2);

}

.highlight.yellow{

background:
rgba(245,158,11,.2);

}

.highlight.green{

background:
rgba(34,197,94,.2);

}

.highlight.purple{

background:
rgba(139,92,246,.2);

}

/* ==========================================
GRADIENT TEXT
========================================== */

.gradient-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.gradient-card{

padding:40px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.gradient{

font-size:2rem;

font-weight:800;

font-family:'Syne',sans-serif;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.gradient.orange{

background:
linear-gradient(
90deg,
#f97316,
#f59e0b
);

}

.gradient.purple{

background:
linear-gradient(
90deg,
#8b5cf6,
#ec4899
);

}

.gradient.cyan{

background:
linear-gradient(
90deg,
#06b6d4,
#3b82f6
);

}

.gradient.sunset{

background:
linear-gradient(
90deg,
#fb7185,
#f97316
);

}

/* ==========================================
TEXT DECORATIONS
========================================== */

.decorations-card{

padding:40px;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

display:grid;

gap:20px;

}

.underline-accent{

text-decoration:underline;

text-decoration-color:
var(--primary);

text-decoration-thickness:3px;

}

.strike{

text-decoration:line-through;

opacity:.7;

}

.bold-accent{

font-weight:800;

color:#a5b4fc;

}

.text-glow{

color:white;

text-shadow:
0 0 12px rgba(99,102,241,.8);

}

/* ==========================================
INLINE CODE
========================================== */

.inline-code-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.code-card{

padding:34px;

border-radius:28px;

background:
#0f172a;

border:
1px solid var(--border);

}

.inline-code{

padding:4px 10px;

border-radius:8px;

font-family:
"Fira Code",
monospace;

background:
rgba(255,255,255,.08);

color:#67e8f9;

}/* ==========================================
TOOLTIPS
========================================== */

.tooltip-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.tooltip-card{

padding:40px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.tooltip{

position:relative;

display:inline-block;

cursor:pointer;

padding:12px 18px;

border-radius:999px;

background:
rgba(255,255,255,.06);

}

.tooltip-text{

position:absolute;

left:50%;
bottom:130%;

transform:
translateX(-50%);

min-width:180px;

padding:12px 16px;

border-radius:12px;

font-size:.9rem;

background:#0f172a;

border:
1px solid var(--border);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:10;

}

.tooltip-text.bottom{

top:130%;
bottom:auto;

}

.tooltip:hover .tooltip-text{

opacity:1;

visibility:visible;

}

/* ==========================================
KEYBOARD SHORTCUTS
========================================== */

.keyboard-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.keyboard-card{

padding:34px;

text-align:center;

font-size:1.2rem;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.kbd{

display:inline-flex;

align-items:center;
justify-content:center;

min-width:54px;

padding:10px 14px;

border-radius:10px;

font-weight:700;

background:#0f172a;

border:
1px solid rgba(255,255,255,.12);

box-shadow:
0 4px 12px rgba(0,0,0,.2);

}

/* ==========================================
ANIMATED BADGES
========================================== */

.animated-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.animated-card{

padding:36px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.animated-badge{

display:inline-block;

padding:12px 20px;

border-radius:999px;

font-weight:700;

animation:
pulseBadge 2s infinite;

}

.animated-badge.red{

background:#ef4444;

}

.animated-badge.green{

background:#22c55e;

}

.animated-badge.orange{

background:#f59e0b;

}

.animated-badge.purple{

background:#8b5cf6;

}

/* ==========================================
LIVE INDICATORS
========================================== */

.live-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.live-card{

padding:34px;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.live-dot{

width:12px;
height:12px;

border-radius:50%;

background:#22c55e;

animation:
pulseDot 2s infinite;

}

.live-dot.green{

background:#22c55e;

}

.live-dot.orange{

background:#f59e0b;

}

.live-dot.red{

background:#ef4444;

}

/* ==========================================
LOADING SPINNERS
========================================== */

.loading-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.loading-card{

padding:36px;

display:flex;

align-items:center;

justify-content:center;

gap:14px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.loading-spinner{

width:24px;
height:24px;

border-radius:50%;

border:
3px solid rgba(255,255,255,.2);

border-top-color:
var(--primary);

animation:
spin 1s linear infinite;

}

.loading-spinner.accent{

border-top-color:
#06b6d4;

}

.loading-spinner.purple{

border-top-color:
#8b5cf6;

}

/* ==========================================
PROGRESS LABELS
========================================== */

.progress-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.progress-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.progress-label{

padding:12px 20px;

border-radius:999px;

font-weight:700;

background:
rgba(99,102,241,.15);

color:#a5b4fc;

}

.progress-label.success{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.progress-label.warning{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.progress-label.danger{

background:
rgba(239,68,68,.15);

color:#f87171;

}

/* ==========================================
PREMIUM LABELS
========================================== */

.premium-grid{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:16px;

}

.premium-label{

padding:12px 22px;

border-radius:999px;

font-weight:700;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

.premium-label.gold{

background:
linear-gradient(
135deg,
#f59e0b,
#facc15
);

}

.premium-label.silver{

background:
linear-gradient(
135deg,
#94a3b8,
#e2e8f0
);

color:#111827;

}

.premium-label.purple{

background:
linear-gradient(
135deg,
#8b5cf6,
#ec4899
);

}

/* ==========================================
VERIFIED BADGES
========================================== */

.verified-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.verified-card{

padding:34px;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.verified-badge{

width:28px;
height:28px;

display:inline-flex;

align-items:center;
justify-content:center;

border-radius:50%;

font-size:.9rem;

font-weight:700;

background:#22c55e;

}

.verified-badge.blue{

background:#3b82f6;

}

.verified-badge.gold{

background:#f59e0b;

}

.verified-badge.purple{

background:#8b5cf6;

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes pulseBadge{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

@keyframes pulseDot{

0%{

box-shadow:
0 0 0 0 rgba(34,197,94,.5);

}

70%{

box-shadow:
0 0 0 12px rgba(34,197,94,0);

}

100%{

box-shadow:
0 0 0 0 rgba(34,197,94,0);

}

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}
/* ==========================================
NOTIFICATION LABELS
========================================== */

.notification-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.notification-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.notify-label{

display:inline-block;

padding:12px 20px;

border-radius:999px;

font-weight:700;

}

.notify-label.info{

background:
rgba(59,130,246,.15);

color:#60a5fa;

}

.notify-label.success{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.notify-label.warning{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.notify-label.danger{

background:
rgba(239,68,68,.15);

color:#f87171;

}

/* ==========================================
ALERT SPANS
========================================== */

.alert-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.alert-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.alert-span{

display:inline-flex;

align-items:center;

gap:8px;

padding:12px 20px;

border-radius:12px;

font-weight:700;

}

.alert-span.success{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.alert-span.warning{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.alert-span.danger{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.alert-span.info{

background:
rgba(59,130,246,.15);

color:#60a5fa;

}

/* ==========================================
SOCIAL COUNTERS
========================================== */

.social-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.social-card{

padding:40px;

text-align:center;

font-size:2rem;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

transition:.35s ease;

}

.social-card:hover{

transform:
translateY(-8px);

}

.social-count{

display:block;

margin-top:14px;

font-size:1.5rem;

font-weight:700;

}

/* ==========================================
RATING BADGES
========================================== */

.rating-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.rating-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.rating-badge{

padding:12px 20px;

border-radius:999px;

font-weight:700;

background:
rgba(255,255,255,.08);

}

.rating-badge.gold{

background:
linear-gradient(
135deg,
#f59e0b,
#facc15
);

color:#111827;

}

.rating-badge.green{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.rating-badge.purple{

background:
rgba(139,92,246,.15);

color:#c4b5fd;

}

/* ==========================================
USER MENTIONS
========================================== */

.mentions-card{

padding:40px;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

display:grid;

gap:18px;

line-height:2;

}

.mention{

padding:4px 10px;

border-radius:999px;

font-weight:700;

background:
rgba(59,130,246,.15);

color:#60a5fa;

}

.mention.purple{

background:
rgba(139,92,246,.15);

color:#c4b5fd;

}

.mention.green{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

/* ==========================================
CATEGORY MARKERS
========================================== */

.marker-grid{

display:flex;

flex-wrap:wrap;

gap:14px;

justify-content:center;

}

.marker{

padding:12px 18px;

border-radius:999px;

font-weight:700;

}

.marker.design{

background:
rgba(236,72,153,.15);

color:#f9a8d4;

}

.marker.code{

background:
rgba(59,130,246,.15);

color:#60a5fa;

}

.marker.marketing{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.marker.finance{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.marker.support{

background:
rgba(148,163,184,.15);

color:#cbd5e1;

}

.marker.ai{

background:
rgba(139,92,246,.15);

color:#c4b5fd;

}

/* ==========================================
AVAILABILITY LABELS
========================================== */

.availability-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.availability-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.availability{

padding:12px 20px;

border-radius:999px;

font-weight:700;

}

.availability.available{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.availability.limited{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.availability.soldout{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.availability.preorder{

background:
rgba(99,102,241,.15);

color:#a5b4fc;

}

/* ==========================================
SMART METADATA
========================================== */

.metadata-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.metadata-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.meta-item{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:600;

color:#cbd5e1;

}
/* ==========================================
ACHIEVEMENT BADGES
========================================== */

.achievement-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.achievement-card{

padding:36px;

text-align:center;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.achievement-badge{

display:inline-block;

padding:14px 24px;

border-radius:999px;

font-weight:700;

}

.achievement-badge.gold{

background:
linear-gradient(
135deg,
#f59e0b,
#facc15
);

color:#111827;

}

.achievement-badge.silver{

background:
linear-gradient(
135deg,
#94a3b8,
#e2e8f0
);

color:#111827;

}

.achievement-badge.bronze{

background:
linear-gradient(
135deg,
#b45309,
#d97706
);

}

.achievement-badge.diamond{

background:
linear-gradient(
135deg,
#06b6d4,
#3b82f6
);

}

/* ==========================================
AI LABELS
========================================== */

.ai-grid{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:16px;

}

.ai-label{

padding:12px 20px;

border-radius:999px;

font-weight:700;

background:
linear-gradient(
135deg,
#6366f1,
#8b5cf6
);

}

.ai-label.purple{

background:
linear-gradient(
135deg,
#8b5cf6,
#ec4899
);

}

.ai-label.cyan{

background:
linear-gradient(
135deg,
#06b6d4,
#3b82f6
);

}

.ai-label.green{

background:
linear-gradient(
135deg,
#22c55e,
#10b981
);

}

/* ==========================================
FEATURE FLAGS
========================================== */

.flags-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.flag-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.feature-flag{

padding:12px 20px;

border-radius:999px;

font-weight:700;

}

.feature-flag.enabled{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.feature-flag.disabled{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.feature-flag.beta{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.feature-flag.experimental{

background:
rgba(139,92,246,.15);

color:#c4b5fd;

}

/* ==========================================
ACTIVITY INDICATORS
========================================== */

.activity-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.activity-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.activity-indicator{

padding:12px 20px;

border-radius:999px;

font-weight:700;

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.activity-indicator.yellow{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.activity-indicator.red{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.activity-indicator.blue{

background:
rgba(59,130,246,.15);

color:#60a5fa;

}

/* ==========================================
FAQ
========================================== */

.faq-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.faq-card{

padding:34px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.faq-card h3{

margin-bottom:16px;

}

.faq-card p{

line-height:1.9;

color:var(--muted);

}

/* ==========================================
DOCUMENTATION
========================================== */

.docs-card{

padding:40px;

border-radius:30px;

background:#0f172a;

border:
1px solid var(--border);

overflow:auto;

}

.docs-card pre{

font-family:
"Fira Code",
monospace;

line-height:2;

color:#38bdf8;

}

/* ==========================================
GALLERY
========================================== */

.gallery-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.gallery-card{

padding:40px;

text-align:center;

font-size:2rem;

cursor:pointer;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

transition:.35s ease;

}

.gallery-card:hover{

transform:
translateY(-8px);

}

.gallery-card h3{

font-size:1.1rem;

margin-top:16px;

}

/* ==========================================
FOOTER
========================================== */

.footer{

background:#050b16;

border-top:
1px solid var(--border);

}

.footer-grid{

max-width:1400px;

margin:auto;

padding:80px 40px;

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:40px;

}

.footer h3,
.footer h4{

margin-bottom:18px;

}

.footer p,
.footer li{

color:var(--muted);

line-height:1.8;

}

.footer ul{

list-style:none;

}

.footer-bottom{

padding:24px;

text-align:center;

border-top:
1px solid var(--border);

color:var(--muted);

}

/* ==========================================
MODAL
========================================== */

.modal-overlay{

position:fixed;

inset:0;

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

backdrop-filter:blur(8px);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:2000;

}

.modal-overlay.active{

opacity:1;

visibility:visible;

}

.modal{

width:min(720px,92%);

border-radius:30px;

overflow:hidden;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

border:
1px solid rgba(255,255,255,.08);

}

.modal-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:24px;

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

}

.modal-header button{

background:none;

border:none;

color:white;

font-size:1.2rem;

cursor:pointer;

}

.modal-content{

padding:40px;

}

/* ==========================================
SCROLL TO TOP
========================================== */

.scroll-top{

position:fixed;

right:30px;
bottom:30px;

width:60px;
height:60px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:1.3rem;

color:white;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

.scroll-top.show{

opacity:1;

visibility:visible;

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(30px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

.gallery-card,
.faq-card,
.achievement-card,
.flag-card{

animation:
fadeUp .7s ease both;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:992px){

.stats-grid,
.category-grid,
.status-grid,
.badge-grid,
.version-grid,
.tooltip-grid,
.keyboard-grid,
.animated-grid,
.live-grid,
.progress-grid,
.notification-grid,
.alert-grid,
.social-grid,
.rating-grid,
.availability-grid,
.metadata-grid,
.achievement-grid,
.flags-grid,
.activity-grid,
.gallery-grid{

grid-template-columns:
repeat(2,1fr);

}

.footer-grid{

grid-template-columns:
repeat(2,1fr);

}

}

@media(max-width:768px){

.navbar{

flex-direction:column;

gap:20px;

}

.navbar nav{

flex-wrap:wrap;

justify-content:center;

}

.hero{

grid-template-columns:1fr;

text-align:center;

}

.stats-grid,
.category-grid,
.status-grid,
.badge-grid,
.pill-grid,
.version-grid,
.gradient-grid,
.inline-code-grid,
.tooltip-grid,
.keyboard-grid,
.animated-grid,
.live-grid,
.loading-grid,
.progress-grid,
.verified-grid,
.notification-grid,
.alert-grid,
.social-grid,
.rating-grid,
.availability-grid,
.metadata-grid,
.achievement-grid,
.flags-grid,
.activity-grid,
.faq-grid,
.gallery-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:2.8rem;

}

.section-header h2{

font-size:2rem;

}

}

@media(max-width:480px){

section{

padding-left:20px;
padding-right:20px;

}

.hero{

padding:100px 20px;

}

.modal-content{

padding:24px;

}

}

/* ==========================================
FINAL POLISH
========================================== */

.primary-btn:hover{

transform:
translateY(-2px);

box-shadow:
0 12px 30px rgba(99,102,241,.35);

}

.outline-btn:hover{

background:
rgba(255,255,255,.06);

}

.logo{

letter-spacing:1px;

}

.gallery-card,
.category-card,
.badge-card{

backdrop-filter:
blur(18px);

}