*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    :root {
      --black: #06060a;
      --blue: #1a7fff;
      --blue-glow: #1a7fff55;
      --orange: #ff5e1a;
      --orange-glow: #ff5e1a44;
      --white: #f0f0f0;
      --grey: #888;
    }

    html, body {
      background: var(--black);
      color: var(--white);
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      cursor: none;
    }

    /* CURSOR */
    .cursor { position:fixed; width:8px; height:8px; background:var(--blue); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); box-shadow:0 0 12px var(--blue); transition:transform 0.15s, background 0.2s, width 0.2s, height 0.2s; }
    .cursor-ring { position:fixed; width:28px; height:28px; border:1px solid rgba(26,127,255,0.4); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:left 0.09s ease, top 0.09s ease, width 0.2s, height 0.2s; }

    /* LOADER */
    #loader { position:fixed; inset:0; z-index:10000; background:var(--black); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; transition:opacity 1s ease; }
    .ld-logo { font-family:'Bebas Neue',sans-serif; font-size:56px; letter-spacing:16px; color:var(--white); opacity:0; animation:ldFade 0.6s ease 0.3s forwards; }
    .ld-logo span { color:var(--blue); }
    .ld-bar-wrap { width:240px; height:1px; background:#111; }
    .ld-bar { height:100%; width:0%; background:linear-gradient(90deg, var(--blue), var(--orange)); }
    .ld-pct { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:4px; color:var(--grey); }
    @keyframes ldFade { to { opacity:1; } }

    /* FIXED 3D CANVAS */
    #scene-canvas { position:fixed; inset:0; z-index:0; }

    /* SCROLL SPACE — 700vh creates scroll room */
    #scroll-space { height:700vh; position:relative; z-index:1; pointer-events:none; }

    /* PROGRESS LINE */
    .prog { position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--blue),var(--orange)); z-index:200; width:0%; pointer-events:none; transition:width 0.15s; }

    /* NAV */
    nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; justify-content:space-between; align-items:center; padding:28px 52px; opacity:0; transition:opacity 0.8s; pointer-events:none; }
    nav.show { opacity:1; pointer-events:all; }
    .nav-logo { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:5px; }
    .nav-logo span { color:var(--blue); }
    .nav-links { display:flex; gap:36px; }
    .nav-links a { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--grey); text-decoration:none; text-transform:uppercase; transition:color 0.2s; cursor:none; }
    .nav-links a:hover, .nav-links a.active { color:var(--white); }

    /* LEFT DOT NAV */
    .left-nav { display:none !important; }
    .left-nav.show { opacity:1; pointer-events:all; }
    .l-item { display:flex; align-items:center; gap:12px; cursor:none; }
    .l-dot { width:6px; height:6px; border:1px solid rgba(255,255,255,0.25); border-radius:50%; background:transparent; opacity:0.35; transition:all 0.25s; flex-shrink:0; }
    .l-lbl { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px; color:var(--grey); text-transform:uppercase; opacity:0; transform:translateX(-8px); transition:opacity 0.2s, transform 0.2s; white-space:nowrap; pointer-events:none; }
    .l-item:hover .l-dot { opacity:0.7; transform:scale(1.2); }
    .l-item:hover .l-lbl { opacity:1; transform:translateX(0); }
    .l-item.active .l-dot { background:var(--white); border-color:transparent; transform:scale(1.6); opacity:1; }
    .l-item.active .l-lbl { opacity:1; transform:translateX(0); color:var(--white); }

    /* CHAPTER PANELS */
    .chapter {
      position:fixed; inset:0; z-index:10;
      display:flex; align-items:center;
      padding:100px 52px 80px;
      opacity:0; pointer-events:none;
    }
    .chapter.visible { pointer-events:all; }

    /* TEXT READABILITY — backdrop behind text */
    .ch-inner {
      position:relative;
      padding:36px 40px;
      background:linear-gradient(135deg, rgba(6,6,10,0.94) 0%, rgba(6,6,10,0.88) 100%);
      border:1px solid rgba(255,255,255,0.06);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
      max-width:560px;

      box-shadow:0 0 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .ch-inner::before {
      content:'';
      position:absolute; top:0; left:0;
      width:3px; height:60%;
      background:linear-gradient(to bottom, var(--blue), transparent);
    }

    /* HERO — no backdrop, full cinematic */
    #ch-hero { flex-direction:column; align-items:flex-start; justify-content:center; padding-left:52px; }
    #ch-hero .ch-inner { background:none; border:none; backdrop-filter:none; box-shadow:none; clip-path:none; padding:0; }
    #ch-hero .ch-inner::before { display:none; }

    .hero-tag { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:4px; color:var(--orange); text-transform:uppercase; margin-bottom:24px; }
    .hero-h { font-family:'Bebas Neue',sans-serif; font-size:clamp(72px,11vw,145px); line-height:0.9; letter-spacing:2px; margin-bottom:32px; }
    .hero-h .l1, .hero-h .l2 { display:block; color:var(--white); text-shadow:0 0 60px rgba(0,0,0,0.8); }
    .hero-h .l3 { display:block; -webkit-text-stroke:1.5px var(--blue); color:transparent; }
    .hero-sub { font-size:15px; color:rgba(200,200,200,0.85); line-height:1.7; max-width:420px; margin-bottom:40px; text-shadow:0 2px 20px rgba(0,0,0,0.9); }
    .hero-btns { display:flex; gap:16px; }

    /* SCROLL HINT */
    .scroll-cta { position:fixed; bottom:52px; left:52px; z-index:10; display:flex; align-items:center; gap:14px; opacity:0; transition:opacity 0.8s; pointer-events:none; }
    .scroll-cta.show { opacity:1; }
    .sc-line { width:48px; height:1px; background:var(--orange); animation:scLine 2s ease-in-out infinite; }
    .sc-txt { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:3px; color:var(--grey); text-transform:uppercase; }
    @keyframes scLine { 0%,100%{width:48px;opacity:1} 50%{width:72px;opacity:0.4} }

    /* STATS */
    .hero-stats { position:fixed; bottom:52px; right:52px; z-index:10; display:flex; gap:52px; opacity:0; transition:opacity 0.8s; pointer-events:none; }
    .hero-stats.show { opacity:1; }
    .st-n { font-family:'Bebas Neue',sans-serif; font-size:38px; color:var(--blue); line-height:1; text-shadow:0 0 20px var(--blue-glow); }
    .st-l { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px; color:var(--grey); text-transform:uppercase; }

    /* CONTENT CHAPTERS */
    #ch-about { justify-content:flex-end; }
    #ch-skills { justify-content:flex-start; }
    #ch-projects { justify-content:flex-end; }
    #ch-experience { justify-content:flex-start; }
    #ch-contact { flex-direction:column; justify-content:center; align-items:center; text-align:center; }
    #ch-contact .ch-inner { max-width:680px; background:linear-gradient(135deg, rgba(6,6,10,0.92) 0%, rgba(6,6,10,0.78) 100%); display:flex; flex-direction:column; align-items:center; }

    /* SECTION LABELS */
    .ch-label { font-family:'Space Mono',monospace; font-size:12px; letter-spacing:4px; color:var(--orange); text-transform:uppercase; margin-bottom:16px; }
    .ch-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(44px,5.5vw,76px); line-height:1; margin-bottom:14px; }
    .ch-title span { color:var(--blue); }
    .ch-divider { width:0; height:2px; background:linear-gradient(90deg, var(--blue), var(--orange)); margin-bottom:24px; transition:width 0.9s ease 0.4s; }
    .ch-divider.open { width:60px; }
    .ch-text { font-size:15px; color:rgba(220,220,220,0.95); line-height:1.9; margin-bottom:16px; }

    /* SKILLS GRID */
    .skills-mini { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:20px; }
    .sk { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); padding:16px 8px; text-align:center; clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px)); transition:border-color 0.3s, box-shadow 0.3s, background 0.3s; }
    .sk:hover { border-color:var(--blue); box-shadow:0 0 12px var(--blue-glow); background:rgba(26,127,255,0.08); }
    .sk-icon { font-size:22px; margin-bottom:8px; }
    .sk-name { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; color:rgba(220,220,220,0.95); }

    /* PROJECTS LIST */
    .proj-mini { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
    .pm { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:14px 16px; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); display:flex; justify-content:space-between; align-items:center; transition:border-color 0.3s, background 0.3s, transform 0.2s; cursor:none; }
    .pm:hover { border-color:rgba(26,127,255,0.4); background:rgba(26,127,255,0.05); transform:translateX(4px); }
    .pm-title { font-family:'Bebas Neue',sans-serif; font-size:22px; }
    .pm-sub { font-size:13px; color:rgba(200,200,200,0.85); margin-top:4px; line-height:1.6; }
    .pm-tag { font-family:'Space Mono',monospace; font-size:8px; letter-spacing:1px; padding:3px 7px; border:1px solid var(--orange-glow); color:var(--orange); text-transform:uppercase; }
    .pm-tag.live { border-color:rgba(26,127,255,0.4); color:var(--blue); }
    .pm-arrow { font-family:'Space Mono',monospace; font-size:12px; color:var(--blue); text-decoration:none; cursor:none; pointer-events:all; }

    /* EXPERIENCE */
    .exp-mini { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
    .em { border-left:2px solid rgba(255,255,255,0.08); padding:6px 0 6px 16px; transition:border-color 0.3s; }
    .em:hover { border-color:var(--orange); }
    .em-year { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--orange); text-transform:uppercase; margin-bottom:5px; }
    .em-title { font-family:'Bebas Neue',sans-serif; font-size:24px; line-height:1; margin-bottom:4px; }
    .em-co { font-size:13px; color:var(--blue); margin-bottom:6px; }
    .em-desc { font-size:13px; color:rgba(210,210,210,0.9); line-height:1.7; margin-top:6px; }

    /* CONTACT */
    .contact-big { font-family:'Bebas Neue',sans-serif; font-size:clamp(56px,9vw,120px); line-height:1; margin-bottom:16px; }
    .contact-big span { color:var(--blue); }
    .contact-sub { font-size:16px; color:rgba(220,220,220,0.95); line-height:1.8; max-width:480px; margin-bottom:40px; }
    .c-links { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; pointer-events:all; }
    .c-btn { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--grey); text-decoration:none; text-transform:uppercase; padding:11px 20px; border:1px solid rgba(255,255,255,0.1); clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); transition:color 0.2s, border-color 0.2s, box-shadow 0.2s; cursor:none; }
    .c-btn:hover { color:var(--blue); border-color:var(--blue-glow); box-shadow:0 0 14px var(--blue-glow); }

    /* BUTTONS */
    .btn-p { padding:13px 28px; background:var(--blue); color:#fff; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); transition:box-shadow 0.3s; cursor:none; pointer-events:all; display:inline-block; }
    .btn-p:hover { box-shadow:0 0 28px var(--blue-glow); }
    .btn-s { padding:13px 28px; background:rgba(0,0,0,0.4); color:var(--white); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; border:1px solid rgba(255,255,255,0.15); clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); transition:border-color 0.3s, box-shadow 0.3s; cursor:none; pointer-events:all; display:inline-block; }
    .btn-s:hover { border-color:var(--orange); box-shadow:0 0 18px var(--orange-glow); }

    /* FOOTER */
    #footer-bar { position:fixed; bottom:0; left:0; right:0; z-index:100; padding:16px 52px; display:flex; justify-content:space-between; align-items:center; opacity:0; transition:opacity 0.8s; pointer-events:none; }
    #footer-bar.show { opacity:1; }
    .ft { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px; color:#cac4c4; text-transform:uppercase; }
    .ft-dot { width:4px; height:4px; background:var(--orange); border-radius:50%; animation:ftp 2s ease-in-out infinite; }
    @keyframes ftp { 0%,100%{box-shadow:0 0 4px var(--orange)} 50%{box-shadow:0 0 12px var(--orange)} }

    /* HAMBURGER */
    .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:none; padding:4px; z-index:101; }
    .hamburger span { display:block; width:22px; height:1.5px; background:var(--white); transition:all 0.3s ease; }
    .hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity:0; }
    .hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

    /* MOBILE MENU */
    .mobile-menu {
      display:none;
      position:fixed; inset:0; z-index:99;
      background:rgba(6,6,10,0.97);
      backdrop-filter:blur(20px);
      flex-direction:column; align-items:center; justify-content:center; gap:32px;
      opacity:0; pointer-events:none;
      transition:opacity 0.3s ease;
    }
    .mobile-menu.open { opacity:1; pointer-events:all; }
    .mob-link {
      font-family:'Bebas Neue',sans-serif; font-size:48px; letter-spacing:4px;
      color:var(--grey); text-decoration:none; text-transform:uppercase;
      transition:color 0.2s, transform 0.2s; cursor:none;
    }
    .mob-link:hover { color:var(--white); transform:translateX(8px); }
    .mob-link.active { color:var(--blue); }

    @media(max-width:768px) {
      nav { padding:18px 20px; }
      .nav-links { display:none; }
      .hamburger { display:flex; }
      .mobile-menu { display:flex; }
      .left-nav { display:none; }
      .chapter { padding:80px 20px 70px; }
      #ch-hero { padding:80px 20px; }
      .ch-inner { padding:28px 24px; max-width:100%; }
      .hero-stats { display:none; }
      #footer-bar { padding:12px 20px; }
    }