:root {
    --void: #000000;
    --abyss: #050508;
    --shadow: #0a0a12;
    --blood: #8b0000;
    --crimson: #cc0022;
    --neon-red: #ff003c;
    --violet: #6600aa;
    --deep-violet: #3d006b;
    --cyber-teal: #00ffe7;
    --glitch-cyan: #00ffff;
    --ghost-white: #eedeff;
    --bone: #c8bfd4;
    --silver: #c99eff;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--abyss);
    color: #d4aaff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    min-height: 100vh;
    overflow-x: hidden;
    cursor: crosshair;
  }

  /* Scanline overlay */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.08) 2px,
      rgba(0,0,0,0.08) 4px
    );
    pointer-events: none;
    z-index: 9998;
    animation: scanMove 8s linear infinite;
  }

  @keyframes scanMove {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
  }

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

  /* ── HERO ── */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    overflow: hidden;
  }

  .bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(102,0,170,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(102,0,170,0.07) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridDrift 20s linear infinite;
  }

  @keyframes gridDrift {
    from { transform: perspective(600px) rotateX(20deg) translateY(0); }
    to { transform: perspective(600px) rotateX(20deg) translateY(60px); }
  }

  /* Blood drip top (hero) */
  .drip-container {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    pointer-events: none;
  }

  /* Blood drip header */
  .header-drip-container {
    position: relative;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    pointer-events: none;
    z-index: 99;
    height: 100px;
    overflow: hidden;
  }

  .drip, .header-drip {
    width: 2px;
    background: linear-gradient(to bottom, var(--crimson), transparent);
    animation: drip 3s ease-in infinite;
    opacity: 0;
  }

  /* hero drips */
  .drip:nth-child(1) { height: 60px; animation-delay: 0s; }
  .drip:nth-child(2) { height: 120px; animation-delay: 0.8s; }
  .drip:nth-child(3) { height: 80px; animation-delay: 1.5s; }
  .drip:nth-child(4) { height: 40px; animation-delay: 2.1s; }
  .drip:nth-child(5) { height: 100px; animation-delay: 0.3s; }
  .drip:nth-child(6) { height: 70px; animation-delay: 1.8s; }
  .drip:nth-child(7) { height: 90px; animation-delay: 2.6s; }
  .drip:nth-child(8) { height: 55px; animation-delay: 1.1s; }

  /* header drips — slightly varied timing so they feel independent */
  .header-drip:nth-child(1)  { height: 45px;  animation-delay: 0.4s; }
  .header-drip:nth-child(2)  { height: 80px;  animation-delay: 1.2s; }
  .header-drip:nth-child(3)  { height: 55px;  animation-delay: 2.0s; }
  .header-drip:nth-child(4)  { height: 35px;  animation-delay: 0.7s; }
  .header-drip:nth-child(5)  { height: 70px;  animation-delay: 1.6s; }
  .header-drip:nth-child(6)  { height: 90px;  animation-delay: 0.1s; }
  .header-drip:nth-child(7)  { height: 50px;  animation-delay: 2.4s; }
  .header-drip:nth-child(8)  { height: 65px;  animation-delay: 0.9s; }
  .header-drip:nth-child(9)  { height: 40px;  animation-delay: 1.8s; }
  .header-drip:nth-child(10) { height: 75px;  animation-delay: 0.5s; }
  .header-drip:nth-child(11) { height: 30px;  animation-delay: 2.8s; }
  .header-drip:nth-child(12) { height: 58px;  animation-delay: 1.3s; }

  @keyframes drip {
    0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
    20%  { opacity: 1; }
    80%  { opacity: 0.8; }
    100% { opacity: 0; transform: scaleY(1); transform-origin: top; }
  }

  /* ── TITLE ── */
  .title-wrap { position: relative; text-align: center; z-index: 10; }

  .title-sub {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.5em;
    color: var(--silver);
    text-transform: uppercase;
    margin-bottom: 1rem;
    animation: fadeSlideDown 1s ease forwards;
    opacity: 0;
  }

  .title-main {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(2.5rem, 8vw, 7rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ghost-white);
    text-shadow:
      0 0 20px rgba(200,0,40,0.8),
      0 0 60px rgba(200,0,40,0.4),
      0 0 120px rgba(140,0,80,0.3);
    position: relative;
    animation: titleReveal 1.2s ease forwards;
    opacity: 0;
    animation-delay: 0.3s;
  }

  .title-main::before,
  .title-main::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
  }

  .title-main:hover::before {
    animation: glitchA 0.3s steps(2) forwards;
    color: var(--glitch-cyan);
    clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
    opacity: 0.7;
    transform: translateX(-3px);
  }

  .title-main:hover::after {
    animation: glitchB 0.3s steps(2) forwards;
    color: var(--neon-red);
    clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
    opacity: 0.7;
    transform: translateX(3px);
  }

  @keyframes glitchA {
    0%,100% { transform: translateX(0); opacity:0; }
    50% { transform: translateX(-5px); opacity:0.8; }
  }
  @keyframes glitchB {
    0%,100% { transform: translateX(0); opacity:0; }
    50% { transform: translateX(5px); opacity:0.8; }
  }

  .title-accent {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(1rem, 3vw, 2rem);
    font-weight: 300;
    letter-spacing: 0.3em;
    color: var(--violet);
    text-shadow: 0 0 15px var(--violet), 0 0 30px var(--deep-violet);
    margin-top: 0.5rem;
    animation: fadeSlideUp 1s ease forwards;
    opacity: 0;
    animation-delay: 0.8s;
  }

  @keyframes fadeSlideDown {
    from { opacity:0; transform:translateY(-20px); }
    to { opacity:1; transform:translateY(0); }
  }
  @keyframes fadeSlideUp {
    from { opacity:0; transform:translateY(20px); }
    to { opacity:1; transform:translateY(0); }
  }
  @keyframes titleReveal {
    from { opacity:0; transform:scale(1.05); filter:blur(10px); }
    to { opacity:1; transform:scale(1); filter:blur(0); }
  }

  /* ornament */
  .ornament {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: center;
    margin: 2rem 0;
    opacity: 0;
    animation: fadeSlideDown 1s ease forwards;
    animation-delay: 1s;
  }
  .orn-line {
    flex: 1;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--crimson), transparent);
  }
  .orn-symbol {
    font-size: 1.5rem;
    color: var(--crimson);
    text-shadow: 0 0 10px var(--crimson);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { text-shadow: 0 0 10px var(--crimson); }
    50% { text-shadow: 0 0 25px var(--neon-red), 0 0 50px var(--crimson); }
  }

  /* ── SECTIONS ── */
  .content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem 6rem;
    position: relative;
    z-index: 10;
  }

  .section-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    color: var(--violet);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    display: block;
  }

  .section-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--ghost-white);
    text-shadow: 0 0 20px rgba(200,0,40,0.5);
    margin-bottom: 2.5rem;
  }

  /* Cards Grid */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
  }

  .card {
    position: relative;
    background: rgba(10,5,20,0.9);
    border: 1px solid rgba(102,0,170,0.3);
    padding: 2rem;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--crimson), var(--violet));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
  }

  .card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 2px;
    height: 0;
    background: linear-gradient(to top, var(--violet), transparent);
    transition: height 0.4s ease;
  }

  .card:hover {
    border-color: rgba(102,0,170,0.7);
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(139,0,0,0.3), 0 0 20px rgba(102,0,170,0.15);
  }

  .card:hover::before { transform: scaleX(1); }
  .card:hover::after { height: 60%; }

  .card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    filter: drop-shadow(0 0 8px var(--crimson));
  }

  .card-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1rem;
    color: var(--ghost-white);
    margin-bottom: 0.75rem;
    text-shadow: 0 0 10px rgba(200,0,40,0.4);
  }

  .card-body {
    font-size: 1rem;
    line-height: 1.7;
    color: #c99eff;
  }

  .tag {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    padding: 0.2em 0.6em;
    border: 1px solid;
    margin: 0.25rem 0.1rem;
  }

  .tag-gothic { border-color: var(--crimson); color: var(--crimson); background: rgba(200,0,34,0.05); }
  .tag-cyber { border-color: var(--cyber-teal); color: var(--cyber-teal); background: rgba(0,255,231,0.05); }
  .tag-violet { border-color: var(--violet); color: var(--violet); background: rgba(102,0,170,0.05); }

  /* Glitch banner */
  .glitch-banner {
    position: relative;
    text-align: center;
    padding: 3rem 2rem;
    margin: 3rem 0;
    background: rgba(5,0,10,0.95);
    border-top: 1px solid rgba(200,0,40,0.3);
    border-bottom: 1px solid rgba(200,0,40,0.3);
    overflow: hidden;
  }

  .glitch-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 98px,
      rgba(0,255,231,0.02) 98px,
      rgba(0,255,231,0.02) 100px
    );
    animation: glitchScan 4s steps(1) infinite;
  }

  @keyframes glitchScan {
    0%,90% { opacity:0; }
    91%,93% { opacity:1; transform:translateX(-10px); }
    92% { opacity:0.5; transform:translateX(5px); }
    94%,100% { opacity:0; }
  }

  .glitch-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.8rem, 2vw, 1.1rem);
    letter-spacing: 0.25em;
    color: var(--cyber-teal);
    text-shadow: 0 0 10px var(--cyber-teal);
    position: relative;
    animation: textGlitch 5s steps(1) infinite;
  }

  @keyframes textGlitch {
    0%,96% { clip-path: none; transform: none; }
    97% { clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); transform: translateX(4px); color: var(--neon-red); }
    98% { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translateX(-4px); color: var(--glitch-cyan); }
    99% { clip-path: none; transform: none; color: var(--cyber-teal); }
  }

  /* Aesthetic elements */
  .aesthetic-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 4rem;
  }

  .aesthetic-block {
    flex: 1;
    min-width: 200px;
    padding: 2rem;
    background: rgba(8,4,16,0.95);
    border: 1px solid rgba(102,0,170,0.2);
    position: relative;
  }

  .aesthetic-block.primary {
    border-left: 3px solid var(--crimson);
    box-shadow: inset 3px 0 20px rgba(200,0,40,0.08);
  }

  .aesthetic-block.secondary {
    border-left: 3px solid var(--cyber-teal);
    box-shadow: inset 3px 0 20px rgba(0,255,231,0.05);
  }

  .block-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    color: var(--silver);
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .block-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(102,0,170,0.2);
  }

  .color-swatch {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 1rem 0;
  }

  .swatch {
    width: 28px; height: 28px;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .swatch:hover { transform: scale(1.3); }
  .swatch::after {
    content: attr(data-name);
    position: absolute;
    bottom: 130%; left: 50%; transform: translateX(-50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    background: rgba(0,0,0,0.9);
    color: var(--ghost-white);
    padding: 2px 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
  }
  .swatch:hover::after { opacity: 1; }

  /* Terminal block */
  .terminal {
    background: #020208;
    border: 1px solid rgba(0,255,231,0.2);
    border-radius: 2px;
    padding: 1.5rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    line-height: 2;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
  }

  .terminal::before {
    content: '■ SYSTEM.LOG';
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--cyber-teal);
    border-bottom: 1px solid rgba(0,255,231,0.15);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .t-line { color: #c99eff; }
  .t-line.g { color: rgba(200,0,40,0.8); }
  .t-line.c { color: var(--cyber-teal); }
  .t-line.v { color: var(--violet); }
  .t-cursor { animation: blink 1s step-end infinite; }
  @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

  /* Cross / symbol divider */
  .divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0;
    opacity: 0.5;
  }
  .div-line { flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--deep-violet), transparent); }
  .div-cross { color: var(--crimson); font-size: 1.2rem; letter-spacing: 0.5rem; text-shadow: 0 0 8px var(--crimson); }

  /* Footer */
  .footer {
    padding: 3rem 2rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: rgba(192,170,220,0.75);
    border-top: 1px solid rgba(102,0,170,0.3);
    text-shadow: 0 0 12px rgba(102,0,170,0.4);
    background: rgba(5,0,10,0.6);
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 2rem;
  }

  .footer-sigil {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer-sigil svg {
    width: 64px; height: 64px;
    filter: drop-shadow(0 0 8px rgba(102,0,170,0.6));
    animation: sigilPulse 4s ease-in-out infinite;
    opacity: 0.7;
  }

  .footer-sigil:last-child svg {
    animation-delay: 2s;
  }

  .footer-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    line-height: 1.8;
  }

  .footer-text span {
    display: block;
    color: rgba(192,170,220,0.75);
    text-shadow: 0 0 12px rgba(102,0,170,0.4);
  }

  .footer-text span.highlight {
    color: rgba(210,150,255,0.9);
    text-shadow: 0 0 14px rgba(150,0,200,0.6), 0 0 30px rgba(102,0,170,0.3);
    font-size: 0.85rem;
    letter-spacing: 0.3em;
  }

  .footer-sep {
    color: rgba(102,0,170,0.4);
    letter-spacing: 0.1em;
  }

  @media (max-width: 768px) {
    .footer {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      gap: 1.5rem;
      text-align: center;
      padding: 2rem 1rem;
    }

    .footer-sigil svg {
      width: 48px; height: 48px;
    }
  }

  /* Floating runes */
  .rune {
    position: absolute;
    font-size: 1.5rem;
    color: rgba(139,0,0,0.08);
    animation: floatRune 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
  }

  @keyframes floatRune {
    0%,100% { transform: translateY(0) rotate(0deg); opacity: 0.05; }
    50% { transform: translateY(-30px) rotate(5deg); opacity: 0.12; }
  }

  /* ── HEADER ── */
  .site-header {
    position: relative;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 2rem;
    height: 72px;
    background: rgba(5,0,8,0.95);
    border-bottom: 1px solid rgba(102,0,170,0.25);
    box-shadow: 0 2px 40px rgba(0,0,0,0.6);
  }

  /* subtle gradient line on header bottom */
  .site-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--crimson), var(--violet), transparent);
    opacity: 0.6;
  }

  /* LOGO */
  .header-logo {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    justify-self: start;
  }

  .logo-sigil {
    width: 52px; height: 52px;
    position: relative;
    flex-shrink: 0;
  }

  .logo-sigil svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 0 6px var(--crimson)) drop-shadow(0 0 14px rgba(102,0,170,0.5));
    animation: sigilPulse 3s ease-in-out infinite;
  }

  @keyframes sigilPulse {
    0%,100% { filter: drop-shadow(0 0 5px var(--crimson)) drop-shadow(0 0 10px rgba(102,0,170,0.4)); }
    50%      { filter: drop-shadow(0 0 14px var(--neon-red)) drop-shadow(0 0 28px rgba(102,0,170,0.7)) drop-shadow(0 0 40px var(--crimson)); }
  }

  .logo-text {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.15;
    background: linear-gradient(135deg, #eedeff 0%, #cc0022 50%, #a060ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(200,0,40,0.5));
  }

  .logo-text span {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.35em;
    -webkit-text-fill-color: var(--violet);
    color: var(--violet);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    text-shadow: 0 0 8px var(--violet);
    filter: none;
    font-weight: 400;
    margin-top: 0.1rem;
  }

  /* NAV */
  .header-nav {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    justify-self: center;
  }

  .nav-link {
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5em 1em;
    position: relative;
    transition: all 0.25s ease;
    background: linear-gradient(135deg, #c99eff 0%, #eedeff 50%, #a060ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 4px rgba(160,96,255,0.3));
  }

  /* shiny shimmer sweep on hover */
  .nav-link::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1em;
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    background: linear-gradient(135deg, #ffffff 0%, #ff003c 30%, #cc00ff 60%, #ffffff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transition: opacity 0.25s ease;
    filter: drop-shadow(0 0 8px rgba(200,0,255,0.8));
  }

  .nav-link:hover { filter: drop-shadow(0 0 10px rgba(200,0,255,0.6)); }
  .nav-link:hover::after { opacity: 1; }

  .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; right: 50%;
    height: 1px;
    background: linear-gradient(90deg, var(--crimson), var(--violet));
    transition: left 0.3s ease, right 0.3s ease;
    box-shadow: 0 0 8px var(--violet);
    z-index: 1;
  }

  .nav-link:hover::before { left: 1em; right: 1em; }

  .nav-sep {
    color: rgba(160,96,255,0.5);
    font-size: 0.7rem;
    user-select: none;
    text-shadow: 0 0 6px rgba(160,96,255,0.6);
    flex-shrink: 0;
  }

  /* BADGE RIGHT */
  .header-badge {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .badge-label {
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--cyber-teal);
    text-shadow: 0 0 8px var(--cyber-teal), 0 0 20px rgba(0,255,231,0.3);
    white-space: nowrap;
    position: relative;
  }

  .badge-label::before {
    content: '// ';
    color: rgba(0,255,231,0.3);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
  }

  .badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cyber-teal);
    box-shadow: 0 0 6px var(--cyber-teal);
    animation: dotBlink 2s ease-in-out infinite;
  }

  @keyframes dotBlink {
    0%,100% { opacity: 1; }
    50% { opacity: 0.2; }
  }

  /* ── RESPONSIVE HEADER ── */
  @media (max-width: 700px) {
    .site-header {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      height: auto;
      padding: 1.2rem 1.5rem 1rem;
      gap: 0.9rem;
      text-align: center;
    }
    .header-logo { justify-self: center; }
    .header-nav {
      justify-self: center;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
    }
    .nav-sep { display: none; }
    .header-nav .nav-link {
      font-size: 1rem;
      letter-spacing: 0.2em;
      padding: 0.6em 1.5em;
      width: 100%;
      text-align: center;
      border: 1px solid rgba(102,0,170,0.15);
    }
    .header-badge { justify-self: center; }
  }

  /* ── RESPONSIVE GLOBAL ── */

  /* Tablet: 768px and below */
  @media (max-width: 768px) {
    .content {
      padding: 2.5rem 1.25rem 4rem;
    }

    .section-title {
      margin-bottom: 1.5rem;
    }

    .cards {
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-bottom: 2.5rem;
    }

    .card {
      padding: 1.5rem;
    }

    .aesthetic-row {
      flex-direction: column;
      margin-bottom: 2.5rem;
    }

    .aesthetic-block {
      min-width: unset;
      padding: 1.5rem;
    }

    /* the inner 2-col card grid inside makeup block */
    .aesthetic-block .cards { grid-template-columns: 1fr; }

    .glitch-banner {
      padding: 2rem 1rem;
      margin: 2rem 0;
    }

    .glitch-text {
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      word-break: break-word;
    }

    .terminal {
      font-size: 0.7rem;
      padding: 1.25rem;
    }

    .divider { margin: 2rem 0; }
    .ornament { margin: 1.5rem 0; }
    .orn-line { max-width: 80px; }

    .footer {
      padding: 2rem 1rem;
      font-size: 0.6rem;
      letter-spacing: 0.12em;
    }

    /* hide side pentagramme on small screens, keep bottom one */
    .hero > div > svg:first-child,
    .hero > div > svg:last-child {
      display: none;
    }

    .color-swatch { gap: 0.3rem; }
    .swatch { width: 24px; height: 24px; }
  }

  /* Mobile: 480px and below */
  @media (max-width: 480px) {
    .hero {
      padding: 2rem 1rem;
      min-height: auto;
    }

    .title-sub {
      font-size: 0.6rem;
      letter-spacing: 0.3em;
    }

    .title-accent {
      font-size: clamp(0.75rem, 4vw, 1.2rem);
      letter-spacing: 0.15em;
    }

    .content { padding: 2rem 1rem 3rem; }

    .section-label {
      font-size: 0.55rem;
      letter-spacing: 0.25em;
    }

    .card { padding: 1.25rem; }

    .card-icon { font-size: 2rem; }
    .card-title { font-size: 0.9rem; }

    .tag {
      font-size: 0.55rem;
      padding: 0.15em 0.4em;
    }

    .terminal {
      font-size: 0.65rem;
      padding: 1rem;
      overflow-x: auto;
    }

    .t-line { white-space: nowrap;}

    .glitch-text {
      font-size: 0.6rem;
      letter-spacing: 0.05em;
    }

    .div-cross {
      font-size: 0.9rem;
      letter-spacing: 0.2rem;
    }

    .header-drip-container { height: 70px; }
  }

  /* ── CINEMA SCROLL ── */
  .cinema {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.7s ease;
    filter: blur(4px);
    will-change: opacity, transform, filter;
  }

  .cinema.cinema-left { transform: translateX(-40px);}
  .cinema.cinema-right { transform: translateX(40px);}
  .cinema.cinema-scale {transform: scale(0.96) translateY(20px);}

  .cinema.visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  /* stagger children inside a group */
  .cinema-group .cinema:nth-child(1) { transition-delay: 0s;    }
  .cinema-group .cinema:nth-child(2) { transition-delay: 0.1s;  }
  .cinema-group .cinema:nth-child(3) { transition-delay: 0.2s;  }
  .cinema-group .cinema:nth-child(4) { transition-delay: 0.3s;  }
  .cinema-group .cinema:nth-child(5) { transition-delay: 0.4s;  }
  .cinema-group .cinema:nth-child(6) { transition-delay: 0.5s;  }