/* =====================================================
   Om Shree Choudhary — Premium Minimalist Portfolio
   ===================================================== */

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

   /* ─── CSS Variables ─── */
   :root {
     /* Electric Indigo & Deep Slate Theme */
     --bg-base:       #0f111a;
     --bg-surface:    rgba(22, 25, 43, 0.5);
     --bg-surface-hover: rgba(30, 34, 56, 0.7);
     --text-primary:  #ffffff;
     --text-secondary:#a1a1aa;
     --text-muted:    #64748b;
     --border:        #2a2e45;
     --border-hover:  #3b405e;
     --accent:        #4f46e5;
     --accent-hover:  #4338ca;
     --accent-light:  #818cf8;
     --accent-muted:  rgba(79, 70, 229, 0.15);
     --radius-sm:     6px;
     --radius-md:     12px;
     --radius-lg:     24px;
     --transition:    all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   /* ─── Reset & Base ─── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   html {
     scroll-behavior: smooth;
     scroll-padding-top: 100px;
   }
   
   body {
     font-family: 'Inter', sans-serif;
     background: var(--bg-base);
     color: var(--text-primary);
     line-height: 1.6;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   ::selection { background: var(--text-primary); color: var(--bg-base); }
   
   /* Subtle noise texture for premium feel */
   body::after {
     content: '';
     position: fixed;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
     pointer-events: none;
     z-index: 999;
   }

   /* ─── Aurora Background ─── */
   .aurora-wrap {
     position: fixed;
     inset: 0;
     z-index: 0;
     overflow: hidden;
     background: var(--bg-base);
   }
   .aurora-blob {
     position: absolute;
     filter: blur(80px);
     opacity: 0.4;
     animation: aurora-drift 20s infinite alternate ease-in-out;
     border-radius: 50%;
   }
   .aurora-1 {
     width: 60vw; height: 60vw;
     background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
     top: -10vw; left: -10vw;
   }
   .aurora-2 {
     width: 50vw; height: 50vw;
     background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
     bottom: -10vw; right: -10vw;
     animation-delay: -5s;
   }
   .aurora-3 {
     width: 70vw; height: 70vw;
     background: radial-gradient(circle, rgba(129, 140, 248, 0.5) 0%, transparent 70%);
     top: 40%; left: 30%;
     animation-delay: -10s;
     animation-duration: 25s;
   }

   @keyframes aurora-drift {
     0% { transform: translate(0, 0) scale(1); }
     33% { transform: translate(5vw, -5vh) scale(1.1); }
     66% { transform: translate(-5vw, 5vh) scale(0.9); }
     100% { transform: translate(2vw, 2vh) scale(1); }
   }

   /* ─── Spotlight Card ─── */
   .card-spotlight {
     position: relative;
     overflow: hidden;
   }
   .card-spotlight::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: inherit;
     background: radial-gradient(
       800px circle at var(--mouse-x, -500px) var(--mouse-y, -500px),
       rgba(255, 255, 255, 0.06),
       transparent 40%
     );
     z-index: 0;
     pointer-events: none;
     transition: background 0.3s ease;
   }
   .card-spotlight > * {
     position: relative;
     z-index: 1;
   }

   /* ─── Hero Specific Animated Background ─── */
   .hero-specific-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
     overflow: hidden;
     pointer-events: none;
     mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
     -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
   }
   
   .hero-glow-anim {
     position: absolute;
     top: var(--hero-mouse-y, 50%);
     left: var(--hero-mouse-x, 50%);
     width: 80vw;
     height: 80vw;
     transform: translate(-50%, -50%);
     background: conic-gradient(
       from 0deg,
       transparent 0%,
       rgba(79, 70, 229, 0.2) 20%,
       rgba(6, 182, 212, 0.2) 40%,
       transparent 60%
     );
     filter: blur(60px);
     animation: hero-spin 15s linear infinite;
     border-radius: 50%;
   }

   @keyframes hero-spin {
     from { transform: translate(-50%, -50%) rotate(0deg); }
     to { transform: translate(-50%, -50%) rotate(360deg); }
   }

   /* ─── Hero Grid Overlay ─── */
   .hero-grid-overlay {
     position: absolute;
     inset: -40px 0 0 0; /* Extra height for animation */
     z-index: 1;
     background-size: 40px 40px;
     background-image: 
       linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
       linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
     mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 90%);
     -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 90%);
     animation: grid-pan 2s linear infinite;
   }

   @keyframes grid-pan {
     from { transform: translateY(0); }
     to { transform: translateY(40px); }
   }
   
   /* ─── Utility ─── */
   .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
   .section { padding: 64px 0; }
   
   .section-header {
     margin-bottom: 32px;
     border-bottom: 1px solid var(--border);
     padding-bottom: 16px;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
   }
   
   .section-title {
     font-size: 2rem;
     font-weight: 600;
     letter-spacing: -0.02em;
     color: var(--text-primary);
   }
   
   .section-index {
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.875rem;
     color: var(--text-muted);
   }
   
   .tag {
     display: inline-block;
     padding: 4px 12px;
     border-radius: 4px;
     font-size: 0.75rem;
     font-weight: 500;
     font-family: 'JetBrains Mono', monospace;
     background: var(--accent-muted);
     color: var(--accent-light);
     border: 1px solid rgba(79, 70, 229, 0.3);
   }
   
   /* ─── Reveal animations ─── */
   .reveal {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.8s ease, transform 0.8s ease;
   }
   .reveal.visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   /* ─────────────────────────────────────────
      NAVBAR
   ───────────────────────────────────────── */
   #navbar {
     position: fixed;
     top: 0; left: 0; right: 0;
     z-index: 100;
     padding: 24px 0;
     background: transparent;
     transition: var(--transition);
   }
   #navbar.scrolled {
     padding: 16px 0;
     background: rgba(15, 17, 26, 0.85);
     backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--border);
   }
   .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   .nav-logo {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 1.125rem;
     font-weight: 700;
     color: var(--text-primary);
     text-decoration: none;
     letter-spacing: -0.02em;
   }
   .nav-links {
     display: flex;
     align-items: center;
     gap: 32px;
     list-style: none;
   }
   .nav-links a {
     text-decoration: none;
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--text-secondary);
     transition: var(--transition);
   }
   .nav-links a:hover { color: var(--accent-light); }
   
   .nav-cta {
     padding: 8px 16px;
     background: var(--accent);
     color: #fff !important;
     border-radius: var(--radius-sm);
     font-weight: 600 !important;
   }
   .nav-cta:hover {
     background: var(--accent-hover);
     transform: translateY(-1px);
   }

   .nav-hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 6px;
     background: none;
     border: none;
   }
   .nav-hamburger span {
     display: block;
     width: 22px; height: 2px;
     background: var(--text-primary);
     border-radius: 2px;
     transition: var(--transition);
   }
   .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
   .nav-hamburger.open span:nth-child(2) { opacity: 0; }
   .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
   
   /* ─────────────────────────────────────────
      HERO
   ───────────────────────────────────────── */
   #hero {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding-top: 80px;
     overflow: hidden;
   }
   .hero-inner {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: 1.5fr 1fr;
     gap: 64px;
     align-items: center;
   }
   
   .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 12px;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     font-size: 0.75rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--text-secondary);
     margin-bottom: 32px;
   }
   .hero-badge .status-dot {
     width: 6px; height: 6px;
     border-radius: 50%;
     background: #06b6d4;
     box-shadow: 0 0 8px #06b6d4;
   }
   
   .hero-name {
     font-size: clamp(3rem, 5vw, 4.5rem);
     font-weight: 600;
     line-height: 1.1;
     letter-spacing: -0.04em;
     margin-bottom: 24px;
     color: var(--text-primary);
   }
   
   .hero-desc {
     font-size: 1.125rem;
     color: var(--text-secondary);
     max-width: 480px;
     line-height: 1.6;
     margin-bottom: 40px;
   }
   
   .hero-actions {
     display: flex;
     gap: 16px;
   }
   
   .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     border-radius: var(--radius-sm);
     font-size: 0.875rem;
     font-weight: 500;
     text-decoration: none;
     transition: var(--transition);
     cursor: pointer;
   }
   
   .btn-primary {
     background: var(--accent);
     color: #fff;
     border: 1px solid var(--accent);
   }
   .btn-primary:hover {
     background: var(--accent-hover);
     color: #fff;
   }
   
   .btn-secondary {
     background: transparent;
     color: var(--text-primary);
     border: 1px solid var(--border);
   }
   .btn-secondary:hover {
     border-color: var(--accent-light);
     color: var(--accent-light);
   }
   
   /* Avatar - Clean & Minimal */
   .hero-avatar-wrap {
     position: relative;
     width: 100%;
     max-width: 360px;
     margin-left: auto;
   }
   .hero-avatar-inner {
     border-radius: var(--radius-lg);
     overflow: hidden;
     border: 1px solid var(--border);
     background: var(--bg-surface);
     aspect-ratio: 4/5;
   }
   .hero-avatar-inner img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: grayscale(20%) contrast(1.1);
     transition: filter 0.5s ease;
   }
   .hero-avatar-inner:hover img {
     filter: grayscale(0%) contrast(1);
   }
   
   /* ─────────────────────────────────────────
      BENTO GRID (ABOUT & SKILLS)
   ───────────────────────────────────────── */
   .bento-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
   }
   
   .bento-item {
     background: var(--bg-surface);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     border: 1px solid var(--border);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: var(--radius-md);
     padding: 32px;
     transition: var(--transition);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   }
   .bento-item:hover {
     border-color: rgba(255, 255, 255, 0.15);
     transform: translateY(-4px);
     box-shadow: 0 12px 40px rgba(79, 70, 229, 0.15);
   }
   
   .bento-about { grid-column: span 2; }
   .bento-edu { grid-column: span 1; }
   .bento-skills { grid-column: span 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px 32px;}
   
   .bento-title {
     font-size: 0.875rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-bottom: 24px;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .about-text {
     font-size: 1.125rem;
     line-height: 1.7;
     color: var(--text-secondary);
   }
   .about-text strong { color: var(--text-primary); font-weight: 500; }
   
   .edu-details h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }
   .edu-details p { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 8px; line-height: 1.4; }
   .edu-gpa { 
     font-family: 'JetBrains Mono', monospace; 
     font-size: 1.5rem; 
     background: linear-gradient(135deg, #fff, var(--accent-light));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 700;
   }
   
   .skill-col h4 {
     font-size: 0.875rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 16px;
   }
   .skill-list {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
   }
   .skill-list li {
     display: inline-block;
   }
   
   /* ─────────────────────────────────────────
      EXPERIENCE
   ───────────────────────────────────────── */
   .exp-card {
     padding: 40px;
     background: var(--bg-surface);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     border: 1px solid var(--border);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: var(--radius-md);
     display: grid;
     grid-template-columns: 1fr 3fr;
     gap: 40px;
     transition: var(--transition);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   }
   .exp-card:hover {
     border-color: rgba(255, 255, 255, 0.15);
     transform: translateY(-4px);
     box-shadow: 0 12px 40px rgba(79, 70, 229, 0.15);
   }
   
   .exp-meta {
     color: var(--text-secondary);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.875rem;
   }
   .exp-role {
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 4px;
   }
   .exp-company {
     font-size: 1rem;
     color: var(--text-muted);
     margin-bottom: 24px;
   }
   .exp-details {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
   .exp-details li {
     color: var(--text-secondary);
     font-size: 1rem;
     line-height: 1.6;
     position: relative;
     padding-left: 20px;
   }
   .exp-details li::before {
     content: '';
     position: absolute;
     left: 0; top: 10px;
     width: 4px; height: 4px;
     border-radius: 50%;
     background: var(--text-muted);
   }
   
   /* ─────────────────────────────────────────
      PROJECTS
   ───────────────────────────────────────── */
   .projects-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
   }
   
   .project-card {
     background: var(--bg-surface);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     border: 1px solid var(--border);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: var(--radius-md);
     padding: 40px;
     display: flex;
     flex-direction: column;
     transition: var(--transition);
     cursor: pointer;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   }
   .project-card:hover {
     border-color: rgba(255, 255, 255, 0.15);
     background: var(--bg-surface-hover);
     transform: translateY(-4px);
     box-shadow: 0 12px 40px rgba(79, 70, 229, 0.15);
   }
   
   .proj-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 24px;
   }
   .proj-title {
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 8px;
   }
   .proj-desc {
     color: var(--text-secondary);
     font-size: 0.875rem;
     line-height: 1.6;
     margin-bottom: 32px;
     flex-grow: 1;
   }
   .proj-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 24px;
   }
   .proj-icon {
     color: var(--text-muted);
     font-size: 1.25rem;
   }
   
   /* ─── MODAL ─── */
   .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(4px);
     z-index: 200;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
   }
   .modal-overlay.open {
     opacity: 1;
     pointer-events: all;
   }
   .modal-box {
     background: var(--bg-base);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     width: 100%;
     max-width: 600px;
     max-height: 85vh;
     overflow-y: auto;
     padding: 48px;
     position: relative;
     transform: translateY(10px);
     transition: transform 0.3s ease;
   }
   .modal-overlay.open .modal-box { transform: translateY(0); }
   .modal-close {
     position: absolute;
     top: 24px; right: 24px;
     background: none; border: none;
     color: var(--text-muted);
     font-size: 1.25rem;
     cursor: pointer;
     transition: color 0.2s;
   }
   .modal-close:hover { color: var(--text-primary); }
   
   .modal-body h3 { font-size: 1.5rem; margin-bottom: 16px; }
   .modal-body p { color: var(--text-secondary); margin-bottom: 24px; }
   .modal-body ul { margin-bottom: 32px; padding-left: 20px; color: var(--text-secondary); }
   .modal-body li { margin-bottom: 8px; }
   
   /* ─────────────────────────────────────────
      CONTACT & FOOTER
   ───────────────────────────────────────── */
   .contact-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
   }
   .contact-text {
     font-size: 1.125rem;
     color: var(--text-secondary);
     margin-bottom: 32px;
   }
   .contact-links {
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   .contact-link {
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--text-primary);
     text-decoration: none;
     font-size: 0.875rem;
     padding: 16px;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     transition: var(--transition);
   }
   .contact-link:hover {
     border-color: var(--border-hover);
     background: var(--bg-surface);
   }
   
   .form-group { margin-bottom: 24px; }
   .form-group label {
     display: block;
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--text-muted);
     margin-bottom: 8px;
   }
   .form-group input, .form-group textarea {
     width: 100%;
     background: var(--bg-surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 12px 16px;
     color: var(--text-primary);
     font-family: inherit;
     transition: var(--transition);
   }
   .form-group input:focus, .form-group textarea:focus {
     outline: none;
     border-color: var(--text-secondary);
   }
   .form-group textarea { min-height: 120px; resize: vertical; }
   
   footer {
     border-top: 1px solid var(--border);
     padding: 40px 0;
     text-align: center;
     color: var(--text-muted);
     font-size: 0.875rem;
   }
   
   /* ─────────────────────────────────────────
      RESPONSIVE
   ───────────────────────────────────────── */
   @media (max-width: 960px) {
     .hero-inner { grid-template-columns: 1fr; text-align: center; }
     .hero-avatar-wrap { order: -1; max-width: 280px; margin: 0 auto; }
     .hero-desc { margin: 0 auto 40px; }
     .hero-actions { justify-content: center; }
     
     .bento-grid { grid-template-columns: 1fr; }
     .bento-about, .bento-edu, .bento-skills { grid-column: span 1; }
     .bento-skills { grid-template-columns: 1fr 1fr; }
     
     .exp-card { grid-template-columns: 1fr; gap: 16px; }
     .projects-grid { grid-template-columns: 1fr; }
     .contact-layout { grid-template-columns: 1fr; }
   }
   
   @media (max-width: 640px) {
     .nav-hamburger { display: flex; }
     .nav-links {
       display: none;
       flex-direction: column;
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       background: var(--bg-surface);
       padding: 24px;
       border-bottom: 1px solid var(--border);
       box-shadow: 0 10px 30px rgba(0,0,0,0.5);
     }
     .nav-links.open { display: flex; }
     .section { padding: 80px 0; }
     .modal-box { padding: 32px 24px; margin: 16px; }
   }