:root{
      --bg:#071017; /* deep navy */
      --card:#0b1a22;
      --muted:#9fb3bf;
      --neon:#00ffd5; /* teal neon */
      --accent:#b400ff; /* magenta accent for small highlights */
      --glass: rgba(255,255,255,0.03);
      --glass-2: rgba(255,255,255,0.02);
      --radius:16px;
      --container:1100px;
      --mono: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;padding:0;
      font-family:var(--mono);
      background:radial-gradient(1200px 600px at 10% 10%, rgba(0,255,213,0.03), transparent),
                 radial-gradient(800px 400px at 95% 90%, rgba(180,0,255,0.03), transparent),
                 var(--bg);
      color:#e6f7f5;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
      overflow: hidden; /* Prevent body scroll */
    }

    /* Full-screen sections */
    .fullscreen-section {
      height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .section-content {
      max-width: var(--container);
      width: 100%;
      padding: 40px 20px;
      margin: 0 auto;
    }

    .container{max-width:var(--container);margin:0 auto;padding:40px 20px}

    /* NAV */
    .topbar{position:fixed;left:0;right:0;top:14px;z-index:60;display:flex;justify-content:center}
    .nav-inner{width:100%;max-width:var(--container);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:20px;padding-left:18px;padding-right:18px;backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(2,6,10,0.6)}
    .brand{display:flex;align-items:center;gap:12px}
    .brand .logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--neon),var(--accent));display:grid;place-items:center;font-weight:800;color:#021;box-shadow:0 6px 18px rgba(0,255,213,0.08), inset 0 -4px 18px rgba(0,0,0,0.3)}
    .brand h1{font-size:16px;margin:0}
    .nav-links{display:flex;gap:12px;align-items:center}
    .nav-links a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:600;font-size:13px}
    .nav-links a:hover{color:var(--neon);background:var(--glass)}
    .cta{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:var(--neon);font-weight:700}

    /* HERO - MODIFIED LAYOUT WITH MOBILE FIX */
    .hero-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      height: 100%;
      min-height: 100vh;
      padding: 80px 0 40px; /* Added padding to account for fixed header */
    }

    .hero-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hero-image-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }

    .hero-avatar {
      width: 280px;
      height: 280px;
      border-radius: 20px;
      background: linear-gradient(135deg, #071a1b, #061015);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(0,255,213,0.2);
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
      position: relative;
      overflow: hidden;
    }

    .hero-avatar::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, var(--neon), var(--accent), var(--neon));
      border-radius: 22px;
      z-index: -1;
      animation: rotate 3s linear infinite;
    }

    .hero-avatar img {
      width: 270px;
      height: 270px;
      border-radius: 18px;
      object-fit: cover;
    }

    .hero-meta {
      text-align: center;
    }

    .hero-meta h3 {
      margin: 0;
      font-size: 24px;
      color: #e6f7f5;
    }

    .hero-meta p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 16px;
    }

    .intro h2{font-size:42px;margin:0 0 12px;line-height:1.02}
    .intro .tag{color:var(--neon);font-weight:700;letter-spacing:0.6px;font-size:20px;margin-bottom:20px}
    .intro p{color:var(--muted);max-width:100%;font-size:16px;line-height:1.6;margin-bottom:30px}

    .hero-actions {
      display: flex;
      gap: 15px;
      align-items: center;
      margin-top: 10px;
    }

    /* PROJECTS - REMOVED GRADIENTS */
    .projects{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{
      background:var(--card); /* Solid color instead of gradient */
      padding:18px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,0.03);
      transition:transform .32s ease, box-shadow .32s ease
    }
    .card:hover{transform:translateY(-8px);box-shadow:0 18px 48px rgba(0,0,0,0.6)}
    .card h4{margin:0 0 6px}
    .card p{margin:0;color:var(--muted);font-size:13px}
    .card .tags{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
    .tag-pill{font-size:12px;padding:6px 8px;border-radius:8px;background:linear-gradient(90deg, rgba(0,255,213,0.06), rgba(180,0,255,0.03));color:var(--neon);border:1px solid rgba(0,255,213,0.06)}
    .card .actions{display:flex;gap:10px;margin-top:12px}
    .btn{padding:10px 20px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);cursor:pointer;font-weight:600;transition:all 0.3s ease}
    .btn.primary{border-color:var(--neon);color:var(--neon);font-weight:700}
    .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,255,213,0.2)}

    /* GitHub button with icon */
    .btn.github {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
    }

    .github-icon {
      width: 16px;
      height: 16px;
      filter: invert(1);
    }

    /* ENHANCED QUICK STATS */
    .quick-stats-enhanced {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 30px;
    }

    .stat-card {
      background: linear-gradient(135deg, rgba(11, 26, 34, 0.8), rgba(7, 21, 26, 0.9));
      padding: 25px 15px;
      border-radius: 16px;
      border: 1px solid rgba(0, 255, 213, 0.1);
      text-align: center;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(0, 255, 213, 0.1), transparent);
      transition: left 0.5s ease;
    }

    .stat-card:hover::before {
      left: 100%;
    }

    .stat-card:hover {
      transform: translateY(-5px);
      border-color: rgba(0, 255, 213, 0.3);
      box-shadow: 0 10px 30px rgba(0, 255, 213, 0.15);
    }

    .stat-icon {
      font-size: 32px;
      margin-bottom: 12px;
      filter: drop-shadow(0 0 10px rgba(0, 255, 213, 0.3));
    }

    .stat-number {
      font-size: 28px;
      font-weight: 800;
      color: var(--neon);
      margin-bottom: 8px;
      text-shadow: 0 0 20px rgba(0, 255, 213, 0.5);
    }

    .stat-label {
      color: #e6f7f5;
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 5px;
    }

    .stat-subtitle {
      color: var(--muted);
      font-size: 12px;
    }

    /* SKILLS ORBS */
    .skills-section {
      margin-top: 36px;
      text-align: center;
    }

    .orbs-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
      padding: 20px;
    }
    
    .orb {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      margin: 0 auto;
    }
    
    .orb-inner {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: linear-gradient(180deg, var(--card), #07151a);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
      color: #e6f7f5;
      z-index: 2;
      border: 1px solid rgba(255,255,255,0.05);
    }
    
    .orb::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border-radius: 50%;
      background: conic-gradient(from 0deg, var(--neon), var(--accent), var(--neon));
      animation: rotate 3s linear infinite;
      z-index: 1;
    }
    
    .orb:hover {
      transform: scale(1.1);
    }
    
    .orb:hover::before {
      animation-duration: 1s;
    }
    
    .tooltip {
      position: absolute;
      bottom: -100px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(11, 26, 34, 0.95);
      padding: 15px;
      border-radius: 10px;
      border: 1px solid rgba(0,255,213,0.3);
      color: #e6f7f5;
      font-size: 12px;
      width: 200px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 10;
      backdrop-filter: blur(10px);
    }
    
    .orb.active .tooltip {
      opacity: 1;
      visibility: visible;
      bottom: -90px;
    }
    
    .tooltip-title {
      color: var(--neon);
      font-weight: 600;
      margin-bottom: 5px;
      font-size: 14px;
    }
    
    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .skills-detail {
      background: rgba(255,255,255,0.02);
      padding: 30px;
      border-radius: 15px;
      border: 1px solid rgba(0,255,213,0.1);
      min-height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }
    
    .detail-content {
      text-align: center;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }
    
    .highlight {
      color: var(--neon);
      font-weight: 600;
    }

    /* CONTACT - ENHANCED FORM BORDER */
    .contact{
      margin-top:24px;
      background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
      padding:16px;
      border-radius:12px;
      border: 1px solid rgba(0,255,213,0.2);
      box-shadow: 0 0 20px rgba(0,255,213,0.1);
      transition: all 0.3s ease;
    }

    .contact:hover {
      border-color: rgba(0,255,213,0.4);
      box-shadow: 0 0 30px rgba(0,255,213,0.15);
    }

    .form-row{display:flex;gap:8px}
    input,textarea{
      background:transparent;
      border:1px solid rgba(255,255,255,0.08);
      padding:10px;
      border-radius:10px;
      color:var(--muted);
      width:100%;
      transition: all 0.3s ease;
    }
    
    input:focus, textarea:focus {
      outline: none;
      border-color: rgba(0,255,213,0.4);
      box-shadow: 0 0 10px rgba(0,255,213,0.1);
    }
    
    textarea{min-height:110px}
    .send{background:linear-gradient(90deg,var(--neon),var(--accent));border:none;color:#021;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}

    /* FOOTER */
    footer{margin-top:40px;text-align:center;color:var(--muted);font-size:13px}

    /* RESPONSIVE - IMPROVED MOBILE LAYOUT */
    @media (max-width:980px){
      .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        padding: 120px 0 40px; /* Increased from 100px to 120px */
        min-height: auto;
        height: auto;
      }
      
      .hero-image-section {
        order: -1;
      }
      
      .hero-avatar {
        width: 220px;
        height: 220px;
        margin-top: 20px;
      }
      
      .hero-avatar img {
        width: 210px;
        height: 210px;
      }
      
      .projects{grid-template-columns:repeat(2,1fr)}
      .quick-stats-enhanced {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }
    }
    
    @media (max-width:768px) {
      .container {
        padding: 20px 15px;
      }
      
      .hero-container {
        padding: 110px 0 30px; /* Increased from 90px to 110px */
      }
      
      .intro h2 {
        font-size: 32px;
      }
      
      .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }
      
      .hero-actions .btn {
        text-align: center;
        width: 100%;
      }
      
      .orbs-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
      
      .orb {
        width: 100px;
        height: 100px;
      }
      
      .orb-inner {
        width: 80px;
        height: 80px;
        font-size: 14px;
      }
      
      .stat-card {
        padding: 20px 10px;
      }
      
      .stat-number {
        font-size: 24px;
      }
      
      .form-row {
        flex-direction: column;
        gap: 12px;
      }
    }
    
    @media (max-width:640px){
      .nav-links{
        display: flex;
        gap: 8px;
      }
      .nav-links a{
        padding: 6px 8px;
        font-size: 12px;
      }
      .cta{
        padding: 6px 8px;
        font-size: 11px;
      }
      .brand h1{
        display: block;
        font-size: 14px;
      }
      .projects{grid-template-columns:1fr}
      .intro p{max-width:100%}
      
      .orbs-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }
      
      .orb {
        width: 90px;
        height: 90px;
      }
      
      .orb-inner {
        width: 70px;
        height: 70px;
        font-size: 12px;
      }
      
      .tooltip {
        width: 160px;
        font-size: 11px;
      }
      
      .quick-stats-enhanced {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .hero-avatar {
        width: 180px;
        height: 180px;
        margin-top: 10px;
      }
      
      .hero-avatar img {
        width: 170px;
        height: 170px;
      }
      
      .hero-container {
        padding: 100px 0 30px; /* Increased from 80px to 100px */
      }
    }
    
    @media (max-width: 480px) {
      .intro h2 {
        font-size: 28px;
      }
      
      .tag-pill {
        font-size: 11px;
        padding: 4px 6px;
      }
      
      .card .actions {
        flex-direction: column;
      }
      
      .card .actions .btn {
        text-align: center;
      }
      
      .container {
        padding: 15px 10px;
      }
      
      .hero-container {
        padding: 90px 0 20px; /* Increased from 70px to 90px */
        gap: 30px;
      }
      
      .orbs-container {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      
      .quick-stats-enhanced {
        grid-template-columns: 1fr;
      }
      
      .hero-avatar {
        width: 160px;
        height: 160px;
        margin-top: 5px;
      }
      
      .hero-avatar img {
        width: 150px;
        height: 150px;
      }
      
      .hero-meta h3 {
        font-size: 20px;
      }
      
      .hero-meta p {
        font-size: 14px;
      }
    }

    /* small utilities */
    .muted{color:var(--muted)}
    .center{display:grid;place-items:center}

    /* Modal */
    .modal{
      position:fixed;
      inset:0;
      display:grid;
      place-items:center;
      background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));
      visibility:hidden;
      opacity:0;
      transition:all .2s; 
      z-index:100;
      padding: 20px;
      box-sizing: border-box;
    }
    .modal.show{visibility:visible;opacity:1}
    .modal-card{
      width: 100%;
      max-width: 720px;
      background:linear-gradient(180deg,#071a1f,#051014);
      padding: 20px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,0.04);
      max-height: 90vh;
      overflow-y: auto;
      box-sizing: border-box;
    }

    /* Contact Modal */
    .contact-modal .modal-card{
      max-width: 500px;
      width: 90vw;
    }

    /* micro animations */
    .glow{animation:neon 2.4s ease-in-out infinite}
    @keyframes neon{0%{filter:drop-shadow(0 0 6px rgba(0,255,213,0.12))}50%{filter:drop-shadow(0 0 18px rgba(180,0,255,0.12))}100%{filter:drop-shadow(0 0 6px rgba(0,255,213,0.12))}}

    /* Social Links */
    .social-links{display:flex;gap:12px;align-items:center}
    .social-link{color:var(--neon);text-decoration:none;font-weight:600;transition:all 0.3s ease}
    .social-link:hover{color:var(--accent);text-decoration:underline}

    /* Form Status Messages */
    .form-status{display:none;padding:10px;border-radius:8px;margin-top:10px;text-align:center}
    .form-status.success{display:block;background:rgba(0,255,213,0.1);color:var(--neon);border:1px solid var(--neon)}
    .form-status.error{display:block;background:rgba(255,0,0,0.1);color:#ff6b6b;border:1px solid #ff6b6b}

    /* Scroll navigation dots */
    .scroll-dots {
      position: fixed;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 50;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .scroll-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--muted);
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

    .scroll-dot.active {
      background: var(--neon);
      transform: scale(1.2);
    }

    .scroll-dot:hover {
      border-color: var(--neon);
    }

    /* ---------- LIGHT / SOLARIZED MODE ---------- */
body.light-mode #modalTags span {
  color: #525252; /* professional grey for light mode */
}
body.light-mode {
  color: #525252;
  --bg: #f5f5f5;          /* Soft light background */
  --card: #ffffff;        /* Card background */
  --muted: #666666;       /* Muted text */
  --accent: #525252;      /* Primary accent */
  --accent-hover: #8C7B75;/* Secondary accent / hover */
  --glass: rgba(0,0,0,0.03);
  --glass-2: rgba(0,0,0,0.05);
  color: #333333;         /* Main text */
  background: var(--bg);
}

/* Body text, headings, links */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode p {
  color: #333333;
}

body.light-mode a {
  color: var(--accent);
  text-decoration: none;
}

body.light-mode a:hover {
  color: var(--accent-hover);
}

/* Nav */
body.light-mode .nav-inner {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

body.light-mode .nav-links a {
  color: #666666;
}

body.light-mode .nav-links a:hover {
  background: var(--glass);
  color: var(--accent-hover);
}

/* Cards / sections */
body.light-mode .card,
body.light-mode .stat-card,
body.light-mode .contact,
body.light-mode .skills-detail {
  background: var(--card);
  border: 1px solid #ddd;
  color: #333333;
}

/* Buttons */
body.light-mode .btn {
  border: 1px solid #ccc;
  color: #525252;
  background: transparent;
}

body.light-mode .btn.primary {
  border-color: var(--accent);
  color: var(--accent);
}

body.light-mode .btn:hover {
  border-color: var(--accent-hover);
  color: var(--accent-hover);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

/* Inputs and form fields */
body.light-mode input,
body.light-mode textarea,
body.light-mode select {
  background: #ffffff;
  border: 1px solid #ccc;
  color: #333333;
}

body.light-mode input:focus,
body.light-mode textarea:focus,
body.light-mode select:focus {
  border: 2px solid var(--accent);
  outline: none;
  box-shadow: 0 0 6px rgba(82, 82, 82, 0.3); /* Shades of grey */
}

/* Scroll dots */
body.light-mode .scroll-dot {
  background: #999999;
  border: 2px solid transparent;
}

body.light-mode .scroll-dot.active {
  background: var(--accent);
}

body.light-mode .scroll-dot:hover {
  border-color: var(--accent-hover);
}

/* Tag pills */
body.light-mode .tag-pill {
  background: #e0e0e0;
  border: 1px solid #ccc;
  color: var(--accent);
}

body.light-mode .tag-pill:hover {
  background: #f0f0f0;
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}

/* Skill orbs */
body.light-mode .orb-inner {
  background: #f9f9f9;
  border: 1px solid #ccc;
  color: #333333;
}

body.light-mode .orb.active .orb-inner {
  border-color: var(--accent);
  color: var(--accent);
}

body.light-mode .orb:hover .orb-inner {
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}

/* Contact form */
body.light-mode .contact {
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Footer */
body.light-mode footer {
  color: #666666;
}






/* ===============================
   PROJECT MODAL (FULL REPLACEMENT)
================================ */

/* ===============================
   PROJECT MODAL – FINAL FIX
================================ */

/* Overlay */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

/* Modal box – DEFAULT (DARK MODE) */
.modal-content {
  width: 90%;
  max-width: 520px;
  padding: 24px;
  border-radius: 14px;
  background: #0f0f0f;
  color: #e5e5e5;
  border: 1px solid #1f1f1f;
  box-shadow: 0 0 22px rgba(0, 255, 213, 0.15);
}

/* Headings */
.modal-content h3 {
  color: #00ffd5;
}

/* Tags */
#modalTags span {
  display: inline-block;
  padding: 6px 10px;
  margin-right: 8px;
  border-radius: 8px;
  font-size: 0.85rem;
  background: rgba(0, 255, 213, 0.12);
  color: #00ffd5;
}

/* Buttons */
.modal-content button {
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: #00ffd5;
  color: #000;
}

/* Close icon */
.modal .close {
  float: right;
  font-size: 1.4rem;
  cursor: pointer;
  color: #e5e5e5;
  opacity: 0.7;
}

.modal .close:hover {
  opacity: 1;
}

/* ===============================
   LIGHT MODE OVERRIDES
================================ */

body.light-mode .modal {
  background: rgba(0, 0, 0, 0.4);
}

body.light-mode .modal-content {
  background: #f9f9f9;
  color: #1f1f1f;
  border: 1px solid #d4d4d4;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

body.light-mode .modal-content h3 {
  color: #2b2b2b;
}

body.light-mode #modalTags span {
  background: #eeeeee;
  color: #525252;
}

body.light-mode .modal-content button {
  background: #525252;
  color: #ffffff;
}

body.light-mode .modal .close {
  color: #333333;
}