@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{
--bg:#07111d;
--bg2:#0f172a;
--card:rgba(15,23,42,.72);

--orange:#ff7b06;
--orange-light:#ff9f45;

--cyan:#38bdf8;
--cyan-soft:#7dd3fc;

--white:#f8fafc;
--text:#cbd5e1;
--muted:#94a3b8;

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

--shadow-orange:0 15px 40px rgba(255,123,6,.25);
--shadow-cyan:0 20px 60px rgba(56,189,248,.12);
}

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:
radial-gradient(circle at top right, rgba(56,189,248,.08), transparent 22%),
radial-gradient(circle at bottom left, rgba(255,123,6,.08), transparent 28%),
linear-gradient(180deg,#050b14,#0f172a);
color:var(--text);
line-height:1.8;
overflow-x:hidden;
}

/* SCROLLBAR */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#0f172a;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(var(--orange),var(--orange-light));
border-radius:30px;
}

/* HEADER */

header{
position:fixed;
top:0;
width:100%;
z-index:999;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 60px;
background:rgba(4,10,18,.72);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--border);
transition:.4s;
}

header img{
height:60px;
filter:drop-shadow(0 0 10px rgba(255,123,6,.25));
}

nav a{
color:#fff;
text-decoration:none;
margin-left:28px;
font-weight:600;
font-size:15px;
letter-spacing:.3px;
position:relative;
transition:.4s;
}

nav a:hover{
color:var(--orange-light);
}

nav a::after{
content:'';
position:absolute;
left:0;
bottom:-10px;
width:0;
height:2px;
background:linear-gradient(to right,var(--orange),var(--cyan));
border-radius:30px;
transition:.4s;
}

nav a:hover::after{
width:100%;
}

/* HERO SECTION */

.hero{
min-height:100vh;
display:flex;
align-items:center;
padding:180px 80px 120px;
position:relative;
overflow:hidden;

background:
linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.78)),
url('../images/hero.jpg');

background-size:cover;
background-position:center;
}

.hero::before{
content:'';
position:absolute;
right:-100px;
top:80px;
width:520px;
height:520px;
border-radius:50%;
background:radial-gradient(circle,rgba(56,189,248,.18),transparent 70%);
filter:blur(40px);
animation:float 10s infinite ease-in-out;
}

.hero::after{
content:'';
position:absolute;
left:-120px;
bottom:-100px;
width:480px;
height:480px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,123,6,.12),transparent 70%);
filter:blur(40px);
animation:float 12s infinite ease-in-out reverse;
}

.hero-content{
max-width:980px;
position:relative;
z-index:2;
}

.hero h1{
font-size:82px;
line-height:1.02;
font-weight:900;
color:var(--orange);
margin-bottom:24px;
letter-spacing:-2px;
text-shadow:0 10px 30px rgba(255,123,6,.15);
}

.hero p{
font-size:22px;
color:#dbeafe;
margin-bottom:26px;
max-width:820px;
}

/* BUTTON */

.btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:16px 32px;
border-radius:18px;
background:linear-gradient(135deg,var(--orange),var(--orange-light));
color:#fff;
text-decoration:none;
font-weight:700;
font-size:15px;
letter-spacing:.3px;
box-shadow:var(--shadow-orange);
transition:.45s;
border:1px solid rgba(255,255,255,.08);
}

.btn:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 25px 55px rgba(255,123,6,.35);
}

/* SECTION */

.section{
padding:120px 80px;
position:relative;
}

.section-title{
margin-bottom:24px;
}

h2{
font-size:54px;
line-height:1.1;
font-weight:900;
color:var(--orange);
margin-bottom:20px;
letter-spacing:-1px;
}

h3{
font-size:30px;
line-height:1.3;
font-weight:700;
color:#f8fafc;
margin-bottom:16px;
}

.section p{
font-size:17px;
color:var(--text);
}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:36px;
margin-top:50px;
align-items:stretch;
}

/* CARD */

.card{
background:var(--card);
backdrop-filter:blur(18px);
border:1px solid var(--border);
border-radius:32px;
overflow:hidden;
transition:.45s;
min-height:620px;
display:flex;
flex-direction:column;
position:relative;
box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.card::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(
135deg,
rgba(56,189,248,.08),
transparent 45%,
rgba(255,123,6,.05)
);
opacity:0;
transition:.5s;
}

.card:hover{
transform:translateY(-12px);
border-color:rgba(56,189,248,.28);
box-shadow:var(--shadow-cyan);
}

.card:hover::before{
opacity:1;
}

.card img{
width:100%;
height:260px;
object-fit:cover;
display:block;
}

.card-content{
padding:36px;
display:flex;
flex-direction:column;
height:100%;
}

.card-content p{
margin-top:10px;
}

/* ICON */

.icon{
width:82px;
height:82px;
border-radius:26px;
display:flex;
align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
rgba(56,189,248,.14),
rgba(255,255,255,.03)
);

border:1px solid rgba(56,189,248,.22);

font-size:34px;
margin-bottom:22px;
color:var(--cyan);

box-shadow:0 10px 35px rgba(56,189,248,.14);
}

/* PAGE BANNER */

.page-banner{
padding:200px 80px 120px;
position:relative;
overflow:hidden;
background-size:cover;
background-position:center;
}

.page-banner::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(
rgba(5,10,18,.68),
rgba(5,10,18,.82)
);
}

.page-banner *{
position:relative;
z-index:2;
}

.page-banner h1{
font-size:70px;
font-weight:900;
color:var(--orange);
letter-spacing:-1px;
}

/* STATS */

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
margin-top:60px;
}

.stat{
padding:38px;
border-radius:28px;
text-align:center;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(18px);
}

.stat h3{
font-size:48px;
margin-bottom:8px;
color:var(--cyan);
}

/* FORM */

.form input,
.form textarea,
.form select{
width:100%;
padding:18px;
margin-bottom:18px;
border-radius:16px;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
color:#fff;
font-size:15px;
outline:none;
transition:.35s;
}

.form input:focus,
.form textarea:focus,
.form select:focus{
border-color:rgba(56,189,248,.4);
box-shadow:0 0 0 4px rgba(56,189,248,.08);
}

/* FOOTER */

footer{
padding:90px 80px;
background:#040912;
border-top:1px solid rgba(255,255,255,.06);
text-align:center;
position:relative;
overflow:hidden;
}

footer::before{
content:'';
position:absolute;
top:-120px;
left:50%;
transform:translateX(-50%);
width:620px;
height:240px;
background:radial-gradient(circle,rgba(56,189,248,.08),transparent 70%);
filter:blur(30px);
}

footer h2{
font-size:42px;
}

/* FLOATING ANIMATION */

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-30px);
}

100%{
transform:translateY(0px);
}

}

/* RESPONSIVE */

@media(max-width:1200px){

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

.stats{
grid-template-columns:repeat(2,1fr);
}

.hero h1{
font-size:62px;
}

}

@media(max-width:768px){

header{
padding:16px 20px;
}

nav{
display:none;
}

.hero{
padding:140px 24px 100px;
}

.hero h1{
font-size:42px;
line-height:1.08;
}

.hero p{
font-size:18px;
}

.section,
.page-banner{
padding:80px 24px;
}

.page-banner h1{
font-size:42px;
}

h2{
font-size:36px;
}

.grid{
grid-template-columns:1fr;
gap:24px;
}

.stats{
grid-template-columns:1fr;
}

.card{
min-height:auto;
}

}