/* ============================================================
     HERO — Fullscreen CRT slider
     ============================================================ */
  .hero{
    position:relative;
    height:calc(100svh - var(--crt-chrome-h));
    min-height:min(640px, calc(100svh - var(--crt-chrome-h)));
    background:#050505;
    overflow:hidden;
    isolation:isolate;
    display:flex; flex-direction:column;
  }

  /* Slide layer fills available space below header */
  .slides{
    position:relative;
    flex:1;
    overflow:hidden;
  }
  .slide{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    padding:clamp(20px, 4vw, 56px);
    padding-top:clamp(40px, 5vw, 72px);
    padding-bottom:clamp(96px, 9vw, 120px);
    opacity:0;
    transition:opacity .6s ease;
    pointer-events:none;
  }
  .slide.active{ opacity:1; pointer-events:auto; }

  /* Slide background poster (placeholder gradient — replace with images later) */
  .slide-bg{
    position:absolute; inset:0;
    z-index:0;
    opacity:.55;
    filter:saturate(1.1);
  }
  .slide-bg::after{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(140% 90% at 50% 30%, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%),
      linear-gradient(180deg, rgba(5,5,5,0) 50%, #050505 100%);
  }
  .slide-bg.bg-1{
    background:
      radial-gradient(70% 60% at 30% 30%, #1a3d20 0%, #050a05 70%),
      linear-gradient(160deg, #0a1f10, #050505);
  }
  .slide-bg.bg-2{
    background:
      radial-gradient(70% 70% at 70% 30%, #3a1a4a 0%, #060306 70%),
      linear-gradient(160deg, #1a0822, #050505);
  }
  .slide-bg.bg-3{
    background:
      radial-gradient(60% 70% at 50% 60%, #4a1a08 0%, #050402 70%),
      linear-gradient(160deg, #220a04, #050505);
  }
  .slide-bg.bg-4{
    background:
      radial-gradient(80% 60% at 30% 70%, #082244 0%, #030508 70%),
      linear-gradient(160deg, #050b1e, #050505);
  }

  /* Slide content layout */
  .slide-top{
    position:relative; z-index:2;
    display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:#b6f5a3;
    text-shadow:0 0 6px rgba(110,255,120,.35);
  }
  .slide-top .num{ color:#6fae5e; }

  .slide-mid{
    position:relative; z-index:2;
    flex:1;
    display:flex; flex-direction:column; justify-content:center;
    padding:clamp(8px, 2vw, 20px) 0;
  }

  .slide-title{
    font-family:'Archivo Black', sans-serif;
    text-transform:uppercase;
    line-height:.84;
    letter-spacing:-.02em;
    margin:0;
    font-size:clamp(48px, 14vw, 220px);
    color:#caffb6;
    text-shadow:
      0 0 2px rgba(220,255,200,.65),
      0 0 10px rgba(140,255,140,.25),
      0 0 28px rgba(110,255,120,.1);
    animation:crt-flicker 5.5s infinite;
  }
  .slide-title .lt{ display:block; }
  .slide-title .small{
    display:block;
    font-size:.42em;
    line-height:1;
    margin-top:.18em;
    color:#9be084;
    text-shadow:
      0 0 1px rgba(180,255,180,.9),
      0 0 8px rgba(110,255,120,.55),
      0 0 22px rgba(110,255,120,.25);
    letter-spacing:.02em;
  }

  @keyframes crt-flicker{
    0%, 100%   { opacity:1; }
    7%         { opacity:.92; }
    8%         { opacity:1; }
    32%        { opacity:.96; }
    33%        { opacity:1; }
    66%        { opacity:.94; }
    67%        { opacity:1; }
  }

  .slide-meta{
    margin-top:clamp(12px, 2vw, 24px);
    display:flex; flex-wrap:wrap; gap:clamp(16px, 3vw, 36px);
    font-family:'JetBrains Mono', monospace;
    font-size:clamp(13px, 1.4vw, 16px);
    color:#b6f5a3;
    letter-spacing:.08em;
    text-shadow:0 0 6px rgba(110,255,120,.4);
  }
  .slide-meta .pill{
    background:#b6f5a3; color:#050505;
    padding:6px 12px;
    text-shadow:none;
    font-weight:500;
    letter-spacing:.16em;
  }
  .slide-meta strong{ color:#fff; font-weight:500; text-shadow:0 0 6px rgba(255,255,255,.4); }
  .slide-meta-countdown{ flex-basis:100%; }
  @media (min-width:640px){ .slide-meta-countdown{ flex-basis:auto; } }

  .slide-cta{
    margin-top:clamp(12px, 2vw, 24px);
    display:flex; gap:12px; flex-wrap:wrap;
  }
  .btn-ghost-crt{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono', monospace;
    text-transform:uppercase; letter-spacing:.16em;
    font-size:13px; padding:14px 18px;
    color:#b6f5a3;
    border:1px solid rgba(110,255,120,.5);
    background:rgba(110,255,120,.05);
    transition:all .15s;
    text-shadow:0 0 6px rgba(110,255,120,.4);
  }
  .btn-ghost-crt:hover{
    background:rgba(110,255,120,.15);
    border-color:#b6f5a3;
  }
  .btn-solid-crt{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono', monospace;
    text-transform:uppercase; letter-spacing:.16em;
    font-size:13px; padding:14px 18px;
    background:#b6f5a3; color:#050505;
    border:1px solid #b6f5a3;
    box-shadow:0 0 24px rgba(110,255,120,.4);
    transition:all .15s;
  }
  .btn-solid-crt:hover{ background:#caffb6; box-shadow:0 0 36px rgba(110,255,120,.6); }

  /* Slide bottom row */
  .slide-bottom{
    position:relative; z-index:2;
    display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:#6fae5e;
    text-shadow:0 0 5px rgba(110,255,120,.3);
  }

  /* Pager dots */
  .pager{
    display:flex; gap:10px; align-items:center;
  }
  .pager .dot{
    width:36px; height:24px;
    background:none; border:0; cursor:pointer; padding:0;
    display:flex; align-items:center;
    transition:all .2s;
  }
  .pager .dot::before{
    content:''; display:block; width:100%; height:3px;
    background:rgba(110,255,120,.25);
    transition:all .2s;
  }
  .pager .dot.on::before{
    background:#b6f5a3;
    box-shadow:0 0 12px #b6f5a3;
  }

  /* Header on hero */
  .hero-header{
    position:relative; z-index:5;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px clamp(20px, 4vw, 56px);
    border-bottom:1px solid rgba(110,255,120,.15);
    background:rgba(5,5,5,.4);
    backdrop-filter:blur(6px);
  }
  .hero-header .brand{
    font-family:'Archivo Black';
    font-size:22px;
    color:#b6f5a3;
    text-shadow:0 0 10px rgba(110,255,120,.6);
    letter-spacing:.02em;
  }
  .hero-header nav{ display:none; gap:28px; font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
  .hero-header nav a{ color:#9be084; text-shadow:0 0 4px rgba(110,255,120,.3); transition:color .15s; }
  .hero-header nav a:hover, .hero-header nav a.active{ color:#caffb6; text-shadow:0 0 10px rgba(110,255,120,.6); }
  .hero-header .live{
    display:none; align-items:center; gap:10px;
    font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:#b6f5a3; text-shadow:0 0 6px rgba(110,255,120,.4);
  }
  .hero-header .live .led{
    width:8px; height:8px; border-radius:50%;
    background:#b6f5a3; box-shadow:0 0 12px #b6f5a3;
    animation:blink 1.6s infinite;
  }
  .hero-header .menu-toggle{
    font-family:'JetBrains Mono'; text-transform:uppercase; letter-spacing:.16em;
    font-size:12px; padding:10px 14px;
    border:1px solid rgba(110,255,120,.5); color:#b6f5a3;
    background:rgba(110,255,120,.05);
    text-shadow:0 0 6px rgba(110,255,120,.4);
  }
  @media (min-width:880px){
    .hero-header nav{ display:flex; }
    .hero-header .live{ display:flex; }
    .hero-header .menu-toggle{ display:none; }
  }

  /* CRT FX layer (covers entire hero) */
  .crt-fx{
    position:absolute; inset:0; z-index:4; pointer-events:none;
  }
  .crt-fx::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,.32) 3px,
      rgba(0,0,0,.32) 4px
    );
    opacity:.7;
    mix-blend-mode:multiply;
    animation:scanmove 8s linear infinite;
  }
  .crt-fx::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(140% 90% at 50% 35%, rgba(0,0,0,0) 50%, rgba(0,0,0,.65) 100%);
  }
  @keyframes scanmove{
    from{ background-position:0 0; }
    to{ background-position:0 8px; }
  }

  /* Subtle moving sweep */
  .crt-sweep{
    position:absolute; inset:0; z-index:4; pointer-events:none;
    background:linear-gradient(
      to bottom,
      rgba(110,255,120,0) 0%,
      rgba(110,255,120,.05) 50%,
      rgba(110,255,120,0) 100%
    );
    height:30%;
    animation:sweep 7s linear infinite;
  }
  @keyframes sweep{
    0%{ transform:translateY(-100%); opacity:0; }
    10%{ opacity:1; }
    90%{ opacity:1; }
    100%{ transform:translateY(400%); opacity:0; }
  }

  /* Side arrows (desktop) */
  .hero-arrows{
    position:absolute; inset:0; z-index:5; pointer-events:none;
    display:none;
  }
  .hero-arrows button{
    position:absolute; top:50%; transform:translateY(-50%);
    pointer-events:auto;
    width:56px; height:56px;
    background:rgba(5,5,5,.4); border:1px solid rgba(110,255,120,.4);
    color:#b6f5a3; font-family:'JetBrains Mono'; font-size:24px;
    cursor:pointer;
    text-shadow:0 0 8px rgba(110,255,120,.5);
    transition:all .15s;
  }
  .hero-arrows button:hover{
    background:rgba(110,255,120,.15); border-color:#b6f5a3;
  }
  .hero-arrows .prev{ left:24px; }
  .hero-arrows .next{ right:24px; }

  /* ============================================================
     SECTIONS BELOW
     ============================================================ */
  .section-title{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:24px; flex-wrap:wrap; margin-bottom:48px;
  }
  .section-title h2{ margin:0; }
  .section-title .meta{
    font-family:'JetBrains Mono'; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-3);
  }

  /* Events list (re-using event-card from components.html scope is not possible — duplicate here) */
  .ev-list{ display:flex; flex-direction:column; gap:12px; }
  .ev-card{
    display:grid; grid-template-columns:64px 1fr auto; gap:18px;
    padding:18px; align-items:center;
    background:var(--bg-2); border:1px solid var(--line); border-radius:2px;
    transition:border-color .15s;
    color:var(--ink);
  }
  @media (min-width:760px){
    .ev-card{ grid-template-columns:90px 1fr 200px auto; padding:22px 28px; }
  }
  .ev-card:hover{ border-color:var(--crt-dim); }
  .ev-card .d{ font-family:var(--display); font-size:clamp(32px,4vw,44px); line-height:1; }
  .ev-card .m{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.16em; margin-top:6px; }
  .ev-card .ttl{ font-family:var(--display); font-size:clamp(20px,2.4vw,28px); text-transform:uppercase; letter-spacing:-.005em; line-height:1; }
  .ev-card .where{ font-family:var(--mono); font-size:13px; color:var(--ink-2); margin-top:8px; letter-spacing:.06em; }
  .ev-card .city{ font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase; display:none; }
  @media (min-width:760px){ .ev-card .city{ display:block; } }
  .ev-card .go{ font-family:var(--mono); font-size:12px; color:var(--crt); letter-spacing:.18em; text-transform:uppercase; }

  /* Releases scroller */
  .rel-row{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(260px, 320px);
    gap:18px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 0 24px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--line-2) transparent;
  }
  .rel-row::-webkit-scrollbar{ height:8px; }
  .rel-row::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }
  .rel-card{
    scroll-snap-align:start;
    background:var(--bg-2); border:1px solid var(--line); border-radius:2px;
    overflow:hidden; display:flex; flex-direction:column;
  }
  .rel-card .art{ aspect-ratio:1/1; position:relative; overflow:hidden; }
  .rel-card .body{ padding:18px; display:flex; flex-direction:column; gap:8px; }
  .rel-card h4{ font-family:var(--display); font-size:22px; text-transform:uppercase; margin:0; letter-spacing:-.01em; }
  .rel-card .meta{ font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase; }
  .rel-card .lnks{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
  .rel-card .lnk{
    font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--crt); padding:7px 10px; border:1px solid color-mix(in oklab,var(--crt) 30%,transparent);
  }
  .art.r1{ background:linear-gradient(160deg,#5b2db5 0%, #c8a2ff 60%, #1a0833 100%); }
  .art.r2{ background:#0a0a0a; position:relative; }
  .art.r2::before{ content:"TEKE"; position:absolute; inset:0; display:grid; place-items:center; font-family:'Archivo Black'; font-size:120px; color:#f4f4f0; letter-spacing:-.04em; }
  .art.r3{ background:radial-gradient(120% 120% at 30% 30%, #ff5b3a 0%, #340a02 80%); }
  .art.r4{ background:linear-gradient(180deg,#0e3017,#0a0a0a 90%); position:relative; }
  .art.r4::after{ content:"SYNTHESIZE"; position:absolute; inset:auto 0 50% 0; text-align:center; font-family:'Archivo Black'; font-size:32px; color:#b6f5a3; text-shadow:0 0 16px rgba(110,255,120,.4); }
  .art.r5{ background:linear-gradient(135deg,#1a4257,#0a0a0a); position:relative; }
  .art.r5::after{ content:"SYNAPSE"; position:absolute; inset:auto 0 14% 0; text-align:center; font-family:'Archivo Black'; font-size:36px; color:#fff; }
  .art.r6{ background:radial-gradient(120% 120% at 70% 30%, #c8a2ff,#1c0e2e 80%); position:relative; }
  .art.r6::after{ content:"DON'T WAKE UP"; position:absolute; inset:14% 0 auto 0; text-align:center; font-family:'Archivo Black'; font-size:24px; color:#fff; }

  /* Artists strip */
  .art-strip{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(220px, 1fr);
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 0 24px;
    scroll-snap-type:x mandatory;
  }
  .art-card{
    scroll-snap-align:start;
    aspect-ratio:3/4;
    background:var(--bg-3); border:1px solid var(--line); border-radius:2px;
    position:relative; overflow:hidden;
  }
  .art-card .ph{ position:absolute; inset:0; background-size:cover; background-position:center; }
  .art-card .lab{
    position:absolute; left:14px; right:14px; bottom:14px;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    font-family:var(--display); font-size:18px; text-transform:uppercase; letter-spacing:-.01em; color:#fff;
  }
  .art-card .lab .tag{
    font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--crt);
    border:1px solid color-mix(in oklab,var(--crt) 35%,transparent);
    padding:4px 6px; background:rgba(0,0,0,.45); backdrop-filter:blur(4px);
  }
  .ph.a1{ background:linear-gradient(180deg, #2b1e8a 0%, #6b3aa2 60%, #c4407e 100%); }
  .ph.a2{ background:linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%); }
  .ph.a3{ background:linear-gradient(180deg, #00aaff 0%, #ff44aa 100%); }
  .ph.a4{ background:linear-gradient(180deg, #2233ff 0%, #aa55ff 100%); }
  .ph.a5{ background:linear-gradient(180deg, #003355 0%, #007799 100%); }
  .ph.a6{ background:linear-gradient(180deg, #1a1a1a, #444); }
  .ph.a7{ background:linear-gradient(180deg, #112233, #557799); }
  .ph.a8{ background:radial-gradient(circle at 50% 50%, #444 0%, #000 70%); position:relative;}
  .ph.a8::after{ content:"V"; position:absolute; inset:0; display:grid; place-items:center; font-family:serif; font-size:140px; color:#fff; }

  /* About teaser */
  .about-teaser{
    display:grid; gap:32px; grid-template-columns:1fr;
    align-items:start;
  }
  @media (min-width:900px){ .about-teaser{ grid-template-columns:1.2fr 1fr; gap:64px; } }

  /* Newsletter */
  .nl{
    border:1px solid var(--line); background:var(--bg-2);
    padding:clamp(28px, 5vw, 64px);
    display:grid; gap:24px; grid-template-columns:1fr;
    align-items:center;
  }
  @media (min-width:900px){ .nl{ grid-template-columns:1.2fr 1fr; } }
  .nl h3{ margin:0; }
  .nl-form{ display:flex; flex-direction:column; gap:12px; }
  @media (min-width:520px){ .nl-form{ flex-direction:row; } }
  .nl-form input{
    flex:1; background:var(--bg); border:1px solid var(--line-2); padding:16px 18px;
    color:var(--ink); font:inherit; font-size:16px; border-radius:2px; outline:none;
    transition:border-color .15s;
  }
  .nl-form input:focus{ border-color:var(--crt); }

  /* Manifest block */
  .manifest{
    border:1px solid var(--line); background:var(--bg-2); padding:18px 20px; border-radius:2px;
    font-family:var(--mono); font-size:13px; color:var(--ink-2); line-height:1.65;
  }
  .manifest .ln{ display:flex; gap:10px; }
  .manifest .a{ color:var(--crt-dim); }
  .manifest .ok{ color:var(--crt); }
  .manifest .key{ color:var(--ink-3); }
  .manifest .blink::after{
    content:"▍"; color:var(--crt); animation:blink 1s steps(2) infinite; margin-left:2px;
    text-shadow:0 0 8px rgba(110,255,120,.6);
  }

  /* Stats */
  .stats{
    display:grid; grid-template-columns:1fr 1fr;
    gap:1px; background:var(--line); border:1px solid var(--line);
  }
  @media (min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); } }
  .stat{ background:var(--bg); padding:24px; }
  .stat .v{ font-family:var(--display); font-size:clamp(40px,5vw,64px); line-height:1; }
  .stat .l{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-top:10px; }

  /* Mobile menu (simple full-screen) */
  .mob-menu{
    position:fixed; inset:0; z-index:90;
    background:rgba(5,5,5,.97);
    display:none; flex-direction:column;
    padding:32px;
  }
  .mob-menu.open{ display:flex; }
  .mob-menu .top{
    display:flex; justify-content:space-between; align-items:center;
    padding-bottom:24px; border-bottom:1px solid rgba(110,255,120,.2);
  }
  .mob-menu .brand{ font-family:'Archivo Black'; font-size:24px; color:#b6f5a3; text-shadow:0 0 12px rgba(110,255,120,.5);}
  .mob-menu .x{
    color:#b6f5a3; font-family:'JetBrains Mono'; font-size:14px; letter-spacing:.16em;
    border:1px solid rgba(110,255,120,.5); padding:8px 14px; cursor:pointer; background:transparent;
    text-shadow:0 0 6px rgba(110,255,120,.4);
  }
  .mob-menu .links{
    display:flex; flex-direction:column; gap:0; margin-top:24px;
  }
  .mob-menu .links a{
    font-family:'Archivo Black'; font-size:36px; text-transform:uppercase;
    color:#caffb6; padding:18px 0; border-bottom:1px solid rgba(110,255,120,.15);
    text-shadow:0 0 10px rgba(110,255,120,.3);
    letter-spacing:-.01em;
  }
  .mob-menu .foot{
    margin-top:auto; padding-top:24px;
    font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.16em; color:#6fae5e; text-transform:uppercase;
  }

  /* React hero: pager strip (was inline in reference HTML) */
  .hero-pager-bar{
    position:absolute;
    left:clamp(20px,4vw,56px);
    right:clamp(20px,4vw,56px);
    bottom:clamp(20px,3vw,32px);
    z-index:6;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
  }