@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --bg: #0b1220;
  --bg-soft: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --primary: #005CB9;
  --primary-2: #007CBA;
  --card: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.08);
  --shadow: 0 20px 40px rgba(0,0,0,.25);
  --radius: 18px;
}

html[data-theme="light"]{
  --bg: #f8fafc;
  --bg-soft: #f1f5f9;
  --text: #0f172a;
  --muted: #475569;
  --card: rgba(0,0,0,0.04);
  --glass: rgba(255,255,255,0.65);
  --shadow: 0 12px 24px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
body{
  font-family: 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

/* Navbar glass */
.navbar-glass{
  backdrop-filter: saturate(180%) blur(14px);
  background: linear-gradient(180deg, rgba(10,12,20,.65), rgba(10,12,20,.25));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar-brand{letter-spacing:.5px}
.nav-link{color:var(--text)!important; opacity:.85;}
.nav-link:hover{opacity:1}
.btn-cta{border-radius:999px}
.btn-lang, .btn-darkmode{
  border-radius:999px; background:var(--card); color:var(--text); border:0
}
.btn-lang:hover, .btn-darkmode:hover{filter:brightness(1.1)}

/* HERO */
.hero{
  position:relative; padding: 92px 0 64px;
  background: radial-gradient(1200px 600px at -10% -10%, rgba(0,92,185,.3), transparent 45%),
              radial-gradient(1200px 600px at 110% -10%, rgba(0,124,186,.25), transparent 45%);
}
.hero-blur{
  position:absolute; inset:-30% -10% auto -10%;
  height:420px; background: conic-gradient(from 180deg, #005CB9, #007CBA, #00c2ff, #005CB9);
  filter: blur(88px); opacity:.22; z-index:0;
}
.profile-wrap{border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow)}
.profile-photo{width: 100%; max-width: 380px; border-radius: 16px; display:block; margin:0 auto}

/* Badges / Social */
.bg-primary-soft{background: rgba(0,92,185,.12)}
.social .social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; background: var(--card);
  color:var(--text); margin-right:10px; transition: transform .2s, filter .2s;
}
.social .social-link:hover{transform: translateY(-3px); filter:brightness(1.15)}

/* Generic sections */
.section{padding:72px 0}
.bg-soft{background: var(--bg-soft)}
.glass{background: var(--glass); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); box-shadow: var(--shadow)}
.card-tilt{transition: transform .2s ease, box-shadow .2s ease}
.card-tilt:hover{transform: translateY(-6px)}
.shape-divider{
  position:absolute; bottom:-1px; left:0; right:0; height:80px;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* About bullets */
.bullet-check li{
  margin-bottom:10px; position:relative; padding-left:28px;
}
.bullet-check li:before{
  content:"✓"; position:absolute; left:0; top:0; color:#22c55e; font-weight:800;
}

/* Stats */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.stat{padding:20px; text-align:center}
.stat-num{font-size:34px; font-weight:800}
.stat-label{opacity:.8}

/* Services */
.service{
  padding:24px; text-align:left; min-height: 190px;
}
.service i{color: var(--primary)}
.service h5{margin-top:10px; font-weight:700}

/* Tags & Skills */
.tags{display:flex; flex-wrap:wrap; gap:10px}
.tag{
  padding:6px 10px; border-radius:999px; background: var(--card);
  font-size:14px
}
.skill{margin-bottom:14px}
.progress{height:10px; background: rgba(255,255,255,.12); border-radius:999px}
.progress-bar{background: linear-gradient(90deg, var(--primary), var(--primary-2))}

/* Portfolio */
.portfolio-card{overflow:hidden; cursor:pointer}
.portfolio-card img{width:100%; height:210px; object-fit:cover; display:block}
.portfolio-card .p-3{border-top:1px solid rgba(255,255,255,.06)}

/* Timeline */
.timeline{position:relative; margin-left:12px}
.timeline:before{
  content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background: rgba(255,255,255,.12)
}
.tl-item{position:relative; margin-left:28px; margin-bottom:18px}
.tl-dot{
  position:absolute; left:-5px; top:8px; width:12px; height:12px; border-radius:50%; background: var(--primary)
}
.tl-content{padding:14px 16px}

/* Testimonials */
.testimonial{padding:22px}

/* Contact */
.contact-cards{display:grid; gap:10px}
.contact-card{
  padding:12px 14px; border-radius: 14px; display:flex; align-items:center; gap:10px; color:var(--text);
}
.contact-card i{color: var(--primary)}

/* Footer */
.footer{padding:36px 0; border-top:1px solid rgba(255,255,255,.08)}

/* Floating WhatsApp */
.fab-btn{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#25D366; color:#fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.2); z-index:999; transition: transform .2s;
}
.fab-btn:hover{transform: translateY(-3px)}

/* Animations */
[data-aos]{will-change: transform, opacity}

/* Responsive */
@media (max-width: 992px){
  .grid-2{grid-template-columns:1fr}
  .hero{padding-top:72px}
}

/* Utility */
.opacity-75{opacity:.75}