/* ── ROOT ── */
    :root {
      --blue:     #2563ff;
      --blue-l:   #5b8dff;
      --blue-g:   rgba(37,99,255,0.28);
      --orange:   #ff5c1a;
      --orange-l: #ff8050;
      --orange-g: rgba(255,92,26,0.28);
      --bg:       #050810;
      --bg2:      #080c18;
      --surface:  rgba(255,255,255,0.03);
      --surface2: rgba(37,99,255,0.06);
      --border:   rgba(37,99,255,0.14);
      --border-o: rgba(255,92,26,0.18);
      --text:     #f0f4ff;
      --muted:    #6b7fa8;
      --muted2:   #9aabd4;
    }

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

    html { scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
    html::-webkit-scrollbar, body::-webkit-scrollbar { display:none; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      font-weight: 300;
      overflow-x: hidden;
      cursor: none;
      opacity: 0;
      transition: opacity 0.9s ease;
    }
    body.ready { opacity: 1; }

    /* ── SVG FILTERS ── */
    .svg-defs { position:absolute; width:0; height:0; overflow:hidden; }

    /* ── FIXED OVERLAYS ── */
    #canvas-bg, #noise-canvas, #chroma-overlay, #scanlines {
      position: fixed;
      top:0; left:0;
      width:100%; height:100%;
      pointer-events: none;
    }
    #canvas-bg      { z-index:0; }
    #noise-canvas   { z-index:2; opacity:0.028; mix-blend-mode:overlay; }
    #chroma-overlay { z-index:4; opacity:0; mix-blend-mode:normal; }
    #scanlines {
      z-index:3;
      background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 2px,
        rgba(0,0,0,0.055) 2px, rgba(0,0,0,0.055) 4px
      );
    }

    /* ── PROGRESS BAR ── */
    #progress-bar {
      position: fixed;
      top:0; left:0;
      height: 2px; width: 0%;
      background: linear-gradient(90deg, var(--orange), var(--blue-l));
      z-index: 9999;
      box-shadow: 0 0 14px var(--orange-g);
      transition: width 0.06s linear;
    }

    /* ── CURSOR ── */
    .cursor {
      position: fixed;
      width:8px; height:8px;
      background: var(--orange);
      border-radius:50%;
      pointer-events:none;
      z-index:9998;
      transform:translate(-50%,-50%);
      transition: background 0.2s, transform 0.12s;
      will-change: left, top;
    }
    .cursor.hov {
      background: var(--blue-l);
      transform: translate(-50%,-50%) scale(2.4);
    }
    .cursor-ring {
      position: fixed;
      width:34px; height:34px;
      border: 1.5px solid rgba(37,99,255,0.5);
      border-radius:50%;
      pointer-events:none;
      z-index:9997;
      transform:translate(-50%,-50%);
      transition: border-color 0.3s, transform 0.3s;
      will-change: left, top;
    }
    .cursor-ring.hov {
      border-color: rgba(255,92,26,0.65);
      transform:translate(-50%,-50%) scale(1.4);
    }

    /* ── INTRO ── */
    #intro {
      position: fixed;
      inset:0;
      z-index:800;
      background: var(--bg);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    #intro-canvas {
      position:absolute;
      inset:0;
      width:100%; height:100%;
    }
    .intro-content {
      position:relative;
      z-index:2;
      text-align:center;
      user-select:none;
    }
    .intro-eyebrow {
      font-family:'DM Mono',monospace;
      font-size:0.62rem;
      letter-spacing:0.32em;
      text-transform:uppercase;
      color:var(--orange);
      margin-bottom:22px;
      opacity:0;
      animation: fadeIn 0.6s 0.4s forwards;
    }
    #intro-name {
      font-family:'Bebas Neue',sans-serif;
      font-size: clamp(2.5rem,9vw,8rem);
      line-height:0.9;
      letter-spacing:0.06em;
      color:var(--text);
      min-height:2.2em;
    }
    #intro-name .gc { color:var(--orange); opacity:0.75; }
    .intro-loader-bar {
      height:2px;
      width:0%;
      background:linear-gradient(90deg,var(--orange),var(--blue-l));
      margin:22px auto 0;
      max-width:360px;
      border-radius:2px;
      box-shadow:0 0 14px var(--orange-g);
      transition: width 2.4s cubic-bezier(0.23,1,0.32,1);
    }
    .intro-loader-bar.go { width:100%; }
    .intro-status {
      font-family:'DM Mono',monospace;
      font-size:0.6rem;
      letter-spacing:0.22em;
      text-transform:uppercase;
      color:var(--muted);
      margin-top:14px;
      opacity:0;
      animation: fadeIn 0.6s 0.9s forwards;
    }

    /* ── NAV ── */
    nav {
      position:fixed;
      top:0; left:0; right:0;
      z-index:500;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:0 56px;
      height:68px;
      background: rgba(5,8,16,0.78);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      border-bottom: 1px solid var(--border);
    }
    .nav-logo {
      font-family:'Bebas Neue',sans-serif;
      font-size:1.45rem;
      letter-spacing:0.14em;
      color:var(--text);
      text-decoration:none;
    }
    .nav-logo .dot { color:var(--orange); }
    .nav-links { display:flex; align-items:center; gap:40px; }
    .nav-links a {
      color:var(--muted);
      text-decoration:none;
      font-size:0.74rem;
      font-weight:500;
      letter-spacing:0.16em;
      text-transform:uppercase;
      transition:color 0.25s;
      position:relative;
      padding-bottom:3px;
    }
    .nav-links a::after {
      content:'';
      position:absolute;
      bottom:0; left:0;
      width:0; height:1px;
      background:linear-gradient(90deg,var(--orange),var(--blue-l));
      transition:width 0.38s cubic-bezier(0.23,1,0.32,1);
    }
    .nav-links a:hover, .nav-links a.active { color:var(--text); }
    .nav-links a:hover::after, .nav-links a.active::after { width:100%; }
    .nav-status {
      display:flex;
      align-items:center;
      gap:8px;
      font-family:'DM Mono',monospace;
      font-size:0.6rem;
      color:var(--muted);
      background:rgba(34,197,94,0.05);
      border:1px solid rgba(34,197,94,0.15);
      padding:6px 14px;
      border-radius:100px;
    }
    .status-dot {
      width:6px; height:6px;
      border-radius:50%;
      background:#22c55e;
      box-shadow:0 0 8px rgba(34,197,94,0.85);
      animation:pulseGreen 2s infinite;
      flex-shrink:0;
    }
    @keyframes pulseGreen {
      0%,100% { opacity:1; box-shadow:0 0 8px rgba(34,197,94,0.85); }
      50%      { opacity:0.3; box-shadow:0 0 4px rgba(34,197,94,0.3); }
    }

    /* ── SIDE DOTS ── */
    .side-dots {
      position:fixed;
      right:24px; top:50%;
      transform:translateY(-50%);
      z-index:400;
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .side-dot {
      width:6px; height:6px;
      border-radius:50%;
      background:var(--border);
      border:1px solid rgba(37,99,255,0.3);
      transition:all 0.32s cubic-bezier(0.23,1,0.32,1);
      cursor:pointer;
    }
    .side-dot.active {
      background:var(--orange);
      border-color:var(--orange);
      box-shadow:0 0 10px var(--orange-g);
      transform:scale(1.5);
    }
    .side-dot:hover { background:var(--blue-l); border-color:var(--blue-l); }

    /* ── SECTION WRAP ── */
    .section-wrap {
      position:relative;
      z-index:1;
      padding:120px 56px;
      max-width:1240px;
      margin:0 auto;
    }
    .divider {
      position:relative; z-index:1;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--border),transparent);
      max-width:1240px; margin:0 auto;
    }

    /* ── LABEL ── */
    .label {
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-family:'DM Mono',monospace;
      font-size:0.6rem;
      letter-spacing:0.24em;
      text-transform:uppercase;
      color:var(--orange);
      margin-bottom:18px;
    }
    .label .num { color:var(--blue-l); margin-right:4px; }

    /* ── HERO ── */
    #hero {
      position:relative;
      z-index:1;
      min-height:100vh;
      display:grid;
      grid-template-columns:1fr 320px;
      align-items:center;
      gap:60px;
      padding:90px 56px 60px;
      max-width:1240px;
      margin:0 auto;
    }
    .hero-eyebrow {
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:7px 18px;
      border:1px solid var(--border-o);
      border-radius:100px;
      font-family:'DM Mono',monospace;
      font-size:0.62rem;
      color:var(--orange-l);
      letter-spacing:0.14em;
      text-transform:uppercase;
      margin-bottom:32px;
      background:rgba(255,92,26,0.05);
      opacity:0;
      animation:fadeUp 0.8s 0.2s forwards;
    }
    .hero-eyebrow::before {
      content:'';
      width:6px; height:6px;
      border-radius:50%;
      background:var(--orange);
      box-shadow:0 0 10px var(--orange);
      animation:pulseGreen 2s infinite;
    }

    /* HERO NAME — glitch target */
    #heroName {
      font-family:'Bebas Neue',sans-serif;
      font-size:clamp(5rem,9vw,9.5rem);
      line-height:0.86;
      letter-spacing:0.03em;
      margin-bottom:32px;
      position:relative;
      opacity:0;
      animation:fadeUp 0.9s 0.4s forwards;
    }
    #heroName span { display:block; }
    #heroName .l1 { color:var(--text); }
    #heroName .l2 {
      color:transparent;
      -webkit-text-stroke:1.5px rgba(37,99,255,0.48);
    }
    #heroName .l3 {
      color:var(--orange);
      text-shadow:0 0 60px rgba(255,92,26,0.22);
    }
    .gc { color:var(--orange); opacity:0.72; }

    /* GLITCH KEYFRAMES */
    @keyframes glitchL1 {
      0%   { clip-path:inset(0 0 82% 0); transform:translateX(-6px); color:var(--blue-l); }
      25%  { clip-path:inset(35% 0 50% 0); transform:translateX(6px); color:var(--orange-l); }
      50%  { clip-path:inset(60% 0 20% 0); transform:translateX(-3px); }
      75%  { clip-path:inset(80% 0 0 0); transform:translateX(3px); color:var(--text); }
      100% { clip-path:none; transform:none; color:var(--text); }
    }
    @keyframes glitchL3 {
      0%   { transform:translateX(8px) skewX(-3deg); opacity:0.7; }
      33%  { transform:translateX(-8px) skewX(3deg); opacity:1; }
      66%  { transform:translateX(4px); opacity:0.85; }
      100% { transform:none; opacity:1; }
    }
    @keyframes glitchBar {
      0%,100% { height:2px; }
      40%      { height:8px; background:var(--orange); }
      70%      { height:1px; background:var(--blue-l); }
    }
    #heroName.glitching .l1 { animation:glitchL1 0.28s steps(2) forwards; }
    #heroName.glitching .l3 { animation:glitchL3 0.28s steps(2) forwards; }

    .hero-sub {
      font-size:1rem;
      font-weight:400;
      color:var(--muted2);
      max-width:480px;
      line-height:1.9;
      margin-bottom:44px;
      opacity:0;
      animation:fadeUp 0.9s 0.6s forwards;
    }
    .hero-sub strong { color:var(--text); font-weight:600; }
    .hero-ctas {
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      opacity:0;
      animation:fadeUp 0.9s 0.8s forwards;
    }

    /* ── BUTTONS ── */
    .btn-primary {
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:15px 32px;
      background:var(--orange);
      color:#fff;
      font-family:'Outfit',sans-serif;
      font-weight:600;
      font-size:0.82rem;
      letter-spacing:0.1em;
      text-transform:uppercase;
      text-decoration:none;
      border-radius:8px;
      box-shadow:0 0 40px var(--orange-g), inset 0 1px 0 rgba(255,255,255,0.18);
      transition:all 0.36s cubic-bezier(0.23,1,0.32,1);
      position:relative;
      overflow:hidden;
    }
    .btn-primary::before {
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,0.14),transparent);
    }
    .btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 52px var(--orange-g); }
    .btn-ghost {
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:14px 32px;
      border:1px solid var(--border);
      color:var(--muted2);
      font-family:'Outfit',sans-serif;
      font-weight:600;
      font-size:0.82rem;
      letter-spacing:0.1em;
      text-transform:uppercase;
      text-decoration:none;
      border-radius:8px;
      background:var(--surface);
      backdrop-filter:blur(10px);
      transition:all 0.36s cubic-bezier(0.23,1,0.32,1);
    }
    .btn-ghost:hover {
      border-color:rgba(37,99,255,0.5);
      color:var(--blue-l);
      background:var(--surface2);
      transform:translateY(-3px);
      box-shadow:0 8px 40px rgba(37,99,255,0.1);
    }

    /* ── HERO CARD ── */
    .hero-card {
      background:rgba(255,255,255,0.024);
      border:1px solid var(--border);
      border-radius:20px;
      padding:34px 26px;
      backdrop-filter:blur(24px);
      position:relative;
      overflow:hidden;
      opacity:0;
      animation:fadeLeft 0.9s 1s forwards;
    }
    .hero-card::before {
      content:'';
      position:absolute;
      top:-60px; right:-60px;
      width:200px; height:200px;
      background:radial-gradient(circle,rgba(37,99,255,0.14),transparent 70%);
    }
    .hero-card::after {
      content:'';
      position:absolute;
      bottom:-40px; left:-40px;
      width:140px; height:140px;
      background:radial-gradient(circle,rgba(255,92,26,0.08),transparent 70%);
    }
    .hc-label {
      font-family:'DM Mono',monospace;
      font-size:0.58rem;
      letter-spacing:0.22em;
      text-transform:uppercase;
      color:var(--muted);
      margin-bottom:26px;
    }
    .hc-stats { display:flex; flex-direction:column; gap:18px; }
    .hc-stat {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding-bottom:18px;
      border-bottom:1px solid rgba(255,255,255,0.04);
    }
    .hc-stat:last-child { border-bottom:none; padding-bottom:0; }
    .hc-stat-l { font-size:0.76rem; color:var(--muted); }
    .hc-stat-v {
      font-family:'Bebas Neue',sans-serif;
      font-size:2rem;
      line-height:1;
      letter-spacing:0.05em;
    }
    .b { color:var(--blue-l); }
    .o { color:var(--orange); }
    .w { color:var(--text); }
    .avail {
      margin-top:26px;
      padding:12px 16px;
      background:rgba(34,197,94,0.07);
      border:1px solid rgba(34,197,94,0.2);
      border-radius:10px;
      display:flex;
      align-items:center;
      gap:10px;
      font-size:0.75rem;
      color:#86efac;
    }
    .av-dot {
      width:8px; height:8px;
      border-radius:50%;
      background:#22c55e;
      box-shadow:0 0 10px rgba(34,197,94,0.85);
      flex-shrink:0;
      animation:pulseGreen 2s infinite;
    }
    .scroll-hint {
      position:absolute;
      bottom:36px; left:56px;
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--muted);
      font-family:'DM Mono',monospace;
      font-size:0.6rem;
      letter-spacing:0.22em;
      text-transform:uppercase;
      opacity:0;
      animation:fadeIn 1s 2s forwards;
      z-index:2;
    }
    .scroll-line {
      width:48px; height:1px;
      background:linear-gradient(90deg,var(--orange),transparent);
      animation:scrollPulse 2.2s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%,100% { width:48px; opacity:1; }
      50%      { width:76px; opacity:0.4; }
    }

    /* ── ABOUT ── */
    .about-layout {
      display:grid;
      grid-template-columns:340px 1fr;
      gap:90px;
      align-items:center;
    }
    .about-visual { position:relative; }
    .about-frame {
      position:relative;
      border-radius:14px;
      overflow:hidden;
    }
    .about-frame img {
      width:100%;
      display:block;
      filter:grayscale(20%) brightness(0.86);
      border-radius:14px;
      transition:filter 0.5s ease;
    }
    .about-frame:hover img { filter:grayscale(0%) brightness(1); }
    .about-frame::after {
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,transparent 50%,rgba(5,8,16,0.75));
      border-radius:14px;
    }
    .corner {
      position:absolute;
      width:22px; height:22px;
      z-index:2;
    }
    .corner.tl { top:-8px; left:-8px; border-top:2px solid var(--orange); border-left:2px solid var(--orange); }
    .corner.br { bottom:-8px; right:-8px; border-bottom:2px solid var(--blue-l); border-right:2px solid var(--blue-l); }
    .about-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
    .about-tag {
      font-family:'DM Mono',monospace;
      font-size:0.62rem;
      padding:5px 12px;
      border:1px solid var(--border);
      border-radius:4px;
      color:var(--muted2);
      background:var(--surface);
      transition:all 0.25s;
    }
    .about-tag:hover { border-color:rgba(37,99,255,0.35); color:var(--blue-l); }
    .about-content h2 {
      font-family:'Bebas Neue',sans-serif;
      font-size:clamp(2.8rem,4vw,4.2rem);
      line-height:0.95;
      letter-spacing:0.03em;
      margin-bottom:26px;
    }
    .about-content p {
      color:var(--muted2);
      line-height:1.9;
      font-size:0.93rem;
      margin-bottom:14px;
    }
    .about-content p strong { color:var(--text); font-weight:600; }
    .about-divider {
      width:48px; height:2px;
      background:linear-gradient(90deg,var(--orange),transparent);
      margin:26px 0;
    }

    /* ── SKILLS ── */
    .section-title {
      font-family:'Bebas Neue',sans-serif;
      font-size:clamp(3rem,5vw,4.8rem);
      line-height:0.92;
      letter-spacing:0.03em;
      margin-bottom:44px;
    }
    .skill-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1px;
      background:var(--border);
      border:1px solid var(--border);
      border-radius:16px;
      overflow:hidden;
      margin-bottom:54px;
    }
    .skill-cell {
      background:var(--bg2);
      padding:34px 22px;
      position:relative;
      transition:background 0.4s;
      overflow:hidden;
    }
    .skill-cell::before {
      content:'';
      position:absolute;
      top:0; left:0;
      width:100%; height:2px;
      background:linear-gradient(90deg,var(--orange),var(--blue-l));
      transform:scaleX(0);
      transform-origin:left;
      transition:transform 0.42s cubic-bezier(0.23,1,0.32,1);
    }
    .skill-cell::after {
      content:'';
      position:absolute;
      bottom:0; right:0;
      width:120px; height:120px;
      background:radial-gradient(circle at bottom right,rgba(37,99,255,0.07),transparent 70%);
      opacity:0;
      transition:opacity 0.4s;
    }
    .skill-cell:hover { background:rgba(37,99,255,0.04); }
    .skill-cell:hover::before { transform:scaleX(1); }
    .skill-cell:hover::after { opacity:1; }
    .skill-icon {
      width:42px; height:42px;
      border-radius:10px;
      background:rgba(37,99,255,0.08);
      border:1px solid rgba(37,99,255,0.15);
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:16px;
      transition:all 0.3s;
    }
    .skill-cell:hover .skill-icon { background:rgba(255,92,26,0.1); border-color:rgba(255,92,26,0.25); }
    .skill-icon svg { width:18px; height:18px; }
    .skill-name { font-family:'Outfit',sans-serif; font-weight:700; font-size:0.9rem; color:var(--text); margin-bottom:9px; }
    .skill-desc { color:var(--muted); font-size:0.8rem; line-height:1.7; }

    /* ── MARQUEE ── */
    .marquee-wrap {
      overflow:hidden;
      position:relative;
      padding:22px 0;
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
    }
    .marquee-wrap::before,
    .marquee-wrap::after {
      content:'';
      position:absolute;
      top:0; bottom:0;
      width:100px; z-index:2;
    }
    .marquee-wrap::before { left:0; background:linear-gradient(90deg,var(--bg),transparent); }
    .marquee-wrap::after  { right:0; background:linear-gradient(270deg,var(--bg),transparent); }
    .marquee-track {
      display:flex;
      width:max-content;
      animation:marqueeAnim 32s linear infinite;
    }
    .marquee-track:hover { animation-play-state:paused; }
    @keyframes marqueeAnim { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    .tech-pill {
      padding:8px 22px;
      border-right:1px solid var(--border);
      font-family:'DM Mono',monospace;
      font-size:0.7rem;
      color:var(--muted2);
      letter-spacing:0.06em;
      white-space:nowrap;
      display:flex;
      align-items:center;
      gap:8px;
      transition:color 0.25s;
      cursor:default;
    }
    .tech-pill::before {
      content:'';
      width:4px; height:4px;
      border-radius:50%;
      background:var(--orange);
      opacity:0.55;
      flex-shrink:0;
    }
    .tech-pill:hover { color:var(--orange-l); }

    /* ── PROJECTS ── */
    .projects-layout {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
      margin-top:44px;
    }
    .project-card {
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:16px;
      padding:38px 32px;
      position:relative;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      transform-style:preserve-3d;
      will-change:transform;
      transition:border-color 0.4s, box-shadow 0.4s, transform 0.22s ease;
    }
    /* Top shimmer line */
    .project-card::before {
      content:'';
      position:absolute;
      top:0; left:0; right:0;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--blue-l),transparent);
      opacity:0;
      transition:opacity 0.4s;
    }
    /* ICE/FROST shimmer sweep */
    .project-card::after {
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(
        108deg,
        transparent 35%,
        rgba(90,160,255,0.07) 50%,
        rgba(37,99,255,0.04) 55%,
        transparent 65%
      );
      transform:translateX(-120%);
      transition:transform 0.75s ease;
      pointer-events:none;
      border-radius:16px;
    }
    .project-card:hover {
      border-color:rgba(37,99,255,0.32);
      box-shadow:0 28px 70px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(37,99,255,0.1);
    }
    .project-card:hover::before { opacity:1; }
    .project-card:hover::after  { transform:translateX(120%); }
    .project-card.featured {
      grid-row:span 2;
      background:linear-gradient(145deg,rgba(37,99,255,0.06),rgba(5,8,16,0.92));
      border-color:rgba(37,99,255,0.18);
    }
    /* Chromatic aberration on hover — box-shadow trick */
    .project-card.chroma-on {
      box-shadow:
        -3px 0 0 rgba(255,0,80,0.28),
        3px 0 0 rgba(0,200,255,0.28),
        0 28px 70px rgba(0,0,0,0.55);
      transition:box-shadow 0s;
    }
    .proj-glow {
      position:absolute;
      top:-80px; right:-80px;
      width:200px; height:200px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(37,99,255,0.1),transparent 70%);
      opacity:0;
      transition:opacity 0.4s;
    }
    .project-card:hover .proj-glow { opacity:1; }
    .proj-num {
      font-family:'DM Mono',monospace;
      font-size:0.58rem;
      color:var(--muted);
      letter-spacing:0.22em;
      margin-bottom:22px;
    }
    .proj-tag {
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size:0.58rem;
      font-weight:600;
      letter-spacing:0.16em;
      text-transform:uppercase;
      color:var(--orange);
      margin-bottom:12px;
    }
    .proj-tag::before { content:''; width:16px; height:1px; background:var(--orange); }
    .proj-name {
      font-family:'Bebas Neue',sans-serif;
      font-size:2.2rem;
      letter-spacing:0.04em;
      color:var(--text);
      margin-bottom:12px;
      line-height:1;
    }
    .project-card.featured .proj-name { font-size:3.4rem; }
    .proj-desc {
      color:var(--muted2);
      font-size:0.86rem;
      line-height:1.76;
      margin-bottom:26px;
      flex:1;
    }
    .proj-footer {
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding-top:16px;
      border-top:1px solid rgba(255,255,255,0.04);
    }
    .proj-techs { display:flex; gap:7px; flex-wrap:wrap; }
    .proj-tech {
      font-family:'DM Mono',monospace;
      font-size:0.57rem;
      color:var(--muted);
      padding:3px 8px;
      background:rgba(255,255,255,0.04);
      border-radius:4px;
      border:1px solid transparent;
      transition:border-color 0.25s;
    }
    .project-card:hover .proj-tech { border-color:rgba(37,99,255,0.12); }
    .proj-link {
      display:inline-flex;
      align-items:center;
      gap:7px;
      font-size:0.76rem;
      font-weight:600;
      color:var(--blue-l);
      text-decoration:none;
      letter-spacing:0.06em;
      transition:color 0.25s;
      white-space:nowrap;
    }
    .proj-link svg { transition:transform 0.25s; }
    .proj-link:hover { color:var(--orange); }
    .proj-link:hover svg { transform:translate(3px,-3px); }

    /* ── CONTACT STRIP ── */
    .contact-strip {
      position:relative; z-index:1;
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      background:var(--surface);
      overflow:hidden;
    }
    .contact-strip::before {
      content:'';
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse at 20% 50%,rgba(255,92,26,0.06),transparent 60%),
        radial-gradient(ellipse at 80% 50%,rgba(37,99,255,0.06),transparent 60%);
    }
    .contact-inner {
      position:relative;
      max-width:1240px; margin:0 auto;
      padding:80px 56px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:40px;
    }
    .contact-text h2 {
      font-family:'Bebas Neue',sans-serif;
      font-size:clamp(2.4rem,4vw,3.8rem);
      letter-spacing:0.03em;
      line-height:1;
      margin-bottom:12px;
    }
    .contact-text p { color:var(--muted2); font-size:0.9rem; line-height:1.76; }

    /* ── FOOTER ── */
    footer {
      position:relative; z-index:1;
      max-width:1240px; margin:0 auto;
      padding:32px 56px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      color:var(--muted);
      font-size:0.75rem;
      letter-spacing:0.06em;
      border-top:1px solid rgba(37,99,255,0.06);
    }
    footer a { color:var(--orange); text-decoration:none; transition:opacity 0.2s; }
    footer a:hover { opacity:0.7; }
    .f-logo {
      font-family:'Bebas Neue',sans-serif;
      font-size:1.2rem;
      letter-spacing:0.12em;
      color:var(--muted);
    }
    .f-logo .dot { color:var(--orange); }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp  { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:none} }
    @keyframes fadeLeft{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} }
    @keyframes fadeIn  { from{opacity:0} to{opacity:0.7} }

    /* ── REVEAL ── */
    .reveal {
      opacity:0;
      transform:translateY(36px);
      transition:opacity 0.9s cubic-bezier(0.23,1,0.32,1), transform 0.9s cubic-bezier(0.23,1,0.32,1);
    }
    .reveal.vis { opacity:1; transform:none; }
    .rd1 { transition-delay:0.1s; }
    .rd2 { transition-delay:0.22s; }
    .rd3 { transition-delay:0.34s; }

    /* ── MOBILE ── */
    @media (max-width:900px) {
      nav { padding:16px 22px; }
      .nav-status, .side-dots { display:none; }
      .nav-links { gap:20px; }
      #hero { grid-template-columns:1fr; padding:100px 22px 60px; }
      .hero-card { display:none; }
      #heroName { font-size:clamp(4rem,13vw,7rem); }
      .section-wrap { padding:80px 22px; }
      .about-layout { grid-template-columns:1fr; gap:48px; }
      .about-visual { max-width:300px; margin:0 auto; }
      .about-content h2 { font-size:2.8rem; }
      .skill-grid { grid-template-columns:1fr 1fr; }
      .projects-layout { grid-template-columns:1fr; }
      .project-card.featured { grid-row:span 1; }
      .contact-inner { flex-direction:column; gap:28px; text-align:center; }
      footer { flex-direction:column; gap:14px; text-align:center; }
      .scroll-hint { left:22px; }
    }
    @media (max-width:600px) {
      .skill-grid { grid-template-columns:1fr; }
      .nav-links { gap:14px; }
    }
    @media (hover:none) {
      .cursor, .cursor-ring { display:none; }
      body { cursor:auto; }
    }