/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --ink:        #0B0E16;   /* deep blue-black base            */
  --ink-raised: #121826;   /* raised surfaces                 */
  --ink-line:   #1E2636;   /* hairlines / borders             */
  --mist:       #C9D2E6;   /* soft body text                  */
  --mist-dim:   #76819A;   /* muted captions                  */
  --coral:      #FF6B5C;   /* warm accent                     */
  --teal:       #5EE7D4;   /* cool accent                     */
  --violet:     #8B7CFF;   /* tertiary glow                   */

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --max: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* default system cursor */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ink); }

/* blurred, slowly-drifting B&W background image (own layer so it can be filtered) */
html::before {
  content: "";
  position: fixed;
  inset: -3%;                 /* small overscan past the blur margin */
  z-index: -1;
  /* `cover` guarantees full viewport coverage with no transform to misalign,
     and the solid base means any sub-pixel edge reads as theme dark, never a
     black box */
  background: var(--ink) url("../images/kali-background.jpg") center / cover no-repeat;
  filter: grayscale(1) blur(3px) brightness(0.42);
  pointer-events: none;
}

/* Mobile background image, created by web.js, crossfades over the desktop bg */
#bg-mob {
  position: fixed;
  inset: -3%;
  z-index: -1;
  background: var(--ink) url("../images/kali-bg-mob.jpg") center / cover no-repeat;
  filter: grayscale(1) blur(3px) brightness(0.42);
  transform: scale(1.15);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
html.is-mobile #bg-mob { opacity: 1; }

/* home page: its own backdrop on every screen size (the mobile crossfade
   layer is hidden so the same image shows there too) */
html:has(body[data-page="home"])::before {
  background-image: url("../images/kalibg.png");
}
html:has(body[data-page="home"]) #bg-mob { display: none; }

/* big black void behind the top menu bar, sits below the page content and
   the cursor layer, so it darkens only the background (not content) and the
   cursor shows above it */
html::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 190px;
  z-index: 0;            /* above bg image, below cursor + content */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.96) 0%,
    rgba(0,0,0,0.9)  28%,
    rgba(1,2,6,0.55) 60%,
    transparent 100%
  );
}
@keyframes bgDrift {
  from { transform: scale(1.12) translate(-1.6%, -1.1%); }
  to   { transform: scale(1.2)  translate(1.6%,  1.3%); }
}

/* Mobile: disable animated background and rain to prevent iOS fixed-position jank */
@media (max-width: 768px) {
  html::before {
    animation: none;
    transform: scale(1.15);
  }
  #rain-bg {
    display: none;
  }
  body[data-page="home"]::before {
    animation: none;
  }
}

body {
  font-family: var(--font-body);
  background: transparent;    /* lets the html::before image show through */
  color: var(--mist);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* clip instead of hidden where supported, avoids creating a scroll container
   which breaks position:fixed on iOS Safari */
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

/* subtle film grain + vignette over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background:
    radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}

/* dragon corner infection, dark spreading corruption behind the dragon.
   Full-screen layer so the gradient fades out at the viewport edge instead of
   leaving a hard rectangular box mid-screen. */
body[data-page="home"]::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 48;
  background: radial-gradient(
    ellipse 80% 85% at 0% 100%,
    rgba(2,0,0,0.96) 0%,
    rgba(6,0,0,0.78) 12%,
    rgba(5,0,0,0.45) 26%,
    rgba(3,0,0,0.18) 42%,
    transparent 62%
  );
  animation: infect-breathe 6s ease-in-out infinite;
}
@keyframes infect-breathe {
  0%, 100% { opacity: 0.82; }
     50%   { opacity: 1;    }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--coral); color: var(--ink); }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* mark | centered links | social */
  align-items: center;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  mix-blend-mode: difference;       /* legible over any background */
}
.nav__mark { justify-self: start; }
.nav__links { justify-self: center; }
.nav__social { justify-self: end; }

.nav__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.nav__mark .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 14px var(--coral);
}

.nav__links {
  display: flex;
  gap: clamp(1.4rem, 3.5vw, 3rem);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}
.nav__links a {
  color: #fff;
  position: relative;
  padding: 0.2rem 0;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { opacity: 1; }
.nav-ext { font-size: 0.7em; opacity: 0.45; }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__social {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.nav__social a {
  color: #fff;
  opacity: 0.7;
  display: inline-flex;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav__social a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ---- mobile burger menu ---- */
.nav__drawer { display: contents; }   /* desktop: links + social act as grid items */
.nav__burger { display: none; }

@media (max-width: 720px) {
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    mix-blend-mode: normal;           /* drawer controls its own colours */
  }

  .nav__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: 58px; height: 58px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 60;
    /* centre the burger in the bar */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav__burger span {
    display: block;
    width: 40px; height: 3px;
    margin: 0 auto;
    background: var(--burger-bar, #fff);
    border-radius: 2px;
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), background 0.25s var(--ease);
  }
  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

  /* slide-down drawer */
  .nav__drawer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.1rem;
    min-height: 58vh;
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 7rem 1.5rem 3rem;
    background: var(--drawer-bg,
      radial-gradient(120% 80% at 50% 0%, rgba(255,91,107,0.08), transparent 60%),
      linear-gradient(180deg, rgba(19,12,23,0.97), rgba(8,9,14,0.97)));
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);
    border-bottom: 1px solid var(--drawer-border, rgba(255,91,107,0.16));
    box-shadow: 0 26px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.42s var(--ease), opacity 0.42s var(--ease);
    z-index: 55;
  }
  /* drawer link colour follows the page theme */
  .nav__drawer .nav__links a { color: var(--drawer-fg, #fff); }
  .nav.is-open .nav__drawer { transform: translateY(0); opacity: 1; }

  .nav__links {
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    font-size: 1.45rem;
  }
  .nav__links a { opacity: 0.9; }
  .nav__social { gap: 2rem; }

  body.nav-open { overflow: hidden; }
}

/* ============================================================
   Write-up nav — a glassy terminal header bar (opt-in via
   `nav--wu`, so the rest of the site keeps the floating nav).
   ============================================================ */
.nav--wu {
  /* accent is theme-driven; defaults to HTB green, overridden per page below */
  --nav-accent: #9fef00;
  --nav-accent-rgb: 159,239,0;
  mix-blend-mode: normal;                 /* solid bar, no blend trick */
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
  /* clear glass: low-opacity tint, the blur does the heavy lifting */
  background: linear-gradient(180deg, rgba(16,20,30,0.42), rgba(16,20,30,0.16));
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  border-bottom: 1px solid rgba(var(--nav-accent-rgb),0.16);
  box-shadow: 0 8px 30px -24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(var(--nav-accent-rgb),0.06);
}
/* thin animated scan-glow riding the bottom edge */
.nav--wu::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--nav-accent-rgb),0.7), transparent);
  background-size: 220px 100%;
  background-repeat: no-repeat;
  animation: navScan 5.5s linear infinite;
  pointer-events: none;
}
@keyframes navScan {
  from { background-position: -220px 0; }
  to   { background-position: calc(100% + 220px) 0; }
}

/* accent-tinted links on the bar (accent follows the page theme) */
.nav--wu .nav__mark { color: #eef1f6; }
.nav--wu .nav__mark .dot { background: var(--nav-accent); box-shadow: 0 0 14px rgba(var(--nav-accent-rgb),0.9); }
.nav--wu .nav__links a { color: #c4ccd8; }
.nav--wu .nav__links a::after { background: var(--nav-accent); box-shadow: 0 0 8px rgba(var(--nav-accent-rgb),0.65); }
.nav--wu .nav__links a:hover,
.nav--wu .nav__links a[aria-current="page"] { color: var(--nav-accent); opacity: 1; }
.nav--wu .nav-ext { color: var(--nav-accent); opacity: 0.5; }
.nav--wu .nav__social a:hover { color: var(--nav-accent); }

/* per-page accent overrides for the bar */
body[data-page="home"] .nav--wu { --nav-accent: #FF6B5C; --nav-accent-rgb: 255,107,92; }

/* terminal path readout filling the right grid cell */
.nav__path {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--mist-dim);
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--nav-accent-rgb),0.2);
  background: rgba(var(--nav-accent-rgb),0.05);
  white-space: nowrap;
}
.nav__path-prompt { color: var(--nav-accent); font-weight: 600; margin-right: 0.15rem; }

@media (prefers-reduced-motion: reduce) {
  .nav--wu::after { animation: none; }
}
@media (max-width: 720px) {
  .nav--wu { padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .nav__path { display: none; }           /* keep the mobile bar clean */
}

/* ============================================================
   Boot intro (privesc terminal → crash → site)
   ============================================================ */
body.intro-lock { overflow: hidden; }
#intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #04050a;
  padding: clamp(1rem, 4vw, 2.6rem);
  overflow: hidden;
  font-family: var(--font-mono);
}
.intro__screen {
  height: 100%;
  overflow: hidden;
  font-size: clamp(0.72rem, 1.7vw, 0.95rem);
  line-height: 1.65;
  color: #c9d2e6;
  max-width: 980px;
}
.intro__line { white-space: pre-wrap; word-break: break-word; }
.intro__user  { color: #9fef00; }
.intro__root  { color: #ff5b6b; font-weight: 600; }
.intro__path  { color: #5EE7D4; }
.intro__err   { color: #ff7b72; }
.intro__panic { color: #ffd6dd; background: rgba(199,29,58,0.18); }
.intro__caret {
  display: inline-block;
  width: 8px; height: 1.05em;
  margin-left: 1px;
  background: #9fef00;
  vertical-align: text-bottom;
  animation: termBlink 1s steps(1) infinite;
}
.intro__skip {
  position: absolute;
  bottom: clamp(1rem, 4vw, 2.2rem);
  right: clamp(1rem, 4vw, 2.2rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--mist-dim);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
}
.intro__skip:hover { color: #9fef00; border-color: rgba(159,239,0,0.4); }

/* crash glitch then fade away */
#intro.is-crash { animation: introGlitch 0.38s steps(2) 3; }
#intro.is-done {
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
@keyframes introGlitch {
  0%   { transform: translate(0, 0);   filter: none; }
  25%  { transform: translate(-3px, 1px); filter: hue-rotate(40deg) saturate(2); }
  50%  { transform: translate(3px, -2px); filter: invert(0.15); }
  75%  { transform: translate(-2px, 2px); filter: hue-rotate(-30deg); }
  100% { transform: translate(0, 0);   filter: none; }
}

/* ============================================================
   Home / hero
   ============================================================ */
/* Three.js ambient nebula (home3d.js) — sits above the flat background
   image but below the twinkle stars and all content, transparent so the
   kali backdrop reads through and it blends smoothly. Fades in after the
   boot intro clears. */
#home-gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}
html.home-gl-ready #home-gl { opacity: 1; }

#blob-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;            /* above the header void so the cursor shows over it */
  display: block;
  cursor: default;
}

/* home header "void" — a deep dark top that the blob emerges from, with a
   slow cool aurora drifting inside it. Sits below the blob (z-index 1) and
   all content, so it only darkens the background behind the header. */
.home-void {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg,
    #000 0%,
    rgba(0,0,0,0.95) 20%,
    rgba(2,3,8,0.72) 46%,
    rgba(2,3,8,0.32) 72%,
    transparent 100%);
}
.home-void::after {
  content: "";
  position: absolute;
  left: -12%; right: -12%; top: -18%;
  height: 128%;
  background:
    radial-gradient(42% 60% at 28% 6%, rgba(94,231,212,0.11), transparent 68%),
    radial-gradient(40% 55% at 74% 12%, rgba(139,124,255,0.12), transparent 70%);
  filter: blur(28px);
  animation: voidDrift 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes voidDrift {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1.05); opacity: 0.6; }
  100% { transform: translate3d(4%, 1.5%, 0) scale(1.14); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-void::after { animation: none; }
}
#dragon {
  display: block;
  position: fixed;
  bottom: 3%;
  left: 3%;
  top: auto;
  right: auto;
  transform: none;
  width: min(92px, 12vw);
  height: min(92px, 12vw);
  z-index: 50;
  pointer-events: auto;
  cursor: pointer;
  background: radial-gradient(circle closest-side at 50% 46%,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.35) 50%,
    transparent 100%);
  transition: filter 0.2s ease;
}
#dragon:hover { filter: brightness(1.3); }
@media (max-width: 720px) {
  #dragon { width: min(74px, 19vw); height: min(74px, 19vw); top: calc(12px + env(safe-area-inset-top, 0px)); right: 2%; left: auto; bottom: auto; }
}

.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.2rem, 4vw, 3rem);
  pointer-events: none;            /* let cursor reach the canvas */
}
.hero__inner { max-width: var(--max); width: 100%; margin: 0 auto; }

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff0091;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: #ff0091;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #fff;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(110deg, var(--coral), var(--violet), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* typewriter headline */
.hero__type {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2rem, 6.5vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  min-height: 1.25em;
}
.hero__word {
  color: #ece9e1;   /* off-white */
}
.hero__caret {
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-left: 5px;
  vertical-align: -0.1em;
  background: #8a1328;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.hero__sub {
  margin-top: 1.6rem;
  max-width: 38ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--mist-dim);
}

.hero__scroll {
  margin-top: 2.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--mist-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hero__scroll .line {
  display: inline-block;
  width: 40px; height: 1px;
  background: var(--mist-dim);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scaleX(0.6); transform-origin: left; }
  50%      { opacity: 1;   transform: scaleX(1);   transform-origin: left; }
}

/* ============================================================
   Home page buttons, mobile only.
   On phones the top bar is dropped and the pages live in the body
   as tappable cards under the typed headline.
   ============================================================ */
.home-menu { display: none; }

@keyframes hmIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Mobile: tune the typed hero headline + lift it clear of the cat ---- */
@media (max-width: 720px) {
  /* the menu is replaced by the buttons below the headline, but the kali
     name stays up top — the bar itself goes transparent so it just floats */
  body[data-page="home"] .nav__drawer,
  body[data-page="home"] .nav__burger { display: none; }
  body[data-page="home"] .nav--wu {
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
  }
  body[data-page="home"] .nav--wu::after { display: none; }

  /* typed headline sits at the top of the screen, clear of the name; the whole
     block is sized to the small viewport so the page list never runs off-screen */
  body[data-page="home"] .hero {
    justify-content: flex-start;
    min-height: 100svh;
    padding-top: calc(4rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }

  /* the page list: quiet mono rows on hairlines, same voice as the hero
     (eyebrow → headline → binary → hint), no card chrome */
  .home-menu {
    display: block;
    margin-top: 1.4rem;
    pointer-events: auto;          /* .hero itself is pointer-events:none */
    font-family: var(--font-mono);
    /* no card: an edge-to-edge shade fades in behind the rows so the blurred
       photo settles down under the text, then fades back out below */
    position: relative;
  }
  .home-menu::before {
    content: "";
    position: absolute;
    inset: -1.6rem calc(-1 * clamp(1.2rem, 4vw, 3rem)) -2.4rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(11,14,22,0.82) 14%,
      rgba(11,14,22,0.88) 82%,
      transparent 100%);
  }
  .home-menu__name,
  .home-menu__desc,
  .home-menu__label { text-shadow: 0 1px 12px rgba(0,0,0,0.85); }
  .home-menu__label {
    padding: 0.5rem 0 0.35rem;
    border-bottom: 1px solid rgba(201,210,230,0.16);
    margin-bottom: 0;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mist);
    opacity: 0.6;
  }
  .home-menu__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.66rem 0.1rem;
    border-bottom: 1px solid rgba(201,210,230,0.16);
    text-decoration: none;
    color: inherit;
    opacity: 0;
    animation: hmIn 0.6s var(--ease) forwards;
    animation-delay: calc(0.12s + var(--d, 0) * 0.07s);
    transition: background 0.25s var(--ease);
  }
  .home-menu__row:active { background: rgba(201,210,230,0.05); }
  .home-menu__idx {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--mist-dim);
  }
  .home-menu__text { min-width: 0; }
  .home-menu__name {
    display: block;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
  }
  .home-menu__ext { font-size: 0.72em; font-weight: 400; color: var(--coral); opacity: 0.85; }
  .home-menu__desc {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--mist);
    opacity: 0.8;
  }
  .home-menu__go {
    font-size: 1.05rem;
    color: var(--mist);
    transition: transform 0.28s var(--ease), color 0.28s var(--ease);
  }
  .home-menu__row:active .home-menu__go { transform: translateX(4px); color: var(--coral); }
  @media (prefers-reduced-motion: reduce) { .home-menu__row { animation: none; opacity: 1; } }

  .hero__eyebrow { margin-bottom: 0.7rem; }
  .hero__type {
    font-size: clamp(2.05rem, 9.4vw, 2.9rem);
    line-height: 1.05;
    white-space: nowrap;   /* keep the word + caret on one line, no reflow jump */
  }
  .hero__sub { margin-top: 0.75rem; max-width: 62vw; font-size: 0.78rem; }
  .hero__scroll { display: none; }   /* the list fits on screen now — no scroll cue */
}
/* narrow phones: shrink a touch more so the longest word still fits one line */
@media (max-width: 380px) {
  .hero__type { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .hero__sub { max-width: 64vw; }
  .home-menu__name { font-size: 0.98rem; }
}

/* ============================================================
   Generic page shell (music / websites / pentesting)
   ============================================================ */
.page {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(7rem, 14vh, 11rem) clamp(1.2rem, 4vw, 3rem) 5rem;
}

.page__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}
.page__eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--coral); }

.page__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 1rem;
}
.page__lead {
  max-width: 52ch;
  color: var(--mist-dim);
  font-size: 1.05rem;
}
.page-caret {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 4px;
  vertical-align: -0.05em;
  background: #8a1328;
  animation: caretBlink 1s steps(1) infinite;
}

/* hacker scramble text */
.ht-scramble {
  color: #00ff41;
  text-shadow: 0 0 8px #00ff41, 0 0 20px rgba(0,255,65,0.4);
  animation: htFlicker 0.06s steps(1) infinite;
}
.ht-locked {
  color: inherit;
  text-shadow: none;
}
@keyframes htFlicker {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* ---- glitch/neon finish for a write-up title (opt-in) ----
   Kicks in only once pagetype.js adds `.is-typed`, so it layers
   on top of the scramble intro instead of fighting it. */
.page__title--glitch { position: relative; display: inline-block; }
.page__title--glitch.is-typed {
  background: linear-gradient(100deg, #9fef00 0%, #eafff0 45%, #5ee7d4 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(159,239,0,0.4));
  animation: titleSheen 7s ease-in-out infinite;
}
/* two offset copies drive the RGB-split glitch bursts */
.page__title--glitch.is-typed::before,
.page__title--glitch.is-typed::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
  pointer-events: none;
  opacity: 0;
}
.page__title--glitch.is-typed::before {
  color: #5ee7d4;
  text-shadow: 0 0 8px rgba(94,231,212,0.6);
  animation: titleGlitchA 7s steps(2, jump-none) infinite;
}
.page__title--glitch.is-typed::after {
  color: #ff6b5c;
  text-shadow: 0 0 8px rgba(255,107,92,0.6);
  animation: titleGlitchB 7s steps(2, jump-none) infinite;
}
@keyframes titleSheen {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
@keyframes titleGlitchA {
  0%, 90%, 100% { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 100% 0); }
  91% { opacity: 0.85; transform: translate(-3px,-1px); clip-path: inset(8% 0 58% 0); }
  94% { opacity: 0.85; transform: translate(3px,1px);   clip-path: inset(62% 0 18% 0); }
  97% { opacity: 0.7;  transform: translate(-2px,1px);  clip-path: inset(34% 0 40% 0); }
}
@keyframes titleGlitchB {
  0%, 90%, 100% { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 100% 0); }
  92% { opacity: 0.85; transform: translate(3px,1px);   clip-path: inset(20% 0 50% 0); }
  95% { opacity: 0.85; transform: translate(-3px,-1px); clip-path: inset(55% 0 25% 0); }
  98% { opacity: 0.7;  transform: translate(2px,-1px);  clip-path: inset(40% 0 30% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .page__title--glitch.is-typed { animation: none; }
  .page__title--glitch.is-typed::before,
  .page__title--glitch.is-typed::after { display: none; }
}

/* ambient gradient orbs that sit behind page content */
.ambient {
  display: none;          /* removed, kept markup so it can be re-enabled later */
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.ambient .a { width: 460px; height: 460px; background: var(--violet); top: -120px; left: -80px; }
.ambient .b { width: 380px; height: 380px; background: var(--coral);  bottom: -120px; right: -60px; }
.ambient .c { width: 320px; height: 320px; background: var(--teal);   top: 40%; right: 30%; opacity: 0.25; }

/* ============================================================
   Terminal audio player
   ============================================================ */
.player-wrap {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  justify-content: center;
}

/* terminal chrome wrapper */
.term-window {
  width: min(560px, 100%);
  border: 1px solid rgba(255,107,92,0.28);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(255,107,92,0.06),
    0 0 50px rgba(255,107,92,0.08),
    0 20px 60px rgba(0,0,0,0.65);
  overflow: hidden;
  background: rgba(4,2,8,0.92);
}
.term-window--wide { width: min(680px, 100%); }

.term-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  background: rgba(9,4,14,0.98);
  border-bottom: 1px solid rgba(255,107,92,0.14);
}
.term-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.term-dot--r { background: #ff5f57; }
.term-dot--y { background: #febc2e; }
.term-dot--g { background: #28c840; }
.term-bar__title {
  margin-left: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(255,107,92,0.48);
  letter-spacing: 0.04em;
}

.player {
  width: 100%;
  padding: clamp(1.4rem, 3.5vw, 2rem);
  border-radius: 0;
  position: relative;
  isolation: isolate;
  background: rgba(4,2,8,0.92);
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.player::before { display: none; }

.player__art {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 4px;
  margin-bottom: 1.4rem;
  position: relative;
  overflow: hidden;
  background: #020008;
  border: 1px solid rgba(94,231,212,0.12);
  display: grid;
  place-items: center;
}
.player__galaxy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}
/* CRT scanlines overlay */
.player__art-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.14) 3px,
    rgba(0,0,0,0.14) 4px
  );
}
.player__art-label {
  position: relative;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  text-shadow: 0 0 12px rgba(94,231,212,0.55);
  font-weight: 400;
}

.player__meta { margin-bottom: 1.1rem; }
.player__track {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.08rem;
  color: #fff;
  letter-spacing: 0.01em;
}
.player__track::before {
  content: "> ";
  color: var(--coral);
  font-weight: 400;
}
.player__index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mist-dim);
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

/* seek bar */
.seek {
  --pct: 0%;
  position: relative;
  height: 6px;
  border-radius: 2px;
  background: rgba(94,231,212,0.1);
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.seek__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--coral));
}
.seek__head {
  position: absolute;
  top: 50%;
  left: var(--pct);
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 2px;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(94,231,212,0.7);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.seek:hover .seek__head { opacity: 1; }

.player__time {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mist-dim);
  margin-bottom: 1.3rem;
}

/* transport controls */
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: 1.4rem;
}
.ctrl {
  background: none;
  border: none;
  color: var(--mist-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 4px;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.ctrl:hover { color: #fff; transform: scale(1.08); }
.ctrl:active { transform: scale(0.94); }
.ctrl svg { width: 22px; height: 22px; fill: currentColor; }

.ctrl--play {
  width: 56px; height: 56px;
  background: rgba(4,2,8,0.95);
  color: var(--teal);
  border: 1px solid rgba(94,231,212,0.5);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(94,231,212,0.18), inset 0 0 10px rgba(94,231,212,0.04);
}
.ctrl--play:hover {
  color: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 28px rgba(94,231,212,0.32);
  transform: scale(1.04);
}
.ctrl--play svg { width: 26px; height: 26px; }

.ctrl--random {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 4px;
  border: 1px solid rgba(255,107,92,0.38);
  color: var(--coral);
  width: auto; height: auto;
}
.ctrl--random:hover {
  background: rgba(255,107,92,0.12);
  border-color: var(--coral);
  color: #fff;
  transform: scale(1);
}
.ctrl--random svg { width: 15px; height: 15px; }

/* volume */
.volume {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.volume svg { width: 18px; height: 18px; fill: var(--mist-dim); flex-shrink: 0; }
.volume input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(94,231,212,0.1);
  outline: none;
  cursor: pointer;
}
.volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 2px;
  background: var(--teal);
  box-shadow: 0 0 6px rgba(94,231,212,0.5);
}
.volume input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border: none;
  border-radius: 2px;
  background: var(--teal);
}

.player__hint {
  margin-top: 1.4rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--mist-dim);
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.player__hint code {
  color: var(--teal);
  background: rgba(94,231,212,0.08);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

/* ============================================================
   Engineering, before/after comparisons (terminal shell)
   ============================================================ */
.eng__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.eng-item {
  position: relative;
  overflow: hidden;
  padding: 0.9rem 1rem;
  border-radius: 4px;
  background: rgba(4,2,8,0.55);
  border: 1px solid rgba(255,107,92,0.14);
}
.eng-item__galaxy {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
}
.eng-item__head,
.eng-item__seek,
.eng-item .eng-ab { position: relative; z-index: 1; }
.eng-item__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}
.eng-item__play {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  border: 1px solid rgba(94,231,212,0.4);
  cursor: pointer;
  color: var(--teal);
  background: rgba(4,2,8,0.85);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.eng-item__play:hover { transform: scale(1.06); box-shadow: 0 0 14px rgba(94,231,212,0.28); }
.eng-item__play svg { width: 17px; height: 17px; fill: currentColor; }
.eng-item__name {
  flex: 1;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9rem;
  color: #fff;
}
.eng-item__tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.eng-item__seek {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(94,231,212,0.1);
  cursor: pointer;
  margin-bottom: 0.85rem;
  overflow: hidden;
}
.eng-item__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--coral));
}
.eng-ab {
  display: inline-flex;
  padding: 2px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.eng-ab__btn {
  border: none;
  cursor: pointer;
  background: none;
  color: var(--mist-dim);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32rem 0.8rem;
  border-radius: 3px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.eng-ab__btn.is-active {
  color: var(--teal);
  background: rgba(94,231,212,0.12);
}

/* ============================================================
   Placeholder content (websites / pentesting)
   ============================================================ */
.soon {
  margin-top: 3rem;
  padding: 2.4rem;
  border: 1px dashed var(--ink-line);
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--mist-dim);
}
.soon b { color: var(--teal); font-weight: 500; }

/* ============================================================
   Beat pack signup
   ============================================================ */
.beatpack {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 560px;
  text-align: center;
  padding: clamp(1.4rem, 3.5vw, 2rem);
  border-radius: 6px;
  background: rgba(4,2,8,0.88);
  border: 1px solid rgba(255,107,92,0.22);
  box-shadow: 0 0 0 1px rgba(255,107,92,0.05), 0 0 40px rgba(255,107,92,0.06);
}
.beatpack__title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--coral);
}
.beatpack__title::before { content: "// "; opacity: 0.55; }
.beatpack__sub {
  margin-top: 0.5rem;
  color: var(--mist-dim);
  font-size: 0.88rem;
  font-family: var(--font-mono);
}
.beatpack__form {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.55rem;
}
.beatpack__input {
  flex: 1;
  min-width: 0;
  padding: 0.72rem 0.9rem;
  border-radius: 4px;
  border: 1px solid rgba(94,231,212,0.2);
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  outline: none;
  caret-color: var(--teal);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.beatpack__input::placeholder { color: rgba(94,231,212,0.28); }
.beatpack__input:focus { border-color: rgba(94,231,212,0.55); box-shadow: 0 0 0 1px rgba(94,231,212,0.1); }
.beatpack__btn {
  padding: 0.72rem 1.1rem;
  border-radius: 4px;
  border: 1px solid rgba(255,107,92,0.5);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--coral);
  background: rgba(255,107,92,0.08);
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.beatpack__btn:hover { background: rgba(255,107,92,0.18); box-shadow: 0 0 16px rgba(255,107,92,0.2); color: #fff; }
.beatpack__btn:active { transform: translateY(0); }
.beatpack__msg {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  min-height: 1.1em;
}
.beatpack__msg.is-ok  { color: var(--teal); }
.beatpack__msg.is-err { color: #ff7b72; }
@media (max-width: 480px) {
  .beatpack__form { flex-direction: column; }
}

/* ============================================================
   Inquiry form
   ============================================================ */
.inquire {
  margin: clamp(2.8rem, 7vw, 4.5rem) auto 0;
  max-width: 620px;
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  border-radius: 6px;
  background: rgba(4,2,8,0.88);
  border: 1px solid rgba(255,107,92,0.22);
  box-shadow: 0 0 0 1px rgba(255,107,92,0.05), 0 0 40px rgba(255,107,92,0.06);
}
.inquire__title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--coral);
}
.inquire__title::before { content: "// "; opacity: 0.55; }
.inquire__sub {
  margin-top: 0.5rem;
  color: var(--mist-dim);
  font-size: 0.88rem;
  font-family: var(--font-mono);
}
.inquire__cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  border: 1px solid var(--coral);
  background: var(--coral);
  color: #120206;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  transition: filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.inquire__cta:hover { filter: brightness(1.12); box-shadow: 0 0 22px rgba(255,107,92,0.35); }
.inquire__or {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.6rem 0 0.2rem;
  color: var(--mist-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.inquire__or::before,
.inquire__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,107,92,0.15);
}
.inquire__form {
  margin-top: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.inquire__row {
  display: flex;
  gap: 0.65rem;
}
.inquire__input {
  width: 100%;
  min-width: 0;
  padding: 0.72rem 0.9rem;
  border-radius: 4px;
  border: 1px solid rgba(94,231,212,0.18);
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  outline: none;
  caret-color: var(--teal);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.inquire__input::placeholder { color: rgba(94,231,212,0.25); }
.inquire__input:focus { border-color: rgba(94,231,212,0.55); box-shadow: 0 0 0 1px rgba(94,231,212,0.08); }
.inquire__textarea { resize: vertical; min-height: 100px; }

/* file upload */
.inquire__file {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.9rem;
  border-radius: 4px;
  border: 1px dashed rgba(94,231,212,0.2);
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.inquire__file:hover { border-color: rgba(94,231,212,0.5); background: rgba(94,231,212,0.04); }
.inquire__file input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.inquire__file-icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 4px;
  background: rgba(94,231,212,0.1);
  color: var(--teal);
  font-size: 0.85rem;
  border: 1px solid rgba(94,231,212,0.25);
}
.inquire__file-label {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--mist-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inquire__file.has-file { border-style: solid; border-color: rgba(94,231,212,0.4); }
.inquire__file.has-file .inquire__file-label { color: var(--mist); }
.inquire__btn {
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.72rem 1.3rem;
  border-radius: 4px;
  border: 1px solid rgba(255,107,92,0.5);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--coral);
  background: rgba(255,107,92,0.08);
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.inquire__btn:hover { background: rgba(255,107,92,0.18); box-shadow: 0 0 16px rgba(255,107,92,0.2); color: #fff; }
.inquire__btn:active { transform: translateY(0); }
/* mix & master submit, inherits terminal style */
#mix-form .inquire__btn { }
.inquire__msg {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  min-height: 1.1em;
}
.inquire__msg.is-ok  { color: var(--teal); }
.inquire__msg.is-err { color: #ff7b72; }
@media (max-width: 480px) {
  .inquire__row { flex-direction: column; }
}

/* ============================================================
   Website cards, glass panels, slideshow + key points
   ============================================================ */
/* ---- carousel shell ---- */
.site-carousel {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  overflow: visible;
  /* fade neighbour cards at the edges, body overflow-x:hidden handles scrollbar */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.7) 6%,
    black 14%,
    black 86%,
    rgba(0,0,0,0.7) 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.7) 6%,
    black 14%,
    black 86%,
    rgba(0,0,0,0.7) 94%,
    transparent 100%
  );
}
.carousel__viewport {
  overflow: visible;
  padding: 2.4rem 0;          /* room for card shadows + float */
}
.site-cards {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
}
.site-cards.is-dragging { transition: none; cursor: grabbing; }
.site-cards img { -webkit-user-drag: none; user-select: none; }

/* nav arrows */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(12,10,16,0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease), opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.carousel__arrow:hover { background: rgba(138,19,40,0.55); }
.carousel__arrow:active { transform: translateY(-50%) scale(0.92); }
.carousel__arrow:disabled { opacity: 0.25; cursor: default; }
.carousel__arrow--prev { left: clamp(0.2rem, 2vw, 1rem); }
.carousel__arrow--next { right: clamp(0.2rem, 2vw, 1rem); }

/* dots */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 1.2rem;
}
.carousel__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.carousel__dot:hover { background: rgba(255,255,255,0.6); }
.carousel__dot.is-active { background: #c43a52; transform: scale(1.35); }

.site-card {
  flex: 0 0 auto;
  width: min(540px, 88vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: default;
  padding: 0;
  border-radius: 24px;
  position: relative;
  isolation: isolate;
  opacity: 0.52;
  transform: scale(0.86);
  filter: blur(0.5px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);

  background: rgba(6, 0, 2, 0.88);
  border: 1px solid rgba(255, 107, 92, 0.18);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(138, 19, 40, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.site-card__void {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}

/* ---- browser-window chrome: frames each card as a live site ---- */
.site-card__chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem 0.55rem;
  pointer-events: none;
}
.site-card__lights {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.site-card__lights i {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.35);
}
.site-card__lights i:nth-child(1) { background: #ff5f57; }
.site-card__lights i:nth-child(2) { background: #febc2e; }
.site-card__lights i:nth-child(3) { background: #28c840; }
.site-card__url {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  max-width: 58%;
  padding: 0.3rem 0.72rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--mist);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(8, 5, 7, 0.55);
  border: 1px solid rgba(255, 107, 92, 0.16);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.site-card__url::before {
  content: "";
  flex-shrink: 0;
  width: 9px; height: 9px;
  background: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-card__url--pending {
  color: var(--mist-dim);
}
.site-card__url--pending::before { background: var(--mist-dim); }
.site-card.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
  animation: cardFloat 4.5s ease-in-out infinite;
  box-shadow:
    0 45px 70px rgba(0,0,0,0.100),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
@keyframes cardFloat {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1) translateY(-12px); }
}

/* "coming soon" card */
.site-card--soon .site-card__slide {
  filter: blur(7px) brightness(0.5) grayscale(0.3);
  transform: scale(1.08);
}
.site-card__soon {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.site-card__soon span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.6rem 1.3rem;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  background: rgba(8,7,12,0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.site-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,0.5), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}

/* ---- image, bottom of card, swipeable ---- */
.site-card__slides {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 220px;
  z-index: 1;
  background: rgba(0,0,0,0.4);
  border-radius: 0 0 24px 24px;
  touch-action: pan-y;
  /* fade image edges into the void */
  -webkit-mask-image: radial-gradient(ellipse 88% 82% at 50% 55%, black 52%, transparent 100%);
          mask-image: radial-gradient(ellipse 88% 82% at 50% 55%, black 52%, transparent 100%);
}
/* glow ring around the image area */
.site-card__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 40px rgba(168, 24, 54, 0.35), inset 0 0 8px rgba(255, 90, 110, 0.2);
  pointer-events: none;
  z-index: 4;
}
.site-card__slide {
  position: absolute;
  top: 3rem;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 3rem);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.site-card__slide.is-active { opacity: 1; }

/* swipe arrows inside the image area */
.site-card__prev,
.site-card__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  padding: 0;
}
.site-card__prev { left: 10px; }
.site-card__next { right: 10px; }
.site-card__slides:hover .site-card__prev,
.site-card__slides:hover .site-card__next { opacity: 1; }

.site-card__dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.site-card__dot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.site-card__dot:hover { background: rgba(255,255,255,0.75); }
.site-card__dot.is-active { background: #fff; transform: scale(1.3); }

/* ---- front caption (built by JS), sits over the image ---- */
.site-card__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 2.6rem 1.1rem 1rem;
  background: linear-gradient(to top, rgba(6,5,10,0.88), transparent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: #fff;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.site-card__caption .hint {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff8a95;
  white-space: nowrap;
}
.site-card.is-open .site-card__caption { opacity: 0; }

/* ---- "Want a website?" CTA button ---- */
.site-card__cta {
  position: absolute;
  top: clamp(0.9rem, 2vw, 1.2rem);
  right: clamp(0.9rem, 2vw, 1.2rem);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  border: 1px solid rgba(255, 107, 92, 0.4);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  z-index: 4;
}
.site-card__cta:hover {
  background: rgba(255, 107, 92, 0.12);
  border-color: var(--coral);
  color: #fff;
}

/* ---- info, always visible at top of card ---- */
.site-card__info {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: clamp(1.2rem, 4vw, 1.6rem);
  overflow: visible;
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.site-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  color: #fff;
  margin-bottom: 1rem;
}
.fact { margin-bottom: 0.95rem; }
.fact:last-child { margin-bottom: 0; }
.fact__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-dim);
  margin-bottom: 0.28rem;
}
.fact__value {
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.5;
}
.fact__value a {
  color: var(--coral);
  border-bottom: 1px solid rgba(255,107,92,0.4);
  transition: border-color 0.3s var(--ease);
}
.fact__value a:hover { border-color: var(--coral); }

@media (max-width: 720px) {
  .site-card { width: min(420px, 88vw); }
  .site-card__slides { min-height: 240px; }
  .site-card__info { padding: 1.2rem 1.2rem 1rem; }
  .site-card__name { font-size: 1.25rem; margin-bottom: 0.7rem; }
  .fact { margin-bottom: 0.65rem; }
  .carousel__arrow { width: 38px; height: 38px; font-size: 1.25rem; }
  .carousel__arrow--prev { left: 0; }
  .carousel__arrow--next { right: 0; }
}

/* desktop: same carousel as mobile, bigger cards */
@media (min-width: 721px) {
  .site-card {
    width: min(860px, 78vw);
    min-height: 680px;
  }
  .site-card__slides { min-height: 380px; }
  .site-card__caption { display: none; }
  .site-card__info { padding: clamp(1.5rem, 3vw, 2rem); }
}

/* ============================================================
   HackTheBox profile card
   ============================================================ */
.htb-card {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border-radius: 22px;
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
}
.htb-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.htb-card__id { display: flex; align-items: center; gap: 0.8rem; }
.htb-card__cube {
  font-size: 1.8rem;
  color: #9fef00;                 /* HTB green */
  text-shadow: 0 0 16px rgba(159,239,0,0.5);
  line-height: 1;
}
.htb-card__user {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
}
.htb-card__name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--mist-dim);
}
.htb-card__link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #9fef00;
  border: 1px solid rgba(159,239,0,0.35);
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.htb-card__link:hover {
  background: rgba(159,239,0,0.10);
  border-color: rgba(159,239,0,0.7);
}
.htb-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8rem;
}
.htb-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 0.6rem;
  border-radius: 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.htb-stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
}
.htb-stat__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.htb-card__note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--mist-dim);
}
@media (max-width: 620px) {
  .htb-stats { grid-template-columns: repeat(2, 1fr); }
}

/* TryHackMe variant, red accents instead of HTB green */
.htb-card--thm .htb-card__cube { color: #ff5b6b; text-shadow: 0 0 16px rgba(255,91,107,0.45); }
.htb-card--thm .htb-card__link { color: #ff5b6b; border-color: rgba(255,91,107,0.35); }
.htb-card--thm .htb-card__link:hover { background: rgba(255,91,107,0.10); border-color: rgba(255,91,107,0.7); }
.htb-stat--feature {
  background: linear-gradient(160deg, rgba(255,91,107,0.18), rgba(255,91,107,0.05));
  border-color: rgba(255,91,107,0.35);
}
.htb-stat--feature .htb-stat__num { color: #ff8a95; }

/* HackTheBox AU-rank highlight (green) */
.htb-stat--au {
  background: linear-gradient(160deg, rgba(159,239,0,0.18), rgba(159,239,0,0.05));
  border-color: rgba(159,239,0,0.4);
}
.htb-stat--au .htb-stat__num { color: #b6f24a; }

/* HackTheBox Global-rank highlight (blue) */
.htb-stat--global {
  background: linear-gradient(160deg, rgba(46, 192, 170, 0.18), rgba(58, 214, 152, 0.232));
  border-color: rgba(74, 231, 242,0.4);
}
.htb-stat--global .htb-stat__num { color: rgb(25, 161, 127); }

/* ============================================================
   Writeups terminal
   ============================================================ */
.section-title {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: #fff;
}
.section-desc {
  margin-top: 0.5rem;
  max-width: 60ch;
  color: var(--mist-dim);
  font-size: 0.95rem;
  line-height: 1.6;
}

.terminal {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8,10,14,0.92);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  font-family: var(--font-mono);
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.terminal__dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal__dot--r { background: #ff5f56; }
.terminal__dot--y { background: #ffbd2e; }
.terminal__dot--g { background: #27c93f; }
.terminal__title {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  color: var(--mist-dim);
}
.terminal__body { padding: 1rem clamp(0.8rem, 2vw, 1.2rem) 1.2rem; }
.terminal__line {
  font-size: 0.82rem;
  color: var(--mist);
  margin-bottom: 0.4rem;
}
.terminal__prompt { color: #9fef00; }
.terminal__path { color: #5EE7D4; }
.terminal__cursor {
  display: inline-block;
  width: 8px; height: 1.05em;
  background: #9fef00;
  vertical-align: text-bottom;
  animation: termBlink 1.05s steps(1) infinite;
}
@keyframes termBlink { 50% { opacity: 0; } }

/* total line above a listing */
.terminal__total { color: var(--mist-dim); font-size: 0.82rem; margin-bottom: 0.4rem; }

/* ls -la styled rows */
.term-item {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  color: var(--mist-dim);
  font-size: 0.82rem;
  white-space: nowrap;
  transition: background 0.18s var(--ease);
}
.term-item:hover { background: rgba(159,239,0,0.08); }
.term-item__perm { color: #5EE7D4; }
.term-item__meta,
.term-item__size,
.term-item__date { color: var(--mist-dim); }
.term-item__size { min-width: 3.2em; text-align: right; }
.term-item__name {
  color: #6ea8ff;             /* directory blue, like real ls */
  font-weight: 700;
  margin-left: 0.15rem;
}
.term-item:hover .term-item__name { text-decoration: underline; }
.term-item__diff {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
}
.term-item__diff--easy   { color: #9fef00; background: rgba(159,239,0,0.12); }
.term-item__diff--medium { color: #ffbd2e; background: rgba(255,189,46,0.12); }
.term-item__diff--hard   { color: #ff7b72; background: rgba(255,123,114,0.12); }
.term-item__diff--insane { color: #d2a8ff; background: rgba(210,168,255,0.14); }

/* smaller, scrollable on small screens, like a real terminal */
@media (max-width: 620px) {
  .terminal__body { overflow-x: auto; padding: 0.8rem 0.7rem 1rem; }
  .terminal__title { font-size: 0.62rem; }
  .terminal__line,
  .terminal__total { font-size: 0.66rem; }
  .term-item { font-size: 0.66rem; gap: 0.55rem; padding: 0.16rem 0.35rem; }
  .term-item__diff { font-size: 0.56rem; padding: 0.1rem 0.4rem; }
}
@media (max-width: 400px) {
  .term-item__meta { display: none; }
}

/* ============================================================
   Writeup article pages
   ============================================================ */
.wu-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.6rem;
  padding: 0.5rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--mist);
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.wu-back:hover {
  color: #9fef00;
  background: rgba(159,239,0,0.08);
  border-color: rgba(159,239,0,0.4);
  transform: translateX(-3px);
}

.wu-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.2rem 0 2.2rem;
}
.wu-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 82%);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--mist);
}
.wu-badge--platform { color: #ff0030de; border-color: rgb(255 0 45 / 50%); }
.wu-badge--link { color: #9fef00; border-color: rgba(159,239,0,0.4); }
.wu-badge--link:hover { background: rgba(159,239,0,0.1); }
.wu-badge.wu-diff--easy   { color: #9fef00; border-color: rgba(159,239,0,0.4); }
.wu-badge.wu-diff--medium { color: #ffbd2e; border-color: rgba(255,189,46,0.4); }
.wu-badge.wu-diff--hard   { color: #ff7b72; border-color: rgba(255,123,114,0.4); }
.wu-badge.wu-diff--insane { color: #d2a8ff; border-color: rgba(210,168,255,0.4); }
.wu-badge.wu-diff--unrated { color: #9fb0c4; border-color: rgba(159,176,196,0.4); }

/* writeup tables (converted from markdown) */
.wu-tablewrap { overflow-x: auto; margin: 0.4rem 0; }
.writeup table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
.writeup th, .writeup td {
  border: 1px solid rgba(159,239,0,0.16);
  padding: 0.5rem 0.7rem; text-align: left; vertical-align: top;
}
.writeup thead th { background: rgba(159,239,0,0.08); color: #eafff0; font-weight: 600; }
.writeup tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.writeup hr { border: 0; border-top: 1px solid rgba(159,239,0,0.14); margin: 1.6rem 0; }

/* embedded writeup screenshots */
.wu-fig { margin: 1.3rem 0; }
.wu-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(159,239,0,0.18);
  background: rgba(0,0,0,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

.writeup {
  max-width: 820px;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
.writeup > * + * { margin-top: 1.45rem; }
.writeup > :first-child { margin-top: 0; }
.writeup h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  color: #fff;
  margin-top: 2.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.writeup h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  margin-top: 1.6rem;
}
.writeup p { color: var(--mist); font-size: 1.05rem; line-height: 1.85; }
.writeup ul { margin-left: 1.3rem; color: var(--mist); font-size: 1.05rem; line-height: 1.85; }
.writeup li { margin-top: 0.5rem; }
.writeup a { color: #9fef00; border-bottom: 1px solid rgba(159,239,0,0.35); }
.writeup strong { color: #fff; }

/* inline + block code, terminal flavoured */
.writeup code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(255,255,255,0.08);
  padding: 0.12em 0.4em;
  border-radius: 5px;
  color: #ffd6dd;
}
.writeup pre {
  background: rgba(8,10,14,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: clamp(0.65rem, 2.4vw, 1rem) clamp(0.7rem, 2.4vw, 1.1rem);
  overflow-x: auto;
  position: relative;
}
.writeup pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: #c9d2e6;
  font-size: clamp(0.68rem, 2.3vw, 0.85rem);
  line-height: 1.6;
  /* wrap long lines / tokens instead of forcing a horizontal swipe */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: block;
}

/* ============================================================
   Reading-progress line (fixed, very top of the viewport).
   Injected by js/writeup.js; the fill width is set inline.
   ============================================================ */
.wu-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9998;                 /* over nav (50), under the page-enter wipe (10000) */
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}
.wu-progress__fill {
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--teal), #9fef00 55%, var(--violet));
  box-shadow: 0 0 12px rgba(159,239,0,0.55), 0 0 4px rgba(94,231,212,0.6);
  transition: width 0.08s linear;
}
@media (prefers-reduced-motion: reduce) {
  .wu-progress__fill { transition: none; }
}

/* ============================================================
   Terminal blocks — js/writeup.js wraps each `.writeup pre`
   in <figure class="term"> and injects the chrome bar. Styles
   degrade gracefully: a bare <pre> still reads fine if JS is off.
   ============================================================ */
.term {
  --term-accent: #9fef00;
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(6,8,12,0.94);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.term:hover {
  border-color: rgba(159,239,0,0.34);
  box-shadow: 0 26px 60px -24px rgba(159,239,0,0.16), 0 20px 44px -22px rgba(0,0,0,0.85);
}
.term__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem 0.5rem 0.8rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.term__dots { display: flex; gap: 0.42rem; flex: none; }
.term__dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.term__dot--r { background: #ff5f56; }
.term__dot--y { background: #ffbd2e; }
.term__dot--g { background: #27c93f; }
.term__title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--mist-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  text-align: center;
}
.term__title b { color: var(--term-accent); font-weight: 500; }
.term__lang {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--term-accent);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(159,239,0,0.28);
  background: rgba(159,239,0,0.07);
}
.term__copy {
  flex: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist-dim);
  padding: 0.22rem 0.55rem;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.term__copy:hover { color: #eafff0; border-color: rgba(159,239,0,0.45); background: rgba(159,239,0,0.08); }
.term__copy.is-done { color: #9fef00; border-color: rgba(159,239,0,0.5); }
.term .writeup__pre,
.term > pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: clamp(0.6rem, 2.4vw, 0.95rem) clamp(0.7rem, 2.4vw, 1.1rem);
}
.term > pre::before { display: none; }

/* line-level colouring applied by writeup.js */
.term .tk-cmd {                                     /* the actual command being run  */
  color: #c3f56a;
  font-weight: 600;
  text-shadow: 0 0 7px rgba(159,239,0,0.3);        /* low glow, no highlight        */
}
/* dim the prompt so the coloured command is what the eye lands on */
.term .tk-prompt  { color: #708a4d; font-weight: 600; }

/* boxed mode (writeup--boxed): command lines sit on the terminal, output is
   grouped into its own recessed panel so the two read as separate boxes */
.term .tk-line { display: block; }
.term .tk-out {
  display: block;
  margin: 0.5rem 0 0.2rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.09);
  border-left: 2px solid rgba(159,239,0,0.28);
  border-radius: 5px;
  color: #a7b0bf;
}
.term .tk-ok      { color: #5ee7d4; }               /* [*] / [+] status lines       */
.term .tk-warn    { color: #ffbd2e; }               /* [!] notices                  */
.term .tk-bad     { color: #ff7b72; }               /* [-] errors                   */
.term .tk-comment { color: #6f7f57; font-style: italic; }  /* # comments            */
.term .tk-tree    { color: var(--mist-dim); }       /* |_ nmap script indent glyphs */
.term .tk-flag    { color: #d2a8ff; }               /* --flags / redacted tokens    */

/* writeup--kali: recolour the prompt to match the real Kali zsh theme —
   pink frame + sigils, blue user/host/path, light command text.
   Scoped so other writeups keep their green terminal. tk-frame inherits the
   pink prompt colour; only user/host/path/command are overridden. */
.writeup--kali .term { --term-accent: #f43e7f; }   /* title-bar prompt + lang pill */
.writeup--kali .term .tk-prompt { color: #f43e7f; font-weight: 600; }
.writeup--kali .term .tk-user   { color: #5aa9ff; font-weight: 700; text-shadow: 0 0 9px rgba(74,158,255,0.55); }
.writeup--kali .term .tk-host   { color: #5aa9ff; font-weight: 700; text-shadow: 0 0 9px rgba(74,158,255,0.55); }
.writeup--kali .term .tk-at     { color: #cdd6e6; font-weight: 400; }
.writeup--kali .term .tk-path   { color: #57a6ff; font-weight: 700; text-shadow: 0 0 9px rgba(74,158,255,0.5); }
.writeup--kali .term .tk-sigil  { color: #e8ecf3; font-weight: 700; }
.writeup--kali .term .tk-cmd    { color: #eef2f8; font-weight: 600; text-shadow: none; }
.writeup--kali .term .tk-out    { border-left-color: rgba(74,158,255,0.30); }

/* ============================================================
   Lightbox for writeup screenshots (js/writeup.js)
   ============================================================ */
.wu-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3,4,8,0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.wu-lightbox.is-open { opacity: 1; pointer-events: auto; }
.wu-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  border: 1px solid rgba(159,239,0,0.35);
  box-shadow: 0 30px 90px -20px rgba(0,0,0,0.9), 0 0 40px -10px rgba(159,239,0,0.25);
  transform: scale(0.96);
  transition: transform 0.28s var(--ease);
}
.wu-lightbox.is-open img { transform: scale(1); }
.wu-lightbox__close {
  position: absolute;
  top: clamp(0.8rem, 3vw, 1.6rem);
  right: clamp(0.8rem, 3vw, 1.6rem);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.wu-lightbox__close:hover { color: #9fef00; border-color: rgba(159,239,0,0.5); background: rgba(159,239,0,0.1); }
.wu-shot__frame { cursor: zoom-in; }

/* screenshot frames, terminal flavoured */
.wu-shot {
  margin: 1.4rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  background: rgba(8,10,14,0.92);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.7);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.wu-shot:hover {
  transform: translateY(-3px);
  border-color: rgba(159,239,0,0.4);
  box-shadow: 0 26px 60px -20px rgba(159,239,0,0.22), 0 20px 44px -22px rgba(0,0,0,0.75);
}
.wu-shot__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--ink-line);
}
.wu-shot__dot { width: 9px; height: 9px; border-radius: 50%; opacity: 0.85; }
.wu-shot__dot--r { background: #ff5f56; }
.wu-shot__dot--y { background: #ffbd2e; }
.wu-shot__dot--g { background: #27c93f; }
.wu-shot__frame {
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.wu-shot__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(159,239,0,0.06), transparent 40%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.wu-shot:hover .wu-shot__frame::after { opacity: 1; }
.wu-shot__img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.wu-shot:hover .wu-shot__img { transform: scale(1.025); filter: saturate(1.15) contrast(1.05); }
.wu-shot__cap {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--mist-dim);
  padding: 0.6rem 0.9rem 0.75rem;
  border-top: 1px solid var(--ink-line);
}
.wu-shot__cap::before { content: "// "; color: #9fef00; }

/* ============================================================
   Footer
   ============================================================ */
.foot {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem clamp(1.2rem, 4vw, 3rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mist-dim);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ink-line);
}
.foot__socials {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.foot__social {
  display: flex;
  align-items: center;
  color: var(--mist-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.foot__social svg { width: 17px; height: 17px; display: block; }
.foot__social:hover { color: var(--teal); }

/* ============================================================
   Accessibility / motion
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

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

@media (max-width: 600px) {
  .foot { flex-direction: column; gap: 0.6rem; }
}

/* ============================================================
   Cursor cat
   ============================================================ */
.cat {
  display: none;          /* disabled for now, re-add js/cat.js include + remove this to re-enable */
  position: fixed;
  left: 0; top: 0;
  z-index: 5;
  margin-left: -29px;     /* line the cat's feet up near the cursor */
  margin-top: -40px;
  pointer-events: none;
  will-change: transform;
}
.cat__flip { transition: transform 0.25s var(--ease); }
.cat--left .cat__flip { transform: scaleX(-1); }

.cat__svg { display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.4)); }
.cat__eye { filter: drop-shadow(0 0 2px #ff8a95); }

/* parts pivot from where they attach to the body */
.cat__leg, .cat__tail, .cat__body-group { transform-box: fill-box; }
.cat__leg { transform-origin: 50% 0; }
.cat__tail { transform-origin: 100% 100%; animation: catTail 1.6s ease-in-out infinite; }
@keyframes catTail { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }

/* walking: legs swing in two alternating pairs, body gently bobs */
.cat--walking .cat__leg--1,
.cat--walking .cat__leg--3 { animation: catLegA 0.45s linear infinite; }
.cat--walking .cat__leg--2,
.cat--walking .cat__leg--4 { animation: catLegB 0.45s linear infinite; }
@keyframes catLegA { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
@keyframes catLegB { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
.cat--walking .cat__body-group { animation: catBob 0.45s ease-in-out infinite; }
@keyframes catBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

@media (prefers-reduced-motion: reduce) {
  .cat__tail { animation: none; }
}

/* ============================================================
   Glitchy cursor
   ============================================================ */
.gcursor {
  position: fixed;
  top: 0; left: 0;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}
.gcursor span {
  position: absolute;
  inset: 0;
  border: 1.5px solid;
  border-radius: 2px;
  transition: transform 0.05s linear;
}
.gcursor__r    { border-color: #ff2e63; }
.gcursor__c    { border-color: #2ee6e6; }
.gcursor__core { border-color: rgba(255,255,255,0.85); }
.gcursor.is-glitch .gcursor__r { transform: translate(2.5px, -1.5px) scaleX(1.1); }
.gcursor.is-glitch .gcursor__c { transform: translate(-2.5px, 1.5px) scaleY(1.1); }
.gcursor.is-down { transform: scale(0.7); }
.gcursor.is-down .gcursor__core { border-color: #ff2e63; }

/* ============================================================
   Page transitions
   ============================================================ */

/* black fade-in on every page load (no flash, defined in <head> CSS) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  pointer-events: none;
  animation: pageFadeIn 0.6s ease forwards;
}
@keyframes pageFadeIn {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}
/* home: gentler, longer entry fade for a smoother reveal */
body[data-page="home"]::before {
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* CRT "switch-off" when leaving the home page */
@keyframes tvOff {
  0%   { transform: scale(1, 1);     filter: brightness(1);  }
  48%  { transform: scale(1, 0.012); filter: brightness(7);  }
  60%  { transform: scale(1, 0.012); filter: brightness(9);  }
  100% { transform: scale(0.0008, 0.012); filter: brightness(22); opacity: 0; }
}
html.is-leaving { background: #000; }
html.is-leaving body {
  transform-origin: center center;
  overflow: hidden;
  animation: tvOff 0.55s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}
/* collapse the background image layer along with the page */
html.is-leaving::before {
  transform-origin: center center;
  animation: tvOff 0.55s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation-duration: 0.01s; }
  html.is-leaving body { animation: none; opacity: 0; }
  html.is-leaving::before { animation: none; opacity: 0; }
}

/* ============================================================
   page-enter.js overlay, terminal "close/open script" transition
   ============================================================ */
#page-enter,
#page-exit {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #050d05;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.38s ease;
}
#page-enter.pe--done { opacity: 0; pointer-events: none; }

.pet__errors { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.pet__err-line {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(0.72rem, 1.5vw, 0.9rem);
  color: rgba(255, 91, 107, 0.8);
  animation: petFadeIn 0.12s ease forwards;
}
@keyframes petFadeIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }

.pe__box {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(0.82rem, 1.8vw, 1.05rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 1rem;
}
.pe__box--exit {
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.pe__box--exit::-webkit-scrollbar { display: none; }
.pe__ctrl {
  color: #ff5b6b;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255,91,107,0.5);
}
.pe__killed {
  color: rgba(0, 200, 50, 0.45);
  font-size: 0.82em;
  margin-bottom: 0.3rem;
}
.pe__cmd { color: #00ff41; }
.pe__prompt { color: #00cc33; }
.pe__path { color: #6ea8ff; }
.pe__opening { color: rgba(0,255,65,0.5); font-size: 0.88em; margin-top: 0.15rem; }
.pe__caret {
  display: inline-block;
  animation: peCaretBlink 0.55s steps(1) infinite;
  color: #00ff41;
  text-shadow: 0 0 8px #00ff41;
}
@keyframes peCaretBlink { 50% { opacity: 0; } }

/* ============================================================
   Rain background video
   ============================================================ */
#rain-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.05;
  transition: opacity 0.2s, filter 0.05s, transform 0.05s;
}

/* ---- Write-up active-box gate ---- */
#wu-gated[hidden] { display: none; }
.wu-gate { margin: 2.5rem 0 1rem; }
.wu-gate__panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,123,114,0.35);
  background: linear-gradient(180deg, rgba(255,123,114,0.06), rgb(0 0 0 / 22%));
  border-radius: 14px;
  padding: 2rem 1.75rem;
  text-align: center;
}
.wu-gate__panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff7b72, transparent);
}
.wu-gate__icon { display: block; font-size: 1.8rem; margin-bottom: 0.4rem; }
.wu-gate__title { margin: 0 0 0.5rem; font-size: 1.15rem; color: #ff7b72; }
.wu-gate__text {
  margin: 0 auto 1.25rem;
  max-width: 52ch;
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.55;
}
.wu-gate__form { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.wu-gate__input {
  flex: 1 1 260px;
  max-width: 360px;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  background: rgb(0 0 0 / 35%);
  color: var(--paper, #e6edf3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
}
.wu-gate__input:focus {
  outline: none;
  border-color: #ff7b72;
  box-shadow: 0 0 0 2px rgba(255,123,114,0.2);
}
.wu-gate__btn {
  padding: 0.7rem 1.3rem;
  border: 0;
  border-radius: 8px;
  background: #ff7b72;
  color: #0b0f14;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.wu-gate__btn:hover { filter: brightness(1.1); }
.wu-gate__err { margin: 0.85rem 0 0; color: #ff7b72; font-size: 0.85rem; }

/* ============================================================
   Plugins page, product block
   ============================================================ */
.plugin {
  margin: clamp(2rem, 5vw, 3.4rem) auto 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  align-items: center;
}
.plugin__shot {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  background: #0a0a0d;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(255,107,92,0.06);
}
.plugin__shot img,
.plugin__shot video { display: block; width: 100%; height: auto; }
.plugin__brand {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A9B4CC;
}
.plugin__name {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.05;
  color: var(--mist);
}
.plugin__tag {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,107,92,0.4);
  color: var(--coral);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plugin__desc {
  margin-top: 1.1rem;
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
}
.plugin__desc strong { color: var(--coral); font-weight: 600; }
.plugin__specs {
  margin-top: 1.2rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plugin__specs li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #B4BECF;
}
.plugin__specs li span {
  display: inline-block;
  min-width: 74px;
  color: var(--mist);
}
.plugin__buy {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.plugin__price {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--mist);
}
.plugin__cta {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  border: 1px solid var(--coral);
  background: var(--coral);
  color: #120206;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  transition: filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.plugin__cta:hover { filter: brightness(1.12); box-shadow: 0 0 22px rgba(255,107,92,0.35); }
@media (max-width: 720px) {
  .plugin { grid-template-columns: 1fr; }
}

/* ============================================================
   PENTESTING PAGE, terminal-merged rework
   Scoped to body[data-page="pentesting"] so nothing else moves.
   ============================================================ */

/* ---- 1. Cool dark gradient in place of the smoky "dragon" image ----
   The global background image lives on html::before (z-index -1), which
   paints above body::before, so we replace that layer directly. */
html:has(body[data-page="pentesting"])::before {
  background:
    radial-gradient(85% 55% at 80% -10%, rgba(30,120,130,0.16) 0%, transparent 45%),
    radial-gradient(70% 50% at 12% 8%, rgba(70,110,255,0.07) 0%, transparent 50%),
    radial-gradient(130% 80% at 50% 118%, rgba(24,92,38,0.28) 0%, transparent 60%),
    linear-gradient(168deg, #02050a 0%, #03080a 44%, #020705 72%, #000201 100%) !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}
/* also blank the mobile image layer on this page */
html:has(body[data-page="pentesting"]) #bg-mob { display: none !important; }
/* the water-rain video is replaced by the matrix canvas here */
body[data-page="pentesting"] #rain-bg { display: none; }

/* canvas "digital rain", brightest at the bottom, faded toward the top */
#matrix-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(180deg, transparent 6%, rgba(0,0,0,0.35) 42%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 6%, rgba(0,0,0,0.35) 42%, #000 100%);
}
body:not([data-page="pentesting"]) #matrix-bg { display: none; }

/* tone the Live2D cat down and warm it into the page's palette, so the white
   model reads as part of the dark coral theme instead of a bright cut-out */
#live2dcanvas {
  filter: brightness(0.95) saturate(0.92) sepia(0.1) hue-rotate(-10deg) contrast(1.02);
  transform-origin: bottom right;
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.25s var(--ease), height 0.25s var(--ease);
}
/* the cat is initialised during the intro so it's ready early, but stays
   hidden until <html> gets .cat-ready (added when the loading overlays clear),
   then eases in — a gentle rise + settle so it never pops on abruptly */
html:not(.cat-ready) #live2dcanvas {
  opacity: 0 !important;
  visibility: hidden;
  transform: translateY(24px) scale(0.95);
}

/* ---- 2. Rank cards side by side ---- */
.rank-grid {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  align-items: stretch;
}
@media (max-width: 760px) { .rank-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Rank cards — compact profile chip (HTB green / THM red)
   ============================================================ */
.rank-card {
  --accent: #9fef00;
  --accent-rgb: 159,239,0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 13px;
  background: linear-gradient(168deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 16px 40px -28px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
  opacity: 0;
  transform: translateY(16px);
  animation: rankIn 0.55s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 0.1s + 0.05s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.rank-card--thm { --accent: #ff5b6b; --accent-rgb: 255,91,107; }
.rank-card::before {
  content: "";
  position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(80% 55% at 90% -15%, rgba(var(--accent-rgb),0.13), transparent 60%);
  pointer-events: none;
}
.rank-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb),0.35);
  box-shadow: 0 22px 50px -26px rgba(0,0,0,0.7), 0 0 34px -20px rgba(var(--accent-rgb),0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
@keyframes rankIn { to { opacity: 1; transform: none; } }

/* ---- header row: glyph tile + identity + link ---- */
.sc__top { display: flex; align-items: center; gap: 0.65rem; }
.sc__glyph {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 9px;
  font-size: 1.05rem; color: var(--accent);
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.35);
}
.sc__id { flex: 1 1 auto; min-width: 0; }
.sc__name {
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: #fff; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc__sub {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.02em;
  color: var(--mist-dim); margin-top: 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc__sub .sc__rank { color: var(--accent); }
.sc__link {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  font-size: 0.85rem; color: var(--mist-dim);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.sc__link:hover {
  color: var(--accent); border-color: rgba(var(--accent-rgb),0.4);
  background: rgba(var(--accent-rgb),0.1); transform: translateY(-2px);
}

/* ---- inline stat chips ---- */
.sc__stats {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin-top: 0.85rem;
}
.sc__stat {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  padding: 0.28rem 0.5rem; border-radius: 7px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--mist-dim);
}
.sc__stat b { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }

/* ---- rankings: emphasized pair ---- */
.sc__ranks {
  display: flex; gap: 0.9rem;
  margin-top: 0.85rem; padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sc__rankcell { flex: 1; min-width: 0; }
.sc__rlabel {
  display: block; font-family: var(--font-mono); font-size: 0.56rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist-dim);
  margin-bottom: 0.15rem;
}
.sc__rval { display: block; line-height: 1; white-space: nowrap; }
.sc__rval b {
  font-family: var(--font-display); font-size: 1.85rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--accent);
  text-shadow: 0 0 16px rgba(var(--accent-rgb),0.35);
}
.sc__rval i { font-style: normal; font-size: 0.8rem; color: var(--mist-dim); margin-left: 0.2rem; }

@media (prefers-reduced-motion: reduce) {
  .rank-card { animation: none; opacity: 1; transform: none; }
}

/* ---- Certifications, digital verifiable-credential cards ---- */
.cert-grid {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}

.cert {
  --cc: #b6c0cc; --cc-rgb: 182,192,204;   /* neon grey */
  position: relative;
  width: 100%; max-width: 300px;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  color: #c4ccd6;
  font-family: var(--font-display), system-ui, sans-serif;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.035), rgba(0,0,0,0.34)),
    #0c0f13;
  border: 1px solid rgba(var(--cc-rgb),0.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* eCPPT is the senior cert (brighter silver, full size, on top) */
.cert--ecppt { --cc: #cfd7e0; --cc-rgb: 207,215,224; }
/* eCPPT is the larger card */
.cert--ecppt { max-width: 250px; }
/* eJPT sits smaller, dimmer, and offset a little to the side */
.cert--ejpt  { --cc: #3a3e44; --cc-rgb: 58,62,68; max-width: 190px; opacity: 0.9; margin-top: 1.6rem; }
.cert:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--cc-rgb),0.38);
  box-shadow: 0 24px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.cert--ejpt:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cert { transition: none; } }
/* stack on mobile: eCPPT on top, eJPT below (no offset) */
@media (max-width: 720px) {
  .cert-grid { flex-direction: column; align-items: center; }
  .cert { max-width: 260px; width: 100%; }
  .cert--ejpt { max-width: 210px; margin-top: 0; }
}

/* thin grey top hairline */
.cert::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(var(--cc-rgb),0.65), transparent);
}
/* hide the paper tape from the old design */
.cert__tape { display: none; }

.cert__frame {
  position: relative; z-index: 2;
  padding: clamp(0.9rem, 2.4vw, 1.2rem) clamp(0.8rem, 2vw, 1.1rem) clamp(0.8rem, 2vw, 1rem);
  text-align: center;
  min-height: 176px;
  display: flex; flex-direction: column; align-items: center;
  /* faint grey grid */
  background-image:
    linear-gradient(rgba(var(--cc-rgb),0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cc-rgb),0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

.cert__issuer {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--cc);
}
.cert__issuer::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cc);
}
.cert__kicker {
  margin-top: 0.55rem; font-family: var(--font-mono); font-size: 0.5rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #6b7480;
}
.cert__abbr {
  margin-top: 0.25rem;
  font-family: var(--font-display); font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: #e9edf2;
  text-shadow: 0 0 12px rgba(var(--cc-rgb),0.2);
}
.cert__full {
  margin-top: 0.4rem; font-size: 0.68rem; line-height: 1.4;
  color: #9aa4b1; max-width: 30ch;
}
.cert__awarded {
  margin-top: 1.1rem; font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #5f6874;
}
.cert__name {
  margin-top: 0.3rem;
  font-family: var(--font-mono); font-size: 1.35rem; font-weight: 500; color: #e9edf2;
  letter-spacing: 0.02em;
  padding: 0 0.6rem 0.2rem;
  border-bottom: 1px solid rgba(var(--cc-rgb),0.3);
}
/* grey verified hexagon badge */
.cert__seal {
  margin: 0.7rem 0 0.15rem;
  width: 38px; height: 43px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; color: #14171c;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 82%, #fff), color-mix(in srgb, var(--cc) 70%, #000));
  box-shadow: 0 0 10px rgba(var(--cc-rgb),0.22);
}
.cert__seal-star { font-size: 0.95rem; line-height: 1; font-weight: 700; }
.cert__seal-star::before { content: "✓"; }
.cert__seal-txt {
  font-family: var(--font-mono); font-size: 0.34rem; font-weight: 700;
  letter-spacing: 0.1em;
}
.cert__foot {
  margin-top: auto; padding-top: 0.7rem; width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  border-top: 1px solid rgba(var(--cc-rgb),0.14);
}
.cert__sig {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-mono); font-size: 0.5rem; color: var(--cc);
  letter-spacing: 0.03em;
}
.cert__sig::before { content: "🔗"; font-size: 0.55rem; filter: grayscale(1); opacity: 0.7; }
.cert__meta {
  font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.04em;
  color: #5f6874; text-align: right;
}

/* ---- 3. Headings & intro copy, tuned to the terminal theme ---- */
/* hero eyebrow + caret in HTB green instead of the global coral */
body[data-page="pentesting"] .page__eyebrow { color: #9fef00; }
body[data-page="pentesting"] .page__eyebrow::before { background: #9fef00; box-shadow: 0 0 10px rgba(159,239,0,0.6); }
body[data-page="pentesting"] .page-caret { background: #9fef00; box-shadow: 0 0 10px rgba(159,239,0,0.7); }
body[data-page="pentesting"] .page__lead {
  font-family: var(--font-mono);
  font-size: 0.95rem; line-height: 1.7; color: #9fb0a4;
}

/* section headings look like shell commands */
body[data-page="pentesting"] .section-title {
  margin-top: clamp(2.4rem, 5vw, 3.2rem);
  font-family: var(--font-mono);
  font-weight: 600;
  color: #eafff0;
  letter-spacing: 0.01em;
  display: flex; align-items: baseline; gap: 0.55rem;
}
body[data-page="pentesting"] .section-title::before {
  content: "~/$";
  color: #9fef00; font-weight: 700; font-size: 0.72em;
  text-shadow: 0 0 12px rgba(159,239,0,0.5);
}
body[data-page="pentesting"] .section-title::after {
  content: "";
  width: 9px; height: 1.05em;
  background: #9fef00; box-shadow: 0 0 10px rgba(159,239,0,0.6);
  transform: translateY(0.12em);
  animation: termBlink 1.05s steps(1) infinite;
}
/* descriptions read as terminal comments */
body[data-page="pentesting"] .section-desc {
  font-family: var(--font-mono);
  font-size: 0.84rem; line-height: 1.65; color: #8fa0b2;
}
body[data-page="pentesting"] .section-desc::before {
  content: "// "; color: rgba(159,239,0,0.6);
}

/* ---- Lab Reports browser (categories + grep search) ---- */
.reports {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  font-family: var(--font-mono);
  position: relative;
  padding: clamp(1.2rem, 3vw, 1.9rem);
  border-radius: 18px;
  border: 1px solid rgba(159,239,0,0.16);
  background:
    linear-gradient(180deg, rgba(3,12,6,0.78), rgba(0,4,2,0.82)),
    repeating-linear-gradient(0deg, rgba(159,239,0,0.022) 0 1px, transparent 1px 3px);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(159,239,0,0.10),
    inset 0 0 70px rgba(0,26,6,0.45);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
}

/* scroll-linked zoom — values driven by js/reports-scale.js.
   Defaults are the resting state, so it stays put if JS is off. */
#reports {
  transform: translateY(var(--rp-y, 0)) scale(var(--rp-scale, 1));
  transform-origin: 50% 0;
  opacity: var(--rp-opacity, 1);
  will-change: transform, opacity;
}
/* the rank cards above ease away as the reports zoom in */
.rank-grid {
  transform: translateY(var(--rp-away, 0)) scale(var(--rp-gscale, 1));
  transform-origin: 50% 0;
  opacity: var(--rp-gop, 1);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  #reports, .rank-grid { transform: none; opacity: 1; }
}
/* glowing top hairline, like the rank cards */
.reports::before {
  content: "";
  position: absolute;
  top: -1px; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159,239,0,0.8), transparent);
  box-shadow: 0 0 12px rgba(159,239,0,0.5);
}
.reports__cmd {
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
  color: #7de07a; margin-bottom: 1rem; line-height: 1.7;
}
.reports__cmd b { color: #eafff0; font-weight: 500; }
.reports__user { color: #9fef00; }
.reports__path { color: #5EE7D4; }
.reports__cd {
  color: #9fef00; border: 1px solid rgba(159,239,0,0.3);
  padding: 0.15rem 0.55rem; border-radius: 7px; margin-right: 0.7rem;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.reports__cd:hover { background: rgba(159,239,0,0.12); border-color: rgba(159,239,0,0.7); }
.reports__sep { color: rgba(159,239,0,0.35); margin-right: 0.7rem; }
.reports__total { color: var(--mist-dim); font-size: 0.8rem; margin-bottom: 0.9rem; }

/* category folder rows */
.cat-list { display: flex; flex-direction: column; gap: 0.75rem; }
.cat-row {
  display: grid;
  grid-template-columns: auto auto minmax(auto, max-content) auto 1fr auto;
  align-items: center; gap: 1.1rem;
  padding: 1.6rem 1.6rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(4,14,6,0.5), rgba(0,4,2,0.6));
  border: 1px solid rgba(159,239,0,0.12);
  color: var(--mist-dim); font-size: 1.02rem;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease), background 0.28s var(--ease);
  opacity: 0; transform: translateY(14px);
  animation: rankIn 0.55s var(--ease) forwards;
  animation-delay: calc(var(--d,0) * 0.08s + 0.05s);
}
.cat-row:hover {
  transform: translateY(-3px);
  border-color: rgba(159,239,0,0.5);
  background: linear-gradient(180deg, rgba(8,26,10,0.6), rgba(2,8,3,0.7));
  box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 0 26px rgba(159,239,0,0.12);
}
.cat-row__perm { color: rgba(94,231,212,0.7); font-size: 0.86rem; }
.cat-row__icon { font-size: 1.7rem; line-height: 1; filter: drop-shadow(0 0 8px rgba(159,239,0,0.35)); }
.cat-row__name { color: #9fef00; font-weight: 500; font-size: 1.1rem; text-shadow: 0 0 14px rgba(159,239,0,0.3); }
.cat-row:hover .cat-row__name { text-decoration: underline; }
.cat-row__count { color: #ffbd2e; font-size: 0.88rem; }
.cat-row__desc {
  color: var(--mist-dim); font-size: 0.92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-row__go { color: #9fef00; font-size: 1.2rem; transition: transform 0.28s var(--ease); }
.cat-row:hover .cat-row__go { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .cat-row { animation: none; opacity: 1; transform: none; } }

/* category header card */
.cat-head {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.2rem; border-radius: 14px; margin-bottom: 0.9rem;
  background: linear-gradient(180deg, rgba(6,18,8,0.55), rgba(0,4,2,0.65));
  border: 1px solid rgba(159,239,0,0.14);
}
.cat-head__icon { font-size: 2rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(159,239,0,0.4)); }
.cat-head__title { color: #9fef00; font-weight: 500; font-size: 1rem; }
.cat-head__slash { color: rgba(159,239,0,0.4); }
.cat-head__desc { color: var(--mist-dim); font-size: 0.8rem; margin-top: 0.25rem; }
.cat-head__files { color: rgba(94,231,212,0.7); }

/* grep search bar */
.grepbar {
  display: flex; align-items: stretch; gap: 0; margin-bottom: 0.8rem;
  border: 1px solid rgba(159,239,0,0.22); border-radius: 12px; overflow: hidden;
  background: rgba(0,6,2,0.6);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.grepbar:focus-within { border-color: rgba(159,239,0,0.6); box-shadow: 0 0 22px rgba(159,239,0,0.14); }
.grepbar__cmd {
  display: flex; align-items: center; padding: 0 0.9rem;
  background: rgba(159,239,0,0.10); color: #9fef00; font-size: 0.82rem;
  border-right: 1px solid rgba(159,239,0,0.18);
}
.grepbar__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: #eafff0; font-family: var(--font-mono); font-size: 0.9rem;
  padding: 0.85rem 1rem;
}
.grepbar__input::placeholder { color: rgba(118,129,154,0.7); }
.grepbar__clear {
  border: 0; background: transparent; color: var(--mist-dim);
  font-size: 1.2rem; cursor: pointer; padding: 0 0.7rem;
  transition: color 0.2s var(--ease);
}
.grepbar__clear:hover { color: #ff7b72; }
.grepbar__run {
  border: 0; cursor: pointer; padding: 0 1.3rem;
  background: rgba(159,239,0,0.14); color: #9fef00;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.05em;
  border-left: 1px solid rgba(159,239,0,0.18);
  transition: background 0.2s var(--ease);
}
.grepbar__run:hover { background: rgba(159,239,0,0.28); }

.grep-status { font-size: 0.8rem; color: #7de07a; margin-bottom: 0.9rem; }
.grep-status b { color: #eafff0; }
.grep-status__dim { color: var(--mist-dim); }
.grep-status__clear {
  border: 0; background: transparent; color: #ff7b72; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.78rem; margin-left: 0.5rem; text-decoration: underline;
}

/* result rows */
.rep-list { display: flex; flex-direction: column; gap: 0.4rem; }
/* long listings cap at ~12 rows and scroll, fading into the void */
.rep-list--capped {
  max-height: 620px;
  overflow-y: auto;
  padding-bottom: 2.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(159,239,0,0.35) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,0.35) 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,0.35) 92%, transparent 100%);
}
.rep-list--capped::-webkit-scrollbar { width: 8px; }
.rep-list--capped::-webkit-scrollbar-thumb { background: rgba(159,239,0,0.30); border-radius: 8px; }
.rep-list--capped::-webkit-scrollbar-track { background: transparent; }
.rep-empty { color: var(--mist-dim); font-size: 0.82rem; padding: 0.6rem 0.2rem; }
.rep-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  align-items: center; gap: 1rem;
  padding: 0.85rem 1.1rem; border-radius: 12px;
  background: rgba(0,5,2,0.42);
  border: 1px solid rgba(159,239,0,0.08);
  color: var(--mist); font-size: 0.88rem;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
  opacity: 0; transform: translateY(10px);
  animation: rankIn 0.4s var(--ease) forwards;
  animation-delay: calc(var(--d,0) * 0.04s + 0.02s);
}
.rep-row:hover {
  transform: translateX(4px);
  border-color: rgba(159,239,0,0.35);
  background: rgba(159,239,0,0.07);
}
.rep-row__date { color: var(--mist-dim); font-size: 0.78rem; }
.rep-row__diff {
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 6px; text-align: center;
}
.rep-row__diff--easy   { color: #9fef00; background: rgba(159,239,0,0.12); border: 1px solid rgba(159,239,0,0.35); }
.rep-row__diff--medium { color: #ffbd2e; background: rgba(255,189,46,0.12); border: 1px solid rgba(255,189,46,0.35); }
.rep-row__diff--hard   { color: #ff7b72; background: rgba(255,123,114,0.12); border: 1px solid rgba(255,123,114,0.35); }
.rep-row__diff--insane { color: #d2a8ff; background: rgba(210,168,255,0.14); border: 1px solid rgba(210,168,255,0.35); }
.rep-row__diff--unrated { color: #9fb0c4; background: rgba(159,176,196,0.10); border: 1px solid rgba(159,176,196,0.3); }
.rep-row__name { color: #eafff0; font-weight: 500; }
.rep-row:hover .rep-row__name { color: #fff; }
.rep-row__size { color: var(--mist-dim); font-size: 0.76rem; min-width: 3.4em; text-align: right; }
.rep-row__plat {
  color: #9fef00; font-size: 0.62rem; letter-spacing: 0.05em;
  border: 1px solid rgba(159,239,0,0.3); border-radius: 6px; padding: 0.16rem 0.45rem;
}
.rep-row__open { color: #9fef00; font-size: 0.76rem; white-space: nowrap; }
.rep-row:hover .rep-row__open { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .rep-row { animation: none; opacity: 1; transform: none; } }

/* responsive: collapse the ls-style extras on small screens */
@media (max-width: 640px) {
  .cat-row { grid-template-columns: auto auto 1fr auto; row-gap: 0.4rem; padding: 0.95rem 0.9rem; }
  .cat-row__perm, .cat-row__desc { display: none; }
  .rep-row { grid-template-columns: auto 1fr auto auto; gap: 0.6rem; padding: 0.75rem 0.85rem; font-size: 0.8rem; }
  .rep-row__date, .rep-row__size { display: none; }
  .reports__cmd { font-size: 0.72rem; word-break: break-word; }
}