/* =====================================
   AIA CONNECT
   FULL FINTECH STYLE
   RESPONSIVE VERSION
===================================== */


:root{

--bg:#05080d;

--bg-soft:#0b111a;

--card:#101823;

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

--text:#ffffff;

--muted:#9ca8b8;

--accent:#00d9ff;

}



*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:

'Inter',
Arial,
sans-serif;


background:

radial-gradient(
circle at top right,
rgba(0,217,255,.12),
transparent 35%
),

var(--bg);


color:var(--text);

line-height:1.6;

}




img{

max-width:100%;

height:auto;

display:block;

}





.container{

width:90%;

max-width:1250px;

margin:auto;

}





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


header{

position:sticky;

top:0;

z-index:100;


background:

rgba(5,8,13,.88);


backdrop-filter:

blur(15px);


border-bottom:

1px solid var(--border);

}




.nav{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}



.logo{

font-size:28px;

font-weight:800;

}



.logo span{

color:var(--accent);

}



nav a{

text-decoration:none;

color:var(--muted);

margin-left:30px;

font-size:15px;

transition:.3s;

}



nav a:hover{

color:#fff;

}




.nav-btn{

padding:

12px 25px;


border-radius:

12px;


border:

1px solid rgba(0,217,255,.4);


color:

var(--accent);


background:

rgba(0,217,255,.08);


text-decoration:none;


}





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


.primary-btn{


display:inline-block;


margin-top:35px;


padding:

16px 38px;


border-radius:

14px;


background:

var(--accent);


color:#001018;


font-weight:700;


text-decoration:none;


transition:.3s;


}



.primary-btn:hover{


transform:

translateY(-3px);


box-shadow:

0 15px 40px
rgba(0,217,255,.3);


}





/* ==========================
SECTIONS
========================== */


section{

padding:110px 0;

}



.dark-section{


background:

linear-gradient(

180deg,

rgba(255,255,255,.03),

transparent

);


}




.section-title{


max-width:750px;


text-align:center;


margin:

0 auto 70px;


}



.section-title h2{


font-size:

48px;


line-height:1.2;


}



.section-title p{


margin-top:20px;


color:

var(--muted);


font-size:18px;


}





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


.hero{

min-height:850px;

display:flex;

align-items:center;

}




.hero-grid{


display:grid;


grid-template-columns:

1fr 1fr;


gap:

70px;


align-items:center;


}





.badge{


display:inline-block;


padding:

8px 18px;


border-radius:

30px;


background:

rgba(0,217,255,.1);


border:

1px solid rgba(0,217,255,.25);


color:

var(--accent);


font-size:13px;


}





.hero h1{


font-size:

90px;


letter-spacing:-4px;


line-height:1;


}



.hero h2{


font-size:

38px;


margin-top:25px;


line-height:1.3;


}



.hero p{


margin-top:25px;


max-width:560px;


font-size:19px;


color:

var(--muted);


}




.hero-image{


display:flex;


justify-content:center;


align-items:center;


position:relative;


}




.hero-image img{


width:

420px;


max-width:

100%;


filter:

drop-shadow(
0 30px 60px rgba(0,217,255,.35)
);


animation:

float 5s ease-in-out infinite;


}





@keyframes float{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


}



.glow{


position:absolute;


width:500px;


height:500px;


background:

radial-gradient(

circle,

rgba(0,217,255,.2),

transparent 65%

);


}





/* ==========================
CARDS
========================== */


.cards{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:

30px;


}




.card{


background:

linear-gradient(

145deg,

rgba(255,255,255,.07),

rgba(255,255,255,.02)

);


border:

1px solid var(--border);


border-radius:

25px;


padding:

40px;


}




.card h3{


font-size:

22px;


color:

var(--accent);


margin-bottom:

18px;


}




.card p{


color:

var(--muted);


}
/* ==========================
PRODUCT
========================== */


.product{


display:grid;


grid-template-columns:

1fr 1fr;


gap:

70px;


align-items:center;


}



.product-image img{


width:

330px;


margin:auto;


border-radius:

35px;


}



.product-text h2{


font-size:

50px;


}



.product-text p{


margin-top:

25px;


font-size:

18px;


color:

var(--muted);


}



.product-text ul{


margin-top:

30px;


list-style:none;


}



.product-text li{


margin:

15px 0;


}



.product-text li::before{


content:"✓";


color:

var(--accent);


margin-right:

15px;


}





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


.dashboard{


display:grid;


grid-template-columns:

1fr 1fr;


gap:

60px;


align-items:center;


}



.dashboard img{


width:

100%;


max-width:

430px;


margin:auto;


border-radius:

30px;


}



.dashboard-text h3{


font-size:

35px;


}



.dashboard-text p{


margin-top:

20px;


color:

var(--muted);


}





/* ==========================
CONVERSION
========================== */


.payout{


display:grid;


grid-template-columns:

380px 1fr;


gap:

60px;


align-items:center;


}



.payout img{


width:

100%;


border-radius:

30px;


}



.payout h3{


font-size:

32px;


}



.payout p{


margin-top:

20px;


color:

var(--muted);


}





.method-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:

15px;


margin-top:

30px;


}



.method-grid div{


background:

var(--card);


border:

1px solid var(--border);


padding:

20px;


border-radius:

15px;


text-align:center;


}





/* ==========================
REWARDS
========================== */


.reward-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:

25px;


}



.reward{


background:

var(--card);


border:

1px solid var(--border);


border-radius:

20px;


padding:

35px;


text-align:center;


}



.reward strong{


display:block;


margin-top:

15px;


font-size:

23px;


color:

var(--accent);


}





/* ==========================
REVIEWS
========================== */


.review-grid{


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:

35px;


max-width:

1100px;


margin:auto;


}




.review-card{


background:

linear-gradient(

145deg,

rgba(255,255,255,.07),

rgba(255,255,255,.02)

);


border:

1px solid var(--border);


border-radius:

30px;


padding:

30px;


overflow:hidden;


}



.person-photo{


width:

85px;


height:

85px;


max-width:

85px;


max-height:

85px;


object-fit:

cover;


border-radius:

50%;


border:

3px solid var(--accent);


margin-bottom:

20px;


}



.review-card h3{


font-size:

22px;


}



.location{


color:

var(--accent);


font-size:

14px;


}



.stars{


color:

var(--accent);


font-size:

20px;


margin:

15px 0;


}



.review-card p{


color:

var(--muted);


margin-bottom:

25px;


}



.result-photo{


width:

100%;


height:

200px;


object-fit:

cover;


border-radius:

20px;


}





/* ==========================
TECH
========================== */


.tech-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:

30px;


}



.tech-grid div{


background:

var(--card);


border:

1px solid var(--border);


padding:

35px;


border-radius:

25px;


}



.tech-grid h3{


color:

var(--accent);


}





/* ==========================
FAQ
========================== */


.faq{


max-width:

850px;


margin:auto;


}



.faq h3{


font-size:

22px;


margin-top:

35px;


}



.faq p{


color:

var(--muted);


margin-top:

10px;


}





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


.final{


text-align:center;


padding:

90px;


border-radius:

35px;


background:

linear-gradient(

135deg,

rgba(0,217,255,.15),

rgba(255,255,255,.03)

);


}



.final h2{


font-size:

45px;


}





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


footer{


padding:

40px 0;


text-align:center;


color:

#687386;


border-top:

1px solid var(--border);


}








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


@media(max-width:900px){



nav{

display:none;

}



.nav{

height:

75px;

}



.logo{

font-size:

24px;

}



.nav-btn{


padding:

10px 18px;


font-size:

14px;


}





section{


padding:

55px 0;


}




.section-title{


margin-bottom:

35px;


}



.section-title h2{


font-size:

36px;


}



.section-title p{


font-size:

16px;


}





/* HERO */


.hero{


min-height:

auto;


padding:

35px 0 60px;


}




.hero-grid{


grid-template-columns:

1fr;


gap:

30px;


text-align:center;


}




.hero h1{


font-size:

55px;


letter-spacing:

-2px;


}




.hero h2{


font-size:

28px;


}



.hero p{


font-size:

16px;


margin:auto;


}



.hero-image img{


width:

280px;


}






/* CONTENT */


.product,

.dashboard,

.payout{


grid-template-columns:

1fr;


gap:

35px;


text-align:center;


}





.product-image img{


width:

260px;


}



.product-text h2{


font-size:

38px;


}





.cards,

.tech-grid,

.reward-grid,

.review-grid{


grid-template-columns:

1fr;


gap:

25px;


}






/* CONVERSION */


.payout img{


max-width:

320px;


margin:auto;


}



.method-grid{


grid-template-columns:

1fr;


}






/* REVIEWS */


.review-card{


padding:

25px;


width:

100%;


}



.person-photo{


width:

85px !important;


height:

85px !important;


max-width:

85px !important;


max-height:

85px !important;


}



.result-photo{


width:

100% !important;


height:

200px !important;


max-width:

100% !important;


object-fit:

cover;


}






/* FINAL */


.final{


padding:

45px 25px;


}



.final h2{


font-size:

32px;


}



}
/* ==========================
   MOBILE HORIZONTAL FIX
========================== */


html,
body{

width:100%;

max-width:100%;

overflow-x:hidden;

}



*{

max-width:100%;

}



img{

max-width:100%;

height:auto;

}




@media(max-width:900px){


body{

overflow-x:hidden;

position:relative;

}



.container{

width:100%;

max-width:100%;

padding-left:20px;

padding-right:20px;

margin:0 auto;

}



.hero,
section,
main{

width:100%;

overflow:hidden;

}




.hero-grid,
.product,
.dashboard,
.payout,
.cards,
.review-grid,
.reward-grid,
.tech-grid{


width:100%;

max-width:100%;

overflow:hidden;

}





.hero-image img{


max-width:90vw;

margin:auto;

}



.product-image img{


max-width:80vw;

margin:auto;

}



.result-photo{


max-width:100% !important;

}



}