/* ============================
   Variables & Base Styles
   ============================ */
:root{
  --bg:#070b14; --card:#0b1220; --muted:#9fb0c8; --text:#eaf3ff;
  --accent1:#00f5d4; --accent2:#8a5cf6; --accent3:#ff4d6d;
  --glass: rgba(255,255,255,0.035); --stroke: rgba(255,255,255,0.06);
  --radius:14px; --shadow: 0 14px 40px rgba(0,0,0,0.6);
  --container:1200px;
  --accent-grad: linear-gradient(90deg,var(--accent1),var(--accent2));
}
:root.light{
  --bg:#f5f9ff; --card:#ffffff; --muted:#556678; --text:#071226;
  --accent1:#006b5f; --accent2:#5b3bdb; --accent3:#c5304e; --glass: rgba(6,10,20,0.02);
  --stroke: rgba(7,18,38,0.06);
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;color:var(--text);background:
  radial-gradient(800px 600px at 10% 15%, rgba(138,92,246,0.12), transparent 40%),
  radial-gradient(700px 500px at 90% 20%, rgba(0,245,212,0.08), transparent 40%),
  var(--bg);-webkit-font-smoothing:antialiased}
.container{width:min(var(--container),92%);margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:120;background:color-mix(in oklab,var(--glass) 85%,transparent);backdrop-filter: blur(10px);border-bottom:1px solid var(--stroke)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none}
.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--accent1);box-shadow:0 8px 30px rgba(0,245,212,0.12)}
.brand-name{font-weight:700;font-family:Poppins,system-ui}
.nav{display:flex;align-items:center;gap:12px}
.hamburger{display:none;background:transparent;border:0;padding:8px;border-radius:10px;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--muted);margin:4px 0;border-radius:2px;transition:all .18s}
.nav-list{display:flex;gap:20px;list-style:none;margin:0;padding:0;align-items:center}
.nav-link{color:var(--muted);font-weight:600;text-decoration:none;position:relative;padding:6px}
.nav-link::after{content:'';position:absolute;left:0;bottom:-8px;height:2px;width:0;background:var(--accent1);transition:width .22s}
.nav-link:hover{color:var(--text)}
.nav-link:hover::after{width:100%}
.header-actions{display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{display:inline-flex;gap:.6rem;align-items:center;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--stroke);background:transparent;color:var(--text);cursor:pointer;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--accent2),var(--accent3));color:#fff;border-color:transparent}
.btn-outline{background:transparent;border:1px solid var(--stroke)}
.btn-ghost{background:transparent;border:0;padding:6px}

/* HERO */
.hero{padding:96px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero-title{font-size:2.6rem;font-family:Poppins,system-ui;margin:0}
.hero-sub{font-size:1.2rem;color:var(--muted);margin:.6rem 0}
.lead{color:var(--muted);max-width:60ch}
.hero-ctas{display:flex;gap:12px;margin-top:14px}
.hero-stats{display:flex;gap:22px;margin-top:18px;color:var(--muted)}
.hero-stats strong{color:var(--text);display:block}

/* profile visual */
.profile-card{width:320px;height:320px;border-radius:18px;overflow:hidden;padding:10px;background:linear-gradient(180deg,rgba(0,245,212,0.06),rgba(138,92,246,0.06));box-shadow:var(--shadow)}
.profile-card img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.profile-glow{position:absolute;right:-40px;top:-20px;width:220px;height:220px;border-radius:50%;filter:blur(40px);background:radial-gradient(circle at 30% 30%, rgba(0,245,212,0.28), transparent 60%);pointer-events:none}

/* hero shapes */
.hero-shapes .shape{position:absolute;border-radius:50%;filter:blur(30px);opacity:.45}
.hero-shapes .s1{width:120px;height:120px;left:-30px;bottom:12%;background:linear-gradient(90deg,var(--accent2),var(--accent3))}
.hero-shapes .s2{width:160px;height:160px;right:8%;top:-20px;background:linear-gradient(90deg,var(--accent1),var(--accent2))}
.hero-shapes .s3{width:100px;height:100px;left:12%;top:6%;background:linear-gradient(90deg,var(--accent3),var(--accent1))}

/* About */
.section{padding:64px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:var(--radius);border:1px solid var(--stroke);padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.proof-low{position:absolute;inset:auto 12px 12px 12px;display:flex;gap:8px;opacity:.12;pointer-events:none}
.proof-low img{width:33%;height:72px;object-fit:cover;border-radius:8px}

/* About content */
.about-content .about-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.meta-key{display:block;font-weight:700}
.about-socials{display:flex;gap:10px;margin-top:12px}
.social{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid var(--stroke);color:var(--text)}

/* Skills */
.section-title{font-family:Poppins,system-ui;font-size:1.6rem;margin-bottom:12px}
.skills-wrap{display:grid;grid-template-columns:1fr;gap:16px}
.skill-category{padding:6px}
.skill-grid{display:flex;flex-wrap:wrap;gap:12px}
.skill-circle{width:110px;height:110px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);display:grid;place-items:center;position:relative;overflow:visible}
.skill-circle .label{position:absolute;bottom:8px;font-size:.78rem;color:var(--muted)}
.skill-circle .percent{font-weight:800;z-index:2;color:var(--text)}
.skill-circle svg{position:absolute;inset:0;width:100%;height:100%}

/* Work / projects */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.work-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid var(--stroke)}
.work-media{position:relative;height:180px;overflow:hidden}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.work-card:hover img{transform:scale(1.05)}
.work-info{padding:12px}
.badge{display:inline-block;padding:6px 8px;border-radius:999px;font-weight:800;font-size:.78rem;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#042522}

/* buttons in card */
.card-buttons{display:flex;gap:8px;margin-top:10px}
.card-buttons a{display:inline-flex;gap:.5rem;align-items:center;padding:.45rem .6rem;border-radius:8px;background:rgba(255,255,255,0.02);color:var(--text);text-decoration:none;border:1px solid var(--stroke);font-weight:700}

/* Testimonials: marquee */
.testimonial-marquee{overflow:hidden;border-radius:10px;border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
.marquee-track{display:flex;gap:28px;padding:14px 8px;align-items:center;animation:marquee 18s linear infinite}
.marquee-track .testimonial{min-width:260px;padding:12px;border-radius:10px;background:rgba(0,0,0,0.03);border:1px solid rgba(255,255,255,0.02)}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:start}
@media(max-width:1000px){.contact-grid{grid-template-columns:1fr}}
.contact-form label{display:block;margin-top:12px;font-weight:700}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--stroke);background:transparent;color:var(--text)}
.contact-form .form-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.contact-cred .cred-grid{display:flex;gap:8px;opacity:.16}
.contact-cred .cred-grid img{width:33%;height:80px;object-fit:cover;border-radius:8px}

/* Footer */
.footer{padding:28px 0;border-top:1px solid var(--stroke);color:var(--muted);margin-top:28px}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.footer-bottom{text-align:center;margin-top:16px;color:var(--muted)}

/* Reveal & small helpers */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.muted{color:var(--muted)}

/* Responsive: mobile nav slide-down */
@media(max-width:900px){
  .nav-list{position:fixed;inset:76px 0 auto 0;background:linear-gradient(180deg,rgba(7,10,18,0.98),rgba(7,10,18,0.96));backdrop-filter: blur(8px);display:flex;flex-direction:column;gap:12px;padding:18px;transform:translateY(-120%);transition:transform .28s}
  .nav-list.open{transform:translateY(0)}
  .hamburger{display:inline-block}
  .header-actions .btn-primary{display:none} /* hide hire btn on small, still in nav */
  .hero-grid{grid-template-columns:1fr}
  .profile-card{width:280px;height:280px}
}