/* =====================================================
ABOUT PAGE
XTREME IT SOLUTIONS USA
AI AGENCY DESIGN
===================================================== */



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


.about-hero{

padding:100px 0;

}



.about-hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}



.about-content h1{

font-size:clamp(45px,5vw,65px);

line-height:1.05;

margin:25px 0;

}



.about-content h1 span{

color:var(--green);

}



.about-content p{

font-size:18px;

color:var(--gray);

max-width:600px;

margin-bottom:35px;

}







/* ================= ABOUT AI CARD ================= */



.about-ai-card{

background:#050505;

border-radius:35px;

padding:30px;

min-height:500px;

position:relative;

overflow:hidden;

box-shadow:

0 40px 90px rgba(0,0,0,.18);

}



.about-ai-card:before{

content:"";

position:absolute;

height:300px;

width:300px;

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

filter:blur(100px);

right:-80px;

top:-80px;

}







.ai-card-header{

position:relative;

z-index:2;

display:flex;

align-items:center;

justify-content:space-between;

color:white;

font-size:14px;

}



.ai-card-header p{

color:white;

font-size:14px;

}



.dashboard-dots span{

display:inline-block;

height:10px;

width:10px;

background:#333;

border-radius:50%;

margin-right:5px;

}







.ai-status-box{

position:relative;

z-index:2;

background:#111;

border:1px solid #333;

border-radius:25px;

padding:35px;

text-align:center;

color:white;

margin:60px auto 30px;

max-width:300px;

}



.ai-circle{

height:70px;

width:70px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--green);

color:white;

font-size:22px;

font-weight:800;

box-shadow:

0 0 40px rgba(16,185,129,.5);

}



.ai-status-box h3{

margin:20px 0 5px;

font-size:24px;

}



.ai-status-box p{

color:#aaa;

font-size:14px;

}








.ai-lines{

display:flex;

justify-content:center;

gap:12px;

position:relative;

z-index:2;

flex-wrap:wrap;

}



.ai-lines div{

background:#151515;

border:1px solid #333;

color:white;

padding:12px 20px;

border-radius:15px;

font-size:13px;

font-weight:700;

}



.ai-result{

position:relative;

z-index:2;

margin-top:30px;

background:var(--green);

padding:15px;

border-radius:15px;

color:white;

text-align:center;

font-weight:700;

}









/* ================= STORY SECTION ================= */



.story-section{

padding:100px 0;

background:#fafafa;

}



.story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.section-label{

color:var(--green-dark);

font-size:13px;

font-weight:800;

letter-spacing:.12em;

}



.story-content h2{

font-size:48px;

line-height:1.1;

margin:20px 0;

}



.story-content p{

color:var(--gray);

font-size:17px;

margin-bottom:20px;

}









/* ================= STORY DASHBOARD ================= */



.story-dashboard{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}



.metric-card{

background:white;

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

border-radius:25px;

padding:35px;

transition:.3s;

}



.metric-card:hover{

transform:translateY(-8px);

border-color:var(--green);

box-shadow:

0 25px 60px rgba(0,0,0,.08);

}



.metric-card strong{

display:block;

font-size:40px;

font-family:"Space Grotesk";

}



.metric-card span{

color:var(--gray);

font-size:14px;

}

/* ================= HOW WE WORK ================= */


.how-we-work{

padding:110px 0;

}



.approach-grid{

display:grid;

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

gap:30px;

}



.approach-card{

background:white;

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

border-radius:28px;

padding:40px;

transition:.35s;

}



.approach-card:hover{

transform:translateY(-10px);

border-color:var(--green);

box-shadow:

0 30px 70px rgba(0,0,0,.08);

}



.approach-icon{

height:65px;

width:65px;

display:flex;

align-items:center;

justify-content:center;

background:var(--green-light);

border-radius:20px;

margin-bottom:25px;

}



.approach-icon svg{

height:32px;

width:32px;

stroke:var(--green-dark);

fill:none;

stroke-width:2;

}



.approach-card h3{

font-size:28px;

margin-bottom:15px;

}



.approach-card p{

color:var(--gray);

}









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



.values-section{

padding:100px 0;

background:#fafafa;

}



.values-grid{

display:grid;

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

gap:30px;

}



.value-card{

background:#050505;

color:white;

border-radius:28px;

padding:40px;

position:relative;

overflow:hidden;

transition:.35s;

}



.value-card:before{

content:"";

position:absolute;

width:180px;

height:180px;

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

filter:blur(60px);

right:-60px;

top:-60px;

}



.value-card:hover{

transform:translateY(-10px);

}



.value-number{

color:var(--green);

font-size:14px;

font-weight:800;

letter-spacing:.1em;

position:relative;

z-index:2;

}



.value-card h3{

font-size:30px;

margin:20px 0;

position:relative;

z-index:2;

}



.value-card p{

color:#aaa;

position:relative;

z-index:2;

}









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



.team-section{

padding:110px 0;

}



.team-grid{

display:grid;

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

gap:30px;

}


.team-card{

background:white;

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

border-radius:30px;

overflow:hidden;

transition:.35s;

}



.team-card:hover{

transform:translateY(-10px);

box-shadow:

0 30px 70px rgba(0,0,0,.1);

border-color:var(--green);

}





.team-image{

height:350px;

background:#f1f5f3;

overflow:hidden;

}



.team-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.team-card:hover .team-image img{

transform:scale(1.05);

}



.team-info{

padding:30px;

}



.team-info h3{

font-size:24px;

margin-bottom:8px;

}



.team-info p{

color:var(--gray);

margin-bottom:20px;

}



.team-links a{

display:inline-block;

padding:8px 18px;

border-radius:30px;

background:#000;

color:white;

font-size:13px;

font-weight:700;

transition:.3s;

}



.team-links a:hover{

background:var(--green);

}


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


.about-cta{

padding:100px 0;

}



.cta-box{

background:#050505;

border-radius:35px;

padding:60px;

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

color:white;

position:relative;

overflow:hidden;

}



.cta-box:before{

content:"";

position:absolute;

height:300px;

width:300px;

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

filter:blur(100px);

right:-80px;

top:-80px;

}



.cta-box span{

position:relative;

z-index:2;

color:var(--green);

font-size:13px;

font-weight:800;

letter-spacing:.12em;

}



.cta-box h2{

position:relative;

z-index:2;

font-size:48px;

line-height:1.1;

margin:20px 0;

}



.cta-box p{

position:relative;

z-index:2;

color:#aaa;

max-width:600px;

font-size:17px;

}



.cta-box a{

position:relative;

z-index:2;

white-space:nowrap;

}









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



footer{

margin-top:0;

}









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



@media(max-width:1200px){



.about-hero-grid,
.story-grid{

grid-template-columns:1fr;

}



.team-grid{

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

}



.approach-grid{

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

}



.values-grid{

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

}



}



@media(max-width:900px){



.cta-box{

flex-direction:column;

align-items:flex-start;

padding:40px;

}



.cta-box h2{

font-size:36px;

}



.team-grid{

grid-template-columns:1fr;

}



.approach-grid{

grid-template-columns:1fr;

}



.values-grid{

grid-template-columns:1fr;

}



.story-dashboard{

grid-template-columns:1fr;

}



}



@media(max-width:600px){



.about-hero{

padding:60px 0;

}



.about-content h1{

font-size:38px;

}



.about-ai-card{

padding:20px;

}



.ai-lines{

flex-direction:column;

align-items:center;

}



.metric-card{

padding:25px;

}



.metric-card strong{

font-size:32px;

}



.cta-box{

padding:30px;

}



.cta-box h2{

font-size:32px;

}



}