@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

:root {
  --bg:     #0C0A09;
  --surf:   #161210;
  --ink:    #EDE5D8;
  --mid:    #8A7A6A;
  --faint:  #4A3A30;
  --ghost:  #2A2018;
  --orange: #FF5200;
  --glow:   rgba(255,82,0,0.18);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { background:var(--bg); color:var(--ink); font-family:'IBM Plex Mono',monospace; overflow-x:hidden; cursor:none; }

body::after {
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9998;
}

/* CURSOR */
#cursor { position:fixed; width:7px; height:7px; background:var(--orange); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s,background .2s; mix-blend-mode:normal; }
#cursor.hover { width:28px; height:28px; background:transparent; border:1px solid var(--orange); box-shadow:0 0 12px var(--glow); }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:400; display:flex; justify-content:space-between; align-items:center; padding:22px 40px; background:linear-gradient(to bottom,var(--bg) 55%,transparent); }
.nav-id { font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); text-decoration:none; transition:color .2s; }
.nav-id:hover { color:var(--orange); }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a { font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--mid); text-decoration:none; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--orange); }

/* TE SEPARATOR */
.te-sep { display:flex; align-items:center; padding:40px 40px 0; }
.te-label { font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); white-space:nowrap; padding-right:16px; }
.te-line { flex:1; height:1px; background:var(--ghost); }
.te-num { font-size:8px; letter-spacing:.1em; color:var(--ghost); padding-left:16px; }

/* SECTION */
.section { padding:48px 40px; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:32px; }
.section-title { font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--mid); }
.section-link { font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); text-decoration:none; transition:opacity .2s; }
.section-link:hover { opacity:.6; }

/* PAGE HERO */
.page-hero { padding:140px 40px 56px; border-bottom:1px solid var(--ghost); }
.page-hero-label { font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.page-hero-title { font-size:clamp(40px,7vw,96px); font-weight:300; letter-spacing:-0.03em; line-height:.88; color:var(--ink); }
.page-hero-title .hl-cur { color:var(--orange); animation:blink .9s step-end infinite; }
.page-hero-sub { font-family:'Cormorant Garamond',serif; font-size:19px; font-style:italic; font-weight:300; color:var(--mid); line-height:1.65; max-width:520px; margin-top:28px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* WAVEFORM */
.waveform { display:flex; align-items:center; gap:3px; height:72px; }
.wbar { flex-shrink:0; width:3px; background:var(--orange); border-radius:1px; animation:wv 1s ease-in-out infinite; }
@keyframes wv { 0%,100%{transform:scaleY(.12);opacity:.25} 50%{transform:scaleY(1);opacity:1} }

/* FOOTER */
footer { padding:28px 40px; border-top:1px solid var(--ghost); display:flex; justify-content:space-between; align-items:center; font-size:8px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); }
footer a { color:var(--faint); text-decoration:none; transition:color .2s; }
footer a:hover { color:var(--orange); }

/* HUD */
.hud-left { position:fixed; bottom:22px; left:24px; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:8px; z-index:400; pointer-events:none; }
.hud-dot { width:5px; height:5px; border-radius:50%; background:var(--orange); animation:hdot 2.4s ease-in-out infinite; box-shadow:0 0 8px var(--orange); }
@keyframes hdot { 0%,100%{opacity:1} 50%{opacity:.2} }
.hud-right { position:fixed; bottom:22px; right:24px; font-size:8px; letter-spacing:.12em; color:var(--faint); z-index:400; }
.hud-right span { color:var(--orange); }
.sound-toggle { margin-right:20px; cursor:none; color:var(--faint); transition:color .2s; user-select:none; }
.sound-toggle:hover { color:var(--orange); }