/* =====================================================
   AREZ TECH - WEB APP CSS V2
===================================================== */

:root{
--dark:#0a0a0a;
--dark-2:#121212;
--light:#ffffff;
--light-2:#f7f7f7;
--text:#111111;
--muted:#6b7280;
--gold:#d4af37;
--gold-soft:#f5d76e;
--radius:32px;
--container:1400px;
--ease:cubic-bezier(.22,1,.36,1);

--shadow-sm:
0 10px 20px rgba(0,0,0,.04),
0 20px 40px rgba(0,0,0,.05);

--shadow-lg:
0 15px 35px rgba(0,0,0,.05),
0 35px 80px rgba(0,0,0,.08),
0 60px 120px rgba(0,0,0,.08);
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
font-family:'Outfit',sans-serif;
background:#fff;
color:var(--text);
overflow-x:hidden;
line-height:1.7;
}

img,video{
max-width:100%;
display:block;
}

a{text-decoration:none;color:inherit}

.container{
width:min(1400px,92%);
margin:auto;
position:relative;
z-index:2;
}

section{
position:relative;
padding:140px 0;
overflow:hidden;
}

/* backgrounds */

.section-dark{
background:var(--dark);
color:#fff;
}

.section-light{
background:var(--light);
}

.section-dark::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:80px 80px;
pointer-events:none;
}

.section-light::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);
background-size:80px 80px;
pointer-events:none;
}

/* typography */

.section-badge{
display:inline-flex;
padding:12px 20px;
border-radius:999px;
background:rgba(212,175,55,.12);
border:1px solid rgba(212,175,55,.25);
color:var(--gold);
font-weight:600;
margin-bottom:20px;
}

.section-heading{
max-width:850px;
margin:0 auto 70px;
text-align:center;
}

.section-heading h2{
font-size:clamp(2.4rem,5vw,4.8rem);
line-height:1.05;
margin-bottom:15px;
}

.section-heading p{
color:var(--muted);
}

/* buttons */

.btn-primary,
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:18px 34px;
border-radius:24px;
font-weight:700;
transition:.4s var(--ease);
}

.btn-primary{
background:var(--gold);
color:#000;
box-shadow:
0 10px 25px rgba(212,175,55,.25),
0 25px 60px rgba(212,175,55,.20);
}

.btn-primary:hover{
transform:translateY(-4px) scale(1.02);
}

.btn-secondary{

background:#171717;

color:#fff;

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

backdrop-filter:blur(10px);

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

}

.btn-secondary:hover{

background:#222;

transform:translateY(-4px);

}

.hero-actions{
display:flex;
gap:16px;
flex-wrap:wrap;
}

/* hero */

.project-hero{
min-height:100vh;
display:flex;
align-items:center;
}

.project-hero::after{
content:"";
position:absolute;
width:700px;
height:700px;
border-radius:50%;
background:radial-gradient(circle,
rgba(212,175,55,.18),
transparent 70%);
top:-200px;
right:-100px;
filter:blur(30px);
}

.hero-content{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:100px;
align-items:center;
}
.hero-left h1{

font-size:clamp(3rem,4.8vw,5rem);

line-height:.95;

max-width:650px;

letter-spacing:-2px;

}
.hero-left p{
max-width:650px;
color:#bdbdbd;
margin-bottom:30px;
}

.hero-video-wrapper{
background:#111;
padding:18px;
border-radius:32px;
box-shadow:var(--shadow-lg);
animation:float 6s ease-in-out infinite;
}

.hero-video-wrapper video{
border-radius:24px;
}

.hero-tags{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:30px;
}

.hero-tags span{
padding:12px 18px;
background:rgba(255,255,255,.05);
backdrop-filter:blur(12px);
border-radius:999px;
border:1px solid rgba(255,255,255,.08);
}

/* cards */

.feature-card,
.asset-card,
.summary-card,
.showcase-item{
background:#fff;
border-radius:32px;
overflow:hidden;
box-shadow:var(--shadow-lg);
transition:.45s var(--ease);
}

.feature-card:hover,
.asset-card:hover,
.summary-card:hover,
.showcase-item:hover{
transform:translateY(-10px);
}

.section-dark .feature-card,
.section-dark .summary-card{
background:#181818;
color:#fff;
border:1px solid rgba(255,255,255,.06);
}

.feature-card{
padding:30px;
}

.feature-card h3{
margin-bottom:10px;
}

/* layouts */

.overview-grid,
.feature-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.project-image{
background:#fff;
padding:20px;
border-radius:32px;
box-shadow:var(--shadow-lg);
}

.project-image img{
border-radius:20px;
}

/* ecosystem */

.ecosystem-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-bottom:50px;
}

/* showcase */

.showcase-section h3{
font-size:1.8rem;
margin:50px 0 25px;
}

.showcase-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-bottom:40px;
}

.showcase-item span{
display:block;
padding:18px;
font-weight:600;
}

/* branding */

.branding-showcase{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

.branding-showcase img{
background:#181818;
padding:30px;
border-radius:32px;
}

/* assets */

.asset-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.asset-card h4{
padding:22px;
}

/* results */

.summary-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-bottom:60px;
}

.summary-card{
padding:40px;
text-align:center;
}

.summary-card h3{
font-size:3rem;
color:var(--gold);
}

.case-study-box{
background:rgba(255,255,255,.05);
backdrop-filter:blur(15px);
padding:70px;
border-radius:40px;
text-align:center;
border:1px solid rgba(255,255,255,.08);
}

.case-study-box h2{
font-size:clamp(2rem,4vw,4rem);
margin-bottom:15px;
}

.case-study-box p{
max-width:700px;
margin:0 auto 25px;
color:#d1d5db;
}

/* cta */

.project-cta{
text-align:center;
}

.project-cta h2{
font-size:clamp(2rem,4vw,4rem);
margin-bottom:15px;
}

.project-cta p{
max-width:700px;
margin:0 auto 30px;
}

/* animation */

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-12px)}
100%{transform:translateY(0)}
}

/* responsive */

@media(max-width:1200px){
.ecosystem-grid,
.showcase-grid,
.asset-grid,
.summary-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:992px){
section{padding:100px 0}
.hero-content,
.overview-grid,
.feature-grid,
.branding-showcase{
grid-template-columns:1fr;
}
}

@media(max-width:768px){
.ecosystem-grid,
.showcase-grid,
.asset-grid,
.summary-grid{
grid-template-columns:1fr;
}

.hero-left h1{
font-size:3rem;
}

.btn-primary,
.btn-secondary{
width:100%;
}
}