:root{
  --bg:#070707;
  --card:#0f0f12;
  --muted:#9aa1a6;
  --accent1:#ff6f61; /* warm */
  --accent2:#8b5cf6; /* purple */
  --accent3:#00e5ff; /* cyan */
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(139,92,246,0.06), transparent),
              radial-gradient(1000px 500px at 90% 90%, rgba(0,229,255,0.03), transparent),
              var(--bg);
  color:#e9eef3;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}

/* Container */
.container{width:90%;max-width:1100px;margin:0 auto}

/* NAV */
.nav-wrap{backdrop-filter: blur(6px);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--accent1),var(--accent2));box-shadow:0 6px 18px rgba(139,92,246,0.12)}
.brand-name{font-weight:700;color:#fff}
.nav-links{display:flex;gap:20px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:8px;transition:all .25s}
.nav-links a:hover{color:#fff;text-shadow:0 6px 20px rgba(255,111,97,0.08)}

/* HERO */
.hero{padding:60px 0;min-height:74vh;display:flex;align-items:center}
.hero-inner{display:flex;gap:40px;align-items:center}
.hero-left{flex:0 0 240px;display:flex;justify-content:center}
.profile-wrap{position:relative;width:220px;height:220px;border-radius:20px;overflow:hidden}
.profile-photo{width:100%;height:100%;object-fit:cover;border-radius:16px;border:3px solid rgba(255,255,255,0.03);display:block;transform:translateZ(0);transition:transform .45s ease}
.profile-photo:hover{transform:scale(1.03)}
.photo-glow{position:absolute;inset:0;border-radius:16px;pointer-events:none;background:
  linear-gradient(120deg, rgba(255,111,97,0.06), rgba(139,92,246,0.06), rgba(0,229,255,0.03));filter:blur(20px);mix-blend-mode:screen;opacity:.9}

.hero-right{flex:1;max-width:760px}
.hero-title{font-size:2.2rem;margin-bottom:8px}
.name-highlight{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.hero-sub{color:var(--muted);margin-bottom:14px}
.hero-type{font-size:1.05rem;color:#dfe9f2;margin-bottom:18px}
.hero-cta{display:flex;gap:12px;margin-bottom:14px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;text-decoration:none;border:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:all .25s}
.btn.primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#070707;font-weight:600;box-shadow:0 8px 30px rgba(139,92,246,0.12)}
.btn.ghost{background:transparent;color:var(--accent1);border:1px solid rgba(255,111,97,0.12)}
.social-compact a{margin-right:10px;color:var(--muted);font-size:1.2rem}
.social-compact a:hover{color:#fff;text-shadow:0 0 18px rgba(255,111,97,0.08)}

/* Sections titles */
.section-title{font-size:1.6rem;margin:28px 0;color:var(--accent2);letter-spacing:.6px}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:var(--radius);box-shadow:0 6px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.02)}
.lead-paragraph{font-size:1rem;color:#dbe6ee;margin-bottom:14px;text-align:justify}
.about-highlights{list-style:none;margin-top:6px;padding:0}
.about-highlights li{padding:8px 0;color:var(--muted);font-size:.95rem}

/* about-actions cards */
.contact-card h3, .stats-card h3{margin-bottom:10px;color:#fff}
.social-block a{display:inline-flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none;padding:8px 6px;border-radius:8px;transition:all .22s}
.social-block a i{width:20px}
.social-block a:hover{transform:translateX(6px);color:#fff}

/* skills */
.skill-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));color:var(--muted);cursor:pointer;transition:all .25s}
.chip:hover{color:#070707;background:linear-gradient(90deg,var(--accent1),var(--accent3));box-shadow:0 10px 30px rgba(139,92,246,0.08);transform:translateY(-6px)}

/* projects */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.project-card{padding:18px;border-radius:12px;position:relative;overflow:hidden;transition:transform .28s,box-shadow .28s}
.project-card h3{margin-bottom:8px}
.project-card p{color:var(--muted);font-size:.95rem;margin-bottom:12px}
.project-card .card-actions{display:flex;gap:10px}
.project-card .link{color:var(--accent3);text-decoration:none;padding:8px 12px;border-radius:8px;border:1px solid rgba(0,229,255,0.06)}
.project-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,0.6)}
.project-card:hover::after{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(255,111,97,0.06), rgba(139,92,246,0.06));mix-blend-mode:overlay;pointer-events:none
}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:20px;padding:20px}
.contact-left h4{color:#fff;margin-bottom:6px}
.contact-form label{display:block;margin-bottom:10px}
.contact-form input,.contact-form textarea{
  width:100%;padding:10px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:#e9eef3;outline:none
}
.form-actions{text-align:right;margin-top:10px}

/* footer */
.site-footer{padding:18px 0;margin-top:30px;border-top:1px solid rgba(255,255,255,0.02);color:var(--muted);text-align:center}

/* small screens */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero-inner{flex-direction:column;gap:22px}
  .hero-left{order:2}
  .hero-right{order:1;text-align:center}
}