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

:root{

--bg:#050816;
--bg2:#0d1325;
--card:rgba(18,22,38,.75);

--primary:#00e5a8;
--secondary:#00b7ff;

--text:#ffffff;
--text2:#b6bfd3;

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

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

--radius:18px;

}

body{

font-family:'Plus Jakarta Sans',sans-serif;

background:linear-gradient(180deg,#050816,#08101f,#050816);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

body::before{

content:"";

position:fixed;

width:700px;

height:700px;

background:radial-gradient(circle,var(--primary),transparent 70%);

opacity:.08;

top:-300px;

right:-250px;

pointer-events:none;

z-index:-1;

}

body::after{

content:"";

position:fixed;

width:650px;

height:650px;

background:radial-gradient(circle,var(--secondary),transparent 70%);

opacity:.07;

bottom:-300px;

left:-250px;

pointer-events:none;

z-index:-1;

}

img{

width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

.section{

padding:110px 9%;

}

.section-heading{

text-align:center;

margin-bottom:60px;

}

.section-heading h2{

font-size:2.8rem;

font-family:'Space Grotesk',sans-serif;

margin-bottom:15px;

}

.section-heading p{

max-width:650px;

margin:auto;

color:var(--text2);

font-size:1.05rem;

}

/* ===========================
LOADER
=========================== */

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#050816;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader{

width:70px;

height:70px;

border-radius:50%;

border:5px solid rgba(255,255,255,.15);

border-top:5px solid var(--primary);

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* ===========================
NAVBAR
=========================== */

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

padding:22px 9%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(5,8,22,.82);

backdrop-filter:blur(18px);

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

z-index:1000;

transition:.35s;

}

.nav-email a{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

color:white;

transition:.3s;

}

.nav-email a:hover{

color:var(--primary);

}

.nav-links{

display:flex;

list-style:none;

gap:35px;

}

.nav-links a{

color:var(--text2);

font-weight:600;

transition:.3s;

position:relative;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.35s;

}

.nav-links a:hover{

color:white;

}

.nav-links a:hover::after{

width:100%;

}

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

.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:140px 9% 100px;

}

.hero-content{

max-width:900px;

}

.hero-badge{

display:inline-flex;

gap:10px;

align-items:center;

padding:12px 22px;

border-radius:50px;

background:rgba(0,229,168,.08);

border:1px solid rgba(0,229,168,.2);

color:var(--primary);

font-weight:700;

margin-bottom:30px;

}

.hero-badge i{

font-size:10px;

animation:pulse 2s infinite;

}

@keyframes pulse{

50%{

opacity:.25;

}

}

.hero h1{

font-size:4.7rem;

line-height:1.1;

font-family:'Space Grotesk',sans-serif;

margin-bottom:25px;

}

.hero h1 span{

background:linear-gradient(135deg,var(--primary),var(--secondary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

max-width:720px;

margin:auto;

font-size:1.2rem;

color:var(--text2);

margin-bottom:45px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:60px;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:12px;

font-weight:700;

transition:.35s;

cursor:pointer;

}

.primary-btn{

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#000;

box-shadow:0 10px 30px rgba(0,229,168,.35);

}

.primary-btn:hover{

transform:translateY(-5px);

}

.secondary-btn{

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

color:white;

}

.secondary-btn:hover{

background:white;

color:#000;

}

.hero-stats{

display:grid;

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

gap:25px;

}

.stat{

background:var(--card);

padding:35px;

border-radius:var(--radius);

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

backdrop-filter:blur(15px);

transition:.35s;

}

.stat:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.stat h2{

font-size:2.5rem;

color:var(--primary);

margin-bottom:8px;

}

.stat p{

color:var(--text2);

}

/* ===========================
SERVICES
=========================== */

.service-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.service-card{

background:var(--card);

padding:40px 30px;

border-radius:20px;

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

transition:.35s;

backdrop-filter:blur(18px);

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);

transition:.8s;

}

.service-card:hover::before{

left:100%;

}

.service-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:var(--shadow);

}

.service-icon{

width:75px;

height:75px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,var(--primary),var(--secondary));

border-radius:18px;

font-size:2rem;

color:#000;

margin-bottom:25px;

}

.service-card h3{

font-size:1.5rem;

margin-bottom:15px;

font-family:'Space Grotesk',sans-serif;

}

.service-card p{

color:var(--text2);

}

/* ===========================
SKILLS
=========================== */

.skills-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:28px;

}

.skill-card{

background:var(--card);

padding:40px 30px;

border-radius:20px;

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

transition:.35s;

text-align:center;

}

.skill-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:var(--shadow);

}

.skill-card i{

font-size:3rem;

color:var(--primary);

margin-bottom:20px;

}

.skill-card h3{

margin-bottom:12px;

font-family:'Space Grotesk',sans-serif;

}

.skill-card p{

color:var(--text2);

}

.projects-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

gap:35px;

}

.project-card{

background:var(--card);

border-radius:22px;

overflow:hidden;

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

transition:.35s;

backdrop-filter:blur(18px);

}

.project-card:hover{

transform:translateY(-12px);

border-color:var(--primary);

box-shadow:var(--shadow);

}

.project-placeholder{

height:240px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#0d1325,#16203b);

font-size:5rem;

color:var(--primary);

}

.project-content{

padding:30px;

}

.project-type{

display:inline-block;

padding:8px 18px;

background:rgba(0,229,168,.12);

color:var(--primary);

border-radius:50px;

font-size:.9rem;

font-weight:700;

margin-bottom:18px;

}

.project-content h3{

font-size:1.8rem;

margin-bottom:15px;

font-family:'Space Grotesk',sans-serif;

}

.project-content p{

color:var(--text2);

margin-bottom:25px;

}

.project-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:25px;

}

.project-tags span{

padding:8px 15px;

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

border-radius:50px;

font-size:.9rem;

}

.project-link{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:700;

color:var(--primary);

transition:.3s;

}

.project-link:hover{

transform:translateX(8px);

}

/* ===========================
CONTACT
=========================== */

.contact-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.contact-card{

background:var(--card);

padding:40px 30px;

text-align:center;

border-radius:20px;

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

transition:.35s;

backdrop-filter:blur(18px);

}

.contact-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:var(--shadow);

}

.contact-card i{

font-size:3rem;

color:var(--primary);

margin-bottom:20px;

}

.contact-card h3{

margin-bottom:12px;

font-family:'Space Grotesk',sans-serif;

}

.contact-card p{

color:var(--text2);

margin-bottom:25px;

}

.contact-btn{

display:inline-block;

padding:14px 28px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

border-radius:12px;

font-weight:700;

color:#000;

transition:.35s;

}

.contact-btn:hover{

transform:translateY(-5px);

}

footer{

padding:80px 9%;

text-align:center;

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

background:#040611;

}

.footer-content h2{

font-size:2rem;

margin-bottom:15px;

font-family:'Space Grotesk',sans-serif;

}

.footer-content p{

color:var(--text2);

max-width:600px;

margin:0 auto 30px;

}

.footer-socials{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:35px;

}

.footer-socials a{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

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

font-size:1.3rem;

transition:.35s;

}

.footer-socials a:hover{

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#000;

transform:translateY(-8px);

}

.copyright{

color:var(--text2);

font-size:.95rem;

}

/* ===========================
SCROLL TO TOP
=========================== */

#scrollTop{

position:fixed;

right:30px;

bottom:30px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#000;

font-size:1.2rem;

cursor:pointer;

display:none;

z-index:999;

transition:.35s;

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

}

#scrollTop:hover{

transform:translateY(-6px);

}

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

@media(max-width:900px){

.navbar{

padding:20px 6%;

flex-direction:column;

gap:20px;

}

.nav-links{

gap:18px;

flex-wrap:wrap;

justify-content:center;

}

.hero h1{

font-size:3.3rem;

}

.hero-stats{

grid-template-columns:1fr;

}

.section{

padding:90px 6%;

}

.projects-grid{

grid-template-columns:1fr;

}

}

@media(max-width:600px){

.hero h1{

font-size:2.6rem;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

}

.btn{

width:100%;

}

.section-heading h2{

font-size:2.2rem;

}

}

/* ===========================
TEXT SELECTION
=========================== */

::selection{

background:var(--primary);

color:#000;

}