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

:root{

--bg:#070b16;

--card:#101827;
--card-light:#18233d;

--accent:#eb6835;
--accent2:#7c5cff;

--text:#ffffff;
--muted:#9ca3af;

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

--radius:30px;

}

/* ==========================================
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 BLOBS
========================================== */

body::before{

content:"";

position:fixed;

width:500px;
height:500px;

border-radius:50%;

background:
rgba(124,92,255,.12);

top:-180px;
left:-120px;

filter:blur(120px);

z-index:-1;

}

body::after{

content:"";

position:fixed;

width:450px;
height:450px;

border-radius:50%;

background:
rgba(235,104,53,.08);

bottom:-180px;
right:-120px;

filter:blur(140px);

z-index:-1;

}

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

.navbar{

position:sticky;

top:0;

z-index:999;

backdrop-filter:blur(20px);

background:
rgba(7,11,22,.92);

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

}

.nav-container{

max-width:1400px;

margin:auto;

padding:20px 40px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo-icon{

width:48px;
height:48px;

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

border-radius:16px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

}

.logo span{

font-size:2rem;

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

font-weight:800;

}

.nav-links{

display:flex;

gap:14px;

}

.nav-links a{

padding:12px 18px;

border-radius:999px;

text-decoration:none;

color:#d1d5db;

transition:.3s ease;

}

.nav-links a:hover,
.nav-links .active{

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

color:white;

}

.nav-actions{

display:flex;

gap:12px;

}

.primary-btn{

padding:14px 22px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:white;

font-weight:700;

cursor:pointer;

text-decoration:none;

display:inline-flex;
align-items:center;
justify-content:center;

}

.outline-btn,
.secondary-btn{

padding:14px 22px;

border-radius:16px;

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

background:none;

color:white;

cursor:pointer;

text-decoration:none;

display:inline-flex;
align-items:center;
justify-content:center;

}

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

.calendar-hero{

max-width:1400px;

margin:auto;

padding:90px 40px;

text-align:center;

}

.hero-badge{

display:inline-block;

padding:12px 22px;

border-radius:999px;

background:
rgba(124,92,255,.15);

border:
1px solid rgba(124,92,255,.25);

color:#d8ceff;

font-weight:700;

margin-bottom:25px;

}

.calendar-hero h1{

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

line-height:1.05;

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

margin-bottom:20px;

}

.calendar-hero h1 span{

background:
linear-gradient(
90deg,
var(--accent),
var(--accent2)
);

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

}

.calendar-hero p{

max-width:850px;

margin:auto;

font-size:1.1rem;

line-height:1.9;

color:var(--muted);

}

.hero-actions{

display:flex;

justify-content:center;

gap:14px;

margin-top:35px;

flex-wrap:wrap;

}

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

.hero-stats{

display:grid;

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

gap:24px;

margin-top:60px;

}

.hero-stat{

padding:28px;

border-radius:24px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

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

}

.hero-stat h3{

font-size:2.4rem;

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

margin-bottom:10px;

}

.hero-stat p{

color:var(--muted);

}

/* ==========================================
SECTION HEADER
========================================== */

.section-header{

text-align:center;

margin-bottom:50px;

}

.section-header span{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
rgba(124,92,255,.15);

color:#d8ceff;

font-weight:700;

margin-bottom:15px;

}

.section-header h2{

font-size:3rem;

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

}

/* ==========================================
OVERVIEW SECTION
========================================== */

.overview-section{

max-width:1400px;

margin:auto;

padding:40px;

}

.overview-grid{

display:grid;

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

gap:24px;

}

.overview-card{

padding:30px;

border-radius:30px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

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

}

.large-card{

display:flex;

flex-direction:column;

justify-content:center;

}

.card-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.card-top span{

padding:8px 14px;

border-radius:999px;

background:
rgba(16,185,129,.15);

color:#86efac;

font-size:.8rem;

}

.overview-card h2{

font-size:2rem;

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

margin-bottom:12px;

}

.overview-card p{

line-height:1.8;

color:var(--muted);

}

.overview-card i{

font-size:2rem;

margin-bottom:15px;

color:var(--accent2);

}

.overview-tags{

display:flex;

gap:10px;

margin-top:20px;

flex-wrap:wrap;

}

.overview-tags span{

padding:8px 14px;

border-radius:999px;

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

}
/* ==========================================
AGENDA SECTION
========================================== */

.agenda-section{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.agenda-grid{

display:flex;

flex-direction:column;

gap:24px;

}

.agenda-card{

display:flex;

gap:24px;

align-items:flex-start;

padding:28px;

border-radius:30px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

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

transition:.35s ease;

}

.agenda-card:hover{

transform:
translateY(-8px);

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

}

.agenda-time{

min-width:120px;

height:90px;

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

border-radius:22px;

font-weight:700;

font-size:1.1rem;

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

}

.agenda-content{

flex:1;

}

.agenda-content h3{

font-size:1.7rem;

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

margin-bottom:10px;

}

.agenda-content p{

line-height:1.8;

color:var(--muted);

margin-bottom:15px;

}

.agenda-meta{

display:flex;

gap:18px;

flex-wrap:wrap;

color:#cbd5e1;

font-size:.95rem;

}

/* ==========================================
PRIORITY COLORS
========================================== */

.agenda-card.high{

border-left:
6px solid #ef4444;

}

.agenda-card.medium{

border-left:
6px solid #f59e0b;

}

.agenda-card.low{

border-left:
6px solid #10b981;

}

/* ==========================================
ANALYTICS SECTION
========================================== */

.analytics-section{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.analytics-grid{

display:grid;

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

gap:24px;

}

.analytics-card{

padding:30px;

border-radius:30px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

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

transition:.35s ease;

}

.analytics-card:hover{

transform:
translateY(-8px);

}

.large-analytics{

grid-column:span 1;

}

.analytics-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.analytics-top span{

padding:8px 14px;

border-radius:999px;

background:
rgba(16,185,129,.15);

color:#86efac;

font-weight:700;

}

.analytics-card h3{

font-size:1.4rem;

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

margin-bottom:12px;

}

.analytics-card p{

line-height:1.8;

color:var(--muted);

}

.analytics-card i{

font-size:2.3rem;

margin-bottom:16px;

color:var(--accent2);

}

.analytics-card h2{

font-size:2.8rem;

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

}

/* ==========================================
CHART
========================================== */

.chart-bars{

height:220px;

display:flex;

align-items:flex-end;

gap:14px;

margin-bottom:25px;

}

.bar{

flex:1;

border-radius:999px;

background:
linear-gradient(
180deg,
var(--accent2),
var(--accent)
);

transition:.35s ease;

}

.bar:hover{

opacity:.8;

transform:scaleY(1.05);

}

/* ==========================================
WEEKLY PLANNER
========================================== */

.weekly-section{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.weekly-grid{

display:grid;

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

gap:18px;

}

.week-card{

padding:28px 18px;

border-radius:26px;

text-align:center;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

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

transition:.35s ease;

cursor:pointer;

}

.week-card:hover{

transform:
translateY(-8px);

}

.week-card h3{

font-size:1.2rem;

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

margin-bottom:12px;

}

.week-card span{

color:var(--muted);

}

.active-day{

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

border:none;

}

.active-day span{

color:white;

}
/* ==========================================
MONTH SECTION
========================================== */

.month-section{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.calendar-wrapper{

padding:35px;

border-radius:36px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

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

}

/* ==========================================
CALENDAR CONTROLS
========================================== */

.calendar-controls{

display:flex;

justify-content:flex-end;

gap:12px;

margin-bottom:25px;

}

.calendar-controls button{

width:52px;
height:52px;

border:none;

border-radius:16px;

cursor:pointer;

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

color:white;

transition:.35s ease;

}

.calendar-controls button:hover{

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

transform:
translateY(-4px);

}

/* ==========================================
CALENDAR DAYS
========================================== */

.calendar-days{

display:grid;

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

gap:14px;

margin-bottom:18px;

}

.calendar-days span{

text-align:center;

padding:16px;

font-weight:700;

color:var(--muted);

}

/* ==========================================
CALENDAR GRID
========================================== */

.calendar-grid{

display:grid;

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

gap:14px;

}

.date{

aspect-ratio:1/1;

display:flex;

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

border-radius:20px;

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

border:
1px solid transparent;

font-weight:700;

cursor:pointer;

transition:.35s ease;

position:relative;

}

.date:hover{

transform:
translateY(-5px);

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

border-color:
rgba(255,255,255,.12);

}

.date.inactive{

opacity:.25;

}

.date.today{

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:white;

box-shadow:
0 10px 30px rgba(124,92,255,.3);

}

/* ==========================================
EVENT DOT
========================================== */

.date.has-event::after{

content:"";

position:absolute;

bottom:10px;

width:8px;
height:8px;

border-radius:50%;

background:#10b981;

}

/* ==========================================
TIMELINE SECTION
========================================== */

.timeline-section{

max-width:1200px;

margin:auto;

padding:100px 40px;

}

.timeline{

position:relative;

padding-left:40px;

}

.timeline::before{

content:"";

position:absolute;

left:10px;
top:0;
bottom:0;

width:2px;

background:
linear-gradient(
180deg,
var(--accent),
var(--accent2)
);

}

.timeline-item{

position:relative;

padding-bottom:50px;

}

.timeline-dot{

position:absolute;

left:-36px;

width:22px;
height:22px;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

box-shadow:
0 0 20px rgba(124,92,255,.35);

}

.timeline-content{

padding:28px;

border-radius:26px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

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

transition:.35s ease;

}

.timeline-content:hover{

transform:
translateY(-6px);

}

.timeline-content span{

display:block;

margin-bottom:12px;

color:var(--accent2);

font-weight:700;

}

.timeline-content h3{

font-size:1.5rem;

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

margin-bottom:10px;

}

.timeline-content p{

line-height:1.8;

color:var(--muted);

}

/* ==========================================
UPCOMING EVENTS
========================================== */

.events-section{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.events-grid{

display:grid;

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

gap:24px;

}

.event-widget{

padding:28px;

border-radius:28px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

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

transition:.35s ease;

}

.event-widget:hover{

transform:
translateY(-8px);

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

}

.event-widget h3{

font-size:1.4rem;

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

margin-bottom:10px;

}

.event-widget p{

color:var(--muted);

}

/* ==========================================
EXTRA GLOW EFFECTS
========================================== */

.calendar-wrapper:hover{

box-shadow:
0 0 30px rgba(124,92,255,.12);

}

.timeline-content:hover{

box-shadow:
0 0 25px rgba(124,92,255,.12);

}

.event-widget:hover{

box-shadow:
0 0 25px rgba(124,92,255,.12);

}
/* ==========================================
NEWSLETTER SECTION
========================================== */

.newsletter-section{

max-width:1400px;

margin:auto;

padding:100px 40px;

}

.newsletter-card{

padding:80px;

border-radius:40px;

text-align:center;

background:
linear-gradient(
135deg,
#eb6835,
#7c5cff,
#38bdf8
);

position:relative;

overflow:hidden;

}

.newsletter-card::before{

content:"";

position:absolute;

width:350px;
height:350px;

border-radius:50%;

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

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

}

.newsletter-card h2{

font-size:3rem;

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

margin-bottom:18px;

position:relative;

z-index:2;

}

.newsletter-card p{

max-width:700px;

margin:auto;

line-height:1.9;

opacity:.95;

position:relative;

z-index:2;

}

.newsletter-form{

display:flex;

justify-content:center;

gap:12px;

margin-top:30px;

flex-wrap:wrap;

position:relative;

z-index:2;

}

.newsletter-form input{

width:380px;

padding:18px 20px;

border:none;

outline:none;

border-radius:18px;

background:white;

}

.newsletter-form button{

padding:18px 26px;

border:none;

border-radius:18px;

background:#111827;

color:white;

font-weight:700;

cursor:pointer;

transition:.3s ease;

}

.newsletter-form button:hover{

transform:
translateY(-3px);

}

/* ==========================================
FLOATING BUTTON
========================================== */

.floating-btn{

position:fixed;

right:30px;
bottom:30px;

width:70px;
height:70px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:1.3rem;

color:white;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

box-shadow:
0 15px 35px rgba(124,92,255,.35);

z-index:999;

transition:.35s ease;

}

.floating-btn:hover{

transform:
translateY(-8px)
scale(1.05);

}

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

.footer{

margin-top:100px;

background:#050816;

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

}

.footer-container{

max-width:1400px;

margin:auto;

padding:70px 40px;

display:grid;

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

gap:40px;

}

.footer-brand h2{

font-size:2rem;

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

color:var(--accent);

margin-bottom:15px;

}

.footer-brand p{

line-height:1.8;

color:var(--muted);

}

.footer-col h3{

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

margin-bottom:18px;

}

.footer-col ul{

list-style:none;

}

.footer-col li{

margin-bottom:12px;

}

.footer-col a{

text-decoration:none;

color:var(--muted);

transition:.3s ease;

}

.footer-col a:hover{

color:white;

padding-left:5px;

}

.footer-form{

display:flex;
flex-direction:column;

gap:12px;

margin-top:16px;

}

.footer-form input{

padding:15px;

border:none;

outline:none;

border-radius:16px;

background:#162033;

color:white;

}

.footer-form button{

padding:15px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:white;

font-weight:700;

cursor:pointer;

}

.footer-bottom{

padding:24px;

text-align:center;

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

color:var(--muted);

}

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

@keyframes fadeUp{

0%{

opacity:0;

transform:
translateY(40px);

}

100%{

opacity:1;

transform:
translateY(0);

}

}

.hero-stat,
.overview-card,
.agenda-card,
.analytics-card,
.week-card,
.event-widget{

animation:
fadeUp .7s ease both;

}

.hero-stat:nth-child(2){
animation-delay:.1s;
}

.hero-stat:nth-child(3){
animation-delay:.2s;
}

.hero-stat:nth-child(4){
animation-delay:.3s;
}

/* ==========================================
RESPONSIVE 1200px
========================================== */

@media(max-width:1200px){

.overview-grid{

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

}

.analytics-grid{

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

}

.events-grid{

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

}

.weekly-grid{

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

}

.footer-container{

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

}

}

/* ==========================================
RESPONSIVE 900px
========================================== */

@media(max-width:900px){

.nav-container{

flex-direction:column;

gap:20px;

}

.nav-links{

flex-wrap:wrap;

justify-content:center;

}

.hero-stats{

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

}

.calendar-grid{

gap:10px;

}

}

/* ==========================================
RESPONSIVE 768px
========================================== */

@media(max-width:768px){

.calendar-hero,
.overview-section,
.agenda-section,
.analytics-section,
.weekly-section,
.month-section,
.timeline-section,
.events-section,
.newsletter-section{

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

}

.calendar-hero h1{

font-size:3rem;

}

.hero-stats{

grid-template-columns:1fr;

}

.overview-grid{

grid-template-columns:1fr;

}

.analytics-grid{

grid-template-columns:1fr;

}

.weekly-grid{

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

}

.events-grid{

grid-template-columns:1fr;

}

.agenda-card{

flex-direction:column;

}

.calendar-wrapper{

padding:20px;

}

.calendar-days{

font-size:.85rem;

}

.footer-container{

grid-template-columns:1fr;

padding:50px 20px;

}

.newsletter-card{

padding:45px 25px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

}

/* ==========================================
RESPONSIVE 500px
========================================== */

@media(max-width:500px){

.hero-actions{

flex-direction:column;

}

.primary-btn,
.secondary-btn{

width:100%;

}

.weekly-grid{

grid-template-columns:1fr;

}

.calendar-grid{

gap:6px;

}

.date{

border-radius:12px;

font-size:.85rem;

}

.newsletter-card h2{

font-size:2rem;

}

.section-header h2{

font-size:2rem;

}

.floating-btn{

width:60px;
height:60px;

right:20px;
bottom:20px;

}

}

/* ===============================
   FUNNEL CHART
================================== */

.funnel-chart{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:20px;
}

.funnel-stage{
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  border-radius:14px;
  background:linear-gradient(135deg,#7c3aed,#06b6d4);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.s1{width:100%;}
.s2{width:82%;}
.s3{width:62%;}
.s4{width:42%;}


/* ===============================
   KPI DASHBOARD
================================== */

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
}

.kpi-box{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:24px;
  backdrop-filter:blur(12px);
  transition:.35s;
}

.kpi-box:hover{
  transform:translateY(-6px);
  border-color:#8b5cf6;
}

.kpi-box span{
  color:#9ca3af;
  font-size:.9rem;
}

.kpi-box h2{
  margin:10px 0;
  font-size:2rem;
}

.kpi-box small{
  color:#10b981;
  font-weight:600;
}


/* ===============================
   BUBBLE CHART
================================== */

.bubble{
  fill:#8b5cf6;
  opacity:.75;
  transition:.35s;
}

.bubble:hover{
  opacity:1;
  transform:scale(1.08);
  transform-origin:center;
}

.b1{fill:#8b5cf6;}
.b2{fill:#06b6d4;}
.b3{fill:#ec4899;}
.b4{fill:#10b981;}


/* ===============================
   COMPARISON CHART
================================== */

.compare-bars{
  display:flex;
  justify-content:space-evenly;
  align-items:flex-end;
  gap:35px;
  height:240px;
}

.compare-group{
  display:flex;
  align-items:flex-end;
  gap:8px;
}

.bar{
  width:28px;
  border-radius:12px 12px 0 0;
}

.revenue{
  height:180px;
  background:linear-gradient(180deg,#06b6d4,#0891b2);
}

.expense{
  height:120px;
  background:linear-gradient(180deg,#ef4444,#dc2626);
}


/* ===============================
   GAUGE KPI
================================== */

.gauge-bg{
  fill:none;
  stroke:#23252e;
  stroke-width:14;
}

.gauge-progress{
  fill:none;
  stroke:#06b6d4;
  stroke-width:14;
  stroke-linecap:round;
  stroke-dasharray:502;
  stroke-dashoffset:80;
  transform:rotate(-90deg);
  transform-origin:center;
}

.gauge-value{
  fill:#fff;
  font-size:28px;
  font-weight:800;
}


/* ===============================
   DEPTH CHART
================================== */

.buy-depth{
  fill:none;
  stroke:#10b981;
  stroke-width:5;
}

.sell-depth{
  fill:none;
  stroke:#ef4444;
  stroke-width:5;
}


/* ===============================
   SEGMENTED RING
================================== */

.segmented-ring{
  width:170px;
  height:170px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  align-content:center;
  justify-content:center;
}

.segment{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#272a34;
}

.segment.active{
  background:#8b5cf6;
  box-shadow:0 0 12px #8b5cf6;
}


/* ===============================
   AI METRICS
================================== */

.ai-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px;
}

.metric{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:20px;
  text-align:center;
  transition:.3s;
}

.metric:hover{
  transform:translateY(-5px);
  border-color:#06b6d4;
}

.metric span{
  color:#9ca3af;
  display:block;
  margin-bottom:8px;
}

.metric h2{
  margin:0;
  font-size:2rem;
}


/* ===============================
   HEXAGON GRID
================================== */

.hex-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}

.hex{
  width:90px;
  height:100px;
  background:linear-gradient(135deg,#8b5cf6,#06b6d4);
  clip-path:polygon(
    25% 6%,
    75% 6%,
    100% 50%,
    75% 94%,
    25% 94%,
    0 50%
  );

  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  transition:.35s;
}

.hex:hover{
  transform:translateY(-8px);
}


/* ===============================
   ANALYTICS TIMELINE
================================== */

.analytics-timeline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  padding:40px 10px;
}

.analytics-timeline::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:4px;
  background:#23252e;
}

.timeline-point{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#2d313d;
  position:relative;
  z-index:2;
}

.timeline-point.completed{
  background:#10b981;
  box-shadow:0 0 14px #10b981;
}

.timeline-point.active{
  background:#8b5cf6;
  box-shadow:0 0 16px #8b5cf6;
  animation:pulseTimeline 1.8s infinite;
}

@keyframes pulseTimeline{
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.18);
  }
  100%{
    transform:scale(1);
  }
}


/* ===============================
   GLOBAL PREMIUM EFFECTS
================================== */

.preview-box svg{
  width:100%;
  height:auto;
}

.component-card{
  overflow:hidden;
}

.component-card:hover{
  box-shadow:
    0 20px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(139,92,246,.15);
}