/* ==========================================
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:'DM Sans',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)
);

}

.outline-btn{

padding:14px 24px;

border-radius:14px;

background:none;

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

color:white;

cursor:pointer;

}

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

.stats-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
========================================== */

.stats-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;

}

.stats-hero h1{

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

line-height:1.05;

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

margin-bottom:20px;

}

.stats-hero h1 span{

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

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

}

.stats-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 METRICS
========================================== */

.hero-right{

display:grid;

grid-template-columns:
1fr;

gap:20px;

}

.hero-metric{

padding:32px;

border-radius:28px;

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

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

}

.hero-metric h2{

font-size:2.4rem;

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

margin-bottom:8px;

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

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

}

.hero-metric span{

color:var(--muted);

}

/* ==========================================
KPI GRID
========================================== */

.kpi-grid{

display:grid;

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

gap:24px;

}

.kpi-card{

padding:34px;

border-radius:28px;

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

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

transition:.35s;

}

.kpi-card:hover{

transform:
translateY(-8px);

}

.kpi-icon{

width:70px;
height:70px;

display:flex;

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

font-size:1.8rem;

border-radius:20px;

margin-bottom:20px;

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

}

.kpi-card h1{

font-size:2.5rem;

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

margin:12px 0;

}

.kpi-card p{

color:var(--success);

font-weight:700;

}

/* ==========================================
REALTIME ANALYTICS
========================================== */

.analytics-layout{

display:grid;

grid-template-columns:
2fr 1fr;

gap:24px;

}

.analytics-large{

padding:35px;

border-radius:30px;

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

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

}

.analytics-top{

display:flex;

justify-content:space-between;

margin-bottom:24px;

}

.chart-placeholder{

height:320px;

display:flex;

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

border-radius:20px;

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

}

.analytics-side{

display:grid;

gap:24px;

}

.live-card{

padding:30px;

text-align:center;

border-radius:28px;

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

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

}

.live-dot{

width:12px;
height:12px;

margin:auto;

border-radius:50%;

background:var(--success);

animation:
pulse 2s infinite;

margin-bottom:18px;

}
/* ==========================================
GLOBAL ANALYTICS
========================================== */

.global-layout{

display:grid;

grid-template-columns:
1.4fr .8fr;

gap:24px;

align-items:center;

}

.world-map-card{

height:420px;

display:flex;

flex-direction:column;

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

font-size:7rem;

border-radius:34px;

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

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

}

.world-map-card h3{

font-size:1.4rem;

margin-top:18px;

}

.country-stats{

display:grid;

gap:20px;

}

.country-card{

padding:28px;

display:flex;

justify-content:space-between;

align-items:center;

border-radius:22px;

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

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

}

.country-card strong{

font-size:1.4rem;

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

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

}

/* ==========================================
AI INSIGHTS
========================================== */

.insights-grid{

display:grid;

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

gap:24px;

}

.insight-card{

position:relative;

overflow:hidden;

padding:36px;

border-radius:30px;

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

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

}

.insight-card::before{

content:"";

position:absolute;

width:180px;
height:180px;

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

filter:blur(80px);

top:-60px;
right:-60px;

}

.insight-icon{

position:relative;

width:80px;
height:80px;

display:flex;

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

font-size:2rem;

border-radius:22px;

margin-bottom:20px;

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

}

.insight-card h1{

position:relative;

font-size:2.4rem;

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

margin:12px 0;

}

.insight-card p{

position:relative;

color:var(--muted);

line-height:1.8;

}

/* ==========================================
REVENUE FORECASTING
========================================== */

.forecast-layout{

display:grid;

grid-template-columns:
1.3fr .7fr;

gap:24px;

}

.forecast-main{

padding:50px;

border-radius:34px;

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

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

}

.forecast-main h1{

font-size:4rem;

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

margin:16px 0;

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

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

}

.forecast-main p{

color:var(--muted);

line-height:1.9;

}

.forecast-growth{

display:inline-block;

margin-top:24px;

padding:10px 18px;

border-radius:999px;

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

color:#4ade80;

font-weight:700;

}

.forecast-side{

display:grid;

gap:18px;

}

.forecast-box{

padding:26px;

border-radius:22px;

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

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

}

.forecast-box strong{

display:block;

margin-top:10px;

font-size:1.6rem;

}

/* ==========================================
CONVERSION FUNNEL
========================================== */

.funnel-card{

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

}

.funnel-step{

padding:24px;

font-weight:700;

text-align:center;

border-radius:18px;

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

}

.visitors{

width:100%;

}

.leads{

width:80%;

}

.trials{

width:60%;

}

.customers{

width:40%;

}

/* ==========================================
CUSTOMER ANALYTICS
========================================== */

.customer-grid{

display:grid;

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

gap:24px;

}

.customer-card{

padding:34px;

text-align:center;

border-radius:28px;

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

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

}

.customer-card h1{

font-size:2.8rem;

margin-top:14px;

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

}

/* ==========================================
RETENTION METRICS
========================================== */

.retention-layout{

display:grid;

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

gap:24px;

}

.retention-card{

padding:40px;

text-align:center;

border-radius:30px;

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

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

}

.retention-card h1{

font-size:3rem;

margin-top:16px;

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

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

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

}

/* ==========================================
GROWTH ENGINE
========================================== */

.growth-engine{

display:grid;

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

gap:24px;

}

.engine-card{

padding:36px;

text-align:center;

border-radius:28px;

font-size:2rem;

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

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

}

.engine-card h3{

font-size:1.3rem;

margin:16px 0;

}

.engine-card p{

font-size:1rem;

line-height:1.8;

color:var(--muted);

}

/* ==========================================
FINANCIAL BREAKDOWN
========================================== */

.finance-grid{

display:grid;

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

gap:24px;

}

.finance-card{

padding:40px;

text-align:center;

border-radius:32px;

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

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

}

.finance-card h1{

font-size:3rem;

margin-top:14px;

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

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

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

}

/* ==========================================
TRAFFIC SOURCES
========================================== */

.traffic-grid{

display:grid;

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

gap:24px;

}

.traffic-card{

padding:28px;

display:flex;

justify-content:space-between;

align-items:center;

border-radius:22px;

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

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

}

.traffic-card strong{

font-size:1.4rem;

color:#4ade80;

}
/* ==========================================
ENTERPRISE METRICS
========================================== */

.enterprise-grid{

display:grid;

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

gap:24px;

}

.enterprise-card{

padding:36px;

border-radius:30px;

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

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

transition:.35s ease;

}

.enterprise-card:hover{

transform:
translateY(-8px);

}

.enterprise-card h1{

font-size:2.6rem;

margin:14px 0;

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

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

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

}

.enterprise-card p{

color:var(--muted);

line-height:1.8;

}

/* ==========================================
INFRASTRUCTURE DASHBOARD
========================================== */

.infrastructure-layout{

display:grid;

grid-template-columns:
1.5fr .7fr;

gap:24px;

}

.infra-main{

padding:36px;

border-radius:30px;

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

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

}

.infra-chart{

height:320px;

margin-top:24px;

display:flex;

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

border-radius:24px;

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

}

.infra-side{

display:grid;

gap:20px;

}

.infra-box{

padding:30px;

border-radius:24px;

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

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

}

.infra-box strong{

display:block;

margin-top:12px;

font-size:1.8rem;

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

}

/* ==========================================
SECURITY ANALYTICS
========================================== */

.security-grid{

display:grid;

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

gap:24px;

}

.security-card{

padding:40px;

text-align:center;

font-size:2.5rem;

border-radius:32px;

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

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

}

.security-card h3{

font-size:1.2rem;

margin:18px 0 12px;

}

.security-card h1{

font-size:2.5rem;

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

}

/* ==========================================
TEAM PRODUCTIVITY
========================================== */

.team-productivity{

display:grid;

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

gap:24px;

}

.team-stat{

padding:36px;

text-align:center;

border-radius:28px;

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

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

}

.team-stat h1{

font-size:2.8rem;

margin-top:14px;

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

}

/* ==========================================
DEPARTMENT STATISTICS
========================================== */

.department-grid{

display:grid;

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

gap:24px;

}

.department-card{

padding:36px;

text-align:center;

font-size:2rem;

border-radius:28px;

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

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

}

.department-card h3{

font-size:1.2rem;

margin:18px 0;

}

.department-card strong{

font-size:2rem;

display:block;

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

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

}

/* ==========================================
REVENUE HEATMAP
========================================== */

.heatmap-card{

padding:40px;

border-radius:34px;

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

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

}

.heat-grid{

display:grid;

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

gap:14px;

}

.heat{

height:90px;

border-radius:16px;

}

.heat.high{

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

}

.heat.medium{

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

}

.heat.low{

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

}

/* ==========================================
EXECUTIVE SUMMARY
========================================== */

.executive-card{

padding:80px;

text-align:center;

border-radius:40px;

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

}

.executive-card h1{

font-size:4rem;

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

margin-bottom:20px;

}

.executive-card p{

max-width:850px;

margin:auto;

line-height:2;

font-size:1.05rem;

}

/* ==========================================
KPI BENTO LAYOUT
========================================== */

.bento-layout{

display:grid;

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

gap:24px;

}

.bento-card{

padding:36px;

border-radius:32px;

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

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

display:flex;

flex-direction:column;

justify-content:center;

}

.bento-card.large{

min-height:320px;

}

.bento-card h1{

font-size:3rem;

margin:16px 0;

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

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

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

}

.bento-card p{

line-height:1.8;

color:var(--muted);

}
/* ==========================================
AI COMMAND ANALYTICS
========================================== */

.ai-command-grid{

display:grid;

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

gap:24px;

}

.ai-command-card{

position:relative;

overflow:hidden;

padding:40px;

text-align:center;

font-size:2.5rem;

border-radius:32px;

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

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

}

.ai-command-card::before{

content:"";

position:absolute;

width:180px;
height:180px;

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

filter:blur(80px);

top:-60px;
right:-60px;

}

.ai-command-card h3{

position:relative;

font-size:1.2rem;

margin:18px 0;

}

.ai-command-card h1{

position:relative;

font-size:2.8rem;

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

}

/* ==========================================
SMART RECOMMENDATIONS
========================================== */

.recommendation-grid{

display:grid;

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

gap:24px;

}

.recommend-card{

padding:34px;

border-radius:30px;

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

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

transition:.35s ease;

}

.recommend-card:hover{

transform:
translateY(-8px);

}

.recommend-card h3{

margin-bottom:16px;

}

.recommend-card p{

line-height:1.9;

color:var(--muted);

}

/* ==========================================
PREDICTIVE MODELS
========================================== */

.predictive-layout{

display:grid;

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

gap:24px;

}

.predictive-card{

padding:40px;

text-align:center;

border-radius:30px;

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

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

}

.predictive-card h1{

font-size:3rem;

margin:16px 0;

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

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

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

}

.predictive-card p{

color:var(--muted);

line-height:1.8;

}

/* ==========================================
LIVE ACTIVITY FEED
========================================== */

.activity-feed{

padding:40px;

border-radius:34px;

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

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

display:grid;

gap:18px;

}

.activity-item{

display:flex;

align-items:center;

gap:14px;

padding:18px;

border-radius:16px;

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

}

.activity-dot{

width:12px;
height:12px;

border-radius:50%;

background:var(--success);

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

}

/* ==========================================
INVESTOR DASHBOARD
========================================== */

.investor-grid{

display:grid;

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

gap:24px;

}

.investor-card{

padding:36px;

text-align:center;

border-radius:30px;

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

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

}

.investor-card h1{

font-size:2.8rem;

margin-top:14px;

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

}

/* ==========================================
SAAS METRICS
========================================== */

.saas-grid{

display:grid;

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

gap:24px;

}

.saas-card{

padding:36px;

text-align:center;

border-radius:28px;

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

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

}

.saas-card h1{

font-size:2.5rem;

margin-top:14px;

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

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

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

}

/* ==========================================
BUSINESS INTELLIGENCE HUB
========================================== */

.intelligence-card{

padding:90px;

text-align:center;

border-radius:40px;

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

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

position:relative;

overflow:hidden;

}

.intelligence-card::before{

content:"";

position:absolute;

width:320px;
height:320px;

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

filter:blur(120px);

top:-120px;
right:-120px;

}

.intelligence-card h1{

position:relative;

font-size:4rem;

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

margin-bottom:20px;

}

.intelligence-card p{

position:relative;

max-width:850px;

margin:auto;

line-height:2;

color:#dbe4ff;

}

/* ==========================================
ANALYTICS SHOWCASE
========================================== */

.showcase-grid{

display:grid;

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

gap:24px;

}

.showcase-card{

padding:36px;

min-height:220px;

display:flex;

flex-direction:column;

justify-content:center;

border-radius:30px;

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

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

font-size:1.3rem;

font-weight:700;

}

.showcase-card.large{

min-height:320px;

}

.showcase-card p{

margin-top:14px;

font-size:1rem;

font-weight:400;

line-height:1.8;

color:var(--muted);

}
/* ==========================================
FAQ SECTION
========================================== */

.faq-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.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);

transition:.35s ease;

}

.faq-card:hover{

transform:
translateY(-6px);

}

.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;

font-size:1rem;

line-height:2;

color:#38bdf8;

}

/* ==========================================
REPORTS CENTER
========================================== */

.reports-grid{

display:grid;

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

gap:24px;

}

.report-card{

padding:36px;

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;

}

.report-card:hover{

transform:
translateY(-8px);

}

.report-card h3{

font-size:1.2rem;

margin:18px 0 12px;

}

.report-card p{

font-size:1rem;

line-height:1.8;

color:var(--muted);

}

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

.gallery-grid{

display:grid;

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

gap:24px;

}

.gallery-card{

min-height:220px;

display:flex;

flex-direction:column;

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

gap:12px;

cursor:pointer;

font-size:1.2rem;

font-weight:700;

border-radius:30px;

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

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

transition:.35s ease;

}

.gallery-card.large{

min-height:320px;

}

.gallery-card:hover{

transform:
scale(1.03);

box-shadow:
0 20px 50px rgba(0,0,0,.25);

}

/* ==========================================
NEWSLETTER
========================================== */

.newsletter-card{

padding:80px;

text-align:center;

border-radius:40px;

background:
linear-gradient(
135deg,
#06b6d4,
#6366f1
);

}

.newsletter-card h2{

font-size:3rem;

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

margin-bottom:16px;

}

.newsletter-card p{

max-width:700px;

margin:auto;

line-height:1.9;

margin-bottom:28px;

}

.newsletter-form{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

}

.newsletter-form input{

width:420px;

padding:18px;

border:none;

outline:none;

border-radius:16px;

font-size:1rem;

}

.newsletter-form button{

padding:18px 26px;

border:none;

border-radius:16px;

cursor:pointer;

font-weight:700;

background:#111827;

color:white;

}

/* ==========================================
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);

}

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

.analytics-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 ease;

z-index:2000;

}

.analytics-modal-overlay.active{

opacity:1;

visibility:visible;

}

.analytics-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;

}

.modal-content h2{

font-size:2rem;

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

margin-bottom:18px;

}

.modal-content p{

line-height:2;

color:var(--muted);

}

/* ==========================================
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 ease;

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);

}

}

@keyframes pulse{

0%{

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

}

70%{

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

}

100%{

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

}

}

.kpi-card,
.insight-card,
.enterprise-card,
.report-card,
.gallery-card{

animation:
fadeUp .7s ease both;

}

/* ==========================================
BUTTON 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);

}

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

@media(max-width:992px){

.stats-hero{

grid-template-columns:1fr;

text-align:center;

}

.kpi-grid,
.customer-grid,
.enterprise-grid,
.team-productivity,
.department-grid,
.investor-grid,
.saas-grid,
.reports-grid{

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

}

.analytics-layout,
.global-layout,
.forecast-layout,
.infrastructure-layout{

grid-template-columns:1fr;

}

.insights-grid,
.predictive-layout,
.security-grid{

grid-template-columns:1fr;

}

.bento-layout,
.showcase-grid,
.gallery-grid{

grid-template-columns: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;

}

.kpi-grid,
.customer-grid,
.retention-layout,
.growth-engine,
.finance-grid,
.traffic-grid,
.enterprise-grid,
.team-productivity,
.department-grid,
.security-grid,
.investor-grid,
.saas-grid,
.reports-grid,
.faq-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.stats-hero h1{

font-size:2.8rem;

}

.section-header h2{

font-size:2rem;

}

.executive-card,
.intelligence-card,
.newsletter-card{

padding:40px;

}

}

@media(max-width:480px){

.stats-section{

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

}

.stats-hero{

padding:100px 20px;

}

.modal-content{

padding:24px;

}

}

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

.logo{

letter-spacing:1px;

}

.hero-metric,
.kpi-card,
.insight-card,
.enterprise-card{

backdrop-filter:
blur(18px);

}

.live-dot{

animation:
pulse 2s infinite;

}