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

:root{
  --bg:#06080F;
  --bg1:#090D18;
  --bg2:#0D1220;
  --bg3:#111828;

  --surface:#121827;
  --surface2:#161E2E;

  --border:rgba(255,255,255,.06);
  --border2:rgba(255,255,255,.12);
  --border3:rgba(255,255,255,.18);

  --g:#00FF87;
  --g2:#00D9FF;
  --gp:#A855F7;
  --gb:rgba(0,255,135,.12);
  --gb2:rgba(0,255,135,.06);

  --text:#EEF2FF;
  --text2:#98A5C3;
  --text3:#56627A;

  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',sans-serif;
  --display:'Bebas Neue',sans-serif;

  --nav-h:72px;
}

html{
  scroll-behavior:smooth;
  font-size:16px;
  scroll-padding-top:96px;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
  cursor:none;
}

img,svg{display:block;max-width:100%}

/* ──────────────────────────────
   SELECTION + SCROLLBAR
────────────────────────────── */
::selection{
  background:rgba(0,255,135,.22);
  color:#fff;
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--g),var(--g2));
  border-radius:999px;
}

/* ──────────────────────────────
   GLOBAL FX (noise + scanlines)
────────────────────────────── */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;

  opacity:.22;

  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='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9990;

  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,.03) 2px,
      rgba(0,0,0,.03) 4px
    );
}

/* ──────────────────────────────
   SPOTLIGHT (mouse-following glow)
────────────────────────────── */
#spotlight{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(
    260px circle at var(--mx,50%) var(--my,50%),
    rgba(0,255,135,.07),
    transparent 65%
  );
  transition:background .12s linear;
}

/* ──────────────────────────────
   BOOT SCREEN
────────────────────────────── */
.boot{
  position:fixed;
  inset:0;
  z-index:99999;
  background:radial-gradient(circle at 50% 40%,#0B1224,#04060C 75%);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .55s ease,visibility .55s ease;
}
.boot.gone{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.boot-inner{
  width:min(560px,92vw);
  text-align:left;
  font-family:var(--mono);
  color:var(--g);
}
.boot-ascii{
  font-family:var(--mono);
  font-size:.7rem;
  line-height:1.05;
  color:var(--g);
  text-shadow:0 0 18px rgba(0,255,135,.4);
  white-space:pre;
  margin-bottom:1.6rem;
  letter-spacing:.04em;
}
.boot-log{
  min-height:9.2rem;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--text2);
  letter-spacing:.04em;
  line-height:1.8;
  margin-bottom:1rem;
}
.boot-log .ok{color:var(--g)}
.boot-log .warn{color:#F0B400}
.boot-log .arrow{color:var(--g2)}
.boot-bar{
  width:100%;
  height:4px;
  background:rgba(255,255,255,.06);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:.7rem;
}
.boot-bar-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--g),var(--g2));
  box-shadow:0 0 14px rgba(0,255,135,.5);
  transition:width .2s linear;
}
.boot-skip{
  font-family:var(--mono);
  font-size:.6rem;
  color:var(--text3);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.boot-skip kbd{
  display:inline-block;
  padding:.06rem .4rem;
  margin:0 .15rem;
  border:1px solid var(--border2);
  border-radius:3px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-family:var(--mono);
  font-size:.55rem;
}

/* ──────────────────────────────
   CURSOR
────────────────────────────── */
#c-dot,
#c-ring{
  position:fixed;
  pointer-events:none;
  z-index:9999;
  border-radius:50%;
  top:0;left:0;
}

#c-dot{
  width:8px;
  height:8px;
  background:var(--g);
  transform:translate(-50%,-50%);
  transition:width .15s ease,height .15s ease,background .15s ease;
  box-shadow:0 0 14px rgba(0,255,135,.6);
}

#c-ring{
  width:40px;
  height:40px;
  border:1.5px solid rgba(0,255,135,.4);
  transform:translate(-50%,-50%);
  transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1),border-color .3s ease;
}

body.hovering #c-dot{
  width:14px;
  height:14px;
  background:#fff;
}

body.hovering #c-ring{
  width:56px;
  height:56px;
  border-color:rgba(0,255,135,.75);
}

body.clicking #c-ring{
  width:30px;
  height:30px;
  border-color:var(--g);
}

/* ──────────────────────────────
   STATUS RAIL (top-left progress)
────────────────────────────── */
.status-rail{
  position:fixed;
  left:0;
  top:var(--nav-h);
  width:100%;
  height:2px;
  z-index:480;
  background:transparent;
  pointer-events:none;
}
.status-rail-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--g),var(--g2),var(--gp));
  background-size:200% 100%;
  animation:railShift 5s linear infinite;
  box-shadow:0 0 12px rgba(0,255,135,.5);
  transition:width .15s linear;
}
@keyframes railShift{
  to{background-position:200% 0}
}

/* ──────────────────────────────
   NAVBAR
────────────────────────────── */
nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:500;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:1.05rem 3rem;
  min-height:var(--nav-h);

  border-bottom:1px solid var(--border);

  background:rgba(6,8,15,.72);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

.nav-logo{
  display:flex;
  align-items:baseline;
  gap:.1rem;

  text-decoration:none;
  color:var(--text);

  font-family:var(--display);
  font-size:1.9rem;
  letter-spacing:.03em;

  position:relative;
}

.nav-logo::before{
  content:'>';
  color:var(--g);
  font-family:var(--mono);
  font-size:.85rem;
  margin-right:.55rem;
  opacity:.7;
  animation:blink 1.4s infinite;
}

@keyframes blink{
  0%,49%{opacity:.85}
  50%,100%{opacity:0}
}

.nav-logo em{
  color:var(--g);
  font-style:normal;
}

.nav-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);

  display:flex;
  align-items:center;
  gap:2.5rem;

  list-style:none;
}

.nav-center a{
  position:relative;
  display:flex;
  align-items:center;
  gap:.45rem;

  text-decoration:none;
  color:var(--text2);

  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.15em;
  text-transform:uppercase;

  transition:color .2s ease;
}

.nav-center a:hover,
.nav-center a.active{color:var(--g)}

.nav-center a.active::after{
  content:'';
  position:absolute;
  left:0;right:0;
  bottom:-.55rem;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--g),transparent);
}

.nav-center a::before{
  content:attr(data-n);
  color:var(--g);
  opacity:.5;
  font-size:.58rem;
}

.nav-avail{
  display:flex;
  align-items:center;
  gap:.6rem;

  color:var(--text2);
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.1em;
}

.avail-time{
  color:var(--g);
  font-variant-numeric:tabular-nums;
  margin-left:.25rem;
  padding-left:.55rem;
  border-left:1px solid var(--border2);
}

.avail-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--g);
  animation:ripple 2s ease-in-out infinite;
}

@keyframes ripple{
  0%,100%{box-shadow:0 0 0 0 rgba(0,255,135,.45)}
  50%{box-shadow:0 0 0 7px rgba(0,255,135,0)}
}

/* ──────────────────────────────
   SECTION BASE
────────────────────────────── */
section{
  position:relative;
  z-index:1;

  padding:4rem 3rem;
  scroll-margin-top:96px;
}

section.nav-target{animation:targetPulse 1s cubic-bezier(.16,1,.3,1)}

@keyframes targetPulse{
  0%{filter:drop-shadow(0 0 0 rgba(0,255,135,0))}
  35%{filter:drop-shadow(0 0 28px rgba(0,255,135,.16))}
  100%{filter:drop-shadow(0 0 0 rgba(0,255,135,0))}
}

.sec-eyebrow{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1rem;
  color:var(--g);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.25em;
  text-transform:uppercase;
}

.sec-eyebrow::before{
  content:'//';
  font-family:var(--mono);
  color:var(--g);
  opacity:.6;
}

.sec-eyebrow::after{
  content:'';
  width:42px;
  height:1px;
  background:var(--g);
}

.sec-title{
  margin-bottom:3.5rem;
  font-family:var(--display);
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:.95;
  letter-spacing:.02em;
}

.sec-title .dim{color:rgba(238,242,255,.18)}

/* ──────────────────────────────
   ASCII BLOCKS
────────────────────────────── */
.ascii-block{
  font-family:var(--mono);
  color:var(--text3);
  font-size:.7rem;
  line-height:1.25;
  letter-spacing:.02em;
  white-space:pre;
}
.ascii-block em{
  color:var(--g);
  font-style:normal;
}

/* ──────────────────────────────
   HERO
────────────────────────────── */
#hero{
  position:relative;
  z-index:1;
  min-height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8rem 3rem 4rem;
  overflow:hidden;
}

.hero-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(0,255,135,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,135,.035) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);
}

.hero-glow{
  position:absolute;
  top:-120px;right:-120px;
  width:700px;height:700px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,135,.08) 0%,transparent 65%);
  animation:glowDrift 8s ease-in-out infinite;
  pointer-events:none;
}

.hero-glow2{
  position:absolute;
  bottom:-80px;left:-120px;
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.08) 0%,transparent 65%);
  animation:glowDrift 10s ease-in-out infinite reverse;
  pointer-events:none;
}

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

/* ──────────────────────────────
   HERO LAB STATUS CHIP
────────────────────────────── */
.lab-card{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .85rem;
  margin-bottom:1.6rem;
  width:fit-content;
  max-width:100%;
  align-self:flex-start;
  background:rgba(13,18,32,.6);
  border:1px solid var(--border2);
  border-radius:6px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.04em;
  color:var(--text2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:relative;
  overflow:hidden;
}
.lab-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(0,255,135,.06),transparent);
  background-size:200% 100%;
  animation:labShine 4.5s linear infinite;
  pointer-events:none;
}
@keyframes labShine{
  0%{background-position:0 0}
  100%{background-position:200% 0}
}
.lab-led{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--g);
  box-shadow:0 0 8px var(--g);
  animation:ledPulse 1.6s ease-in-out infinite;
  flex-shrink:0;
}
.lab-key{
  color:var(--text3);
  text-transform:lowercase;
}
.lab-val{
  color:var(--text);
}
.lab-sep{
  color:var(--text3);
  opacity:.5;
}
.lab-divider{
  width:1px;
  height:.85rem;
  background:var(--border2);
  margin:0 .15rem;
}
.lab-status em{
  font-style:normal;
  color:var(--g);
  text-shadow:0 0 8px rgba(0,255,135,.4);
  font-weight:500;
}

.hero-chip{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  width:fit-content;
  margin-bottom:2.2rem;
  padding:.42rem 1rem;
  border:1px solid rgba(0,255,135,.25);
  background:rgba(0,255,135,.04);
  color:var(--g);
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-radius:3px;
}

.hero-chip span{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--g);
  animation:ripple 1.5s ease-in-out infinite;
}

.hero-name{
  position:relative;
  margin-bottom:.5rem;
  font-family:var(--display);
  font-size:clamp(4rem,12vw,11rem);
  line-height:.86;
  letter-spacing:-.01em;
}

.hero-name .stroke{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.2);
}

.hero-name .accent{
  position:relative;
  display:inline-block;
  color:var(--g);
  text-shadow:0 0 60px rgba(0,255,135,.35);
}

/* Glitch */
[data-glitch]{position:relative}
[data-glitch]::before,
[data-glitch]::after{
  content:attr(data-glitch);
  position:absolute;
  inset:0;
  pointer-events:none;
}
[data-glitch]::before{
  color:var(--g2);
  clip-path:polygon(0 0,100% 0,100% 45%,0 45%);
  transform:translate(-2px,0);
  opacity:0;
}
[data-glitch]::after{
  color:var(--gp);
  clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);
  transform:translate(2px,0);
  opacity:0;
}
.glitch [data-glitch]::before,
.glitch [data-glitch]::after{
  opacity:.9;
  animation:glitch-rgb .35s steps(4,end) 1;
}
@keyframes glitch-rgb{
  0%{transform:translate(-2px,0)}
  25%{transform:translate(2px,1px)}
  50%{transform:translate(-1px,-1px)}
  75%{transform:translate(2px,0)}
  100%{transform:translate(0,0)}
}

.hero-sub{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
  color:var(--text2);
  font-family:var(--mono);
  font-size:clamp(.85rem,1.4vw,1.05rem);
}

.hero-sub .sep{color:rgba(255,255,255,.18)}
.hero-sub .highlight{color:var(--g)}
.typed::after{
  content:'_';
  margin-left:.1rem;
  color:var(--g);
  animation:blink 1s steps(2) infinite;
}

.hero-desc{
  max-width:620px;
  margin-bottom:2.5rem;
  padding-left:1.4rem;
  border-left:2px solid var(--g);
  color:rgba(238,242,255,.62);
  font-size:.98rem;
  line-height:1.85;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

/* Floating terminal card */
.term-card{
  position:absolute;
  top:22%;
  right:3rem;
  width:380px;
  max-width:38vw;
  background:rgba(9,13,24,.86);
  border:1px solid var(--border2);
  border-radius:10px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,255,135,.08),
    0 0 60px rgba(0,255,135,.06);
  overflow:hidden;
  font-family:var(--mono);
  font-size:.74rem;
  animation:float-card 7s ease-in-out infinite;
}

.term-card::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(0,255,135,.06),transparent 35%,transparent 65%,rgba(0,217,255,.05));
  opacity:.6;
}

@keyframes float-card{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.term-head{
  position:relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .9rem;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--border);
}
.td-dots{display:flex;gap:.32rem}
.td-dots i{
  width:9px;height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  display:block;
}
.td-dots i:first-child{background:#ff5f56}
.td-dots i:nth-child(2){background:#ffbd2e}
.td-dots i:last-child{background:#27c93f}
.td-title{
  color:var(--text3);
  font-size:.65rem;
  margin-left:.4rem;
  letter-spacing:.05em;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.td-led{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--g);
  box-shadow:0 0 8px var(--g);
  animation:ledPulse 1.8s ease-in-out infinite;
}
@keyframes ledPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.85)}
}

.term-body{
  position:relative;
  padding:.9rem 1rem 1rem;
  color:var(--text2);
  line-height:1.85;
  height:200px;
  max-height:200px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 100%);
}
.term-body::-webkit-scrollbar{display:none}
.term-body p{
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.t-line .t-prompt,
.t-line .t-prompt{color:var(--g)}
.t-prompt{color:var(--g)}
.t-prompt::before{content:'';}
.t-cmd{color:var(--text)}
.t-out{color:var(--text2);padding-left:.1rem}
.t-out .t-ok,
.t-ok{color:var(--g)}
.t-out.warn{color:#F0B400}
.t-out.muted{color:var(--text3)}
.t-caret{
  display:inline-block;
  width:.55rem;
  height:.85rem;
  background:var(--g);
  vertical-align:-2px;
  margin-left:.15rem;
  animation:blink 1s steps(2) infinite;
  box-shadow:0 0 8px rgba(0,255,135,.5);
}

@media(max-width:1180px){
  .term-card{display:none}
}

/* ──────────────────────────────
   FLOATING SYS MONITOR (hero bottom-right)
────────────────────────────── */
.sys-card{
  position:absolute;
  right:3rem;
  bottom:3.5rem;
  width:300px;
  max-width:32vw;
  padding:.95rem 1.05rem 1.15rem;
  background:rgba(9,13,24,.86);
  border:1px solid var(--border2);
  border-radius:10px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,217,255,.05);
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.06em;
  color:var(--text2);
  animation:float-card 9s ease-in-out -2s infinite;
}
.sys-row{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:.5rem;
}
.sys-l{
  width:1.8rem;
  color:var(--text3);
  text-transform:uppercase;
}
.sys-meter{
  flex:1;
  height:6px;
  background:rgba(255,255,255,.05);
  border-radius:3px;
  overflow:hidden;
  position:relative;
}
.sys-meter-fill{
  display:block;
  height:100%;
  width:40%;
  background:linear-gradient(90deg,var(--g),var(--g2));
  border-radius:3px;
  transition:width .55s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 10px rgba(0,255,135,.4);
}
.sys-v{
  width:2.5rem;
  text-align:right;
  color:var(--g);
  font-variant-numeric:tabular-nums;
}
.sys-spark{
  margin-top:.65rem;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2px;
  height:24px;
}
.sys-spark span{
  flex:1;
  background:linear-gradient(180deg,var(--g),var(--g2));
  opacity:.85;
  border-radius:1px;
  transition:height .25s ease;
  min-height:2px;
}

@media(max-width:1180px){
  .sys-card{display:none}
}

/* ──────────────────────────────
   BUTTONS
────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.95rem 2.1rem;
  text-decoration:none;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
  cursor:none;
  position:relative;
  will-change:transform;
}
.btn i{font-style:normal;font-size:.85rem}
.btn span{display:inline-block}

.btn-solid{
  border:none;
  background:var(--g);
  color:#06080F;
  font-weight:700;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  box-shadow:0 8px 24px -8px rgba(0,255,135,.45);
}
.btn-solid:hover{
  background:#fff;
  transform:translateY(-3px);
  box-shadow:0 12px 30px -10px rgba(0,255,135,.6);
}

.btn-outline{
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.btn-outline:hover{
  border-color:var(--g);
  color:var(--g);
  transform:translateY(-3px);
  background:rgba(0,255,135,.04);
}

/* ──────────────────────────────
   ABOUT
────────────────────────────── */
#about{background:var(--bg1)}

.about-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
}

.about-text .ab-ascii{
  color:var(--g);
  opacity:.65;
  margin-bottom:1.2rem;
  font-size:.7rem;
}

.about-text p{
  margin-bottom:1.1rem;
  color:rgba(238,242,255,.62);
  font-size:1.03rem;
  line-height:2;
}

.about-text strong{color:var(--text);font-weight:600}

.about-list{
  list-style:none;
  margin-top:1.4rem;
  padding-top:1.4rem;
  border-top:1px dashed var(--border2);
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.about-list li{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--text2);
  letter-spacing:.02em;
}
.about-list li span{
  color:var(--g);
  display:inline-block;
  width:1rem;
  font-weight:700;
}

.metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
}

.metric{
  padding:1.6rem 1.2rem;
  background:var(--bg1);
  transition:background .25s ease,transform .25s ease;
  position:relative;
}

.metric::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,255,135,.06),transparent 60%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

.metric:hover{background:var(--surface2)}
.metric:hover::before{opacity:1}

.metric-n{
  margin-bottom:.4rem;
  color:var(--g);
  font-family:var(--display);
  font-size:4rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.metric-l{
  color:var(--text2);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* ──────────────────────────────
   SKILLS
────────────────────────────── */
#skills{background:var(--bg);position:relative}

.skills-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:4rem;
  align-items:start;
  position:relative;
}

.skill-nav{
  position:sticky;
  top:7rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.skill-nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1.1rem 1.4rem;
  border:1px solid rgba(0,255,135,.15);
  border-left:3px solid var(--border2);
  background:rgba(0,255,135,.02);
  color:var(--text2);
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  cursor:none;
  border-radius:6px;
}

.skill-nav-item:hover{
  background:rgba(0,255,135,.08);
  color:var(--g);
  border-color:rgba(0,255,135,.3);
  transform:translateX(6px);
  box-shadow:0 4px 12px rgba(0,255,135,.15);
}

.skill-nav-item.active{
  background:linear-gradient(135deg,rgba(0,255,135,.12),rgba(0,255,135,.05));
  border-color:var(--g);
  border-left-color:var(--g);
  color:var(--g);
  box-shadow:0 4px 16px rgba(0,255,135,.25);
}

.skill-nav-item.active::after{
  content:'›';
  margin-left:auto;
  color:var(--g);
  font-size:1rem;
  animation:slideRight .8s ease-in-out infinite;
}

@keyframes slideRight{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}

.sn-num{
  color:var(--g);
  opacity:.55;
  font-size:.6rem;
}

.skill-panels{min-width:0;position:relative}

.skill-panel{
  display:none;
  animation:panelFade .35s ease;
}
.skill-panel.active{display:block}

@keyframes panelFade{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

.skill-panel-title{
  position:relative;
  display:inline-block;
  margin-bottom:2rem;
  font-family:var(--display);
  font-size:clamp(2.7rem,5vw,4.8rem);
  line-height:.9;
  letter-spacing:.03em;
}

.skill-panel-title::after{
  content:'';
  position:absolute;
  bottom:-8px;left:0;
  width:0;height:3px;
  background:linear-gradient(90deg,var(--g),var(--g2));
  animation:slideIn .6s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes slideIn{
  0%{width:0}
  100%{width:100%}
}

.skill-panel-desc{
  max-width:650px;
  margin-bottom:2rem;
  color:rgba(238,242,255,.6);
  font-size:1rem;
  line-height:1.8;
  padding-bottom:1.5rem;
  border-bottom:1px solid rgba(0,255,135,.1);
}

.skill-bars{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  margin-bottom:2rem;
}

.sbar-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.55rem;
  color:var(--text2);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
}

.sbar-label span{color:var(--g);font-weight:700}

.sbar-track{
  position:relative;
  width:100%;
  height:8px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  border-radius:4px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
}

.sbar-fill{
  position:relative;
  height:100%;
  background:linear-gradient(90deg,var(--g),var(--g2));
  background-size:200% 100%;
  box-shadow:0 0 20px rgba(0,255,135,.5);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
  border-radius:4px;
}

.sbar-fill::before{
  /* scanning beam */
  content:'';
  position:absolute;
  top:0;left:-20%;
  width:30%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:scanBeam 2.6s linear infinite;
  filter:blur(2px);
  mix-blend-mode:screen;
}
@keyframes scanBeam{
  0%{left:-30%}
  100%{left:110%}
}

.sbar-fill::after{
  content:'';
  position:absolute;
  top:0;right:0;
  width:6px;
  height:100%;
  background:rgba(255,255,255,.55);
  animation:shimmer 1.5s infinite;
  filter:blur(1px);
}

@keyframes shimmer{
  0%{opacity:1}
  50%{opacity:.3}
  100%{opacity:1}
}

.skill-panel.active .sbar-fill{
  transform:scaleX(1);
  animation:barShift 6s linear infinite;
}
.skill-panel.active .skill-bars > div:nth-child(2) .sbar-fill{animation-delay:-1.5s}
.skill-panel.active .skill-bars > div:nth-child(3) .sbar-fill{animation-delay:-3s}
.skill-panel.active .skill-bars > div:nth-child(4) .sbar-fill{animation-delay:-4.5s}
@keyframes barShift{
  0%{background-position:0 0}
  100%{background-position:200% 0}
}
/* smooth width oscillation driven by JS */
.sbar-fill{transition:width .42s ease-in-out,transform 1s cubic-bezier(.16,1,.3,1)}

/* live wobble on percentage label */
.sbar-label span{
  display:inline-block;
  animation:numWobble 3s ease-in-out infinite;
}
.skill-bars > div:nth-child(2) .sbar-label span{animation-delay:-.5s}
.skill-bars > div:nth-child(3) .sbar-label span{animation-delay:-1s}
.skill-bars > div:nth-child(4) .sbar-label span{animation-delay:-1.5s}
@keyframes numWobble{
  0%,100%{opacity:.85;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-1px)}
}

.skill-tags2{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.stag{
  position:relative;
  padding:.5rem 1rem;
  background:rgba(0,255,135,.05);
  border:1px solid rgba(0,255,135,.2);
  color:var(--text2);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.08em;
  transition:all .3s ease;
  cursor:none;
  overflow:hidden;
  border-radius:3px;
}

.stag::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent,rgba(255,255,255,.1),transparent);
  transform:translateX(-100%);
}

.stag:hover{
  color:var(--g);
  border-color:var(--g);
  background:rgba(0,255,135,.12);
  transform:translateY(-3px);
  box-shadow:0 4px 16px rgba(0,255,135,.2);
}

.stag:hover::before{animation:shine .6s ease}

@keyframes shine{100%{transform:translateX(100%)}}

/* ──────────────────────────────
   PROJECTS
────────────────────────────── */
#projects{background:var(--bg1)}

.proj-grid{
  display:grid;
  grid-template-columns:2fr 1.8fr;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}

.proj-card{
  position:relative;
  overflow:hidden;
  padding:2.2rem;
  background:var(--bg1);
  transition:background .25s ease,transform .25s ease;
}

.proj-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:transparent;
  transition:background .25s ease;
  z-index:1;
}

.proj-card::after{
  /* corner brackets */
  content:'';
  position:absolute;
  bottom:1rem;left:1rem;
  width:14px;height:14px;
  border-left:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
  opacity:.7;
  transition:border-color .25s ease;
}

.proj-card:hover{background:var(--surface2)}
.proj-card:hover::before{background:linear-gradient(90deg,var(--g),var(--g2))}
.proj-card:hover::after{border-color:var(--g)}

.proj-card.wide{grid-column:1/-1}
.proj-card.wide .proj-inner{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:2rem;
  align-items:center;
}

.proj-label{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:.8rem;
  color:var(--g);
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.feat-badge{
  padding:.15rem .5rem;
  background:var(--g);
  color:#06080F;
  font-size:.55rem;
  font-weight:700;
  border-radius:2px;
}

.proj-title{
  margin-bottom:.85rem;
  font-family:var(--display);
  font-size:2.2rem;
  line-height:1;
  letter-spacing:.02em;
}
.proj-card.wide .proj-title{font-size:2.2rem}

.proj-desc{
  margin-bottom:1rem;
  color:rgba(238,242,255,.6);
  font-size:.92rem;
  line-height:1.9;
}

.proj-stack2{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.ps-tag{
  padding:.25rem .65rem;
  background:rgba(0,255,135,.08);
  color:var(--g);
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:2px;
}

.proj-visual{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  border:1px solid var(--border2);
  background:
    radial-gradient(circle at 30% 20%,rgba(0,255,135,.08),transparent 55%),
    radial-gradient(circle at 80% 90%,rgba(0,217,255,.06),transparent 55%),
    var(--bg3);
  border-radius:6px;
  padding:.85rem;
}

.proj-visual::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,255,135,.04),transparent 60%);
  pointer-events:none;
}

/* mini live dashboard inside featured project visual */
.pv-mini{
  position:relative;
  width:100%;
  height:100%;
  background:rgba(6,9,16,.7);
  border:1px solid var(--border2);
  border-radius:6px;
  font-family:var(--mono);
  font-size:.66rem;
  color:var(--text2);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.pv-mini-head{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .65rem;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--border);
}
.pv-mini-head > i{
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}
.pv-mini-head > i:first-child{background:#ff5f56}
.pv-mini-head > i:nth-child(2){background:#ffbd2e}
.pv-mini-head > i:nth-child(3){background:#27c93f}
.pv-mini-head span{
  color:var(--text3);
  font-size:.6rem;
  margin-left:.3rem;
  flex:1;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pv-mini-led{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--g);
  box-shadow:0 0 6px var(--g);
  animation:ledPulse 1.8s ease-in-out infinite;
}
.pv-mini-body{
  flex:1;
  padding:.7rem .8rem .8rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.pv-row{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.pv-k{
  width:2rem;
  color:var(--text3);
  text-transform:uppercase;
  font-size:.6rem;
  letter-spacing:.06em;
}
.pv-bar{
  flex:1;
  height:5px;
  background:rgba(255,255,255,.05);
  border-radius:3px;
  overflow:hidden;
}
.pv-bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--g),var(--g2));
  border-radius:3px;
  box-shadow:0 0 10px rgba(0,255,135,.45);
  transition:width .55s cubic-bezier(.16,1,.3,1);
}
.pv-v{
  width:2.4rem;
  text-align:right;
  color:var(--g);
  font-variant-numeric:tabular-nums;
  font-size:.62rem;
}
.pv-spark{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:26px;
}
.pv-spark span{
  flex:1;
  background:linear-gradient(180deg,var(--g),var(--g2));
  border-radius:1px;
  min-height:2px;
  opacity:.9;
  transition:height .25s ease;
}

.proj-arrow{
  position:absolute;
  top:1rem;right:1rem;
  color:var(--text3);
  font-size:1.1rem;
  transition:color .2s ease,transform .2s ease;
}

.proj-card:hover .proj-arrow{
  color:var(--g);
  transform:translate(4px,-4px);
}

/* ──────────────────────────────
   FOOTER
────────────────────────────── */
footer{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2rem 3rem;
  border-top:1px solid var(--border);
  background:var(--bg);
}

.foot-l,.foot-r{
  color:var(--text3);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.05em;
}

.foot-uptime{color:var(--g)}

.foot-c{
  font-family:var(--display);
  font-size:1.4rem;
  letter-spacing:.06em;
}
.foot-c em{color:var(--g);font-style:normal}

/* ──────────────────────────────
   REVEAL
────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}

/* ──────────────────────────────
   MARQUEE
────────────────────────────── */
.marquee-wrap{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,var(--bg1) 0%,var(--bg) 20%,var(--bg) 80%,var(--bg1) 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:1rem 0;
}

.marquee-track{
  display:flex;
  gap:3rem;
  animation:scroll-left 40s linear infinite;
  white-space:nowrap;
}

.marquee-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:0 1.5rem;
  flex-shrink:0;
  font-family:var(--mono);
  font-size:.85rem;
  letter-spacing:.1em;
  color:var(--text2);
  transition:color .3s ease;
}
.marquee-item:hover{color:var(--g)}
.marquee-item em{color:var(--g);font-style:normal}

@keyframes scroll-left{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.marquee-track:hover{animation-play-state:paused}

/* ──────────────────────────────
   BUG GAME
────────────────────────────── */
#bugzone{
  background:var(--bg);
  position:relative;
  overflow:hidden;
  padding:4rem 3rem!important;
}

#bugzone::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 50%,rgba(0,255,135,.03) 0%,transparent 50%),
    radial-gradient(circle at 80% 50%,rgba(168,85,247,.03) 0%,transparent 50%);
  pointer-events:none;
}

.bz-lead{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--text2);
  margin-bottom:2rem;
  max-width:520px;
  line-height:1.7;
}

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

.bz-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2rem;
  padding:1.5rem;
  background:rgba(0,255,135,.05);
  border:1px solid rgba(0,255,135,.15);
  border-radius:8px;
}

.bz-title{
  font-family:var(--display);
  font-size:1.8rem;
  letter-spacing:.05em;
  color:var(--text);
}

.bz-meta{
  display:flex;
  gap:2rem;
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--text2);
  letter-spacing:.06em;
}

.bz-score{
  color:var(--g);
  font-size:1.2rem;
  font-weight:700;
}

@keyframes pulse-score{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}

.bz-bar-wrap{
  height:6px;
  background:rgba(0,0,0,.3);
  margin-bottom:2rem;
  border-radius:3px;
  overflow:hidden;
  position:relative;
}

.bz-bar{
  height:100%;
  background:linear-gradient(90deg,var(--g),var(--g2));
  width:100%;
  box-shadow:0 0 20px rgba(0,255,135,.6);
  transition:width 1s linear;
}

.bz-arena{
  position:relative;
  aspect-ratio:4/1;
  background:linear-gradient(135deg,rgba(0,255,135,.02) 0%,rgba(168,85,247,.02) 100%);
  border:2px solid rgba(0,255,135,.15);
  border-radius:12px;
  overflow:hidden;
  cursor:none;
  min-height:300px;
  margin-bottom:1.5rem;
}

.bz-code-bg{
  position:absolute;
  inset:0;
  font-family:var(--mono);
  font-size:.62rem;
  color:rgba(0,255,135,.1);
  overflow:hidden;
  white-space:pre-wrap;
  word-wrap:break-word;
  padding:1rem;
  pointer-events:none;
  line-height:1.4;
}

.bz-msg{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(6,8,15,.92);
  backdrop-filter:blur(8px);
  z-index:10;
  text-align:center;
  transition:opacity .3s ease;
}

.bz-msg h3{
  font-family:var(--display);
  font-size:3.5rem;
  margin-bottom:1rem;
  color:var(--g);
  animation:float-in 1s cubic-bezier(.16,1,.3,1);
}

.bz-msg p{
  color:var(--text2);
  font-size:.95rem;
  margin-bottom:2rem;
  animation:float-in 1s cubic-bezier(.16,1,.3,1) .2s backwards;
}

.bz-msg.hidden{
  opacity:0;
  pointer-events:none;
}

@keyframes float-in{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.bug{
  position:absolute;
  font-size:2.2rem;
  cursor:none;
  user-select:none;
  animation:bug-spawn .3s ease-out;
  filter:drop-shadow(0 0 8px rgba(0,255,135,.3));
  z-index:5;
}

.bug:hover{
  filter:drop-shadow(0 0 16px rgba(0,255,135,.8));
  transform:scale(1.3);
}

@keyframes bug-spawn{
  from{opacity:0;transform:scale(.3)}
  to{opacity:1;transform:scale(1)}
}

.bug-squashed{animation:squash .4s ease-out forwards}

@keyframes squash{
  0%{opacity:1;transform:scale(1)}
  50%{transform:scale(.3)}
  100%{opacity:0;transform:scale(0)}
}

.hit-fx{
  position:absolute;
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:700;
  color:var(--g);
  pointer-events:none;
  animation:hit-pop .8s cubic-bezier(.16,1,.3,1) forwards;
  z-index:6;
}

@keyframes hit-pop{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-40px) scale(1.2)}
}

.bz-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:1.5rem;
  font-family:var(--mono);
  font-size:.8rem;
}

.bz-info{
  color:var(--text2);
  letter-spacing:.05em;
}
.bz-info span{color:var(--g);font-weight:700}

.btn-game{
  padding:.8rem 1.8rem;
  background:linear-gradient(135deg,var(--g),var(--g2));
  color:#06080F;
  border:none;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:none;
  border-radius:6px;
  transition:all .3s ease;
  box-shadow:0 4px 16px rgba(0,255,135,.3);
}
.btn-game:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,255,135,.5);
}
.btn-game:active{transform:translateY(0)}

/* ──────────────────────────────
   CONTACT
────────────────────────────── */
#contact{background:var(--bg)}

.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}

.contact-text{
  display:flex;
  flex-direction:column;
}

/* ──────────────────────────────
   CONTACT TERMINAL BLOCK
────────────────────────────── */
.contact-term{
  margin-bottom:1.6rem;
  background:rgba(9,13,24,.78);
  border:1px solid var(--border2);
  border-radius:8px;
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 18px 36px -12px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,255,135,.06),
    0 0 40px rgba(0,255,135,.04);
  font-family:var(--mono);
  max-width:480px;
  position:relative;
}
.contact-term::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,255,135,.05),transparent 35%,transparent 65%,rgba(0,217,255,.04));
  pointer-events:none;
}
.ct-head{
  position:relative;
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .85rem;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--border);
}
.ct-head > i{
  width:9px;height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}
.ct-head > i:first-child{background:#ff5f56}
.ct-head > i:nth-child(2){background:#ffbd2e}
.ct-head > i:nth-child(3){background:#27c93f}
.ct-title{
  color:var(--text3);
  font-size:.62rem;
  margin-left:.35rem;
  flex:1;
  letter-spacing:.05em;
}
.ct-led{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--g);
  box-shadow:0 0 6px var(--g);
  animation:ledPulse 1.8s ease-in-out infinite;
}
.ct-body{
  padding:.95rem 1.1rem 1.05rem;
  font-size:.78rem;
  line-height:1.85;
  color:var(--text2);
}
.ct-body p{
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ct-prompt{
  color:var(--g);
  margin-right:.5rem;
  display:inline-block;
  width:.9rem;
}
.ct-prompt.ct-arr{color:var(--g2)}
.ct-arg{color:var(--text);font-weight:500}
.ct-caret{
  display:inline-block;
  width:.5rem;
  height:.85rem;
  background:var(--g);
  vertical-align:-2px;
  margin-left:.3rem;
  animation:blink 1s steps(2) infinite;
  box-shadow:0 0 8px rgba(0,255,135,.5);
}

.big-email{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(2rem,5vw,3.5rem);
  color:var(--text);
  text-decoration:none;
  margin-bottom:2rem;
  transition:all .3s ease;
  border-bottom:2px solid rgba(0,255,135,.3);
  padding-bottom:.5rem;
  line-height:1.2;
  align-self:flex-start;
  letter-spacing:.01em;
}

.big-email:hover{
  color:var(--g);
  border-bottom-color:var(--g);
  transform:translateX(4px);
}

.contact-blurb{
  color:rgba(238,242,255,.6);
  font-size:1.02rem;
  line-height:1.9;
  margin-bottom:1rem;
}

.socials2{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:2rem;
}

.soc-link{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:.9rem 1.2rem;
  background:rgba(0,255,135,.05);
  border:1px solid rgba(0,255,135,.2);
  border-radius:8px;
  color:var(--text2);
  text-decoration:none;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.06em;
  transition:all .3s ease;
  cursor:none;
}

.soc-link:hover{
  background:rgba(0,255,135,.12);
  border-color:var(--g);
  color:var(--g);
  transform:translateX(6px);
  box-shadow:0 4px 12px rgba(0,255,135,.2);
}

.soc-icon{
  font-size:1.1rem;
  opacity:.8;
  transition:all .3s ease;
}

.soc-handle{
  margin-left:auto;
  font-size:.66rem;
  color:var(--text3);
  letter-spacing:.08em;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
  background:rgba(13,18,32,.6);
  padding:0 0 2.2rem;
  border:1px solid rgba(0,255,135,.18);
  border-radius:12px;
  backdrop-filter:blur(10px);
  overflow:hidden;
}

.cf-head{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--border);
  margin-bottom:1rem;
}
.cf-dot{
  width:9px;height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}
.cf-dot:nth-child(1){background:#ff5f56}
.cf-dot:nth-child(2){background:#ffbd2e}
.cf-dot:nth-child(3){background:#27c93f}
.cf-title{
  margin-left:.4rem;
  font-family:var(--mono);
  font-size:.65rem;
  color:var(--text3);
  letter-spacing:.05em;
}

.cf-group{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding:0 1.7rem;
}

.cf-label{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--g);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.cf-prompt{
  color:var(--g);
  opacity:.55;
  font-weight:400;
}

.cf-input,
.cf-textarea{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(0,255,135,.2);
  border-radius:6px;
  padding:.95rem 1rem;
  color:var(--text);
  font-family:var(--mono);
  font-size:.85rem;
  transition:all .3s ease;
  cursor:none;
}

.cf-input::placeholder,
.cf-textarea::placeholder{color:var(--text3)}

.cf-input:focus,
.cf-textarea:focus{
  outline:none;
  background:rgba(0,255,135,.06);
  border-color:var(--g);
  box-shadow:0 0 16px rgba(0,255,135,.18);
}

.cf-textarea{
  resize:vertical;
  min-height:120px;
}

.cf-send{
  margin:0 1.7rem;
  padding:1.05rem 2rem;
  background:linear-gradient(135deg,var(--g),var(--g2));
  color:#06080F;
  border:none;
  border-radius:8px;
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:none;
  transition:all .3s ease;
  box-shadow:0 4px 16px rgba(0,255,135,.3);
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.cf-send i{font-style:normal}
.cf-send:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,255,135,.5);
}
.cf-send:active{transform:translateY(-1px)}

/* ──────────────────────────────
   AMBIENT MOTION PACK
────────────────────────────── */

/* hero grid panning */
.hero-grid{animation:gridPan 30s linear infinite}
@keyframes gridPan{
  0%{background-position:0 0,0 0}
  100%{background-position:80px 80px,80px 80px}
}

/* metric numbers — soft glow pulse + sliding sheen */
.metric-n{
  position:relative;
  animation:metricGlow 4s ease-in-out infinite;
  background:linear-gradient(90deg,var(--g) 0%,var(--g2) 50%,var(--g) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:metricGlow 4s ease-in-out infinite,metricShift 5s linear infinite;
}
.metric:nth-child(2) .metric-n{animation-delay:-1s,-1s}
.metric:nth-child(3) .metric-n{animation-delay:-2s,-2s}
.metric:nth-child(4) .metric-n{animation-delay:-3s,-3s}
@keyframes metricGlow{
  0%,100%{filter:drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 0 14px rgba(0,255,135,.5))}
}
@keyframes metricShift{
  0%{background-position:0 0}
  100%{background-position:200% 0}
}

/* breathing border on project cards */
.proj-card{animation:cardBreath 6s ease-in-out infinite}
.proj-card:nth-child(2n){animation-delay:-2s}
.proj-card:nth-child(3n){animation-delay:-4s}
@keyframes cardBreath{
  0%,100%{box-shadow:inset 0 0 0 0 transparent}
  50%{box-shadow:inset 0 0 32px rgba(0,255,135,.06)}
}

/* corner bracket pulse */
.proj-card::after{animation:bracketPulse 3.5s ease-in-out infinite}
@keyframes bracketPulse{
  0%,100%{opacity:.45}
  50%{opacity:.9}
}

/* tag soft pulse */
.stag{animation:tagBreath 3s ease-in-out infinite}
.stag:nth-child(2n){animation-delay:-.7s}
.stag:nth-child(3n){animation-delay:-1.4s}
.stag:nth-child(5n){animation-delay:-2.1s}
@keyframes tagBreath{
  0%,100%{border-color:rgba(0,255,135,.2)}
  50%{border-color:rgba(0,255,135,.45)}
}

/* nav-center underline shimmer when active */
.nav-center a.active::after{
  background-size:200% 100%;
  animation:navShine 2.4s linear infinite;
}
@keyframes navShine{
  0%{background-position:0 0}
  100%{background-position:200% 0}
}

/* nav availability time blink-tick */
.avail-time{animation:timeTick 4s steps(1) infinite}
@keyframes timeTick{
  0%,92%,100%{opacity:1}
  94%{opacity:.3}
  96%{opacity:1}
}

/* sec-eyebrow walking dashes */
.sec-eyebrow::after{
  background:repeating-linear-gradient(90deg,var(--g) 0,var(--g) 4px,transparent 4px,transparent 8px);
  animation:dashes 1.1s linear infinite;
  background-size:8px 100%;
}
@keyframes dashes{
  0%{background-position:0 0}
  100%{background-position:8px 0}
}

/* sec-title — keep solid; nested .dim works correctly */

/* marquee items shimmer */
.marquee-item em{animation:starSpin 6s linear infinite;display:inline-block}
@keyframes starSpin{
  0%{transform:rotate(0) scale(1);opacity:1}
  50%{transform:rotate(180deg) scale(1.15);opacity:.7}
  100%{transform:rotate(360deg) scale(1);opacity:1}
}

/* skill-nav active glow ripple */
.skill-nav-item.active{
  animation:navItemGlow 3s ease-in-out infinite;
}
@keyframes navItemGlow{
  0%,100%{box-shadow:0 4px 16px rgba(0,255,135,.25),inset 0 0 0 0 rgba(0,255,135,0)}
  50%{box-shadow:0 4px 22px rgba(0,255,135,.4),inset 0 0 22px rgba(0,255,135,.06)}
}

/* term-card glow ring */
.term-card,
.sys-card{
  animation:cardFloatGlow 7s ease-in-out infinite;
}
.sys-card{animation-delay:-2s}
@keyframes cardFloatGlow{
  0%,100%{
    transform:translateY(0);
    box-shadow:0 24px 48px -16px rgba(0,0,0,.55),0 0 0 1px rgba(0,255,135,.08),0 0 30px rgba(0,255,135,.04);
  }
  50%{
    transform:translateY(-10px);
    box-shadow:0 30px 56px -16px rgba(0,0,0,.65),0 0 0 1px rgba(0,255,135,.18),0 0 70px rgba(0,255,135,.12);
  }
}

/* big-email subtle underline drift */
.big-email{
  background:linear-gradient(90deg,var(--g),var(--g2),var(--g));
  background-size:200% 100%;
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:200% 2px;
  background-position:0 100%;
  animation:emailUnderline 5s linear infinite;
  border-bottom:none;
}
@keyframes emailUnderline{
  0%{background-position:0 100%}
  100%{background-position:200% 100%}
}

/* feat-badge breathing */
.feat-badge{animation:featPulse 1.8s ease-in-out infinite}
@keyframes featPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,255,135,.6)}
  50%{box-shadow:0 0 0 6px rgba(0,255,135,0)}
}

/* hero chip dot inner pulse already; add chip border breathe */
.hero-chip{animation:chipBreath 3.5s ease-in-out infinite}
@keyframes chipBreath{
  0%,100%{border-color:rgba(0,255,135,.25);background:rgba(0,255,135,.04)}
  50%{border-color:rgba(0,255,135,.55);background:rgba(0,255,135,.08)}
}

/* hero-desc left border pulse */
.hero-desc{animation:descGlow 4s ease-in-out infinite}
@keyframes descGlow{
  0%,100%{border-left-color:var(--g);box-shadow:-2px 0 0 0 rgba(0,255,135,0)}
  50%{border-left-color:#fff;box-shadow:-2px 0 18px rgba(0,255,135,.25)}
}

/* ──────────────────────────────
   RESPONSIVE
────────────────────────────── */
@media(max-width:1024px){
  .about-inner{grid-template-columns:1fr}
  .skills-layout{grid-template-columns:1fr;gap:2.5rem}
  .skill-nav{position:static;flex-direction:row;flex-wrap:wrap}
  .skill-nav-item{border:1px solid rgba(255,255,255,.08)}
  .proj-grid{grid-template-columns:1fr}
  .proj-card.wide .proj-inner{grid-template-columns:1fr}
  .proj-visual{display:none}
}

@media(max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:3rem}
}

@media(max-width:768px){
  nav{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:.9rem 1rem;
    padding:.85rem 1rem .75rem;
  }
  .nav-logo{font-size:1.55rem}
  .nav-logo::before{margin-right:.4rem}
  .nav-center{
    position:static;
    order:3;
    transform:none;
    display:flex;
    width:100%;
    gap:.55rem;
    overflow-x:auto;
    padding:.15rem 0 .25rem;
    scrollbar-width:none;
  }
  .nav-center::-webkit-scrollbar{display:none}
  .nav-center a{
    flex:0 0 auto;
    padding:.55rem .7rem;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    font-size:.58rem;
    letter-spacing:.11em;
    border-radius:3px;
  }
  .nav-center a::before{display:none}
  .nav-center a.active::after{display:none}
  .nav-avail{margin-left:auto;font-size:.55rem}
  .avail-label{display:none}

  section{
    padding:4.5rem 1.25rem;
    scroll-margin-top:128px;
  }

  #hero{
    min-height:calc(100svh - 1px);
    padding:9rem 1.25rem 4rem;
  }
  .hero-name{font-size:clamp(4rem,18vw,7rem)}
  .hero-sub{gap:.55rem;font-size:.85rem}
  .lab-card{font-size:.6rem;flex-wrap:wrap;gap:.4rem;padding:.45rem .65rem}
  .lab-divider{display:none}
  .term-card{display:none}
  .sec-title{margin-bottom:2.5rem}

  .proj-grid{grid-template-columns:1fr}
  .proj-card.wide{grid-column:auto}

  footer{
    flex-direction:column;
    gap:.8rem;
    padding:1.5rem;
    text-align:center;
  }

  #bugzone{padding:4.5rem 1.25rem!important}
  .bz-header,.bz-controls{
    align-items:flex-start;
    flex-direction:column;
    gap:1rem;
  }
  .bz-meta{flex-wrap:wrap;gap:.75rem 1rem}
  .bz-arena{
    aspect-ratio:1/1.05;
    min-height:360px;
    height:auto;
  }
  .bz-msg{padding:1.25rem}
  .bz-msg h3{font-size:clamp(2.3rem,14vw,3.2rem)}

  .contact-form{padding-bottom:1.7rem}
  .cf-group,.cf-send{padding:0 1.2rem}
  .cf-send{margin:0 1.2rem;width:calc(100% - 2.4rem);justify-content:center}
}

@media(max-width:480px){
  body{cursor:auto}
  #c-dot,#c-ring,#spotlight{display:none}
  .hero-actions{flex-direction:column}
  .btn{width:100%}
  .metrics{grid-template-columns:1fr}
  .skill-panel-title{font-size:3rem}
  .hero-name{font-size:clamp(3.5rem,20vw,5rem)}
  .nav-avail{display:none}
  .nav-center a{padding:.52rem .62rem}
  .boot-ascii{font-size:.5rem}
}

@media(max-width:420px){
  html{scroll-padding-top:132px}
  .big-email{
    font-size:clamp(1.45rem,10vw,2.1rem);
    overflow-wrap:anywhere;
  }
  .skill-nav-item{width:100%}
  .skill-panel-title{font-size:2.45rem}
}

@media(prefers-reduced-motion:reduce){
  /* kill only the most jarring decoration; keep live data + subtle motion */
  .hero-glow,
  .hero-glow2,
  .marquee-track,
  .hero-name [data-glitch]::before,
  .hero-name [data-glitch]::after,
  .marquee-item em,
  .term-card::before{
    animation:none!important;
  }
  html{scroll-behavior:auto!important}
  .typed::after{animation:none}
}