/* =========================================================
   DESIGN TOKENS
========================================================= */
:root,
[data-theme="dark"]{
  --bg-void:#05050b;
  --bg-panel:#0c0d18;
  --bg-panel-alt:#11121f;
  --line:#242640;
  --line-soft:#181a2b;

  --text-hi:#f4f5fb;
  --text:#c3c6da;
  --text-mute:#7d80a0;

  /* multi-hue accent palette (gaming HUD colors) */
  --violet:#a855f7;   --violet-glow:rgba(168,85,247,.5);
  --cyan:#22d3ee;      --cyan-glow:rgba(34,211,238,.45);
  --pink:#fb64b6;      --pink-glow:rgba(251,100,182,.45);
  --gold:#ffb545;      --gold-glow:rgba(255,181,69,.45);

  --glass:rgba(16,17,28,.6);
  --glass-border:rgba(255,255,255,.09);
  --shadow-soft:0 20px 55px rgba(0,0,0,.55);
  --header-bg:rgba(5,5,11,.65);

  --font-display:'Orbitron', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --radius:14px;
  --ease:cubic-bezier(.22,.9,.32,1);
}

[data-theme="light"]{
  --bg-void:#f1f0fb;
  --bg-panel:#ffffff;
  --bg-panel-alt:#f6f5fd;
  --line:#e0defa;
  --line-soft:#e9e7fb;

  --text-hi:#15142a;
  --text:#3c3b56;
  --text-mute:#6c6b8c;

  --violet:#7c3aed; --violet-glow:rgba(124,58,237,.28);
  --cyan:#0891b2;    --cyan-glow:rgba(8,145,178,.22);
  --pink:#db2777;    --pink-glow:rgba(219,39,119,.24);
  --gold:#c9791a;    --gold-glow:rgba(201,121,26,.24);

  --glass:rgba(255,255,255,.66);
  --glass-border:rgba(40,20,90,.09);
  --shadow-soft:0 20px 55px rgba(60,40,120,.15);
  --header-bg:rgba(241,240,251,.75);
}

/* per-card hue helper — sets local --accent/--accent-glow */
.hue-violet{ --accent:var(--violet); --accent-glow:var(--violet-glow); }
.hue-cyan{ --accent:var(--cyan); --accent-glow:var(--cyan-glow); }
.hue-pink{ --accent:var(--pink); --accent-glow:var(--pink-glow); }
.hue-gold{ --accent:var(--gold); --accent-glow:var(--gold-glow); }

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

body{
  margin:0;
  background:var(--bg-void);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}

::selection{background:var(--violet); color:#fff;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}
h1,h2,h3{
  font-family:var(--font-display);
  color:var(--text-hi);
  margin:0;
  letter-spacing:.01em;
}
.accent{color:var(--violet); text-shadow:0 0 24px var(--violet-glow);}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2000;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.012) 0px,
    rgba(255,255,255,0.012) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}

/* =========================================================
   BOOT OVERLAY (kept simple)
========================================================= */
#boot-overlay{
  position:fixed;
  inset:0;
  z-index:5000;
  background:var(--bg-void);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}

#boot-overlay.done{
  opacity:0;
  visibility:hidden;
}

.boot-box{
  font-family:var(--font-mono);
  color:var(--violet);
  font-size:clamp(14px,2.2vw,18px);
  text-align:center;
}

.cursor-blink{animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

.boot-bar{
  margin-top:16px;
  width:200px;
  height:2px;
  background:var(--line-soft);
  border-radius:2px;
  overflow:hidden;
}

.boot-bar span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  animation:bootbar 1s var(--ease) forwards;
}

@keyframes bootbar{to{width:100%;}}

/* =========================================================
   HEADER / NAV
========================================================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:var(--header-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background-color .5s var(--ease), border-color .5s var(--ease);
}

.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--violet-glow),
    var(--cyan-glow),
    transparent
  );
  opacity:.8;
}

.nav-wrap{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  color:var(--text-hi);
}

.brand-mark{
  color:var(--violet);
  text-shadow:0 0 14px var(--violet-glow);
}

.main-nav{
  display:flex;
  gap:28px;
}

.main-nav a{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-mute);
  display:flex;
  align-items:center;
  gap:6px;
  transition:color .2s var(--ease);
  position:relative;
}

.main-nav a .idx{
  color:var(--violet);
  opacity:.6;
  font-size:11px;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:16px;
  right:0;
  bottom:-4px;
  height:1px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}

.main-nav a:hover{color:var(--text-hi);}
.main-nav a:hover::after{transform:scaleX(1);}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}

.nav-toggle span{
  width:22px;
  height:2px;
  background:var(--text-hi);
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 24px 80px;
  overflow:hidden;
}

#hero-particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.6;
}

.hero-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(168,85,247,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(
    ellipse 60% 50% at 50% 40%,
    black 10%,
    transparent 75%
  );
}

.hero-inner{
  position:relative;
  z-index:2;
}

/* ---- Avatar frame (decorative, animated) ---- */
.avatar-frame{
  position:relative;
  width:132px;
  height:132px;
  margin:0 auto 26px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.avatar-img{
  width:104px;
  height:104px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 30px var(--violet-glow), 0 0 0 2px rgba(255,255,255,.06);
  animation:avatarFloat 4.5s ease-in-out infinite;
}

@keyframes avatarFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

.avatar-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px dashed var(--violet);
  opacity:.55;
}

.ring-1{animation:spin 14s linear infinite;}

.ring-2{
  inset:-14px;
  border-color:var(--cyan);
  border-style:solid;
  border-width:1px;
  opacity:.35;
  animation:spin 20s linear infinite reverse;
}

@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.avatar-orbit-dot{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);
  top:50%;
  left:50%;
  animation:orbit 6s linear infinite;
}

.dot-a{animation-delay:0s;}

.dot-b{
  background:var(--pink);
  box-shadow:0 0 10px var(--pink-glow);
  animation:orbit 6s linear infinite reverse;
  animation-delay:-3s;
}

@keyframes orbit{
  from{transform:rotate(0deg) translateX(74px) rotate(0deg);}
  to{transform:rotate(360deg) translateX(74px) rotate(-360deg);}
}

.avatar-badge{
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.06em;
  background:var(--bg-panel);
  border:1px solid var(--cyan);
  color:var(--cyan);
  padding:3px 9px;
  border-radius:20px;
  box-shadow:0 0 12px var(--cyan-glow);
  white-space:nowrap;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--cyan);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 22px;
}

.eyebrow .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);
  animation:pulse 1.8s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:.3;}
}

.hero-title{
  font-size:clamp(32px,6vw,60px);
  font-weight:700;
  line-height:1.1;
  margin-bottom:20px;
}

.hero-sub{
  font-size:clamp(15px,1.8vw,18px);
  color:var(--text-mute);
  max-width:560px;
  margin:0 auto 34px;
}

.hero-cta{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:52px;
}

.btn{
  font-family:var(--font-mono);
  font-size:13px;
  padding:14px 28px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-block;
  transition:
    transform .2s var(--ease),
    box-shadow .25s var(--ease),
    border-color .25s var(--ease);
}

.btn:hover{transform:translateY(-3px);}

.btn-primary{
  background:linear-gradient(135deg,var(--violet),var(--pink));
  color:#fff;
  font-weight:600;
  box-shadow:0 10px 28px var(--violet-glow);
}

.btn-primary:hover{
  box-shadow:0 16px 40px var(--violet-glow);
}

.btn-ghost{
  border-color:var(--line);
  color:var(--text);
  backdrop-filter:blur(6px);
}

.btn-ghost:hover{
  border-color:var(--cyan);
  color:var(--cyan);
  box-shadow:0 10px 28px var(--cyan-glow);
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  max-width:680px;
  margin:0 auto;
  padding:26px 18px;
  border-radius:var(--radius);
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft);
}

.stat{position:relative;}

.stat:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-7px;
  top:6px;
  bottom:6px;
  width:1px;
  background:var(--line-soft);
}

.stat-num{
  font-family:var(--font-display);
  font-size:clamp(22px,3vw,32px);
  font-weight:700;
  color:var(--violet);
  display:block;
  text-shadow:0 0 20px var(--violet-glow);
}

.stat-label{
  font-size:11px;
  color:var(--text-mute);
  font-family:var(--font-mono);
}

.scroll-cue{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-mute);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.scroll-cue span{
  width:1px;
  height:26px;
  background:linear-gradient(var(--violet), transparent);
  animation:scrollcue 1.6s ease-in-out infinite;
}

@keyframes scrollcue{
  0%{
    transform:scaleY(0);
    transform-origin:top;
  }
  50%{
    transform:scaleY(1);
    transform-origin:top;
  }
  51%{
    transform-origin:bottom;
  }
  100%{
    transform:scaleY(0);
    transform-origin:bottom;
  }
}

/* =========================================================
   SECTIONS (shared)
========================================================= */
.section{
  padding:110px 24px;
  position:relative;
  overflow:hidden;
}

.section-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.35;
  pointer-events:none;
  z-index:0;
}

.glow-violet{
  background:radial-gradient(circle, var(--violet-glow), transparent 70%);
}

.glow-cyan{
  background:radial-gradient(circle, var(--cyan-glow), transparent 70%);
}

.glow-pink{
  background:radial-gradient(circle, var(--pink-glow), transparent 70%);
}

.g1{
  width:380px;
  height:380px;
  top:-80px;
  left:-60px;
  animation:driftA 15s ease-in-out infinite;
}

.g2{
  width:320px;
  height:320px;
  bottom:-70px;
  right:-40px;
  animation:driftB 17s ease-in-out infinite;
}

@keyframes driftA{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(40px,30px);}
}

@keyframes driftB{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-30px,-35px);}
}

.section-inner{
  position:relative;
  z-index:1;
}

.section-alt{
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-void));
}

.section-inner{
  max-width:1180px;
  margin:0 auto;
}

.section-inner.center{text-align:center;}

.section-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--accent, var(--violet));
  letter-spacing:.08em;
  margin:0 0 10px;
}

.section-title{
  font-size:clamp(26px,3.6vw,38px);
  margin-bottom:14px;
}

.section-desc{
  color:var(--text-mute);
  max-width:620px;
  margin:0 0 52px;
}

.section-inner.center .section-desc{
  margin-inline:auto;
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.in{
  opacity:1;
  transform:none;
}

.section-head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:52px;
}

.section-head-row .section-title,
.section-head-row .section-desc{
  margin-bottom:0;
}

.section-head-row .section-desc{
  margin-top:14px;
}

.theme-switch-panel{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:14px 18px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-soft);
}

.tsp-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-mute);
  letter-spacing:.1em;
}

.theme-switch{
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}

.ts-icon{
  font-size:15px;
  color:var(--text-mute);
  transition:color .3s var(--ease), text-shadow .3s var(--ease);
}

.ts-track{
  width:46px;
  height:24px;
  border-radius:20px;
  background:var(--bg-panel-alt);
  border:1px solid var(--line);
  position:relative;
}

.ts-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--violet);
  box-shadow:0 0 12px var(--violet-glow);
  transition:transform .35s var(--ease), background .35s var(--ease);
}

[data-theme="light"] .ts-thumb{
  transform:translateX(22px);
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan-glow);
}

:root:not([data-theme="light"]) .ts-moon{
  color:var(--violet);
  text-shadow:0 0 10px var(--violet-glow);
}

[data-theme="light"] .ts-sun{
  color:var(--cyan);
  text-shadow:0 0 10px var(--cyan-glow);
}

/* =========================================================
   HUD CARD FRAME — corner brackets, colorful glow (shared)
========================================================= */
.skill-card,
.rack-node,
.project-card{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:
    box-shadow .3s var(--ease),
    transform .3s var(--ease),
    border-color .3s var(--ease);
}

.skill-card:hover,
.rack-node:hover,
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px var(--accent-glow, rgba(0,0,0,.4));
  border-color:var(--accent, var(--line));
}

/* corner bracket pseudo elements */
.skill-card::before,
.skill-card::after,
.rack-node::before,
.rack-node::after,
.project-card::before,
.project-card::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  pointer-events:none;
  border-color:var(--accent, var(--violet));
  opacity:0;
  transition:opacity .3s var(--ease);
}

.skill-card::before,
.rack-node::before,
.project-card::before{
  top:-1px;
  left:-1px;
  border-top:2px solid;
  border-left:2px solid;
  border-top-left-radius:6px;
}

.skill-card::after,
.rack-node::after,
.project-card::after{
  bottom:-1px;
  right:-1px;
  border-bottom:2px solid;
  border-right:2px solid;
  border-bottom-right-radius:6px;
}

.skill-card:hover::before,
.skill-card:hover::after,
.rack-node:hover::before,
.rack-node:hover::after,
.project-card:hover::before,
.project-card:hover::after{
  opacity:1;
}

/* =========================================================
   SKILLS
========================================================= */
.skill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:18px;
}

.skill-card{padding:28px 24px;}

.skill-icon{
  font-family:var(--font-mono);
  font-size:20px;
  color:var(--accent, var(--cyan));
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:9px;
  margin-bottom:16px;
  background:var(--bg-panel-alt);
  box-shadow:0 0 0 0 transparent;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.skill-card:hover .skill-icon{
  border-color:var(--accent);
  box-shadow:0 0 20px var(--accent-glow);
}

.skill-card h3{
  font-size:18px;
  margin-bottom:8px;
}

.skill-card p{
  font-size:13.5px;
  color:var(--text-mute);
  margin:0 0 18px;
}

.skill-bar{
  height:5px;
  background:var(--line);
  border-radius:3px;
  overflow:hidden;
}

.skill-bar span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(
    90deg,
    var(--accent, var(--violet)),
    var(--accent, var(--cyan))
  );
  border-radius:3px;
  transition:width 1.1s var(--ease);
  box-shadow:0 0 10px var(--accent-glow);
}

.skill-bar.in span{width:var(--val);}

/* =========================================================
   DASHBOARD / RACK
========================================================= */
.rack{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:20px;
}

.rack-node{
  padding:24px;
  overflow:hidden;
}

/* Header của từng node */
.rack-node header{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-bottom:12px;
}

/* SYSTEM CORE nằm bên trái */
.node-tag{
  grid-column:1;
  justify-self:start;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-mute);
  letter-spacing:.08em;
}

/* ACTIVE nằm bên phải */
.node-status{
  grid-column:3;
  justify-self:end;
  font-family:var(--font-mono);
  font-size:11px;
  display:flex;
  align-items:center;
  color:var(--accent, var(--cyan));
}

/* Dấu chấm được đặt chính giữa header */
.node-status::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  display:block;
  transform:translate(-50%, -50%);
}

/* Online */
.node-status.online{
  color:var(--accent, var(--cyan));
}

.node-status.online::before{
  background:var(--accent, var(--cyan));
  box-shadow:0 0 8px var(--accent-glow);
  animation:pulse 1.8s ease-in-out infinite;
}

/* Warning */
.node-status.warn{
  color:var(--gold);
}

.node-status.warn::before{
  background:var(--gold);
  box-shadow:0 0 8px var(--gold-glow);
}

.rack-node h3{
  font-size:19px;
  margin-bottom:16px;
}

.spec-list{
  margin:0;
  display:grid;
  gap:8px;
}

.spec-list div{
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:12.5px;
  border-bottom:1px dashed var(--line-soft);
  padding-bottom:6px;
}

.spec-list dt{color:var(--text-mute);}

.spec-list dd{
  margin:0;
  color:var(--text-hi);
}

/* ---- System core decorative filler panel ---- */
.core-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.core-emblem{
  width:150px;
  height:150px;
  margin:6px auto 14px;
  animation:
    coreSpin 18s linear infinite,
    corePulse 3s ease-in-out infinite;
}

@keyframes coreSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes corePulse{
  0%,100%{filter:drop-shadow(0 0 6px var(--cyan-glow));}
  50%{filter:drop-shadow(0 0 18px var(--cyan-glow));}
}

.wave-row{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  height:34px;
  margin-bottom:14px;
}

.wave-row span{
  width:4px;
  border-radius:2px;
  background:linear-gradient(var(--cyan), var(--violet));
  height:20%;
  animation:wave 1.4s ease-in-out infinite;
  box-shadow:0 0 8px var(--cyan-glow);
}

.wave-row span:nth-child(1){animation-delay:.0s;}
.wave-row span:nth-child(2){animation-delay:.1s;}
.wave-row span:nth-child(3){animation-delay:.2s;}
.wave-row span:nth-child(4){animation-delay:.3s;}
.wave-row span:nth-child(5){animation-delay:.4s;}
.wave-row span:nth-child(6){animation-delay:.5s;}
.wave-row span:nth-child(7){animation-delay:.6s;}
.wave-row span:nth-child(8){animation-delay:.7s;}

@keyframes wave{
  0%,100%{height:20%;}
  50%{height:100%;}
}

.core-caption{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-mute);
  margin:0;
}

/* =========================================================
   TIMELINE
========================================================= */
.timeline{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}

.timeline::before{
  content:"";
  position:absolute;
  left:9px;
  top:6px;
  bottom:6px;
  width:1px;
  background:linear-gradient(var(--pink), var(--line-soft));
}

.timeline li{
  position:relative;
  padding-left:42px;
  margin-bottom:40px;
}

.timeline li:last-child{margin-bottom:0;}

.tl-dot{
  position:absolute;
  left:0;
  top:4px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:var(--bg-panel);
  border:2px solid var(--pink);
  box-shadow:
    0 0 0 4px var(--bg-void),
    0 0 16px var(--pink-glow);
}

.tl-tag{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--pink);
  letter-spacing:.06em;
}

.tl-content h3{
  font-size:19px;
  margin:6px 0 8px;
}

.tl-content p{
  margin:0;
  color:var(--text-mute);
  font-size:14px;
  max-width:560px;
}

/* =========================================================
   CONNECT
========================================================= */
.connect-bot{
  width:88px;
  height:88px;
  margin:0 auto 20px;
  display:block;
  animation:avatarFloat 4s ease-in-out infinite;
  filter:drop-shadow(0 0 16px var(--pink-glow));
}

.connect-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.connect-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  border:1px solid var(--glass-border);
  border-radius:10px;
  background:var(--glass);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text);
  transition:
    border-color .25s var(--ease),
    color .25s var(--ease),
    transform .25s var(--ease),
    box-shadow .25s var(--ease);
}

.connect-link:hover{
  border-color:var(--cyan);
  color:var(--cyan);
  transform:translateY(-3px);
  box-shadow:0 12px 30px var(--cyan-glow);
}

.c-icon{color:var(--violet);}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  text-align:center;
  padding:34px 24px 120px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-mute);
  border-top:1px solid var(--line-soft);
}

/* =========================================================
   AUDIO HUD WIDGET
========================================================= */
.audio-hud{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:900;
  font-family:var(--font-mono);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.audio-toggle{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.audio-toggle:hover{
  border-color:var(--violet);
  box-shadow:0 10px 30px var(--violet-glow);
}

.audio-toggle[aria-pressed="true"]{
  border-color:var(--violet);
  box-shadow:
    0 0 0 1px var(--violet-glow),
    0 10px 30px var(--violet-glow);
}

.eq{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:18px;
}

.eq i{
  width:3px;
  background:var(--violet);
  border-radius:1px;
  display:block;
  height:30%;
  opacity:.5;
  transition:opacity .2s;
}

.audio-toggle[aria-pressed="true"] .eq i{
  animation:eqbounce 1s ease-in-out infinite;
  opacity:1;
}

.eq i:nth-child(1){animation-delay:0s;}
.eq i:nth-child(2){animation-delay:.15s;}
.eq i:nth-child(3){animation-delay:.3s;}
.eq i:nth-child(4){animation-delay:.45s;}

@keyframes eqbounce{
  0%,100%{height:20%;}
  50%{height:100%;}
}

.audio-panel{
  width:224px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:12px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:14px 16px;
  box-shadow:var(--shadow-soft);
  opacity:0;
  transform:translateY(8px) scale(.98);
  pointer-events:none;
  transition:
    opacity .25s var(--ease),
    transform .25s var(--ease);
}

.audio-hud.open .audio-panel{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.audio-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.audio-row:last-child{margin-bottom:0;}

.audio-title{
  font-size:11px;
  color:var(--text-mute);
  letter-spacing:.08em;
}

.audio-state{
  font-size:11px;
  color:var(--cyan);
  margin-left:auto;
}

.audio-play{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg-panel-alt);
  color:var(--text-hi);
  cursor:pointer;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.audio-play:hover{border-color:var(--violet);}

#audio-volume{
  flex:1;
  accent-color:var(--violet);
  height:3px;
}

.audio-vol-val{
  font-size:11px;
  color:var(--text-mute);
  width:32px;
  text-align:right;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:860px){
  .main-nav{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    bottom:0;
    background:var(--bg-void);
    flex-direction:column;
    gap:0;
    padding:20px 24px;
    transform:translateY(-110%);
    transition:transform .3s var(--ease);
  }

  .main-nav.open{
    transform:translateY(0);
  }

  .main-nav a{
    padding:16px 0;
    border-bottom:1px solid var(--line-soft);
    font-size:15px;
  }

  .nav-toggle{display:flex;}

  .hero-stats{
    grid-template-columns:repeat(2,1fr);
  }

  .audio-hud{
    right:14px;
    bottom:14px;
  }

  .section-head-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .theme-switch-panel{
    align-items:flex-start;
    align-self:stretch;
  }
}
/* =========================================================
   COPY EMAIL TOAST
========================================================= */

.email-copy{
    font-family:var(--font-mono);
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}

.copy-toast{
    position:fixed;
    left:50%;
    bottom:38px;
    transform:translate(-50%, 20px);
    z-index:3000;

    padding:11px 18px;
    border:1px solid var(--cyan);
    border-radius:9px;

    background:rgba(8,10,20,.88);
    color:var(--cyan);

    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.08em;

    box-shadow:
        0 0 18px var(--cyan-glow),
        0 12px 35px rgba(0,0,0,.45);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    opacity:0;
    pointer-events:none;

    transition:
        opacity .25s var(--ease),
        transform .25s var(--ease);
}

.copy-toast.show{
    opacity:1;
    transform:translate(-50%, 0);
}