/* ============================================================
       DESIGN TOKENS
       ============================================================ */
    :root {
      --bg:        #0a0a0a;
      --bg-2:      #111111;
      --accent:    #b5ff3a;
      --coral:     #ff4d4d;
      --text:      #f0ede6;
      --text-muted:#888880;
      --border:    rgba(240, 237, 230, 0.08);
      --font:      'JetBrains Mono', 'Courier New', monospace;
      --grid:      rgba(240,237,230,0.03);
    }

    /* ============================================================
       RESET & BASE
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      scrollbar-width: thin;
      scrollbar-color: var(--accent) var(--bg);
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 14px;
      line-height: 1.7;
      cursor: none;
      overflow-x: hidden;
    }

    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--accent); }

    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }
    ::selection { background: var(--accent); color: var(--bg); }

    /* ============================================================
       GLOBAL GRID BACKGROUND
       ============================================================ */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
      z-index: 0;
      will-change: transform;
    }

    /* ============================================================
       NOISE GRAIN OVERLAY
       ============================================================ */
    body::after {
      content: '';
      position: fixed;
      inset: 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.4'/%3E%3C/svg%3E");
      opacity: 0.03;
      pointer-events: none;
      z-index: 1;
    }

    /* ============================================================
       CUSTOM CURSOR
       ============================================================ */
    #cursor-dot {
      position: fixed;
      width: 8px;
      height: 8px;
      background: var(--accent);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent);
      transition: transform 0.05s, width 0.2s, height 0.2s;
    }

    #cursor-ring {
      position: fixed;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(181,255,58,0.4);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      transition: transform 0.12s ease-out, width 0.2s, height 0.2s, border-color 0.2s;
    }

    body.cursor-hover #cursor-dot { width: 12px; height: 12px; }
    body.cursor-hover #cursor-ring { width: 48px; height: 48px; border-color: var(--accent); }

    /* ============================================================
       NAVIGATION
       ============================================================ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 20px 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      backdrop-filter: blur(0px);
      transition: backdrop-filter 0.4s, background 0.4s;
    }

    nav.scrolled {
      background: rgba(10,10,10,0.85);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }

    .nav-logo {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.1em;
      color: var(--accent);
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      gap: 36px;
      list-style: none;
    }

    .nav-links a {
      color: var(--text-muted);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: color 0.2s;
      position: relative;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0; right: 100%;
      height: 1px;
      background: var(--accent);
      transition: right 0.3s ease;
    }

    .nav-links a:hover { color: var(--text); text-decoration: none; }
    .nav-links a:hover::after { right: 0; }

    /* ============================================================
       HERO SECTION
       ============================================================ */
    #hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 600px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 0 48px 80px;
      overflow: hidden;
    }

    #hero-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 10;
      max-width: 800px;
    }

    .hero-label {
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 10px;
      opacity: 0;
    }

    .hero-name {
      font-size: clamp(48px, 8vw, 96px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin-top: 0;
      margin-bottom: 60px;
      opacity: 0;
    }

    .hero-name .char {
      display: inline-block;
      transition: color 0.3s, transform 0.3s;
    }

    .hero-name .char:hover {
      color: var(--accent);
      transform: translateY(-4px);
    }

    .hero-tagline {
      font-size: clamp(13px, 2vw, 18px);
      color: var(--text-muted);
      margin-bottom: 40px;
      opacity: 0;
    }

    .hero-tagline span {
      color: var(--text);
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 28px;
      border: 1px solid var(--accent);
      color: var(--accent);
      font-family: var(--font);
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: none;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
      opacity: 0;
    }

    .hero-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .hero-cta:hover::before { transform: scaleX(1); }
    .hero-cta:hover { color: var(--bg); text-decoration: none; box-shadow: 0 0 30px rgba(181,255,58,0.3); }
    .hero-cta span { position: relative; z-index: 1; }

    .hero-scroll-indicator {
      position: absolute;
      bottom: 32px;
      right: 48px;
      z-index: 10;
      writing-mode: vertical-rl;
      font-size: 10px;
      letter-spacing: 0.2em;
      color: var(--text-muted);
      text-transform: uppercase;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      opacity: 0;
    }

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

    @keyframes scroll-pulse {
      0%, 100% { opacity: 0.3; transform: scaleY(1); }
      50% { opacity: 1; transform: scaleY(1.1); }
    }

    /* terminal typing effect */
    .terminal-line {
      font-size: 11px;
      color: var(--accent);
      margin-bottom: 12px;
    }

    .terminal-line::before { content: '> '; opacity: 0.5; }

    .typewriter-cursor {
      display: inline-block;
      width: 8px;
      height: 14px;
      background: var(--accent);
      vertical-align: middle;
      animation: blink 1s step-end infinite;
    }

    @keyframes blink { 50% { opacity: 0; } }

    /* ============================================================
       ABOUT SECTION
       ============================================================ */
    #about {
      position: relative;
      z-index: 2;
      padding: 120px 48px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-label {
      font-size: 10px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .about-bio h2 {
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 24px;
      letter-spacing: -0.02em;
    }

    .about-bio h2 em {
      font-style: normal;
      color: var(--accent);
    }

    .about-bio p {
      color: var(--text-muted);
      margin-bottom: 20px;
      font-size: 13px;
      line-height: 1.9;
    }

    .reveal-line {
      overflow: hidden;
    }

    .reveal-line-inner {
      transform: translateY(100%);
      display: block;
    }

    /* Currently Ticker */
    .currently-ticker {
      margin-top: 40px;
      padding: 16px 20px;
      border: 1px solid var(--border);
      background: rgba(181, 255, 58, 0.03);
      font-size: 12px;
    }

    .ticker-label {
      color: var(--accent);
      margin-bottom: 8px;
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    #ticker-text {
      color: var(--text-muted);
      min-height: 20px;
    }

    .ticker-blink {
      color: var(--accent);
      animation: blink 1s step-end infinite;
    }

    /* ASCII Portrait */
    .ascii-portrait {
      position: relative;
      overflow: hidden;
    }

    .ascii-art {
      font-size: 22px;
      line-height: 1.2;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      white-space: pre;
      font-family: var(--font);
      transition: color 0.3s;
      transform: scale(1);
    }

    .ascii-portrait:hover .ascii-art {
      color: var(--accent);
      text-shadow: 0 0 10px rgba(181,255,58,0.3);
    }

    /* glitch animation on ascii */
    .ascii-portrait:hover .ascii-art {
      animation: ascii-glitch 0.3s steps(2) 1;
    }

    @keyframes ascii-glitch {
      0%   { transform: translate(0); }
      20%  { transform: translate(-2px, 2px); }
      40%  { transform: translate(2px, -2px); }
      60%  { transform: translate(-1px, 1px); color: var(--coral); }
      80%  { transform: translate(1px, -1px); }
      100% { transform: translate(0); color: var(--accent); }
    }

    /* ============================================================
       SKILLS SECTION
       ============================================================ */
    #skills {
      position: relative;
      z-index: 2;
      padding: 120px 48px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .skills-arena {
      position: relative;
      width: 100%;
      height: 500px;
      border: 1px solid var(--border);
      overflow: hidden;
      background: rgba(255,255,255,0.01);
    }

    .skill-bubble {
      position: absolute;
      border: 1px solid rgba(181,255,58,0.2);
      background: rgba(181,255,58,0.04);
      font-size: 12px;
      color: var(--text-muted);
      cursor: none;
      user-select: none;
      transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.3s;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 12px 16px;
      will-change: transform;
    }

    .skill-bubble:hover {
      border-color: var(--accent);
      background: rgba(181,255,58,0.1);
      color: var(--accent);
      z-index: 10;
      box-shadow: 0 0 30px rgba(181,255,58,0.15);
    }

    .skill-bubble .skill-name {
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 4px;
      transition: color 0.3s;
    }

    .skill-bubble .skill-desc {
      font-size: 9px;
      color: var(--text-muted);
      opacity: 0;
      max-width: 120px;
      line-height: 1.4;
      transition: opacity 0.3s;
    }

    .skill-bubble:hover .skill-desc { opacity: 1; }
    .skill-bubble:hover .skill-name { color: var(--accent); }

    /* ============================================================
       PROJECTS SECTION
       ============================================================ */
    #projects {
      position: relative;
      z-index: 2;
      padding: 120px 0;
    }

    .projects-header {
      padding: 0 48px;
      margin-bottom: 60px;
    }

    .projects-scroll-container {
      overflow-x: auto;
      overflow-y: visible;
      padding: 20px 48px 60px;
      display: flex;
      gap: 32px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--accent) transparent;
      cursor: grab;
    }

    .projects-scroll-container:active { cursor: grabbing; }

    .project-card {
      min-width: 440px;
      height: 560px;
      border: 1px solid var(--border);
      background: var(--bg-2);
      scroll-snap-align: start;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      cursor: none;
      will-change: transform;
      transition: box-shadow 0.3s;
    }

    .project-card:hover {
      box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 1px var(--accent);
    }

    .card-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--bg-2) 0%, #1a1a1a 100%);
      overflow: hidden;
    }

    .card-bg-number {
      position: absolute;
      bottom: -20px;
      right: -10px;
      font-size: 180px;
      font-weight: 800;
      color: rgba(255,255,255,0.02);
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }

    .card-glitch-stripe {
      position: absolute;
      left: 0; right: 0;
      height: 2px;
      background: var(--accent);
      top: 0;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .project-card:hover .card-glitch-stripe { transform: scaleX(1); }

    .card-overlay {
      position: absolute;
      inset: 0;
      background: rgba(10,10,10,0.92);
      transform: translateY(101%);
      transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 40px;
      z-index: 5;
    }

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

    .card-base-content {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 40px;
      background: linear-gradient(to top, rgba(10,10,10,0.9) 0%, transparent 100%);
      z-index: 3;
      transition: opacity 0.3s;
    }

    .project-card:hover .card-base-content { opacity: 0; }

    .card-index {
      font-size: 10px;
      color: var(--accent);
      letter-spacing: 0.15em;
      margin-bottom: 8px;
    }

    .card-title {
      font-size: clamp(20px, 3vw, 28px);
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

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

    .overlay-title {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 12px;
      color: var(--text);
    }

    .overlay-desc {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 24px;
    }

    .overlay-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 28px;
    }

    .tag {
      padding: 4px 10px;
      border: 1px solid rgba(181,255,58,0.3);
      font-size: 10px;
      color: var(--accent);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .overlay-links {
      display: flex;
      gap: 16px;
    }

    .btn-link {
      padding: 10px 20px;
      font-family: var(--font);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: none;
      border: 1px solid var(--accent);
      color: var(--accent);
      transition: background 0.2s, color 0.2s;
    }

    .btn-link:hover {
      background: var(--accent);
      color: var(--bg);
      text-decoration: none;
    }

    .btn-link.secondary {
      border-color: var(--border);
      color: var(--text-muted);
    }

    .btn-link.secondary:hover {
      background: var(--text-muted);
      color: var(--bg);
    }

    /* card visual accent */
    .card-visual {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .card-visual canvas {
      width: 100%;
      height: 100%;
    }

    /* ============================================================
       CONTACT SECTION
       ============================================================ */
    #contact {
      position: relative;
      z-index: 2;
      padding: 160px 48px;
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }

    .contact-heading {
      font-size: clamp(36px, 6vw, 80px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin-bottom: 24px;
    }

    .contact-heading em {
      font-style: normal;
      color: var(--accent);
    }

    .contact-sub {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 48px;
      line-height: 1.8;
    }

    .availability-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 18px;
      border: 1px solid rgba(181,255,58,0.3);
      background: rgba(181,255,58,0.05);
      font-size: 11px;
      color: var(--accent);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 48px;
    }

    .availability-dot {
      width: 8px;
      height: 8px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse-dot 2s ease infinite;
    }

    @keyframes pulse-dot {
      0%, 100% { box-shadow: 0 0 0 0 rgba(181,255,58,0.5); }
      50% { box-shadow: 0 0 0 6px rgba(181,255,58,0); }
    }

    .contact-email-wrapper {
      margin-bottom: 48px;
    }

    #email-display {
      font-size: clamp(16px, 3vw, 28px);
      font-weight: 700;
      cursor: none;
      color: var(--text);
      letter-spacing: -0.01em;
      background: none;
      border: none;
      font-family: var(--font);
      transition: color 0.2s;
    }

    #email-display:hover { color: var(--accent); }

    .copy-hint {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 8px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .copy-success {
      font-size: 10px;
      color: var(--accent);
      margin-top: 8px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .copy-success.visible { opacity: 1; }

    .contact-socials {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
    }

    .social-link {
      padding: 10px 20px;
      border: 1px solid var(--border);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      transition: border-color 0.2s, color 0.2s;
    }

    .social-link:hover {
      border-color: var(--accent);
      color: var(--accent);
      text-decoration: none;
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    footer {
      position: relative;
      z-index: 2;
      padding: 40px 48px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }

    .footer-left {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.7;
    }

    .footer-right {
      font-size: 10px;
      color: var(--text-muted);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    /* ============================================================
       CUSTOM CONTEXT MENU
       ============================================================ */
    #custom-context-menu {
      position: fixed;
      z-index: 99999;
      background: var(--bg-2);
      border: 1px solid var(--border);
      padding: 8px 0;
      min-width: 220px;
      display: none;
      box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    }

    .ctx-item {
      padding: 10px 20px;
      font-size: 12px;
      cursor: none;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 12px;
      transition: background 0.15s, color 0.15s;
    }

    .ctx-item:hover { background: rgba(181,255,58,0.06); color: var(--text); }
    .ctx-item.accent:hover { color: var(--accent); }
    .ctx-divider { height: 1px; background: var(--border); margin: 6px 0; }

    /* ============================================================
       DEBUG MODE
       ============================================================ */
    body.debug-mode * {
      outline: 1px solid rgba(181,255,58,0.3) !important;
    }

    #debug-panel {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 99998;
      background: rgba(0,0,0,0.9);
      border: 1px solid var(--accent);
      padding: 16px;
      font-size: 10px;
      color: var(--accent);
      max-width: 320px;
      display: none;
      font-family: var(--font);
      line-height: 1.8;
    }

    body.debug-mode #debug-panel { display: block; }

    #debug-panel .debug-title {
      font-weight: 700;
      font-size: 11px;
      margin-bottom: 12px;
      color: var(--coral);
    }

    /* ============================================================
       SECTION SEPARATORS
       ============================================================ */
    .section-sep {
      position: relative;
      z-index: 2;
      height: 1px;
      background: var(--border);
      max-width: 1200px;
      margin: 0 auto;
    }

    /* ============================================================
       GLITCH TEXT UTILITY
       ============================================================ */
    .glitch {
      position: relative;
    }

    .glitch::before,
    .glitch::after {
      content: attr(data-text);
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
    }

    .glitch::before {
      color: var(--coral);
      animation: glitch-1 2s infinite linear alternate-reverse;
      clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    }

    .glitch::after {
      color: #00f5ff;
      animation: glitch-2 2s infinite linear alternate;
      clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    }

    @keyframes glitch-1 {
      0%   { transform: translate(0); }
      20%  { transform: translate(-2px, 0); }
      40%  { transform: translate(-2px, -2px); }
      60%  { transform: translate(2px, 2px); }
      80%  { transform: translate(2px, 0); }
      100% { transform: translate(0); }
    }

    @keyframes glitch-2 {
      0%   { transform: translate(0); }
      20%  { transform: translate(2px, 0); }
      40%  { transform: translate(2px, 2px); }
      60%  { transform: translate(-2px, -2px); }
      80%  { transform: translate(-2px, 0); }
      100% { transform: translate(0); }
    }

    /* ============================================================
       NUMBER COUNTER (projects count)
       ============================================================ */
    .stat-row {
      display: flex;
      gap: 48px;
      margin-top: 40px;
      padding-top: 40px;
      border-top: 1px solid var(--border);
    }

    .stat-item {}
    .stat-number {
      font-size: 36px;
      font-weight: 800;
      color: var(--accent);
      line-height: 1;
    }
    .stat-label {
      font-size: 10px;
      color: var(--text-muted);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* ============================================================
       SCROLL PROGRESS BAR
       ============================================================ */
    #scroll-progress {
      position: fixed;
      top: 0; left: 0;
      height: 2px;
      background: var(--accent);
      z-index: 9997;
      transform-origin: left;
      transform: scaleX(0);
      box-shadow: 0 0 8px var(--accent);
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 768px) {
      nav { padding: 16px 24px; }
      .nav-links { gap: 20px; }

      #hero { padding: 0 24px 60px; }
      #about { grid-template-columns: 1fr; padding: 80px 24px; gap: 60px; }
      #skills { padding: 80px 24px; }
      #projects { padding: 80px 0; }
      .projects-header { padding: 0 24px; }
      .projects-scroll-container { padding: 20px 24px 40px; }
      .project-card { min-width: 320px; height: 460px; }
      #contact { padding: 100px 24px; }
      footer { padding: 32px 24px; flex-direction: column; text-align: center; }
    }

    /* ============================================================
       LOADING SCREEN
       ============================================================ */
    #loader {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 99999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      transition: opacity 0.6s, visibility 0.6s;
    }

    #loader.hidden {
      opacity: 0;
      visibility: hidden;
    }

    .loader-bar-track {
      width: 200px;
      height: 1px;
      background: var(--border);
      position: relative;
      overflow: hidden;
    }

    .loader-bar-fill {
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      box-shadow: 0 0 8px var(--accent);
    }

    .loader-text {
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .loader-percent {
      font-size: 48px;
      font-weight: 800;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
    }