:root {
    --accent: #00ffdc;
    --accent-blue: #4079ff;
    --bg-dark: #060010;
    --bg-card: rgba(15,23,42,0.85);
  }
  * { box-sizing: border-box; }

  /* ---- SCROLLBAR ---- */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: #0f172a; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #00ffdc, #4079ff); border-radius: 3px; }

  /* ---- FONTS ---- */
  body { font-family: 'Space Grotesk', sans-serif; transition: background .3s, color .3s; }
  .dark body { background: var(--bg-dark); color: #fff; }

  /* ---- GLOW ---- */
  .glow-cyan { box-shadow: 0 0 24px 4px rgba(0,255,220,0.35); }
  .glow-cyan-sm { box-shadow: 0 0 12px 2px rgba(0,255,220,0.25); }
  .text-cyan-glow { text-shadow: 2px 2px 0 #000754, 4px 4px 0 #4079ff, 0 4px 12px #40ffaa, 0 1px 0 #00ffdc; }

  /* ---- GRADIENT ANIMATED NAV BORDER ---- */
  @keyframes gradMove { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
  .nav-gradient-border {
    background: linear-gradient(90deg,#00fff0,#00ffdc,#4079ff,#40ffaa,#00fff0);
    background-size: 300% 100%;
    animation: gradMove 6s linear infinite;
  }

  /* ---- TYPEWRITER ---- */
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
  .blink { animation: blink 1s step-end infinite; }

  /* ---- VELOCITY SCROLL ---- */
  @keyframes scrollLeft { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  @keyframes scrollRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
  .velocity-left { animation: scrollLeft 12s linear infinite; white-space: nowrap; }
  .velocity-right { animation: scrollRight 12s linear infinite; white-space: nowrap; }

  /* ---- FADE IN UP ---- */
  @keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
  .fade-in-up { animation: fadeInUp 0.7s ease forwards; }
  .delay-1 { animation-delay: 0.1s; }
  .delay-2 { animation-delay: 0.25s; }
  .delay-3 { animation-delay: 0.4s; }
  .delay-4 { animation-delay: 0.55s; }
  .delay-5 { animation-delay: 0.7s; }
  .delay-6 { animation-delay: 0.85s; }
  .delay-7 { animation-delay: 1.0s; }
  [class*="fade-in-up"] { opacity: 0; }

  /* ---- ANIMATED GRADIENT TEXT BADGE ---- */
  @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
  .shimmer-badge {
    background: linear-gradient(90deg, #00ffdc, #4079ff, #40ffaa, #00ffdc);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
  }
  .shimmer-border {
    background: linear-gradient(90deg, #00ffdc, #4079ff, #40ffaa, #00ffdc);
    background-size: 200% auto;
    animation: shimmer 3s linear infinite;
  }

  /* ---- CARD HOVER ---- */
  .project-card { transition: all .3s ease; }
  .project-card:hover { transform: translateY(-4px); }
  .dark .project-card:hover { box-shadow: 0 0 24px 0px rgba(0,255,220,.3); }

  /* ---- NAV CLIP ---- */
  .nav-clip { clip-path: polygon(0 0, 100% 0, 100% 85%, 68% 85%, 64% 100%, 36% 100%, 32% 85%, 0 85%); }

  /* ---- PRELOADER ---- */
  #preloader {
    position:fixed; inset:0; z-index:9999;
    background: linear-gradient(120deg, #060010 0%, #0a1a2f 40%, #1b2b4b 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition: opacity .5s, visibility .5s;
  }
  #preloader.hide { opacity:0; visibility:hidden; }
  .loader-bar {
    width: 200px; height: 4px;
    background: rgba(255,255,255,.1);
    border-radius: 2px; overflow: hidden;
    margin-top: 24px;
  }
  .loader-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ffdc, #4079ff);
    border-radius: 2px;
    animation: loadBar 1.8s ease forwards;
  }
  @keyframes loadBar { from{width:0} to{width:100%} }

  /* ---- MOVING BORDER BUTTON ---- */
  .moving-btn {
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    padding: 2px;
    background: linear-gradient(90deg, #00ffdc, #4079ff, #40ffaa, #00ffdc);
    background-size: 300% 100%;
    animation: gradMove 3s linear infinite;
  }
  .moving-btn-inner {
    background: inherit;
    border-radius: calc(.75rem - 2px);
    padding: 10px 22px;
    display: flex; align-items: center; gap: 8px;
    font-weight: 600;
    font-size: .9rem;
  }
  .dark .moving-btn-inner { background: #0f172a; color: #fff; }
  .light .moving-btn-inner { background: #fff; color: #0f172a; }

  /* ---- MODAL ---- */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    opacity: 0; visibility: hidden; transition: all .3s;
  }
  .modal-overlay.active { opacity: 1; visibility: visible; }
  .modal-box {
    background: #0f172a;
    border: 1px solid rgba(0,255,220,.2);
    border-radius: 1.5rem;
    max-width: 900px; width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(.95) translateY(20px);
    transition: transform .3s;
  }
  .modal-overlay.active .modal-box { transform: scale(1) translateY(0); }

  /* Light mode overrides */
  .light body, html:not(.dark) body { background: #f8fafc; color: #0f172a; }
  html:not(.dark) .nav-gradient-border { background: linear-gradient(90deg,#0891b2,#06b6d4,#0891b2,#06b6d4,#0891b2); background-size:300% 100%; animation: gradMove 6s linear infinite; }
  html:not(.dark) #navbar { background: rgba(255,255,255,.95); border-bottom: 1px solid #e2e8f0; }
  html:not(.dark) .nav-clip-wrapper { background: #fff; }
  html:not(.dark) .text-cyan-glow { text-shadow: none; }
  html:not(.dark) .shimmer-badge { background: linear-gradient(90deg,#0891b2,#06b6d4,#0891b2); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation: shimmer 3s linear infinite; }
  html:not(.dark) .gradient-heading { -webkit-text-fill-color: #0f172a; }
  html:not(.dark) .modal-box { background: #fff; color: #0f172a; }

  /* Tab active indicator */
  .tab-btn.active { background: rgba(0,255,220,.08); }
  .dark .tab-btn.active { background: rgba(0,255,220,.1); color: #fff; }
  .tab-btn { transition: all .2s; }

  /* Section reveal on scroll */
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* Smooth appear */
  @keyframes popIn { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
  .pop-in { animation: popIn .5s ease forwards; }

  /* Hero gradient text */
  .hero-title {
    color: #00ffdc;
    text-shadow: 2px 2px 0 #000754, 4px 4px 0 #4079ff, 0 4px 12px #40ffaa;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
  }
  html:not(.dark) .hero-title { color: #0f172a; text-shadow: none; }

  /* Stats card */
  .stat-card { transition: all .3s; cursor: pointer; }
  .stat-card:hover { border-color: rgba(0,255,220,.5); }
  .dark .stat-card:hover { box-shadow: 0 0 24px 0 rgba(0,255,220,.2); }

  /* Social link */
  .social-link-btn { transition: all .3s; }
  .social-link-btn:hover { transform: translateX(8px); }

  /* Contact form */
  .form-input {
    width:100%; padding: 14px 14px 14px 44px;
    background: rgba(30,41,59,.5);
    border: 1px solid rgba(100,116,139,.4);
    border-radius: .75rem;
    color: #fff;
    font-family: 'Cascadia Code', monospace;
    font-size: .875rem;
    transition: border .2s, box-shadow .2s;
    outline: none;
  }
  .form-input:focus { border-color: #00ffdc; box-shadow: 0 0 0 3px rgba(0,255,220,.15); }
  .form-input::placeholder { color: #94a3b8; }
  html:not(.dark) .form-input { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; }
  html:not(.dark) .form-input::placeholder { color: #94a3b8; }
  html:not(.dark) .form-input:focus { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,.15); }

  textarea.form-input { padding: 14px 14px 14px 44px; resize: none; }

  /* Comment card */
  .comment-card { transition: border-color .2s; }
  .comment-card:hover { border-color: rgba(0,255,220,.2); }

  /* Skill badge */
  .skill-badge { transition: all .2s; }
  .skill-badge:hover { background: rgba(0,255,220,.15); border-color: rgba(0,255,220,.4); color: #00ffdc; }
  html:not(.dark) .skill-badge:hover { background: rgba(8,145,178,.1); border-color: rgba(8,145,178,.4); color: #0891b2; }

  /* Tech stack icon hover */
  .tech-card { transition: all .25s; }
  .tech-card:hover { transform: translateY(-3px); }
  .dark .tech-card:hover { border-color: rgba(0,255,220,.3); box-shadow: 0 0 16px rgba(0,255,220,.1); }

  /* Gradient divider */
  .divider-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,255,220,.3), transparent); }

  /* Mobile menu */
  #mobile-menu {
    position: fixed; inset: 0; z-index: 998;
    background: rgba(6,0,16,.97);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 2rem;
    opacity: 0; visibility: hidden;
    transition: all .35s cubic-bezier(.4,0,.2,1);
  }
  html:not(.dark) #mobile-menu { background: rgba(248,250,252,.97); }
  #mobile-menu.open { opacity: 1; visibility: visible; }
  .mobile-nav-item { opacity: 0; transform: translateY(20px); transition: all .3s; }
  #mobile-menu.open .mobile-nav-item { opacity: 1; transform: translateY(0); }
  #mobile-menu.open .mobile-nav-item:nth-child(1) { transition-delay: .05s; }
  #mobile-menu.open .mobile-nav-item:nth-child(2) { transition-delay: .1s; }
  #mobile-menu.open .mobile-nav-item:nth-child(3) { transition-delay: .15s; }
  #mobile-menu.open .mobile-nav-item:nth-child(4) { transition-delay: .2s; }
  #mobile-menu.open .mobile-nav-item:nth-child(5) { transition-delay: .25s; }

  /* Floating theme toggle */
  #theme-btn { transition: all .3s; }
  #theme-btn:hover { transform: scale(1.1); }

  /* Cert card */
  .cert-card { transition: all .3s; cursor: pointer; }
  .cert-card:hover { transform: translateY(-4px); }
  .dark .cert-card:hover { box-shadow: 0 0 20px rgba(0,255,220,.2); }

  /* Gradient text heading */
  .gradient-text {
    background: linear-gradient(135deg, #00ffdc, #4079ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  html:not(.dark) .gradient-text { background: linear-gradient(135deg,#0891b2,#1d4ed8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

  /* About section full-width */
  .full-bleed { width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }

  /* Scroll hint */
  @keyframes bounce2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
  .bounce2 { animation: bounce2 1.5s ease-in-out infinite; }

  /* Notification toast */
  #toast {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
    background: linear-gradient(135deg, #065f46, #0f172a);
    border: 1px solid rgba(0,255,220,.3);
    color: #fff;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: .875rem;
    transform: translateY(80px);
    opacity: 0;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    max-width: 320px;
  }
  #toast.show { transform: translateY(0); opacity: 1; }

  /* Ensure inputs look right in dark/light */
  input, textarea { background: transparent; }

  /* Hamburger icon animation */
  .ham-line { display:block; width:24px; height:2px; background:currentColor; border-radius:2px; transition: all .3s; transform-origin: center; }
  .ham-open .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ham-open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .ham-open .ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .ham-lines { display: flex; flex-direction: column; gap: 5px; }

  /* Show more cert */
  .cert-hidden { display: none !important; }
  .cert-hidden.cert-visible { display: flex !important; }

  /* Line clamp */
  .line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }