/* =====================================================
YATIN SAYANIA
EXECUTIVE DARK THEME 2026
===================================================== */

:root{

--bg:#0f172a;
--bg-secondary:#111827;

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

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

--text:#f8fafc;

--muted:#94a3b8;

--accent:#3b82f6;

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

}

/* =====================================================
RESET
===================================================== */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:linear-gradient(
180deg,
#0f172a,
#111827
);

color:var(--text);

line-height:1.7;

transition:.3s;

}

/* =====================================================
LIGHT MODE
===================================================== */

body.dark{

background:linear-gradient(
180deg,
#0f172a,
#111827
);

color:var(--text);

}

body:not(.dark){

background:#f8fafc;

color:#111827;

}

/* =====================================================
CONTAINER
===================================================== */

.container{

width:90%;

max-width:1200px;

margin:auto;

}

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

.navbar{

position:sticky;

top:0;

z-index:999;

backdrop-filter:blur(20px);

background:rgba(15,23,42,.8);

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

}

.navbar .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo{

font-size:1.5rem;

font-weight:800;

color:white;

}

.nav-links{

display:flex;

list-style:none;

gap:25px;

}

.nav-links a{

color:white;

text-decoration:none;

font-weight:500;

transition:.3s;

}

.nav-links a:hover{

color:var(--accent);

}

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

#theme-toggle{

position:fixed;

top:20px;

right:20px;

z-index:1000;

border:none;

padding:12px;

border-radius:50%;

cursor:pointer;

background:var(--accent);

color:white;

font-size:16px;

}

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

.hero{

padding:120px 0;

}

.hero-content{

display:grid;

grid-template-columns:1fr 350px;

gap:60px;

align-items:center;

}

.hero-badge{

display:inline-block;

background:rgba(59,130,246,.15);

color:#60a5fa;

padding:8px 14px;

border-radius:999px;

margin-bottom:20px;

font-weight:600;

}

.hero h1{

font-size:4rem;

font-weight:800;

line-height:1.1;

}

.hero h2{

margin-top:20px;

font-size:1.4rem;

color:var(--muted);

font-weight:500;

}

.hero-description{

margin-top:25px;

max-width:650px;

color:var(--muted);

}

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:35px;

}

.profile-photo{

width:100%;

border-radius:25px;

box-shadow:var(--shadow);

}

/* =====================================================
BUTTONS
===================================================== */

.btn-primary{

background:var(--accent);

color:white;

padding:14px 24px;

border:none;

border-radius:12px;

text-decoration:none;

cursor:pointer;

font-weight:600;

display:inline-block;

}

.btn-primary:hover{

opacity:.9;

}

.btn-secondary{

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

color:var(--accent);

padding:14px 24px;

border-radius:12px;

text-decoration:none;

font-weight:600;

display:inline-block;

}

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

.section{

padding:100px 0;

}

.section h2{

text-align:center;

margin-bottom:40px;

font-size:2.4rem;

}

/* =====================================================
GLASS CARD
===================================================== */

.glass-card{

background:var(--card);

backdrop-filter:blur(20px);

padding:30px;

border-radius:24px;

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

box-shadow:var(--shadow);

}

/* =====================================================
HIGHLIGHTS
===================================================== */

.highlights-grid{

display:grid;

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

gap:25px;

}

.highlights-grid h3{

font-size:2.2rem;

color:var(--accent);

margin-bottom:10px;

}

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

.skill{

margin-bottom:25px;

}

.skill span{

display:block;

margin-bottom:8px;

font-weight:600;

}

.bar{

height:12px;

background:#1f2937;

border-radius:999px;

overflow:hidden;

}

.progress{

height:100%;

background:linear-gradient(
90deg,
#3b82f6,
#60a5fa
);

}

.p95{width:95%;}
.p90{width:90%;}
.p85{width:85%;}
.p80{width:80%;}
.p75{width:75%;}

/* =====================================================
PROJECTS
===================================================== */

.projects-grid{

display:grid;

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

gap:25px;

}

.projects-grid img{

width:100%;

border-radius:16px;

margin-bottom:20px;

}

.projects-grid h3{

margin-bottom:15px;

}

/* =====================================================
GITHUB
===================================================== */

.github-section{

text-align:center;

}

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

.contact-form{

margin-top:30px;

display:flex;

flex-direction:column;

gap:15px;

}

.contact-form input,
.contact-form textarea{

padding:15px;

border-radius:12px;

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

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

color:white;

font-family:inherit;

}

.contact-form textarea{

resize:vertical;

min-height:150px;

}

.contact-form input:focus,
.contact-form textarea:focus{

outline:none;

border-color:var(--accent);

}

.contact-links{

margin-top:30px;

display:flex;

justify-content:center;

align-items:center;

gap:30px;

flex-wrap:wrap;

}

.contact-links p{

margin:0;

display:flex;

align-items:center;

gap:8px;

}

.contact-links a{

text-decoration:none;

color:#60a5fa;

font-weight:600;

}

.contact-links a:hover{

color:#93c5fd;

}

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

footer{

padding:40px 20px;

text-align:center;

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

color:var(--muted);

}

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

@media(max-width:768px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero h1{

font-size:2.8rem;

}

.navbar .container{

flex-direction:column;

gap:15px;

}

.nav-links{

flex-wrap:wrap;

justify-content:center;

}

.hero-buttons{

justify-content:center;

}

.contact-links{

flex-direction:column;

}

.section{

padding:70px 0;

}

}

/* =====================================================
LIGHT MODE SUPPORT
===================================================== */

body:not(.dark) .glass-card{

background:white;

border:1px solid #e5e7eb;

}

body:not(.dark) .navbar{

background:white;

}

body:not(.dark) .nav-links a{

color:#111827;

}

body:not(.dark) .logo{

color:#111827;

}

body:not(.dark) .contact-form input,
body:not(.dark) .contact-form textarea{

background:white;

color:#111827;

border:1px solid #d1d5db;

}

body:not(.dark) .bar{

background:#e5e7eb;

}