/* --------------------------------------------------
   THEME
-------------------------------------------------- */
:root{
    --bg: #0b1020;
    --bg-2: #070b17;
    --card: rgba(18, 24, 40, 0.85);
    --text: #f8fafc;
    --muted: #a8b1c7;
    --accent: #2ea0ff;        /* Premium blue */
    --accent-soft: rgba(46, 160, 255, 0.2);
    --border: rgba(148, 163, 184, 0.35);
    --shadow: 0 20px 60px rgba(0,0,0,0.5);
    --radius-lg: 18px;
    --radius-md: 12px;
    --nav-h: 70px;
    --max: 1120px;
    --font: system-ui, -apple-system, Segoe UI, Roboto, "SF Pro Text", sans-serif;
  }
  
  *,
  *::before,
  *::after { box-sizing: border-box; }
  
  html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--text);
    background: radial-gradient(1000px 600px at 20% -10%, #0f1b33 0%, transparent 60%),
                radial-gradient(1000px 600px at 80% -20%, #11213f 0%, transparent 60%),
                var(--bg-2);
  }
  
  /* Containers */
  .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
  
  /* --------------------------------------------------
     TOP NAV
  -------------------------------------------------- */
  .top-bar {
    position: sticky; top: 0; z-index: 50;
    height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    background: rgba(6, 10, 20, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.7);
  }
  
  .logo {height: 200px ; 
    width: 200px ;
}
  .logo span { color: var(--accent); }
  
  .main-nav { display: flex; gap: 20px; }
  .main-nav a {
    color: var(--muted); text-decoration: none; padding-bottom: 2px;
    border-bottom: 2px solid transparent; transition: .2s;
  }
  .main-nav a:hover { color: var(--text); }
  .main-nav a.active { color: var(--accent); border-color: var(--accent); }
  
  .nav-cta{
    border: 1px solid var(--accent); color: var(--text);
    border-radius: 999px; padding: 8px 16px; text-decoration: none;
    background: linear-gradient(135deg, var(--accent-soft), transparent);
    transition: .2s;
  }
  .nav-cta:hover{ background: var(--accent-soft); transform: translateY(-1px); }
  
  /* --------------------------------------------------
     PROFILE COVER
  -------------------------------------------------- */
  .profile-cover{ position: relative; padding-bottom: 64px; }
  .cover-art{
    height: 220px;
    background:
      radial-gradient(800px 400px at 20% -30%, rgba(46,160,255,0.38), transparent 60%),
      radial-gradient(900px 350px at 90% -50%, rgba(46,160,255,0.2), transparent 60%),
      linear-gradient(180deg, #0b1224, #060a14 70%);
    border-bottom: 1px solid rgba(148,163,184,0.2);
  }
  .profile-shell{
    display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: end;
    transform: translateY(-56px);
  }
  .avatar{
    width: 120px; height: 120px; border-radius: 999px; overflow: hidden;
    border: 3px solid rgba(255,255,255,0.08);
    background: linear-gradient(135deg, #11182a, #0a1225);
    display: grid; place-items: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  }
  .avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .avatar::before{
    content: attr(data-initials);
    color: #dbeafe; font-weight: 700; font-size: 40px; letter-spacing: 1px;
  }
  
  .profile-heading{ padding-bottom: 6px; }
  .name{ margin: 0 0 6px 0; font-size: 1.9rem; }
  .headline{ margin: 0 0 10px 0; color: var(--muted); }
  .meta{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); }
  .meta-dot{ opacity: 0.6; }
  .meta-chip{
    background: rgba(46, 160, 255, 0.13);
    border: 1px solid rgba(46, 160, 255, 0.35);
    color: #cfe9ff; font-size: 0.8rem;
    padding: 3px 10px; border-radius: 999px;
  }
  .meta-link{ color: var(--text); text-decoration: none; border-bottom: 1px dashed rgba(148,163,184,0.5); }
  .meta-link:hover{ color: var(--accent); border-bottom-color: var(--accent); }
  
  .quick-actions{ display: flex; gap: 10px; margin-top: 12px; }
  .btn{
    border-radius: 999px; padding: 9px 16px; font-size: 0.92rem;
    border: 1px solid rgba(148,163,184,0.45);
    background: rgba(15, 23, 42, 0.6);
    color: var(--text); text-decoration: none; transition: .2s;
  }
  .btn:hover{ transform: translateY(-1px); border-color: var(--accent); }
  .btn.primary{
    border-color: transparent; background: linear-gradient(135deg, var(--accent), #74bfff);
    color: #0c1224; font-weight: 600; box-shadow: 0 12px 30px rgba(46,160,255,0.35);
  }
  .btn.ghost{ background: rgba(12, 18, 36, 0.7); }
  .btn.block{ display: block; text-align: center; }
  
  /* --------------------------------------------------
     LAYOUT
  -------------------------------------------------- */
  .section{ padding: 20px 0 70px; }
  .grid-2{
    display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start;
  }
  .left-col{ position: sticky; top: calc(var(--nav-h) + 16px); height: max-content; }
  
  .card{
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 18px 18px 20px; backdrop-filter: blur(16px);
  }
  .card + .card{ margin-top: 14px; }
  .card-title{ margin: 0 0 10px 0; font-size: 1.15rem; }
  
  /* Lists / text */
  .bullet-list{ color: var(--muted); padding-left: 18px; margin: 0; }
  .bullet-list li + li{ margin-top: 6px; }
  .muted{ color: var(--muted); }
  
  /* Tags */
  .tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .tags span{
    font-size: 0.78rem; padding: 5px 10px; border-radius: 999px;
    background: rgba(15,23,42,0.85); border: 1px solid var(--border);
  }
  
  /* Stacked actions */
  .stacked-actions{ display: grid; gap: 10px; }
  
  /* --------------------------------------------------
     EXPERIENCE
  -------------------------------------------------- */
  .experience + .experience{ border-top: 1px solid rgba(148,163,184,0.25); margin-top: 14px; padding-top: 14px; }
  .xp-header{ display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; margin-bottom: 4px; }
  .logo-badge{
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(46,160,255,0.18), rgba(46,160,255,0.05));
    border: 1px solid rgba(46,160,255,0.35); color: #cfe9ff; font-weight: 700;
  }
  .logo-badge.small{ width: 36px; height: 36px; border-radius: 10px; font-size: .85rem; }
  .xp-role{ margin: 0; font-size: 1.05rem; }
  .xp-company{ margin: 2px 0; color: var(--text); opacity: 0.9; }
  .xp-meta{ margin: 0; color: var(--muted); font-size: 0.9rem; }
  .xp-points{
    margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.95rem;
  }
  .xp-points li + li{ margin-top: 4px; }
  
  /* --------------------------------------------------
     FEATURED
  -------------------------------------------------- */
  .featured-grid{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px; margin-top: 6px;
  }
  .feat{
    display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center;
    background: rgba(12, 18, 36, 0.65);
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: 14px; padding: 12px;
  }
  .feat-title{ margin: 0 0 4px 0; font-size: 1rem; }
  .feat-thumb{
    width: 96px; height: 64px; border-radius: 10px;
    background:
      radial-gradient(200px 100px at 20% -30%, rgba(46,160,255,0.3), transparent 60%),
      linear-gradient(135deg, #0f1b33, #0b1327);
    border: 1px solid rgba(148,163,184,0.25);
  }
  
  /* --------------------------------------------------
     EDUCATION
  -------------------------------------------------- */
  .education{ display: grid; gap: 12px; }
  .edu-item{ display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; }
  .edu-title{ margin: 0; font-size: 1rem; }
  
  /* --------------------------------------------------
     CTA
  -------------------------------------------------- */
  .card.cta .cta-actions{ display: flex; gap: 10px; margin-top: 10px; }
  
  /* --------------------------------------------------
     FOOTER
  -------------------------------------------------- */
  .site-footer{
    border-top: 1px solid rgba(15, 23, 42, 0.8);
    background: #0a0f1d; padding: 18px 0 24px; color: var(--muted);
  }
  .footer-inner{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  
  /* --------------------------------------------------
     RESPONSIVE
  -------------------------------------------------- */
  @media (max-width: 980px){
    .grid-2{ grid-template-columns: 1fr; }
    .left-col{ position: static; }
    .profile-shell{ grid-template-columns: 96px 1fr; transform: translateY(-46px); }
    .avatar{ width: 96px; height: 96px; }
    .name{ font-size: 1.6rem; }
  }
  
  @media (max-width: 720px){
    .top-bar{ padding: 0 16px; height: auto; gap: 10px; flex-wrap: wrap; }
    .main-nav{ display: none; }
    .profile-shell{ gap: 14px; }
    .quick-actions{ flex-wrap: wrap; }
    .feat{ grid-template-columns: 1fr; }
  }