/* =========================================================
   TABLE OF CONTENTS
=========================================================

1. ROOT VARIABLES
   - :root color variables
   - theme setup

2. GLOBAL RESET
   - universal reset
   - box sizing

3. HTML & BODY
   - base layout
   - typography
   - cursor settings

4. CUSTOM CURSOR
   - #cursor
   - #cursor-ring
   - hover effects

5. NOISE OVERLAY
   - body::before

6. ORB BLOBS
   - .orb
   - .orb-1
   - .orb-2
   - .orb-3
   - @keyframes orbFloat

7. SECTIONS WRAPPER
   - #sections-wrap
   - .section
   - .section.active

8. NAVIGATION
   - #main-nav
   - .nav-dot
   - .nav-dot::after
   - active/hover states

9. TOP BAR
   - #topbar
   - .logo-text
   - .status-badge
   - .status-dot
   - @keyframes pulse

10. HOME SECTION
   - .home-content
   - .home-pre
   - .home-name
   - .home-role
   - .home-cta
   - .btn-glow
   - .btn-outline-glow
   - .scroll-indicator
   - .scroll-line
   - @keyframes lineDown

11. ABOUT SECTION
   - .about-grid
   - .about-img-wrap
   - .about-img-frame
   - .about-img-deco
   - .about-badge
   - .about-title
   - .about-desc
   - .skill-pills
   - .skill-pill

12. WORK / PROJECTS SECTION
   - .work-wrap
   - .section-label
   - .section-title
   - .projects-grid
   - .project-card
   - .project-overlay
   - .project-tag
   - .project-name
   - .project-link

13. STATS SECTION
   - .stats-wrap
   - .stats-grid
   - .stat-card
   - .stat-num
   - .stat-label
   - .skills-bars
   - .skill-bar-wrap
   - .skill-bar-track
   - .skill-bar-fill

14. SERVICES SECTION
   - .services-wrap
   - .services-grid
   - .service-card
   - .service-icon
   - .service-name
   - .service-desc

15. CONTACT SECTION
   - .contact-wrap
   - .contact-email
   - .contact-sub
   - .socials
   - .social-btn
   - .contact-form
   - .cf-row
   - .cf-field
   - textarea.cf-field

16. SECTION TRANSITIONS
   - .section-content
   - .section.active .section-content

17. GRID BACKGROUND
   - .grid-bg

18. GLITCH TEXT EFFECT
   - @keyframes glitch1
   - .glitch-wrap
   - .glitch-wrap::before
   - .glitch-wrap::after

19. PROJECT MODAL / POPUP
   - #proj-modal
   - .modal-backdrop-blur
   - .modal-box
   - .modal-img-wrap
   - .modal-hero-img
   - .modal-close-btn
   - .modal-body-wrap
   - .modal-tags-row
   - .modal-chip
   - .modal-title
   - .modal-desc
   - .modal-meta-grid
   - .modal-meta-item
   - .modal-actions
   - .mbtn-primary
   - .mbtn-secondary

20. RESPONSIVE DESIGN
   - @media (max-width: 768px)
   - @media (max-width: 480px)

========================================================= */
 :root {
   --bg-deep: #020409;
   --bg-dark: #060c18;
   --bg-card: rgba(255, 255, 255, 0.04);
   --accent: #6c63ff;
   --accent2: #00d4ff;
   --accent3: #ff6b9d;
   --gold: #f5c842;
   --text: #e8eaf6;
   --text-muted: rgba(232, 234, 246, 0.45);
   --border: rgba(108, 99, 255, 0.18);
   --glow: 0 0 60px rgba(108, 99, 255, 0.25);
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html,
 body {
   height: 100%;
   width: 100%;
   overflow: hidden;
   background: var(--bg-deep);
   color: var(--text);
   font-family: 'Outfit', sans-serif;
   cursor: none;
 }

 /*  Custom cursor  */
 #cursor {
   position: fixed;
   width: 12px;
   height: 12px;
   background: var(--accent);
   border-radius: 50%;
   pointer-events: none;
   z-index: 9999;
   transform: translate(-50%, -50%);
   transition: transform .1s, background .2s;
   mix-blend-mode: screen;
 }

 #cursor-ring {
   position: fixed;
   width: 38px;
   height: 38px;
   border: 1.5px solid var(--accent2);
   border-radius: 50%;
   pointer-events: none;
   z-index: 9998;
   transform: translate(-50%, -50%);
   transition: all .18s cubic-bezier(.4, 0, .2, 1);
   opacity: .7;
 }

 body:hover #cursor {
   transform: translate(-50%, -50%) scale(1.4);
 }

 /*  Noise overlay  */
 body::before {
   content: '';
   position: fixed;
   inset: 0;
   z-index: 0;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
   pointer-events: none;
   opacity: .5;
 }

 /*  Orb blobs  */
 .orb {
   position: fixed;
   border-radius: 50%;
   filter: blur(100px);
   opacity: .18;
   pointer-events: none;
   z-index: 0;
   animation: orbFloat 12s ease-in-out infinite alternate;
 }

 .orb-1 {
   width: 600px;
   height: 600px;
   background: var(--accent);
   top: -200px;
   left: -200px;
   animation-delay: 0s;
 }

 .orb-2 {
   width: 500px;
   height: 500px;
   background: var(--accent2);
   bottom: -150px;
   right: -150px;
   animation-delay: -4s;
 }

 .orb-3 {
   width: 400px;
   height: 400px;
   background: var(--accent3);
   top: 40%;
   left: 55%;
   animation-delay: -8s;
 }

 @keyframes orbFloat {
   from {
     transform: translate(0, 0) scale(1);
   }

   to {
     transform: translate(30px, 40px) scale(1.08);
   }
 }

 /*  Sections wrapper  */
 #sections-wrap {
   position: fixed;
   inset: 0;
   z-index: 1;
   display: flex;
   align-items: stretch;
 }

 .section {
   position: fixed;
   inset: 0;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity .1s;
 }

 .section.active {
   opacity: 1;
   pointer-events: all;
 }

 /*  NAV  */
 #main-nav {
   position: fixed;
   right: 2.5rem;
   top: 50%;
   transform: translateY(-50%);
   z-index: 100;
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   align-items: center;
 }

 .nav-dot {
   position: relative;
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background: transparent;
   border: 1.5px solid rgba(255, 255, 255, .3);
   cursor: pointer;
   transition: all .3s;
 }

 .nav-dot::after {
   content: attr(data-label);
   position: absolute;
   right: 22px;
   top: 50%;
   transform: translateY(-50%);
   font-family: 'Space Mono', monospace;
   font-size: .65rem;
   letter-spacing: .08em;
   color: var(--text-muted);
   white-space: nowrap;
   opacity: 0;
   transition: opacity .25s;
   pointer-events: none;
 }

 .nav-dot:hover::after,
 .nav-dot.active::after {
   opacity: 1;
 }

 .nav-dot:hover,
 .nav-dot.active {
   background: var(--accent);
   border-color: var(--accent);
   box-shadow: 0 0 12px var(--accent);
   transform: scale(1.4);
 }

 /*  Top bar  */
 #topbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 99;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.6rem 3rem;
   backdrop-filter: blur(0);
 }

 .logo-text {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 1.6rem;
   letter-spacing: .12em;
   background: linear-gradient(135deg, var(--accent), var(--accent2));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .status-badge {
   display: flex;
   align-items: center;
   gap: .5rem;
   font-family: 'Space Mono', monospace;
   font-size: .65rem;
   color: var(--text-muted);
   border: 1px solid var(--border);
   border-radius: 100px;
   padding: .35rem .9rem;
   backdrop-filter: blur(12px);
   background: var(--bg-card);
 }

 .status-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #2dffb3;
   box-shadow: 0 0 8px #2dffb3;
   animation: pulse 2s infinite;
 }

 @keyframes pulse {

   0%,
   100% {
     opacity: 1;
   }

   50% {
     opacity: .4;
   }
 }

 /*  Section 1: HOME  */
 .home-content {
   position: relative;
   text-align: center;
 }

 .home-pre {
   font-family: 'Space Mono', monospace;
   font-size: .75rem;
   letter-spacing: .3em;
   color: var(--accent2);
   text-transform: uppercase;
   margin-bottom: 1.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .8rem;
 }

 .home-pre::before,
 .home-pre::after {
   content: '';
   display: block;
   width: 40px;
   height: 1px;
   background: var(--accent2);
   opacity: .5;
 }

 .home-name {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(5rem, 12vw, 10rem);
   line-height: .92;
   letter-spacing: -.01em;
   background: linear-gradient(135deg, #fff 0%, var(--accent) 50%, var(--accent2) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   position: relative;
 }

 .home-role {
   font-size: clamp(.85rem, 1.5vw, 1.1rem);
   color: var(--text-muted);
   font-weight: 300;
   letter-spacing: .08em;
   margin-top: 1rem;
 }

 .home-role span {
   color: var(--accent3);
   font-weight: 600;
 }

 .home-cta {
   margin-top: 2.5rem;
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
 }

 .btn-glow {
   position: relative;
   overflow: hidden;
   padding: .75rem 2rem;
   border: 1px solid var(--accent);
   border-radius: 4px;
   font-family: 'Space Mono', monospace;
   font-size: .75rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: #fff;
   text-decoration: none;
   background: rgba(108, 99, 255, .12);
   backdrop-filter: blur(10px);
   cursor: pointer;
   transition: all .3s;
 }

 .btn-glow::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--accent), var(--accent2));
   opacity: 0;
   transition: opacity .3s;
   z-index: -1;
 }

 .btn-glow:hover {
   border-color: var(--accent2);
   box-shadow: 0 0 30px rgba(108, 99, 255, .4);
   color: #fff;
 }

 .btn-glow:hover::before {
   opacity: 1;
 }

 .btn-outline-glow {
   padding: .75rem 2rem;
   border: 1px solid var(--border);
   border-radius: 4px;
   font-family: 'Space Mono', monospace;
   font-size: .75rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--text-muted);
   text-decoration: none;
   background: transparent;
   cursor: pointer;
   transition: all .3s;
 }

 .btn-outline-glow:hover {
   border-color: var(--accent3);
   color: var(--accent3);
 }

 .scroll-indicator {
   position: absolute;
   bottom: -5rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .5rem;
   font-family: 'Space Mono', monospace;
   font-size: .6rem;
   letter-spacing: .2em;
   color: var(--text-muted);
 }

 .scroll-line {
   width: 1px;
   height: 50px;
   background: linear-gradient(to bottom, var(--accent), transparent);
   animation: lineDown 1.8s ease-in-out infinite;
 }

 @keyframes lineDown {
   0% {
     transform: scaleY(0);
     transform-origin: top;
   }

   50% {
     transform: scaleY(1);
     transform-origin: top;
   }

   51% {
     transform-origin: bottom;
   }

   100% {
     transform: scaleY(0);
     transform-origin: bottom;
   }
 }

 /*  Section 2: ABOUT  */
 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1.4fr;
   gap: 4rem;
   max-width: 900px;
   align-items: center;
   padding: 2rem;
 }

 .about-img-wrap {
   position: relative;
   width: 280px;
   height: 360px;
 }

 .about-img-frame {
   position: absolute;
   inset: 0;
   border-radius: 2px;
   overflow: hidden;
   border: 1px solid var(--border);
 }

 .about-img-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: grayscale(.4) contrast(1.1);
 }

 .about-img-deco {
   position: absolute;
   border: 1px solid var(--accent);
   border-radius: 2px;
   right: -18px;
   bottom: -18px;
   width: 100%;
   height: 100%;
   z-index: -1;
   opacity: .4;
 }

 .about-badge {
   position: absolute;
   bottom: 1.5rem;
   left: -1.5rem;
   background: linear-gradient(135deg, var(--accent), var(--accent2));
   border-radius: 4px;
   padding: .6rem 1rem;
   font-family: 'Space Mono', monospace;
   font-size: .7rem;
   line-height: 1.5;
   box-shadow: 0 8px 32px rgba(108, 99, 255, .4);
 }

 .about-title {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(2.5rem, 4vw, 3.8rem);
   letter-spacing: .04em;
   line-height: 1;
   margin-bottom: 1.2rem;
 }

 .about-title .accent {
   color: var(--accent2);
 }

 .about-desc {
   font-size: .95rem;
   line-height: 1.9;
   color: var(--text-muted);
   margin-bottom: 1.8rem;
 }

 .skill-pills {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
 }

 .skill-pill {
   padding: .3rem .85rem;
   border: 1px solid var(--border);
   border-radius: 100px;
   font-family: 'Space Mono', monospace;
   font-size: .65rem;
   letter-spacing: .08em;
   color: var(--text-muted);
   background: var(--bg-card);
   backdrop-filter: blur(8px);
   transition: all .3s;
 }

 .skill-pill:hover {
   border-color: var(--accent);
   color: var(--accent);
   background: rgba(108, 99, 255, .1);
 }

 /*  Section 3: WORK  */
 .work-wrap {
   max-width: 1000px;
   width: 100%;
   padding: 2rem;
 }

 .section-label {
   font-family: 'Space Mono', monospace;
   font-size: .65rem;
   letter-spacing: .3em;
   color: var(--accent2);
   text-transform: uppercase;
   margin-bottom: .8rem;
 }

 .section-title {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(2.2rem, 4vw, 3.5rem);
   letter-spacing: .04em;
   margin-bottom: 2.5rem;
 }

 .projects-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.2rem;
 }

 .project-card {
   position: relative;
   overflow: hidden;
   border-radius: 8px;
   border: 1px solid var(--border);
   background: var(--bg-card);
   backdrop-filter: blur(12px);
   aspect-ratio: 4/3;
   cursor: pointer;
   transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s;
 }

 .project-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s, filter .4s;
   filter: brightness(.7) saturate(.8);
 }

 .project-card:hover img {
   transform: scale(1.08);
   filter: brightness(.5) saturate(.5);
 }

 .project-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 1.4rem;
   background: linear-gradient(to top, rgba(6, 12, 24, .92) 0%, transparent 60%);
   transform: translateY(30px);
   opacity: 0;
   transition: all .4s;
 }

 .project-card:hover .project-overlay {
   transform: translateY(0);
   opacity: 1;
 }

 .project-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px var(--accent);
 }

 .project-tag {
   font-family: 'Space Mono', monospace;
   font-size: .6rem;
   letter-spacing: .15em;
   color: var(--accent2);
   margin-bottom: .4rem;
 }

 .project-name {
   font-weight: 600;
   font-size: 1rem;
 }

 .project-link {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   margin-top: .5rem;
   font-family: 'Space Mono', monospace;
   font-size: .65rem;
   color: var(--accent3);
   text-decoration: none;
 }

 /*  Section 4: STATS  */
 .stats-wrap {
   max-width: 850px;
   width: 100%;
   padding: 2rem;
   text-align: center;
 }

 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
   margin: 2.5rem 0;
 }

 .stat-card {
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 2rem 1rem;
   background: var(--bg-card);
   backdrop-filter: blur(12px);
   position: relative;
   overflow: hidden;
   transition: all .3s;
 }

 .stat-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), var(--accent2));
   opacity: 0;
   transition: opacity .3s;
 }

 .stat-card:hover::before {
   opacity: 1;
 }

 .stat-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--glow);
 }

 .stat-num {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 3.5rem;
   line-height: 1;
   background: linear-gradient(135deg, #fff, var(--accent2));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .stat-label {
   font-family: 'Space Mono', monospace;
   font-size: .65rem;
   letter-spacing: .15em;
   color: var(--text-muted);
   text-transform: uppercase;
   margin-top: .5rem;
 }

 .skills-bars {
   margin-top: 2rem;
   text-align: left;
 }

 .skill-bar-wrap {
   margin-bottom: 1.1rem;
 }

 .skill-bar-label {
   display: flex;
   justify-content: space-between;
   font-family: 'Space Mono', monospace;
   font-size: .65rem;
   letter-spacing: .1em;
   color: var(--text-muted);
   margin-bottom: .4rem;
 }

 .skill-bar-track {
   height: 3px;
   background: rgba(255, 255, 255, .06);
   border-radius: 100px;
   overflow: hidden;
 }

 .skill-bar-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--accent), var(--accent2));
   border-radius: 100px;
   width: 0;
   transition: width 1.4s cubic-bezier(.4, 0, .2, 1);
 }

 /*  Section 5: SERVICES  */
 .services-wrap {
   max-width: 920px;
   width: 100%;
   padding: 2rem;
 }

 .services-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.2rem;
   margin-top: 2rem;
 }

 .service-card {
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 2rem 1.5rem;
   background: var(--bg-card);
   backdrop-filter: blur(12px);
   position: relative;
   overflow: hidden;
   transition: all .4s;
   cursor: default;
 }

 .service-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
   background: linear-gradient(135deg, rgba(108, 99, 255, .08), rgba(0, 212, 255, .04));
   opacity: 0;
   transition: opacity .4s;
 }

 .service-card:hover::after {
   opacity: 1;
 }

 .service-card:hover {
   transform: translateY(-6px);
   border-color: rgba(108, 99, 255, .4);
   box-shadow: var(--glow);
 }

 .service-icon {
   width: 48px;
   height: 48px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.2rem;
   font-size: 1.4rem;
   background: linear-gradient(135deg, rgba(108, 99, 255, .2), rgba(0, 212, 255, .1));
   border: 1px solid rgba(108, 99, 255, .25);
   position: relative;
   z-index: 1;
 }

 .service-name {
   font-weight: 600;
   font-size: 1rem;
   margin-bottom: .5rem;
   position: relative;
   z-index: 1;
 }

 .service-desc {
   font-size: .85rem;
   line-height: 1.7;
   color: var(--text-muted);
   position: relative;
   z-index: 1;
 }

 /*  Personal, education, gallery and blog sections  */
 .lifestyle-wrap,
 .timeline-wrap,
 .gallery-wrap,
 .blog-wrap {
   max-width: 960px;
   width: 100%;
   padding: 2rem;
 }

 .details-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.1rem;
 }

 .detail-card,
 .timeline-item,
 .blog-card {
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--bg-card);
   backdrop-filter: blur(12px);
   transition: transform .3s, border-color .3s, box-shadow .3s;
 }

 .detail-card {
   min-height: 145px;
   padding: 1.4rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: .8rem;
 }

 .detail-card i {
   width: 44px;
   height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   color: var(--accent2);
   background: rgba(0, 212, 255, .08);
   border: 1px solid rgba(0, 212, 255, .18);
   font-size: 1.15rem;
 }

 .detail-card span,
 .blog-card span,
 .timeline-year {
   font-family: 'Space Mono', monospace;
   font-size: .62rem;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--text-muted);
 }

 .detail-card strong {
   font-size: 1rem;
   font-weight: 600;
   color: var(--text);
   line-height: 1.35;
 }

 .timeline-list {
   display: grid;
   gap: 1rem;
 }

 .timeline-item {
   display: grid;
   grid-template-columns: 125px 1fr;
   gap: 1.4rem;
   padding: 1.35rem 1.5rem;
 }

 .timeline-year {
   color: var(--accent2);
 }

 .timeline-item h3,
 .blog-card h3 {
   font-size: 1.05rem;
   margin-bottom: .45rem;
 }

 .timeline-item p,
 .blog-card p {
   margin: 0;
   color: var(--text-muted);
   font-size: .88rem;
   line-height: 1.75;
 }

 .detail-card:hover,
 .timeline-item:hover,
 .blog-card:hover {
   transform: translateY(-4px);
   border-color: rgba(108, 99, 255, .45);
   box-shadow: var(--glow);
 }

 .gallery-grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr;
   grid-auto-rows: 175px;
   gap: 1rem;
 }

 .gallery-card {
   position: relative;
   overflow: hidden;
   border-radius: 8px;
   border: 1px solid var(--border);
   background: var(--bg-card);
   min-height: 0;
   cursor: pointer;
 }

 .gallery-card-large {
   grid-row: span 2;
 }

 .gallery-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(.75) saturate(.9);
   transition: transform .45s, filter .35s;
 }

 .gallery-card:hover img {
   transform: scale(1.06);
   filter: brightness(.55) saturate(.85);
 }

 .gallery-caption {
   position: absolute;
   left: 1rem;
   right: 1rem;
   bottom: 1rem;
   font-weight: 600;
   text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
 }

 .video-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .7rem;
   min-height: 175px;
   background:
     linear-gradient(135deg, rgba(255, 107, 157, .16), rgba(0, 212, 255, .08)),
     var(--bg-card);
   color: var(--text);
 }

 .video-card i {
   font-size: 2.4rem;
   color: var(--accent3);
 }

 .video-card span {
   font-family: 'Space Mono', monospace;
   font-size: .68rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--text-muted);
 }

 .blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.1rem;
 }

 .blog-card {
   min-height: 265px;
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
 }

 .blog-card h3 {
   margin-top: 1.1rem;
 }

 .blog-card a {
   margin-top: auto;
   display: inline-flex;
   align-items: center;
   gap: .45rem;
   font-family: 'Space Mono', monospace;
   font-size: .66rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   text-decoration: none;
   color: var(--accent3);
 }

 .music-card {
   cursor: pointer;
 }

 .music-card.is-playing {
   border-color: var(--accent3);
   box-shadow: 0 0 40px rgba(255, 107, 157, .28);
 }

 .music-card.is-playing i {
   color: var(--accent3);
   background: rgba(255, 107, 157, .12);
   border-color: rgba(255, 107, 157, .24);
 }

 /*  Section 6: CONTACT  */
 .contact-wrap {
   max-width: 750px;
   width: 100%;
   padding: 2rem;
   text-align: center;
 }

 .contact-email {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(2rem, 5vw, 4rem);
   letter-spacing: .06em;
   background: linear-gradient(135deg, var(--accent), var(--accent2));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   margin: 1.5rem 0;
   display: block;
   text-decoration: none;
   transition: opacity .3s;
 }

 .contact-email:hover {
   opacity: .75;
 }

 .contact-sub {
   font-size: .9rem;
   color: var(--text-muted);
   line-height: 1.8;
   max-width: 480px;
   margin: 0 auto 2.5rem;
 }

 .socials {
   display: flex;
   gap: 1rem;
   justify-content: center;
   margin-top: 2rem;
 }

 .social-btn {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-muted);
   font-size: 1.1rem;
   text-decoration: none;
   background: var(--bg-card);
   backdrop-filter: blur(8px);
   transition: all .3s;
 }

 .social-btn:hover {
   border-color: var(--accent);
   color: var(--accent);
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(108, 99, 255, .3);
 }

 .contact-form {
   margin-top: 2rem;
 }

 .cf-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
   margin-bottom: 1rem;
 }

 .cf-field {
   width: 100%;
   padding: .85rem 1.1rem;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 6px;
   color: var(--text);
   font-family: 'Outfit', sans-serif;
   font-size: .9rem;
   outline: none;
   transition: border-color .3s;
 }

 .cf-field:focus {
   border-color: var(--accent);
 }

 .cf-field::placeholder {
   color: var(--text-muted);
 }

 textarea.cf-field {
   resize: none;
   height: 100px;
   margin-bottom: 1rem;
 }

 .contact-submit {
   border: 1px solid var(--accent);
 }

 .contact-submit:disabled {
   opacity: .58;
   cursor: wait;
 }

 .form-message {
   min-height: 24px;
   margin-top: 1rem;
   font-family: 'Space Mono', monospace;
   font-size: .68rem;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--text-muted);
 }

 .form-message.success {
   color: #2dffb3;
 }

 .form-message.error {
   color: var(--accent3);
 }

 /*  Transitions  */
 .section-content {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
 }

 .section.active .section-content {
   opacity: 1;
   transform: translateY(0);
 }

 /*  Animated grid bg  */
 .grid-bg {
   position: fixed;
   inset: 0;
   z-index: 0;
   background-image:
     linear-gradient(rgba(108, 99, 255, .04) 1px, transparent 1px),
     linear-gradient(90deg, rgba(108, 99, 255, .04) 1px, transparent 1px);
   background-size: 60px 60px;
   pointer-events: none;
 }

 /*  Glitch text  */
 @keyframes glitch1 {

   0%,
   100% {
     clip-path: inset(0 0 100% 0)
   }

   10% {
     clip-path: inset(10% 0 80% 0)
   }

   20% {
     clip-path: inset(40% 0 40% 0)
   }

   30% {
     clip-path: inset(70% 0 10% 0)
   }

   40% {
     clip-path: inset(0 0 100% 0)
   }
 }

 .glitch-wrap {
   position: relative;
   display: inline-block;
 }

 .glitch-wrap::before,
 .glitch-wrap::after {
   content: attr(data-text);
   position: absolute;
   inset: 0;
   font-family: 'Bebas Neue', sans-serif;
   font-size: inherit;
   letter-spacing: inherit;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   pointer-events: none;
 }

 .glitch-wrap::before {
   background: linear-gradient(135deg, var(--accent3), var(--accent3));
   -webkit-background-clip: text;
   left: 2px;
   animation: glitch1 6s infinite;
   opacity: .5;
 }

 .glitch-wrap::after {
   background: linear-gradient(135deg, var(--accent2), var(--accent2));
   -webkit-background-clip: text;
   left: -2px;
   animation: glitch1 6s infinite .3s;
   opacity: .4;
 }

 /*  PROJECT POPUP MODAL  */
 #proj-modal {
   position: fixed;
   inset: 0;
   z-index: 9000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity .35s;
 }

 #proj-modal.open {
   opacity: 1;
   pointer-events: all;
 }

 .modal-backdrop-blur {
   position: absolute;
   inset: 0;
   background: rgba(2, 4, 9, .88);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }

 .modal-box {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 820px;
   background: linear-gradient(145deg, #0d1326, #060c18);
   border: 1px solid rgba(108, 99, 255, .3);
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 40px 120px rgba(0, 0, 0, .75), 0 0 80px rgba(108, 99, 255, .1);
   transform: translateY(40px) scale(.96);
   transition: transform .45s cubic-bezier(.23, 1, .32, 1);
 }

 #proj-modal.open .modal-box {
   transform: translateY(0) scale(1);
 }

 #gallery-modal {
   position: fixed;
   inset: 0;
   z-index: 9100;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity .35s;
 }

 #gallery-modal.open {
   opacity: 1;
   pointer-events: all;
 }

 .gallery-modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(2, 4, 9, .9);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }

 .gallery-modal-box {
   position: relative;
   z-index: 2;
   width: min(980px, 100%);
   max-height: calc(100vh - 3rem);
   border: 1px solid rgba(108, 99, 255, .3);
   border-radius: 12px;
   background: linear-gradient(145deg, #0d1326, #060c18);
   box-shadow: 0 40px 120px rgba(0, 0, 0, .75);
   padding: 1rem;
 }

 .gallery-close-btn {
   top: .85rem;
   right: .85rem;
 }

 .gallery-modal-title {
   min-height: 32px;
   padding: .2rem 3rem .85rem .2rem;
   font-family: 'Space Mono', monospace;
   font-size: .7rem;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--accent2);
 }

 .gallery-modal-stage {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 260px;
   border-radius: 8px;
   overflow: hidden;
   background: rgba(0, 0, 0, .28);
 }

 .gallery-modal-stage img,
 .gallery-modal-stage video {
   display: block;
   width: 100%;
   max-height: calc(100vh - 9rem);
   object-fit: contain;
 }

 .gallery-video-note {
   padding: 2rem;
   color: var(--text-muted);
   text-align: center;
   line-height: 1.7;
 }

 #blog-modal {
   position: fixed;
   inset: 0;
   z-index: 9200;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity .35s;
 }

 #blog-modal.open {
   opacity: 1;
   pointer-events: all;
 }

 .blog-modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(2, 4, 9, .9);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }

 .blog-modal-box {
   position: relative;
   z-index: 2;
   width: min(860px, 100%);
   max-height: calc(100vh - 3rem);
   overflow: hidden;
   border: 1px solid rgba(108, 99, 255, .3);
   border-radius: 12px;
   background: linear-gradient(145deg, #0d1326, #060c18);
   box-shadow: 0 40px 120px rgba(0, 0, 0, .75);
 }

 .blog-close-btn {
   top: .9rem;
   right: .9rem;
 }

 .blog-modal-img {
   display: block;
   width: 100%;
   height: 260px;
   object-fit: cover;
   filter: brightness(.78);
 }

 .blog-modal-body {
   max-height: calc(100vh - 330px);
   overflow-y: auto;
   padding: 1.7rem 2rem 2rem;
 }

 .blog-modal-category {
   font-family: 'Space Mono', monospace;
   font-size: .65rem;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--accent2);
   margin-bottom: .7rem;
 }

 .blog-modal-title {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(2rem, 4vw, 3rem);
   letter-spacing: .04em;
   line-height: 1;
   margin-bottom: 1rem;
   background: linear-gradient(135deg, #fff 30%, var(--accent2));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .blog-modal-content {
   color: var(--text-muted);
   font-size: .95rem;
   line-height: 1.85;
 }

 .blog-modal-content h1,
 .blog-modal-content h2,
 .blog-modal-content h3 {
   color: var(--text);
   margin: 1.2rem 0 .6rem;
 }

 .blog-modal-content p,
 .blog-modal-content ul,
 .blog-modal-content ol {
   margin-bottom: 1rem;
 }

 .blog-modal-content img {
   max-width: 100%;
   border-radius: 8px;
   border: 1px solid var(--border);
 }

 .modal-img-wrap {
   position: relative;
 }

 .modal-hero-img {
   width: 100%;
   height: 260px;
   object-fit: cover;
   display: block;
   filter: brightness(.8);
 }

 .modal-img-gradient {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 120px;
   background: linear-gradient(to bottom, transparent, #060c18);
   pointer-events: none;
 }

 .modal-close-btn {
   position: absolute;
   top: 1rem;
   right: 1rem;
   z-index: 10;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .18);
   background: rgba(6, 12, 24, .85);
   backdrop-filter: blur(10px);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-muted);
   font-size: 1rem;
   cursor: pointer;
   transition: all .3s;
   text-decoration: none;
 }

 .modal-close-btn:hover {
   border-color: var(--accent3);
   color: var(--accent3);
   transform: rotate(90deg);
 }

 .modal-body-wrap {
   padding: 1.6rem 2rem 2rem;
 }

 .modal-tags-row {
   display: flex;
   gap: .5rem;
   flex-wrap: wrap;
   margin-bottom: 1rem;
 }

 .modal-chip {
   font-family: 'Space Mono', monospace;
   font-size: .58rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   padding: .25rem .8rem;
   border: 1px solid var(--border);
   border-radius: 100px;
   color: var(--accent2);
   background: rgba(0, 212, 255, .07);
 }

 .modal-title {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 2.5rem;
   letter-spacing: .04em;
   line-height: 1;
   margin-bottom: .6rem;
   background: linear-gradient(135deg, #fff 30%, var(--accent2));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .modal-desc {
   font-size: .9rem;
   color: var(--text-muted);
   line-height: 1.88;
   margin-bottom: 1.6rem;
 }

 .modal-meta-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
   margin-bottom: 1.6rem;
   padding: 1.2rem 1.4rem;
   border-radius: 8px;
   background: rgba(255, 255, 255, .03);
   border: 1px solid var(--border);
 }

 .modal-meta-item {
   display: flex;
   flex-direction: column;
   gap: .3rem;
 }

 .modal-meta-label {
   font-family: 'Space Mono', monospace;
   font-size: .55rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--text-muted);
 }

 .modal-meta-val {
   font-size: .88rem;
   font-weight: 500;
   color: var(--text);
 }

 .modal-actions {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
 }

 .mbtn-primary {
   display: inline-flex;
   align-items: center;
   gap: .55rem;
   padding: .75rem 1.8rem;
   background: linear-gradient(135deg, var(--accent), var(--accent2));
   border: none;
   border-radius: 6px;
   font-family: 'Space Mono', monospace;
   font-size: .7rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   font-weight: 700;
   transition: all .3s;
 }

 .mbtn-primary:hover {
   opacity: .85;
   transform: translateY(-2px);
   box-shadow: 0 10px 32px rgba(108, 99, 255, .45);
   color: #fff;
 }

 .mbtn-secondary {
   display: inline-flex;
   align-items: center;
   gap: .55rem;
   padding: .75rem 1.8rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   font-family: 'Space Mono', monospace;
   font-size: .7rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--text-muted);
   text-decoration: none;
   cursor: pointer;
   background: transparent;
   transition: all .3s;
 }

 .mbtn-secondary:hover {
   border-color: var(--accent3);
   color: var(--accent3);
 }

 /* Responsive tweaks */
 @media (max-width: 768px) {
   #main-nav {
     right: 1rem;
     gap: .62rem;
   }

   .nav-dot {
     width: 9px;
     height: 9px;
   }

   .about-grid {
     grid-template-columns: 1fr;
     gap: 2rem;
   }

   .about-img-wrap {
     width: 200px;
     height: 260px;
     margin: 0 auto;
   }

   .projects-grid {
     grid-template-columns: 1fr 1fr;
   }

   .stats-grid {
     grid-template-columns: 1fr 1fr;
   }

   .services-grid {
     grid-template-columns: 1fr 1fr;
   }

   .details-grid,
   .blog-grid {
     grid-template-columns: 1fr 1fr;
   }

   .timeline-item {
     grid-template-columns: 1fr;
     gap: .6rem;
   }

   .gallery-grid {
     grid-template-columns: 1fr 1fr;
     grid-auto-rows: 150px;
   }

   .gallery-card-large {
     grid-row: span 1;
   }

   .cf-row {
     grid-template-columns: 1fr;
   }

   #topbar {
     padding: 1.2rem 1.5rem;
   }

   .home-name {
     font-size: clamp(3.5rem, 14vw, 6rem);
   }
 }

 @media (max-width: 480px) {

   .projects-grid,
   .services-grid,
   .details-grid,
   .blog-grid,
   .gallery-grid {
     grid-template-columns: 1fr;
   }

   .stats-grid {
     grid-template-columns: 1fr 1fr;
   }
 }