:root {
    --amber: #f5a623;
    --amber-glow: rgba(245,166,35,0.35);
    --gold: #ffd060;
    --dark: #060606;
    --panel: rgba(255,255,255,0.04);
    --border: rgba(255,255,255,0.1);
    --border-hover: rgba(245,166,35,0.45);
    --text: #d8d0c8;
    --text-dim: rgba(216,208,200,0.55);
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; background: var(--dark); color: var(--text); font-family: 'Exo 2', sans-serif; overflow: hidden; cursor: none; }

  /* BG */
  .bg-wrap { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
  .bg-img {
    position: absolute; inset: -5%; width: 110%; height: 110%;
    background-size: cover; background-position: center center;
    filter: brightness(0.42) contrast(1.12) saturate(0.75);
    will-change: transform; animation: heroFloat 16s ease-in-out infinite;
  }
  @keyframes heroFloat {
    0%   { transform: scale(1.04) translate(0px, 0px); }
    25%  { transform: scale(1.06) translate(-7px, -5px); }
    50%  { transform: scale(1.05) translate(5px, -7px); }
    75%  { transform: scale(1.06) translate(-4px, 4px); }
    100% { transform: scale(1.04) translate(0px, 0px); }
  }
  .visor-glow {
    position: absolute; left: 17%; top: 26%; width: 300px; height: 220px;
    background: radial-gradient(ellipse at center, rgba(255,140,0,0.6) 0%, rgba(200,80,0,0.28) 40%, transparent 70%);
    border-radius: 50%; filter: blur(22px);
    animation: visorPulse 3.2s ease-in-out infinite; pointer-events: none;
  }
  @keyframes visorPulse { 0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.18)} }
  .bg-fade-left   { position:absolute;inset:0;background:linear-gradient(to right,rgba(6,6,6,.85) 0%,rgba(6,6,6,.6) 40%,rgba(6,6,6,.12) 65%,transparent 100%); }
  .bg-fade-bottom { position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,.92) 0%,transparent 38%); }
  .bg-fade-top    { position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,6,.72) 0%,transparent 28%); }

  /* VFX */
  #vfx { position:fixed;inset:0;z-index:1;pointer-events:none; }

  /* Overlays */
  .scanlines { position:fixed;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.1) 3px,rgba(0,0,0,.1) 4px);opacity:.45; }
  .scan-beam { position:fixed;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(245,166,35,.07),transparent);z-index:3;pointer-events:none;animation:beamScan 9s linear infinite; }
  @keyframes beamScan { from{top:-2px}to{top:100%} }

  /* HUD corners */
  .hc { position:fixed;width:52px;height:52px;z-index:6;pointer-events:none;opacity:.55; }
  .hc.tl{top:14px;left:14px;border-top:1px solid var(--amber);border-left:1px solid var(--amber)}
  .hc.tr{top:14px;right:14px;border-top:1px solid var(--amber);border-right:1px solid var(--amber)}
  .hc.bl{bottom:14px;left:14px;border-bottom:1px solid var(--amber);border-left:1px solid var(--amber)}
  .hc.br{bottom:14px;right:14px;border-bottom:1px solid var(--amber);border-right:1px solid var(--amber)}

  /* HUD meters */
  .hud-meters { position:fixed;bottom:82px;left:28px;z-index:10;pointer-events:none;display:flex;flex-direction:column;gap:5px;animation:fadeUp 1s ease 1.4s both; }
  .meter-row { display:flex;align-items:center;gap:8px; }
  .meter-lbl { font-family:'Orbitron',monospace;font-size:.46rem;letter-spacing:.2em;color:var(--amber);opacity:.65;text-transform:uppercase;width:44px; }
  .segs { display:flex;gap:2px; }
  .seg { width:14px;height:5px;background:var(--amber);box-shadow:0 0 5px var(--amber);opacity:.75; }
  .seg.dim { opacity:.18;box-shadow:none; }

  /* Cursor */
  *, a, button, input, textarea, select, label, .sb, .nav-card, [role="button"] { cursor: none !important; }
  #cursor { position:fixed;pointer-events:none;z-index:999;transform:translate(-50%,-50%); }
  #cursor svg { width:26px;height:26px; }
  #cursor.on-link .cur-dot { fill:#ff2020;filter:drop-shadow(0 0 3px #ff2020); }
  #cursor.on-link circle:first-child { stroke:rgba(255,60,60,.8); }

  /* Page */
  .page { position:relative;z-index:10;height:100vh;display:flex;flex-direction:column; }

  /* Header */
  header { display:flex;justify-content:space-between;align-items:center;padding:22px 48px;border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(2px);animation:fadeDown .8s ease both; }
  .logo { font-family:'Orbitron',monospace;font-weight:900;font-size:1rem;letter-spacing:.35em;color:#fff;text-transform:uppercase;display:flex;align-items:center;gap:10px;text-decoration:none; }
  .logo-dot { width:7px;height:7px;background:var(--amber);border-radius:50%;box-shadow:0 0 10px var(--amber),0 0 20px var(--amber-glow);animation:dotPulse 2.5s ease-in-out infinite; }
  @keyframes dotPulse { 0%,100%{box-shadow:0 0 10px var(--amber),0 0 20px var(--amber-glow)}50%{box-shadow:0 0 4px var(--amber)} }

  .hud-status { font-family:'Orbitron',monospace;font-size:.58rem;letter-spacing:.18em;color:rgba(245,166,35,.4);text-transform:uppercase;display:flex;gap:28px; }
  .hud-status span { display:flex;align-items:center;gap:5px; }
  .hud-status span::before { content:'';width:5px;height:5px;background:var(--amber);border-radius:50%;opacity:.45; }

  /* Hero */
  .hero { display:flex;align-items:center;justify-content:space-between;flex:1;padding:50px 80px 36px;gap:48px; }
  .hero-left { flex:1;max-width:520px;animation:fadeRight 1s ease .3s both; }
  .hello-tag { font-family:'Exo 2',sans-serif;font-style:italic;font-weight:300;font-size:1rem;letter-spacing:.05em;color:var(--text-dim);margin-bottom:8px; }
  h1 { font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1.08;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.8);margin-bottom:20px; }
  h1 .hl { color:var(--amber);text-shadow:0 0 30px var(--amber-glow),0 0 60px rgba(245,166,35,.15); }
  .hero-bio { font-size:.92rem;font-weight:300;color:var(--text-dim);line-height:1.75;max-width:420px;margin-bottom:36px;padding-left:14px;border-left:2px solid rgba(245,166,35,.3); }
  .hero-actions { display:flex;gap:14px;flex-wrap:wrap; }

  .btn-primary { font-family:'Orbitron',monospace;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1a0c00;background:var(--amber);border:none;padding:14px 30px;cursor:pointer;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:all .25s;position:relative;overflow:hidden; }
  .btn-primary::before { content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-100%);transition:.4s; }
  .btn-primary:hover::before { transform:translateX(100%); }
  .btn-primary:hover { background:var(--gold);box-shadow:0 0 28px var(--amber-glow); }

  .btn-ghost { font-family:'Orbitron',monospace;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);background:transparent;border:1px solid var(--border);padding:13px 26px;cursor:pointer;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:all .25s; }
  .btn-ghost:hover { border-color:rgba(245,166,35,.5);color:#fff;background:rgba(245,166,35,.06);box-shadow:0 0 20px rgba(245,166,35,.12); }
  .btn-ghost.lines-locked { border-color:rgba(245,166,35,.7);color:var(--amber);background:rgba(245,166,35,.1);box-shadow:0 0 28px var(--amber-glow),inset 0 0 14px rgba(245,166,35,.06); }
  #lnv { position:fixed;inset:0;z-index:11;pointer-events:none; }

  /* Cards */
  .hero-right { display:grid;grid-template-columns:1fr 1fr;gap:14px;animation:fadeLeft 1s ease .5s both; }
  .nav-card { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px) saturate(1.2);padding:34px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;min-width:148px;min-height:148px; }
  .nav-card::after { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent);transform:scaleX(0);transition:transform .4s; }
  .nav-card:hover { border-color:var(--border-hover);transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 1px rgba(245,166,35,.12),inset 0 0 30px rgba(245,166,35,.04);background:rgba(245,166,35,.05); }
  .nav-card:hover::after { transform:scaleX(1); }
  .nav-card:nth-child(1){animation:cardIn .6s ease .65s both}
  .nav-card:nth-child(2){animation:cardIn .6s ease .8s both}
  .nav-card:nth-child(3){animation:cardIn .6s ease .95s both}
  .nav-card:nth-child(4){animation:cardIn .6s ease 1.1s both}
  .ci { width:42px;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:2px;display:flex;align-items:center;justify-content:center;transition:all .3s; }
  .nav-card:hover .ci { border-color:rgba(245,166,35,.5);box-shadow:0 0 14px rgba(245,166,35,.25); }
  .ci svg { width:20px;height:20px;stroke:rgba(216,208,200,.6);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:all .3s; }
  .nav-card:hover .ci svg { stroke:var(--amber);filter:drop-shadow(0 0 5px var(--amber)); }
  .cl { font-family:'Orbitron',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(216,208,200,.55);transition:color .3s; }
  .nav-card:hover .cl { color:rgba(255,255,255,.85); }

  /* Footer */
  footer { display:flex;justify-content:center;align-items:center;gap:22px;padding:20px;border-top:1px solid rgba(255,255,255,.06);backdrop-filter:blur(4px);animation:fadeUp .8s ease 1.3s both; }
  .sb { width:40px;height:40px;border:1px solid rgba(255,255,255,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;background:transparent; }
  .sb svg { width:15px;height:15px;fill:rgba(216,208,200,.4);transition:all .3s; }
  .sb:hover { border-color:var(--amber);box-shadow:0 0 18px var(--amber-glow);background:rgba(245,166,35,.06);transform:translateY(-2px); }
  .footer-copy { font-family:'Exo 2',sans-serif;font-size:.72rem;font-weight:400;letter-spacing:.08em;color:#7aff9a;text-shadow:0 0 12px rgba(122,255,154,.5);white-space:nowrap; }
  .sb:hover svg { fill:var(--amber); }

  @keyframes fadeDown  { from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)} }
  @keyframes fadeRight { from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)} }
  @keyframes fadeLeft  { from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)} }
  @keyframes fadeUp    { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }
  @keyframes cardIn    { from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)} }

  /* Restore cursor on touch devices */
  @media(pointer:coarse){
    *, a, button, input, textarea, select, label, .sb, .nav-card, [role="button"] { cursor: auto !important; }
    #cursor { display:none; }
  }

  /* Tablet */
  @media(max-width:1024px){
    header { padding:16px 28px; }
    .nav-link { font-size:.44rem; padding:6px 10px; }
    .hero { padding:36px 48px 24px; gap:32px; }
    .nav-card { min-width:120px; min-height:120px; padding:24px 18px; }
  }

  /* Mobile */
  @media(max-width:768px){
    html, body { overflow:auto; }
    header { padding:14px 20px; }
    .hud-status { display:none; }
    .hero { flex-direction:column; padding:28px 20px 16px; align-items:flex-start; }
    .hero-left { max-width:100%; }
    .hero-right { width:100%; grid-template-columns:1fr 1fr; }
    h1 { font-size:2rem; }
    .hero-bio { font-size:.84rem; margin-bottom:24px; }
    .hud-meters { display:none; }
    .hc { width:32px; height:32px; }
    footer { gap:12px; padding:14px; flex-wrap:wrap; }
    .footer-copy { font-size:.62rem; }
  }

  /* Small mobile */
  @media(max-width:480px){
    header { padding:12px 16px; }
    .logo { font-size:.8rem; letter-spacing:.2em; }
    .hero { padding:20px 16px 12px; }
    h1 { font-size:1.7rem; }
    .hero-right { grid-template-columns:1fr 1fr; gap:10px; }
    .nav-card { min-width:0; min-height:100px; padding:18px 12px; gap:10px; }
    .cl { font-size:.5rem; }
    .hero-actions { flex-direction:column; }
    .btn-primary, .btn-ghost { width:100%; text-align:center; }
    footer { gap:8px; }
    .sb { width:34px; height:34px; }
    .sb svg { width:13px; height:13px; }
  }