/* ============================================================
   LordeFX — shared design system
   Dark/cyberpunk industrial-agency aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Share+Tech+Mono&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:        #2E0E00;
  --panel:     #3D1400;
  --panel-2:   #351200;
  --line:      #5E2408;
  --line-soft: #4C1D06;
  --text:      #F8F8F8;
  --muted:     #D8D2CC;
  --muted-2:   #A09088;
  --accent:    #F35A10;
  --accent-dim:#B8430C;
  --blue:      #FF7A1F;
  --blue-dim:  #7A3208;
  --warn:      #FF9A3C;
  --warn-dim:  #7A4310;
  --danger:    #FF3B30;
  --highlight: #D8DDE3;
  --radius:    10px;
  --radius-sm: 6px;

  /* accent as raw rgb triplet, for rgba() use in glow/scanline/canvas effects */
  --accent-rgb: 243, 90, 16;

  --space-2xs: clamp(0.5rem,  0.45rem + 0.2vw,  0.625rem);
  --space-xs:  clamp(0.75rem, 0.65rem + 0.4vw,  1rem);
  --space-sm:  clamp(1rem,    0.85rem + 0.6vw,  1.375rem);
  --space-md:  clamp(1.5rem,  1.2rem + 1.2vw,   2.25rem);
  --space-lg:  clamp(2.25rem, 1.6rem + 2.6vw,   3.75rem);
  --space-xl:  clamp(3rem,    2vw + 4vw,        5rem);

  --font-head: 'Share Tech Mono', 'JetBrains Mono', monospace;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-h1:     clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  --fs-h2:     clamp(1.2rem, 1.05rem + 0.9vw, 1.55rem);
  --fs-h3:     clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  --fs-eyebrow:clamp(0.7rem, 0.68rem + 0.1vw, 0.78rem);
  --fs-body:   clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --fs-lede:   clamp(1rem, 0.92rem + 0.4vw, 1.15rem);

  --container: min(100% - 2.75rem, 1180px);
  --container-narrow: min(100% - 2.75rem, 760px);
}

/* custom cursor active on devices with a real pointer; touch devices keep native cursor */
@media (hover: hover) and (pointer: fine){
  html.has-cursor, html.has-cursor *{ cursor: none !important; }
}

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

/* custom scrollbar */
::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent-dim); }
html{ scrollbar-color: var(--line) var(--bg); scrollbar-width: thin; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-body);
  overflow-x: hidden;
}

::selection{ background: var(--accent-dim); color: #fff3ea; }
a{ color: inherit; text-decoration: none; }
.mono{ font-family: 'JetBrains Mono', monospace; }
ul{ margin:0; padding:0; list-style:none; }

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

/* ---------- ambient background ---------- */
#matrix-canvas{ position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.65; }
.bg-grid{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, black 0%, transparent 75%);
}
.bg-glow{
  position: fixed; top: -200px; left: 50%; transform: translateX(-50%);
  width: min(1100px, 90vw); height: 600px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12), transparent 65%);
}
.crt-lines{
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.16) 3px);
  opacity: 0.35;
}
.scanline{
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-rgb),0.04) 45%, rgba(var(--accent-rgb),0.09) 50%, rgba(var(--accent-rgb),0.04) 55%, transparent 100%);
  background-size: 100% 240px;
  animation: scan-sweep 8s linear infinite;
  mix-blend-mode: screen;
}
@keyframes scan-sweep{ 0%{ background-position: 0 -240px; } 100%{ background-position: 0 100vh; } }

/* ---------- cyber HUD corner overlays ---------- */
.cyber-hud{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
}
.cyber-hud::before, .cyber-hud::after{
  content: ""; position: absolute; width: 80px; height: 80px;
}
.cyber-hud::before{
  top: 18px; left: 18px;
  border-top: 2px solid rgba(var(--accent-rgb), 0.25);
  border-left: 2px solid rgba(var(--accent-rgb), 0.25);
}
.cyber-hud::after{
  bottom: 18px; right: 18px;
  border-bottom: 2px solid rgba(var(--accent-rgb), 0.25);
  border-right: 2px solid rgba(var(--accent-rgb), 0.25);
}
.cyber-hud-corners{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
}
.cyber-hud-corners::before, .cyber-hud-corners::after{
  content: ""; position: absolute; width: 80px; height: 80px;
}
.cyber-hud-corners::before{
  top: 18px; right: 18px;
  border-top: 2px solid rgba(var(--accent-rgb), 0.25);
  border-right: 2px solid rgba(var(--accent-rgb), 0.25);
}
.cyber-hud-corners::after{
  bottom: 18px; left: 18px;
  border-bottom: 2px solid rgba(var(--accent-rgb), 0.25);
  border-left: 2px solid rgba(var(--accent-rgb), 0.25);
}

/* ---------- vignette overlay ---------- */
.cyber-vignette{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 0%, rgba(46,14,0,0.55) 100%);
}

/* ---------- horizontal glitch band ---------- */
.cyber-glitch-band{
  position: fixed; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none;
  background: rgba(var(--accent-rgb), 0.12);
  animation: glitch-band-move 12s linear infinite;
  opacity: 0.6;
}
@keyframes glitch-band-move{
  0%{ top: -2px; }
  100%{ top: calc(100vh + 2px); }
}

.wrap{ position: relative; z-index: 1; width: var(--container); margin: 0 auto; }
.wrap-narrow{ position: relative; z-index: 1; width: var(--container-narrow); margin: 0 auto; }

/* ---------- header / nav ---------- */
header{
  border-bottom: 1px solid var(--line);
  background: rgba(46,14,0,0.85);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 100;
}
.header-inner{
  width: var(--container); margin: 0 auto;
  padding: var(--space-2xs) 0;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
  gap: var(--space-sm);
}
.brand{ display:flex; align-items:center; gap:10px; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; font-family: var(--font-head); text-transform: uppercase; }
.brand .x{ color: var(--accent); }
.brand-logo{
  height: 28px; width: auto; flex-shrink: 0;
}
.dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); animation: pulse 2.4s infinite; flex-shrink: 0;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); }
  70%{ box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
  100%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* nav — desktop: fixed top-right overlaying the header bar */
nav.main-nav{
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: flex-end; gap: clamp(14px, 2vw, 28px); font-size: 13.5px;
  color: var(--muted); align-items: center;
  height: 64px;
  pointer-events: none;
  padding: 0 max(1.375rem, (100vw - 1180px) / 2) 0 var(--space-sm);
  z-index: 110;
}
nav.main-nav > * { pointer-events: auto; }
nav.main-nav a{ font-family: var(--font-mono); transition: color .15s ease; white-space: nowrap; }
nav.main-nav a img{ vertical-align: middle; }
nav.main-nav a:hover, nav.main-nav a.active{ color: var(--text); }
nav.main-nav a.active{ color: var(--accent); }
.nav-cta{
  font-family:'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600;
  color: var(--bg); background: var(--accent); padding: 8px 16px; border-radius: var(--radius-sm);
  white-space: nowrap; transition: opacity .15s ease, transform .15s ease;
}
.nav-cta:hover{ opacity: 0.88; transform: translateY(-1px); }

.nav-toggle, .nav-close{ display: none; }

@media (max-width: 880px){
  /* ---------- drawer backdrop ---------- */
  nav.main-nav::before{
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
  }
  nav.main-nav.open::before{
    opacity: 1; pointer-events: auto;
  }

  /* drawer panel — slides in from right */
  nav.main-nav{
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(320px, 80vw);
    background: rgba(46,14,0,0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: var(--space-xl) var(--space-md) var(--space-md);
    gap: 0; font-size: 16px; height: auto;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto; z-index: 200;
    box-shadow: -8px 0 30px rgba(0,0,0,0.5);
    border-left: 1px solid var(--line);
    visibility: visible; opacity: 1;
  }
  nav.main-nav.open{
    transform: translateX(0);
    pointer-events: auto;
  }

  /* pull-tab hint on drawer edge */
  nav.main-nav::after{
    content: ""; position: absolute; top: 50%; left: -3px;
    width: 6px; height: 40px; border-radius: 3px;
    background: var(--accent-dim);
    transform: translateY(-50%);
    opacity: 0; transition: opacity .3s ease;
  }
  nav.main-nav.open::after{ opacity: 0; }

  /* close button — top-right */
  .nav-close{
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px;
    background: transparent; border: none;
    color: var(--muted-2); font-size: 28px; font-weight: 300;
    cursor: pointer; z-index: 210;
    transition: color .2s ease, transform .2s ease;
  }
  .nav-close:hover{ color: var(--accent); transform: rotate(90deg); }

  /* nav link list */
  nav.main-nav a{
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 15px; font-weight: 500;
    font-family: var(--font-mono);
    position: relative;
    transition: color .2s ease, padding-left .2s ease;
  }
  nav.main-nav a:last-of-type{ border-bottom: none; }

  /* numbered prefix */
  nav.main-nav a::before{
    content: "0" counter(nav-item);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--muted-2);
    letter-spacing: 0.04em; flex-shrink: 0;
    transition: color .2s ease;
  }

>>>>>>> bb51c9c07d121465a5ae88c00e44c4725f5fb8c7
  /* hover glow bar */
  nav.main-nav a::after{
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 0; height: 2px;
    background: var(--accent);
    transition: width .25s ease;
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
  }
  nav.main-nav a:hover::after{ width: 100%; }
  nav.main-nav a:hover{ padding-left: 6px; color: var(--accent); }
  /* active link indicator */
  nav.main-nav a.active{ color: var(--accent); }
  nav.main-nav a.active::after{ width: 100%; }

  /* Discord icon in drawer */
  nav.main-nav a[href*="discord.com"]{
    margin-top: var(--space-sm);
    border-top: 1px solid var(--line-soft);
    padding-top: 18px;
  }
  nav.main-nav a[href*="discord.com"]::before{ content: "Join our Discord"; font-size: 13px; color: var(--accent); }

  /* hamburger button — enhanced */
  .nav-toggle{
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent; border: 1px solid var(--line);
    border-radius: var(--radius-sm); flex-direction: column; gap: 5px;
    flex-shrink: 0; cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  .nav-toggle.open{
    border-color: var(--accent-dim);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
  }
  .nav-toggle span{
    width: 20px; height: 2px; background: var(--text); display: block;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease, background .3s ease;
    border-radius: 1px;
  }
  .nav-toggle.open span{ background: var(--accent); }
  .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity: 0; transform: scaleX(0); }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .brand{ font-size: 14px; }
}

/* ---------- generic eyebrow / section heads ---------- */
.eyebrow{
  font-size: var(--fs-eyebrow); color: var(--accent); letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: var(--space-xs); display: flex; align-items: center; gap: 8px;
  font-family:'JetBrains Mono', monospace; font-weight: 600;
}
.eyebrow::before{ content: "//"; color: var(--muted-2); }

.section-head{ margin-bottom: var(--space-md); max-width: 640px; }
.section-head h2{ font-size: var(--fs-h2); margin: 0 0 var(--space-xs); font-weight: 700; line-height: 1.25; font-family: var(--font-head); letter-spacing: 0.01em; }
.section-head p{ color: var(--muted); margin: 0; font-size: var(--fs-lede); }
.section-head.center{ margin-inline: auto; text-align: center; }

section{ padding: var(--space-xl) 0; position: relative; z-index: 1; }
section.tight{ padding: var(--space-lg) 0; }
.divider{ border-top: 1px solid var(--line); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap: 8px;
  font-family:'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 600;
  padding: 12px 22px; border-radius: var(--radius-sm);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .15s ease, box-shadow .2s ease;
  cursor: pointer; border: none; position: relative; overflow: hidden;
  will-change: transform;
}
.btn-primary{ background: var(--accent); color: #1a0800; }
.btn-primary:hover{ box-shadow: 0 10px 28px -8px rgba(var(--accent-rgb), 0.55); }
.btn-secondary{ background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-secondary:hover{ border-color: var(--accent-dim); color: var(--accent); }
.btn-ghost{ color: var(--accent); font-size: 13px; }
.btn-ghost::after{ content:"→"; transition: transform .15s ease; display:inline-block; }
.btn-ghost:hover::after{ transform: translateX(3px); }

.btn-row{ display:flex; gap: var(--space-xs); flex-wrap: wrap; }

/* ---------- tags / pills ---------- */
.tag{
  font-family:'JetBrains Mono', monospace; font-size: 11px; padding: 3px 9px;
  border-radius: 5px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.tag.accent{ color: var(--accent); border-color: var(--accent-dim); }
.tag.blue{ color: var(--blue); border-color: var(--blue-dim); }
.tag.warn{ color: var(--warn); border-color: var(--warn-dim); }

/* ---------- cards ---------- */
.card{
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  padding: var(--space-sm); transition: border-color .2s ease, transform .2s ease;
  position: relative;
}
.card:hover{ border-color: var(--accent-dim); transform: translateY(-2px); }

/* targeting-reticle corner brackets — draw in on hover like a lock-on */
.card::before, .card::after{
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--accent); opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
.card::before{ top: -1px; left: -1px; border-right: none; border-bottom: none; }
.card::after{ bottom: -1px; right: -1px; border-left: none; border-top: none; }
.card:hover::before, .card:hover::after{ opacity: 1; }

/* ---------- grid utilities ---------- */
.grid{ display:grid; gap: var(--space-sm); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer{ border-top: 1px solid var(--line); padding: var(--space-lg) 0 var(--space-md); position: relative; z-index: 1; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-lg); }
.footer-grid h4{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); margin: 0 0 var(--space-xs); font-family:'JetBrains Mono', monospace; }
.footer-grid ul li{ margin-bottom: 8px; }
.footer-grid ul li a{ color: var(--muted); font-size: 13.5px; transition: color .15s ease; }
.footer-grid ul li a:hover{ color: var(--accent); }
.footer-bottom{
  display:flex; align-items:center; justify-content: space-between; gap: var(--space-xs);
  padding-top: var(--space-sm); border-top: 1px solid var(--line);
  font-family:'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted-2); flex-wrap: wrap;
}
.footer-bottom .ok{ color: var(--accent); }
.footer-brand-blurb{ color: var(--muted); font-size: 13.5px; max-width: 280px; margin-top: var(--space-2xs); }

@media (max-width: 880px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; gap: var(--space-sm); }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
}
.footer-brand-blurb{ color: var(--muted); font-size: 13.5px; max-width: 280px; margin-top: var(--space-2xs); }

@media (max-width: 880px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* ---------- scroll reveal ---------- */
.reveal{ opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* ---------- decode text ---------- */
.decode-target{ position: relative; }

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

/* ---------- breadcrumb / page header (used on inner pages) ---------- */
.page-header{ padding: var(--space-lg) 0 var(--space-md); }
.breadcrumb{ font-family:'JetBrains Mono', monospace; font-size: 12px; color: var(--muted-2); margin-bottom: var(--space-sm); }
.breadcrumb a{ color: var(--muted); }
.breadcrumb a:hover{ color: var(--accent); }
.page-header h1{ font-family: var(--font-head); font-size: var(--fs-h1); font-weight: 400; line-height: 1.3; margin: 0 0 var(--space-xs); letter-spacing: 0.01em; }
.page-header .lede{ color: var(--muted); font-size: var(--fs-lede); max-width: 640px; margin: 0; }

/* ---------- glitch heading (hover-triggered, orange/cyan-split channel shift) ---------- */
.glitch{ position: relative; display: inline-block; }
.glitch::before, .glitch::after{
  content: attr(data-glitch); position: absolute; left: 0; top: 0; width: 100%;
  opacity: 0; pointer-events: none;
}
.glitch:hover::before{
  color: var(--accent); transform: translate(0); opacity: 0.8;
  animation: glitch-shift-1 0.4s steps(2,end) 1;
}
.glitch:hover::after{
  color: var(--highlight); opacity: 0.6;
  animation: glitch-shift-2 0.4s steps(2,end) 1;
}
@keyframes glitch-shift-1{
  0%{ transform: translate(0,0); clip-path: inset(0 0 80% 0); }
  25%{ transform: translate(-3px,1px); clip-path: inset(20% 0 60% 0); }
  50%{ transform: translate(3px,-1px); clip-path: inset(50% 0 20% 0); }
  75%{ transform: translate(-2px,0); clip-path: inset(70% 0 5% 0); }
  100%{ transform: translate(0,0); opacity: 0; }
}
@keyframes glitch-shift-2{
  0%{ transform: translate(0,0); clip-path: inset(60% 0 10% 0); }
  30%{ transform: translate(2px,-1px); clip-path: inset(10% 0 70% 0); }
  60%{ transform: translate(-3px,1px); clip-path: inset(40% 0 30% 0); }
  100%{ transform: translate(0,0); opacity: 0; }
}

/* ---------- full-screen boot loader ---------- */
#loader{
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loader.loader-done{ opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner{ width: min(380px, 84vw); font-family: 'JetBrains Mono', monospace; }
.loader-mark{
  font-size: 13px; color: var(--muted-2); text-align:center; margin-bottom: var(--space-sm);
  letter-spacing: 0.08em;
}
.loader-mark .x{ color: var(--accent); }
.loader-bar-track{
  width: 100%; height: 3px; background: var(--line-soft); border-radius: 2px; overflow: hidden;
  margin-bottom: var(--space-xs); position: relative;
}
.loader-bar-fill{
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: 2px; transition: width 0.18s ease;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
}
.loader-status-row{ display:flex; justify-content: space-between; font-size: 11px; color: var(--muted-2); }
.loader-status-row .pct{ color: var(--accent); }
.loader-lines{ margin-top: var(--space-sm); font-size: 11px; color: var(--muted-2); min-height: 80px; }
.loader-lines .lline{ opacity: 0; padding: 2px 0; }
.loader-lines .lline.shown{ opacity: 1; }
.loader-lines .lline .tag-ok{ color: var(--accent); margin-right: 6px; }

@media (prefers-reduced-motion: reduce){
  #loader{ transition: none; }
}

/* ---------- custom cursor ---------- */
@media (hover: hover) and (pointer: fine){
  #cursor-dot, #cursor-ring{
    position: fixed; top: 0; left: 0; z-index: 998; pointer-events: none;
    transform: translate(-50%, -50%);
  }
  #cursor-dot{
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.9);
  }
  #cursor-ring{
    width: 32px; height: 32px; border: 1.5px solid rgba(var(--accent-rgb), 0.55);
    border-radius: 50%;
    transition: width .18s ease, height .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
  }
  #cursor-ring::before, #cursor-ring::after{
    content: ""; position: absolute; background: rgba(var(--accent-rgb), 0.8);
  }
  #cursor-ring::before{ top: 50%; left: -7px; width: 5px; height: 1px; transform: translateY(-50%); }
  #cursor-ring::after{ top: -7px; left: 50%; width: 1px; height: 5px; transform: translateX(-50%); }
  #cursor-ring.lock{
    width: 46px; height: 46px;
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
  }
  #cursor-ring.click{ transform: translate(-50%,-50%) scale(0.8); }
}

/* ---------- animated brand logo section ---------- */
.brand-logo-section{
  position: relative; z-index: 1; padding: var(--space-xl) 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.brand-logo-wrap{
  display: flex; align-items: center; justify-content: center; gap: 0;
  position: relative;
}
.brand-logo-left, .brand-logo-right{
  font-family: var(--font-head); font-size: clamp(1.6rem, 1.2rem + 2vw, 3rem);
  font-weight: 400; letter-spacing: 0.08em; color: var(--text);
  text-transform: uppercase; white-space: nowrap;
}
.brand-logo-left{
  opacity: 0; transform: translateX(40px);
  animation: brand-slide-left 0.8s cubic-bezier(.2,.8,.2,1) 0.3s forwards;
}
.brand-logo-right{
  opacity: 0; transform: translateX(-40px);
  animation: brand-slide-right 0.8s cubic-bezier(.2,.8,.2,1) 0.3s forwards;
}
@keyframes brand-slide-left{
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes brand-slide-right{
  to{ opacity: 1; transform: translateX(0); }
}
.brand-logo-x{
  position: relative; width: clamp(60px, 5vw, 100px); height: clamp(60px, 5vw, 100px);
  margin: 0 clamp(12px, 2vw, 28px); flex-shrink: 0;
  opacity: 0; transform: scale(0.3) rotate(-180deg);
  animation: brand-x-pop 0.7s cubic-bezier(.2,.8,.2,1) 0.5s forwards;
}
@keyframes brand-x-pop{
  to{ opacity: 1; transform: scale(1) rotate(0deg); }
}
.brand-logo-x svg{
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.5));
}
.brand-logo-x::before{
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15), transparent 70%);
  animation: brand-x-glow 3s ease-in-out infinite;
}
@keyframes brand-x-glow{
  0%,100%{ opacity: 0.5; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.1); }
}
.brand-logo-underline{
  width: 0; height: 1px; background: var(--accent);
  margin: var(--space-xs) auto 0;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
  animation: brand-underline 1s ease 1s forwards;
}
@keyframes brand-underline{
  to{ width: 100%; }
}
.brand-logo-sub{
  text-align: center; font-family:'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted-2); letter-spacing: 0.15em;
  text-transform: uppercase; margin-top: var(--space-xs);
  opacity: 0; animation: brand-fade-up 0.6s ease 1.2s forwards;
}
@keyframes brand-fade-up{
  to{ opacity: 1; transform: translateY(0); }
}
.brand-logo-sub{ transform: translateY(8px); }

/* ---------- sponsor / supporter scroll ---------- */
.sponsor-bar{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(12px, 1.5vw, 18px) 0; overflow: hidden; position: relative; z-index: 1;
  width: 100vw; margin-left: calc(-50vw + 50%);
}
.sponsor-bar::before, .sponsor-bar::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.sponsor-bar::before{ left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.sponsor-bar::after{ right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

.sponsor-marquee{
  display: flex; width: max-content; align-items: center; gap: 0;
  animation: sponsor-scroll 40s linear infinite;
}
.sponsor-marquee:hover{ animation-play-state: paused; }

.sponsor-item{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 clamp(16px, 2.5vw, 32px); flex-shrink: 0;
  white-space: nowrap;
}
.sponsor-item .sponsor-name{
  font-family: var(--font-head); font-size: clamp(11px, 1.2vw, 14px);
  color: var(--muted-2); letter-spacing: 0.08em; text-transform: uppercase;
  transition: color .25s, text-shadow .25s;
}
.sponsor-item:hover .sponsor-name{ color: var(--accent); text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); }
.sponsor-item .sponsor-logo{
  height: 24px; width: auto; opacity: 0.5; transition: opacity .3s, filter .3s; flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(75%) sepia(10%);
}
.sponsor-item:hover .sponsor-logo{ opacity: 1; filter: none; }
.sponsor-item .sponsor-dot{
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); opacity: 0.5; flex-shrink: 0;
}
.sponsor-item .sponsor-sep{
  color: var(--accent-dim); font-family: var(--font-head); font-size: 10px; opacity: 0.4;
}
.sponsor-item.accent .sponsor-name{ color: var(--accent); font-weight: 600; }
.sponsor-item.accent:hover .sponsor-name{ text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6); }
.sponsor-item.dim .sponsor-name{ opacity: 0.45; }
.sponsor-item.glow .sponsor-name{
  background: linear-gradient(90deg, var(--accent), var(--warn));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-weight: 600;
}

@keyframes sponsor-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .sponsor-marquee{ animation: none !important; }
}

/* ---------- desc cyber decrypt glitch ---------- */
.desc-glitch{
  position: relative;
}
.desc-glitch::before{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent, transparent 2px, rgba(var(--accent-rgb), 0.04) 2px, rgba(var(--accent-rgb), 0.04) 4px);
  animation: desc-glitch-scan 0.15s linear infinite;
}
@keyframes desc-glitch-scan{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(4px); }
}
.desc-glitch::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-left: 2px solid var(--accent);
  opacity: 0; animation: desc-glitch-border 0.8s ease forwards;
}
@keyframes desc-glitch-border{
  0%{ opacity: 0; height: 0; }
  30%{ opacity: 1; height: 100%; }
  100%{ opacity: 0; height: 100%; }
}
.desc-glitch p{
  animation: desc-glitch-shake 0.08s steps(2) 4;
}
@keyframes desc-glitch-shake{
  0%{ transform: translateX(0); }
  50%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

/* ---------- animated font — typewriter ---------- */
.typed-text{ overflow: hidden; border-right: 2px solid var(--accent); white-space: nowrap; width: 0; }
.typed-text.typing{
  animation: typed-reveal 2s steps(30,end) forwards, blink-caret 0.6s step-end infinite;
}
@keyframes typed-reveal{ from{ width: 0; } to{ width: 100%; } }
@keyframes blink-caret{ 0%,100%{ border-color: var(--accent); } 50%{ border-color: transparent; } }

/* ---------- animated font — letter stagger ---------- */
.stagger-in > *{
  display: inline-block;
  opacity: 0;
  transform: translateY(18px) rotateX(-40deg);
  animation: stagger-letter 0.5s ease forwards;
}
.stagger-in > *:nth-child(1){ animation-delay: 0.04s; }
.stagger-in > *:nth-child(2){ animation-delay: 0.08s; }
.stagger-in > *:nth-child(3){ animation-delay: 0.12s; }
.stagger-in > *:nth-child(4){ animation-delay: 0.16s; }
.stagger-in > *:nth-child(5){ animation-delay: 0.20s; }
.stagger-in > *:nth-child(6){ animation-delay: 0.24s; }
.stagger-in > *:nth-child(7){ animation-delay: 0.28s; }
.stagger-in > *:nth-child(8){ animation-delay: 0.32s; }
.stagger-in > *:nth-child(9){ animation-delay: 0.36s; }
.stagger-in > *:nth-child(10){ animation-delay: 0.40s; }
.stagger-in > *:nth-child(11){ animation-delay: 0.44s; }
.stagger-in > *:nth-child(12){ animation-delay: 0.48s; }
.stagger-in > *:nth-child(13){ animation-delay: 0.52s; }
.stagger-in > *:nth-child(14){ animation-delay: 0.56s; }
.stagger-in > *:nth-child(15){ animation-delay: 0.60s; }
.stagger-in > *:nth-child(16){ animation-delay: 0.64s; }
@keyframes stagger-letter{
  to{ opacity: 1; transform: translateY(0) rotateX(0); }
}

/* ---------- animated font — glow wave ---------- */
.glow-wave{
  background: linear-gradient(90deg, var(--text) 0%, var(--text) 40%, var(--accent) 50%, var(--text) 60%, var(--text) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glow-wave-sweep 4s ease-in-out infinite;
}
@keyframes glow-wave-sweep{
  0%{ background-position: 100% 0; }
  100%{ background-position: -100% 0; }
}

/* ---------- animated font — flicker ---------- */
.flicker-text{ animation: text-flicker 3s linear infinite; }
@keyframes text-flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{ opacity: 1; text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6); }
  20%,24%,55%{ opacity: 0.4; text-shadow: none; }
}

/* ---------- animated font — scramble hover ---------- */
.scramble-hover{ position: relative; cursor: default; }
.scramble-hover::after{
  content: attr(data-scramble); position: absolute; left: 0; top: 0;
  opacity: 0; pointer-events: none;
  animation: none;
}
.scramble-hover:hover::after{
  opacity: 1;
  animation: scramble-flicker 0.08s steps(1) infinite;
}
@keyframes scramble-flicker{ 0%{ opacity: 1; } 50%{ opacity: 0; } }

/* ---------- stagger reveal grid ---------- */
.stagger-reveal > *{
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-reveal.in-view > *{ opacity: 1; transform: translateY(0); }
.stagger-reveal.in-view > *:nth-child(1){ transition-delay: 0.05s; }
.stagger-reveal.in-view > *:nth-child(2){ transition-delay: 0.12s; }
.stagger-reveal.in-view > *:nth-child(3){ transition-delay: 0.19s; }
.stagger-reveal.in-view > *:nth-child(4){ transition-delay: 0.26s; }
.stagger-reveal.in-view > *:nth-child(5){ transition-delay: 0.33s; }
.stagger-reveal.in-view > *:nth-child(6){ transition-delay: 0.40s; }
.stagger-reveal.in-view > *:nth-child(7){ transition-delay: 0.47s; }
.stagger-reveal.in-view > *:nth-child(8){ transition-delay: 0.54s; }
.stagger-reveal.in-view > *:nth-child(9){ transition-delay: 0.61s; }

/* ---------- parallax layer ---------- */
.parallax{ will-change: transform; transition: transform 0.1s linear; }

/* ---------- hover tilt 3D ---------- */
.tilt-card{ transform-style: preserve-3d; perspective: 600px; }
.tilt-card .tilt-inner{
  transition: transform 0.25s ease; transform-style: preserve-3d;
}
.tilt-card:hover .tilt-inner{ transform: translateZ(12px); }

/* ---------- animated border draw ---------- */
.border-draw{
  position: relative; overflow: hidden;
}
.border-draw::before{
  content: ""; position: absolute; inset: 0;
  border: 2px solid transparent; border-radius: inherit;
  transition: border-color 0.3s ease;
}
.border-draw:hover::before{
  border-color: var(--accent);
  animation: border-draw-anim 0.6s ease forwards;
}
@keyframes border-draw-anim{
  0%{ clip-path: inset(0 100% 100% 0); }
  25%{ clip-path: inset(0 0 100% 0); }
  50%{ clip-path: inset(0 0 0 0); }
  75%{ clip-path: inset(0 0 0 0); }
  100%{ clip-path: inset(0 0 0 0); }
}

/* ---------- counter flip ---------- */
.flip-digit{
  display: inline-block; position: relative;
  overflow: hidden; height: 1em; line-height: 1;
}
.flip-digit span{
  display: block; animation: flip-in 0.4s ease forwards;
  transform: translateY(-100%); opacity: 0;
}
@keyframes flip-in{
  to{ transform: translateY(0); opacity: 1; }
}

/* ---------- focus ripple ---------- */
.ripple-btn{ position: relative; overflow: hidden; }
.ripple-btn .ripple{
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0); animation: ripple-expand 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-expand{
  to{ transform: scale(4); opacity: 0; }
}

/* ---------- cookie consent banner ---------- */
.cookie-banner{
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: var(--panel-2); border-top: 1px solid var(--accent-dim);
  padding: 14px 0; transform: translateY(100%); transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-banner .wrap{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); flex-wrap: wrap;
}
.cookie-banner-inner{ display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.cookie-icon{
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
  animation: cookie-pulse 2.5s ease-in-out infinite;
}
@keyframes cookie-pulse{
  0%,100%{ box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3); }
  50%{ box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.6); }
}
.cookie-label{
  font-family:'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em;
  white-space: nowrap;
}
.cookie-label::before{ content: "//"; color: var(--muted-2); margin-right: 6px; }
.cookie-text{ font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.cookie-text a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cookie-text a:hover{ color: var(--text); }
.cookie-actions{ display: flex; gap: 10px; flex-shrink: 0; align-items: center; }
.cookie-btn-decline{
  font-family:'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500;
  color: var(--muted-2); background: none; border: 1px solid var(--line);
  padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.cookie-btn-decline:hover{ color: var(--text); border-color: var(--muted-2); }
.cookie-btn-accept{
  font-family:'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600;
  color: #1a0800; background: var(--accent); border: none;
  padding: 9px 20px; border-radius: var(--radius-sm); cursor: pointer;
  transition: opacity .15s ease, transform .15s ease, box-shadow .2s ease;
}
.cookie-btn-accept:hover{ opacity: 0.9; transform: translateY(-1px); box-shadow: 0 6px 20px -6px rgba(var(--accent-rgb), 0.5); }
@media (max-width: 700px){
  .cookie-banner .wrap{ flex-direction: column; align-items: flex-start; }
  .cookie-actions{ width: 100%; justify-content: flex-end; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .dot, .scanline, .cyber-glitch-band{ animation: none !important; }
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  #matrix-canvas{ display: none; }
  .crt-lines{ opacity: 0.12; }
  .cyber-vignette, .cyber-hud, .cyber-hud-corners{ display: none; }
  *{ scroll-behavior: auto !important; }
  .glitch::before, .glitch::after{ display:none; }
  .typed-text{ animation: none !important; width: auto; border: none; }
  .stagger-in > *, .stagger-reveal > *{ opacity: 1; transform: none; transition: none !important; }
  .brand-logo-left, .brand-logo-right, .brand-logo-x, .brand-logo-underline, .brand-logo-sub{ animation: none !important; opacity: 1; transform: none; }
  .brand-logo-underline{ width: 100%; }
}