:root{
  --bg:#05060a;
  --card:#07101a;
  --accent:#00d4ff;
  --gold:#caa34a;
  --muted:#9aa6ad;
  --glass: rgba(255,255,255,0.03);
  --radius:20px;
  --maxw:1200px;
}

/* Base readable font sizing */
html { font-size: 16px; } /* desktop baseline */
@media (max-width: 1200px) { html { font-size: 15px; } }
@media (max-width: 900px)  { html { font-size: 15px; } }
@media (max-width: 520px)  { html { font-size: 14px; } }

* { box-sizing: border-box; }
body{
  margin:0;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(circle at 20% 10%, rgba(8,25,30,0.6), transparent 10%),
              radial-gradient(circle at 80% 80%, rgba(12,8,30,0.6), transparent 10%),
              var(--bg);
  color: #e6f6f8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.5;
}

/* NAV */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
  max-width:var(--maxw);
  margin:14px auto;
  color:var(--muted);
}
.brand{font-weight:700;color:var(--accent);font-family:'Poppins',sans-serif;font-size:1.15rem}
.menu a{
  margin-left:18px;
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  font-size:0.98rem;
}
.menu a.active{color:var(--accent)}

/* Page container */
.page { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

/* HERO */
.hero {
  padding:28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border:1px solid rgba(0,210,255,0.03);
  margin-bottom: 18px;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items:center;
}
.eyebrow{
  display:inline-block;
  background: rgba(255,255,255,0.02);
  padding:6px 10px;
  border-radius:8px;
  color:var(--muted);
  font-weight:700;
  margin-bottom:12px;
  font-size:0.95rem;
  letter-spacing:0.3px;
}
h1{ font-family:'Poppins',sans-serif; font-size: clamp(1.8rem, 3vw, 2.75rem); margin:6px 0 8px; }
.name{ color: var(--accent); }
.role-sub { color: var(--muted); margin-bottom:14px; font-size:1.05rem; max-width: 680px; }

/* Buttons */
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.btn{ display:inline-block; padding:12px 20px; border-radius:999px; font-weight:700; text-decoration:none; cursor:pointer; border:none; }
.btn.primary{ background: linear-gradient(90deg,var(--accent), #66f0ff); color:#00121a; box-shadow: 0 8px 26px rgba(0,212,255,0.08); }
.btn.ghost{ background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04); }

/* Social links */
.social-links { display:flex; gap:12px; align-items:center; margin-top:8px; }
.social-links a {
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background: rgba(255,255,255,0.03); color:var(--accent); font-size:1.15rem; border:1px solid rgba(255,255,255,0.04);
  transition:all .25s ease;
}
.social-links a:hover{ background:var(--accent); color:#00121a; transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,212,255,0.16); }

/* Hero features */
.hero-features{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
.feat{ background: rgba(255,255,255,0.02); padding:8px 12px; border-radius:8px; color:var(--muted); font-weight:700; font-size:0.95rem; }
.feat span{ display:block; font-weight:500; color:var(--muted); font-size:0.85rem; margin-top:4px; }

/* Profile */
.profile-ring{ width: clamp(180px, 28vw, 320px); height: clamp(180px, 28vw, 320px); border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle, rgba(0,212,255,0.04), transparent 60%); padding:16px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.profile{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:6px solid rgba(0,0,0,0.4); }

/* Sections */
.section{ padding:28px 0; margin-top:8px; }
.section-inner{ max-width:var(--maxw); margin:0 auto; padding:0 8px; }
.section h2{ font-family:'Poppins',sans-serif; color:var(--accent); font-size:1.5rem; margin-bottom:12px; }

/* About */
.lead-paragraph{ color:var(--muted); font-size:1rem; max-width:900px; }

/* Cards / Experience */
.cards{ display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; }
.experience-cards .card{ background: #0e1114; border-left:4px solid var(--accent); padding:1.1rem; border-radius:10px; flex:1 1 calc(50% - 18px); min-width:240px; transition:transform .2s ease; }
.experience-cards .card:hover{ transform: translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.6); }
.card-title{ font-weight:700; color:var(--gold); font-size:1.05rem; margin-bottom:6px; }
.card-body{ color:#cfdfe6; font-size:0.98rem; line-height:1.45; }
.date{ color:var(--muted); font-size:0.9rem; margin-bottom:8px; }

/* Skills */
.skills-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:12px; }
.skill-item{ background:#0f1316; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); display:flex; gap:10px; align-items:center; transition:all .2s ease; }
.skill-item .icon{ font-size:1.05rem; opacity:0.9; }
.skill-item .skill-text{ font-weight:600; color:#dbeff4; font-size:0.98rem; }
.skill-item:hover{ background: rgba(0,212,255,0.04); transform: translateY(-4px); border-color: rgba(0,212,255,0.12); }

/* Contact form */
.contact-form{ margin-top:12px; display:flex; flex-direction:column; gap:12px; max-width:720px; }
.form-row{ display:flex; gap:12px; }
.form-row input{ flex:1; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit; }
.contact-form textarea{ padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit; }

/* Footer */
.footer{ text-align:center; color:var(--muted); padding:18px 0; margin-top:18px; }

/* Responsive tweaks */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr 260px; gap:18px; }
  .menu a{ margin-left:12px; font-size:0.95rem; }
  .experience-cards .card{ flex:1 1 calc(50% - 12px); }
}
@media (max-width: 780px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-right{ order:-1; margin-bottom: 14px; }
  .social-links{ justify-content:center; }
  .form-row{ flex-direction:column; }
  .experience-cards .card{ flex:1 1 100%; }
}
@media (max-width: 420px){
  html{ font-size:14px; }
  .brand{ font-size:1rem; }
  .hero-features{ gap:8px; }
  .skill-item .skill-text{ font-size:0.92rem; }
}