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

.about-hero{

padding:160px 0 120px;

background:
radial-gradient(
circle at 70% 30%,
rgba(34,211,204,.15),
transparent 35%
),

linear-gradient(
135deg,
#050816,
#08112d
);

color:white;

text-align:center;

}

.about-hero-content{

max-width:1000px;

margin:auto;

}

.about-tag{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

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

font-size:13px;

font-weight:700;

letter-spacing:2px;

margin-bottom:30px;

}

.about-hero h1{

font-size:clamp(
52px,
8vw,
90px
);

line-height:1;

margin-bottom:30px;

}

.about-hero p{

font-size:clamp(
18px,
2vw,
24px
);

line-height:1.8;

max-width:800px;

margin:auto;

color:rgba(255,255,255,.75);

}

/* ======================================
PROBLEMS
====================================== */

.about-problems{

padding:120px 0;

background:white;

}

.problem-cards{

display:grid;

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

gap:30px;

margin-top:60px;

}

.problem-card{

padding:40px;

border-radius:30px;

background:white;

border:1px solid rgba(15,23,42,.06);

box-shadow:
0 15px 40px rgba(0,0,0,.04);

transition:.3s;

}

.problem-card:hover{

transform:translateY(-8px);

box-shadow:
0 30px 80px rgba(0,0,0,.08);

}

.problem-number{

font-size:14px;

font-weight:700;

letter-spacing:2px;

color:#22d3cc;

margin-bottom:25px;

}

.problem-card h3{

font-size:34px;

margin-bottom:15px;

color:#050816;

}

.problem-card p{

font-size:18px;

line-height:1.8;

color:#666;

}

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

.about-showcase-section{

padding:140px 0;

background:#f8fafc;

}

.showcase-header{

text-align:center;

max-width:900px;

margin:auto;

margin-bottom:60px;

}

.section-mini-title{

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#22d3cc;

margin-bottom:20px;

}

.showcase-header h2{

font-size:clamp(
42px,
6vw,
72px
);

line-height:1.05;

margin-bottom:25px;

color:#050816;

}

.showcase-header p{

font-size:22px;

line-height:1.8;

color:#666;

}

.showcase-image{

max-width:900px;

margin:auto;

border-radius:40px;

overflow:hidden;

box-shadow:
0 30px 80px rgba(0,0,0,.08);

}
.showcase-image img{

width:100%;

height:auto;

display:block;

}
.showcase-image:hover img{

transform:scale(1.04);

}

/* ======================================
DELIVER
====================================== */

.deliver-section{

padding:140px 0;

background:white;

}

.deliver-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.deliver-card{

padding:35px;

border-radius:30px;

background:#f8fafc;

transition:.3s;

}

.deliver-card:hover{

transform:translateY(-8px);

background:white;

box-shadow:
0 20px 60px rgba(0,0,0,.08);

}

.deliver-card h3{

font-size:28px;

margin-bottom:15px;

color:#050816;

}

.deliver-card p{

font-size:17px;

line-height:1.8;

color:#666;

}

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

.vision-section{

padding:140px 0;

background:#050816;

}

.vision-card{

max-width:1000px;

margin:auto;

text-align:center;

padding:80px;

border-radius:40px;

background:

linear-gradient(
145deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

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

}

.vision-card::before{

content:"";

position:absolute;

width:300px;
height:300px;

background:
rgba(34,211,204,.15);

border-radius:50%;

filter:blur(100px);

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

}

.vision-card h2{

font-size:clamp(
40px,
5vw,
68px
);

line-height:1.1;

margin-bottom:25px;

color:white;

}

.vision-card p{

font-size:22px;

line-height:1.8;

color:rgba(255,255,255,.75);

}

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

.mission-section{

padding:140px 0;

background:#050816;

}

.mission-section .section-header h2{

color:white;

}

.mission-section .section-header p{

color:rgba(255,255,255,.7);

}

.mission-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.mission-card{

padding:35px;

border-radius:30px;

background:

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

color:white;

font-size:22px;

font-weight:600;

transition:.3s;

}

.mission-card:hover{

background:#22d3cc;

color:#050816;

transform:translateY(-8px);

}

/* ======================================
BELIEFS
====================================== */

.belief-section{

padding:180px 0;

background:white;

}

.belief-content{

max-width:1000px;

margin:auto;

text-align:center;

}

.belief-statement{

font-size:clamp(
20px,
2vw,
32px
);

line-height:1.6;

color:#777;

font-weight:500;

max-width:700px;

margin:auto;

}

.belief-highlight{

font-size:clamp(
44px,
5vw,
82px
);

line-height:1.1;

font-weight:800;

color:#050816;

margin-top:20px;

}


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

.about-cta-section{

padding:140px 0;

background:#f8fafc;

}

.about-cta-content{

max-width:900px;

margin:auto;

text-align:center;

}

.about-cta-content h2{

font-size:clamp(
42px,
5vw,
68px
);

line-height:1.1;

margin-bottom:25px;

color:#050816;

}

.about-cta-content p{

font-size:22px;

line-height:1.8;

color:#666;

margin-bottom:45px;

}

/* ======================================
TABLET
====================================== */

@media(max-width:1100px){

.problem-cards{

grid-template-columns:1fr;

}

.deliver-grid{

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

}

.mission-grid{

grid-template-columns:1fr;

}


}

/* ======================================
MOBILE
====================================== */

@media(max-width:768px){

.about-hero{

padding-top:120px;

padding-bottom:90px;

}

.about-problems,
.about-showcase-section,
.deliver-section,
.vision-section,
.mission-section,
.about-cta-section{

padding:90px 0;

}

.belief-section{

padding:100px 0;

}

.problem-card{

padding:28px;

}

.problem-card h3{

font-size:26px;

}

.deliver-grid{

grid-template-columns:1fr;

}

.deliver-card{

padding:28px;

}

.showcase-image{

border-radius:24px;

}

.vision-card{

position:relative;

overflow:hidden;

padding:40px 25px;

border-radius:24px;

}

.mission-card{

padding:24px;

font-size:18px;

}

.belief-statement{

font-size:18px;

line-height:1.8;

}

.belief-highlight{

font-size:42px;

line-height:1.1;

}

.about-cta-content p{

font-size:18px;

}

}