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

:root{

--bg:#0b1020;

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

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

--success:#22c55e;

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

}

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

.story-hero{

max-width:1400px;

margin:auto;

padding:130px 40px;

display:grid;

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

gap:60px;

align-items:center;

}

.story-badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

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

color:#c7d2fe;

font-weight:700;

margin-bottom:24px;

}

.story-hero h1{

font-size:
clamp(
3.8rem,
8vw,
6.5rem
);

line-height:1.02;

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

margin-bottom:24px;

}

.story-hero p{

max-width:650px;

font-size:1.1rem;

line-height:1.9;

color:var(--muted);

margin-bottom:32px;

}

.hero-actions{

display:flex;

gap:14px;

flex-wrap:wrap;

}

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

.hero-visual{

position:relative;

height:500px;

}

.floating-card{

position:absolute;

padding:24px 34px;

border-radius:24px;

font-weight:700;

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

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

backdrop-filter:blur(20px);

}

.card-one{

top:40px;
left:40px;

}

.card-two{

top:180px;
right:40px;

}

.card-three{

bottom:60px;
left:120px;

}

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

margin-bottom:12px;

}

.section-header p{

color:var(--muted);

}

/* ==========================================
FOUNDER LETTER
========================================== */

.founder-card{

position:relative;

padding:60px;

border-radius:36px;

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

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

}

.quote-mark{

position:absolute;

top:20px;
left:30px;

font-size:8rem;

opacity:.08;

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

}

.founder-card p{

font-size:1.15rem;

line-height:2;

max-width:900px;

color:#dbe4ff;

}

.founder-footer{

display:flex;

align-items:center;

gap:16px;

margin-top:40px;

}

.founder-avatar{

width:70px;
height:70px;

display:flex;

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

font-size:1.5rem;

border-radius:18px;

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

}

/* ==========================================
PROBLEM SECTION
========================================== */

.problem-grid{

display:grid;

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

gap:24px;

}

.problem-card{

padding:34px;

border-radius:28px;

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

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

}

.problem-card h3{

margin-bottom:16px;

}

.problem-card p{

line-height:1.8;

color:var(--muted);

}

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

.timeline{

position:relative;

display:grid;

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

gap:24px;

}

.timeline-line{

position:absolute;

top:45px;
left:10%;

width:80%;
height:2px;

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

}

.timeline-node{

position:relative;

z-index:2;

padding:30px;

text-align:center;

border-radius:24px;

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

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

}

.timeline-node span{

display:inline-flex;

width:70px;
height:70px;

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

border-radius:50%;

font-weight:700;

margin-bottom:18px;

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

}

.timeline-node p{

margin-top:12px;

color:var(--muted);

line-height:1.7;

}
/* ==========================================
CHALLENGES
========================================== */

.challenge-grid{

display:grid;

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

gap:24px;

}

.challenge-card{

padding:34px;

border-radius:28px;

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

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

transition:.35s ease;

}

.challenge-card:hover{

transform:
translateY(-8px);

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

}

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

}

.challenge-card p{

margin-top:14px;

line-height:1.8;

color:var(--muted);

}

/* ==========================================
BREAKING POINT
========================================== */

.breaking-card{

padding:70px;

border-radius:40px;

text-align:center;

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

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

position:relative;

overflow:hidden;

}

.breaking-card::before{

content:"";

position:absolute;

width:300px;
height:300px;

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

filter:blur(100px);

top:-100px;
right:-100px;

}

.breaking-label{

display:inline-block;

padding:10px 18px;

border-radius:999px;

margin-bottom:20px;

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

color:#c7d2fe;

font-weight:700;

}

.breaking-card h2{

font-size:3rem;

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

margin-bottom:24px;

}

.breaking-card p{

max-width:800px;

margin:auto;

line-height:2;

color:#dbe4ff;

}

/* ==========================================
SOLUTION
========================================== */

.solution-grid{

display:grid;

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

gap:24px;

}

.solution-card{

padding:36px;

text-align:center;

border-radius:28px;

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

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

}

.solution-icon{

width:80px;
height:80px;

margin:auto;

display:flex;

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

font-size:2rem;

border-radius:22px;

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

margin-bottom:22px;

}

.solution-card p{

margin-top:14px;

line-height:1.8;

color:var(--muted);

}

/* ==========================================
GROWTH STORY
========================================== */

.growth-layout{

display:grid;

grid-template-columns:
1fr 1fr;

gap:40px;

align-items:center;

}

.growth-text h3{

font-size:2rem;

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

margin-bottom:20px;

}

.growth-text p{

line-height:2;

color:var(--muted);

}

.growth-card{

display:grid;

gap:18px;

}

.growth-item{

padding:22px;

border-radius:18px;

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

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

font-weight:600;

}

/* ==========================================
STORY STATISTICS
========================================== */

.stats-grid{

display:grid;

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

gap:24px;

}

.stat-card{

padding:40px;

text-align:center;

border-radius:30px;

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

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

}

.stat-card h1{

font-size:3rem;

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 span{

color:var(--muted);

}

/* ==========================================
ACHIEVEMENT TIMELINE
========================================== */

.achievement-track{

display:grid;

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

gap:24px;

}

.achievement-node{

padding:26px;

text-align:center;

font-weight:700;

border-radius:22px;

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

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

}

/* ==========================================
COMMUNITY IMPACT
========================================== */

.impact-card{

padding:60px;

text-align:center;

border-radius:36px;

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

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

}

.impact-card h3{

font-size:2rem;

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

margin-bottom:18px;

}

.impact-card p{

max-width:850px;

margin:auto;

line-height:2;

color:var(--muted);

}

/* ==========================================
VISION BANNER
========================================== */

.vision-banner{

padding-bottom:120px;

}

.vision-content{

padding:80px;

text-align:center;

border-radius:40px;

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

}

.vision-content span{

display:inline-block;

font-weight:700;

margin-bottom:16px;

}

.vision-content h2{

font-size:3.5rem;

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

margin-bottom:20px;

}

.vision-content p{

max-width:700px;

margin:auto;

line-height:2;

font-size:1.05rem;

}
/* ==========================================
TEAM SPOTLIGHT
========================================== */

.team-grid{

display:grid;

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

gap:24px;

}

.team-card{

padding:36px;

text-align:center;

border-radius:30px;

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

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

transition:.35s ease;

}

.team-card:hover{

transform:
translateY(-8px);

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

}

.team-avatar{

width:90px;
height:90px;

margin:auto;

display:flex;

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

font-size:2rem;

border-radius:24px;

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

margin-bottom:22px;

}

.team-card p{

margin-top:14px;

line-height:1.8;

color:var(--muted);

}

/* ==========================================
CORE VALUES
========================================== */

.values-grid{

display:grid;

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

gap:24px;

}

.value-card{

padding:34px;

border-radius:28px;

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

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

}

.value-icon{

width:80px;
height:80px;

display:flex;

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

font-size:2rem;

border-radius:22px;

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

margin-bottom:22px;

}

.value-card p{

margin-top:14px;

line-height:1.8;

color:var(--muted);

}

/* ==========================================
FOUNDER TIMELINE
========================================== */

.timeline-wrapper{

display:grid;

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

gap:24px;

}

.timeline-step{

padding:34px;

border-radius:28px;

text-align:center;

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

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

}

.timeline-step span{

display:inline-flex;

width:70px;
height:70px;

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

border-radius:50%;

font-weight:700;

font-size:1.2rem;

margin-bottom:18px;

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

}

.timeline-step p{

margin-top:14px;

line-height:1.8;

color:var(--muted);

}

/* ==========================================
TESTIMONIALS
========================================== */

.testimonial-grid{

display:grid;

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

gap:24px;

}

.testimonial-card{

padding:36px;

border-radius:30px;

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

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

position:relative;

}

.testimonial-card::before{

content:"“";

position:absolute;

top:10px;
right:20px;

font-size:5rem;

opacity:.08;

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

}

.testimonial-card p{

line-height:2;

color:#dbe4ff;

margin-bottom:20px;

}

.testimonial-card h4{

color:#c7d2fe;

}

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

.gallery-grid{

display:grid;

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

gap:24px;

}

.gallery-card{

height:220px;

display:flex;

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

font-size:1.3rem;

font-weight:700;

border-radius:30px;

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

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

transition:.35s ease;

}

.gallery-card:hover{

transform:
scale(1.03);

}

/* ==========================================
GLOBAL REACH
========================================== */

.reach-layout{

display:grid;

grid-template-columns:
1fr 1fr;

gap:40px;

align-items:center;

}

.world-card{

height:350px;

display:flex;

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

font-size:6rem;

border-radius:36px;

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

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

}

.reach-stats{

display:grid;

gap:20px;

}

.reach-item{

padding:28px;

border-radius:22px;

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

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

}

.reach-item h3{

font-size:2rem;

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;

}

.reach-item p{

color:var(--muted);

}

/* ==========================================
ROADMAP
========================================== */

.roadmap-grid{

display:grid;

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

gap:24px;

}

.roadmap-card{

padding:34px;

text-align:center;

border-radius:28px;

font-weight:700;

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

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

}

.roadmap-card h3{

margin-top:16px;

}

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

}
/* ==========================================
STORY METRICS DASHBOARD
========================================== */

.metrics-grid{

display:grid;

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

gap:24px;

}

.metric-card{

padding:40px;

text-align:center;

border-radius:30px;

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

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

position:relative;

overflow:hidden;

}

.metric-card::before{

content:"";

position:absolute;

width:180px;
height:180px;

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

filter:blur(70px);

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

}

.metric-card h1{

position:relative;

font-size:3rem;

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;

}

.metric-card p{

position:relative;

color:var(--muted);

}

/* ==========================================
INTERACTIVE JOURNEY
========================================== */

.journey-grid{

display:grid;

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

gap:24px;

}

.journey-card{

padding:36px;

border-radius:30px;

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

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

transition:.35s ease;

}

.journey-card:hover{

transform:
translateY(-8px);

}

.journey-number{

width:70px;
height:70px;

display:flex;

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

font-size:1.2rem;

font-weight:700;

border-radius:50%;

margin-bottom:20px;

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

}

.journey-card p{

margin-top:14px;

line-height:1.8;

color:var(--muted);

}

/* ==========================================
AWARDS
========================================== */

.awards-grid{

display:grid;

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

gap:24px;

}

.award-card{

padding:40px;

text-align:center;

border-radius:32px;

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

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

font-size:3rem;

}

.award-card h3{

font-size:1.4rem;

margin:18px 0 12px;

}

.award-card p{

font-size:1rem;

line-height:1.8;

color:var(--muted);

}

/* ==========================================
MEDIA COVERAGE
========================================== */

.media-grid{

display:grid;

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

gap:24px;

}

.media-card{

padding:40px;

text-align:center;

border-radius:28px;

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

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

font-size:2rem;

transition:.3s ease;

}

.media-card:hover{

transform:
translateY(-6px);

}

.media-card h3{

margin-top:18px;

font-size:1.2rem;

}

/* ==========================================
STORY BENTO
========================================== */

.story-bento{

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 h3{

margin-top:16px;

margin-bottom:12px;

}

.bento-card p{

line-height:1.8;

color:var(--muted);

}

/* ==========================================
COMMUNITY SPOTLIGHT
========================================== */

.community-card{

display:flex;

align-items:center;

gap:28px;

padding:50px;

border-radius:36px;

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

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

}

.community-avatar{

width:120px;
height:120px;

display:flex;

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

font-size:3rem;

border-radius:30px;

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

}

.community-card p{

margin-top:12px;

line-height:2;

color:var(--muted);

}

/* ==========================================
MISSION BANNER
========================================== */

.mission-banner{

padding-bottom:120px;

}

.mission-content{

padding:90px;

text-align:center;

border-radius:42px;

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

}

.mission-content span{

font-weight:700;

display:block;

margin-bottom:16px;

}

.mission-content h2{

font-size:3.5rem;

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

margin-bottom:20px;

}

.mission-content p{

max-width:720px;

margin:auto;

line-height:2;

}

/* ==========================================
PREMIUM CTA
========================================== */

.story-cta{

padding-bottom:120px;

}

.cta-card{

padding:70px;

border-radius:40px;

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

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

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

}

.cta-card span{

display:inline-block;

margin-bottom:16px;

font-weight:700;

color:#c7d2fe;

}

.cta-card h2{

font-size:3rem;

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

margin-bottom:20px;

}

.cta-card p{

max-width:600px;

line-height:1.9;

color:var(--muted);

margin-bottom:24px;

}

.cta-visual{

font-size:8rem;

animation:
floatStory 4s ease-in-out infinite;

}

/* ==========================================
ANIMATION
========================================== */

@keyframes floatStory{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-12px);

}

100%{

transform:
translateY(0);

}

}
/* ==========================================
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-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

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

}

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

.gallery-pro-grid{

display:grid;

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

gap:24px;

}

.gallery-pro-card{

min-height:220px;

display:flex;

flex-direction:column;

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

gap:12px;

font-size:1.2rem;

font-weight:700;

cursor:pointer;

border-radius:30px;

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

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

transition:.35s ease;

}

.gallery-pro-card.large{

min-height:320px;

}

.gallery-pro-card:hover{

transform:
scale(1.03);

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

}

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

.newsletter-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.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:650px;

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

}

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

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

}

.story-modal-overlay.active{

opacity:1;

visibility:visible;

}

.story-modal{

width:min(700px,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;

}

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

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(30px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

@keyframes glowPulse{

0%{

box-shadow:
0 0 0 0 rgba(99,102,241,.4);

}

70%{

box-shadow:
0 0 0 25px rgba(99,102,241,0);

}

100%{

box-shadow:
0 0 0 0 rgba(99,102,241,0);

}

}

.team-card,
.value-card,
.metric-card,
.faq-card,
.gallery-card,
.gallery-pro-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){

.story-hero{

grid-template-columns:1fr;

text-align:center;

}

.problem-grid,
.challenge-grid,
.team-grid,
.values-grid,
.stats-grid,
.metrics-grid{

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

}

.timeline,
.timeline-wrapper,
.achievement-track,
.roadmap-grid{

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

}

.reach-layout,
.growth-layout{

grid-template-columns:1fr;

}

.story-bento,
.showcase-grid,
.gallery-pro-grid{

grid-template-columns:1fr;

}

.footer-grid{

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

}

.cta-card,
.community-card{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.navbar{

flex-direction:column;

gap:20px;

}

.navbar nav{

flex-wrap:wrap;

justify-content:center;

}

.problem-grid,
.challenge-grid,
.solution-grid,
.team-grid,
.values-grid,
.timeline,
.timeline-wrapper,
.testimonial-grid,
.gallery-grid,
.stats-grid,
.metrics-grid,
.awards-grid,
.media-grid,
.roadmap-grid,
.faq-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.story-hero h1{

font-size:2.8rem;

}

.section-header h2{

font-size:2rem;

}

.founder-card,
.breaking-card,
.impact-card,
.newsletter-card,
.vision-content,
.mission-content{

padding:40px;

}

}

@media(max-width:480px){

section{

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

}

.story-hero{

padding:100px 20px;

}

.cta-card{

padding:40px 24px;

}

.newsletter-card{

padding:50px 24px;

}

.modal-content{

padding:24px;

}

}

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

.logo{

letter-spacing:1px;

}

.hero-visual .floating-card{

animation:
fadeUp .8s ease both;

}

.founder-avatar,
.community-avatar{

animation:
glowPulse 3s infinite;

}