/* ════════════════════════════════════════
   KEYDIR — NeoBrutalist Design System
   ════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Space+Grotesk:wght@400;700;800&display=swap');

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

/* ── Tokens ── */
:root{
  --cream:#FFFCF0;
  --black:#111111;
  --yellow:#FAFF00;
  --green:#00FF6A;
  --blue:#3B82F6;
  --pink:#FF3FA4;
  --orange:#FF6B00;
  --red:#FF2A2A;
  --purple:#A855F7;
  --cyan:#00E5FF;
  --teal:#00B4A0;
  --sh:4px 4px 0px 0px #111;
  --sh-lg:8px 8px 0px 0px #111;
  --sh-xl:12px 12px 0px 0px #111;
  --f-d:'Space Grotesk',sans-serif;
  --f-m:'JetBrains Mono',monospace;
  --nav-h:68px;
}

html{scroll-behavior:smooth}

body{
  font-family:var(--f-d);
  background-color:var(--cream);
  background-image:
    radial-gradient(#111 1.2px,transparent 1.2px),
    linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);
  background-size:36px 36px,100px 100px,100px 100px;
  color:var(--black);
  min-height:100vh;
  overflow-x:hidden;
}
@media(pointer:fine){body{cursor:none}}

/* ── Cursor ── */
#cursor{
  pointer-events:none;position:fixed;z-index:9999;
  width:18px;height:18px;background:var(--black);border-radius:50%;
  transition:width .15s,height .15s,border-radius .15s,background .15s;
}
#cursor.big{width:54px;height:54px;background:var(--yellow);mix-blend-mode:normal;border-radius:0;border:2px solid var(--black)}

/* ── Progress bar ── */
#prog{position:fixed;top:0;left:0;height:3px;background:var(--yellow);border-bottom:1.5px solid var(--black);z-index:200;width:0%;transition:width .08s}

/* ── Navbar ── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
  font-family:var(--f-m);font-weight:800;font-size:.95rem;letter-spacing:-.02em;
  color:var(--black);text-decoration:none;
  background:var(--cream);border:2px solid var(--black);
  padding:7px 16px;box-shadow:var(--sh);
  transition:all .12s;display:flex;align-items:center;gap:8px;
}
.nav-logo:hover{background:var(--yellow);transform:translate(2px,2px);box-shadow:2px 2px 0 #111}
.nav-links{
  display:flex;gap:2px;
  background:var(--cream);border:2px solid var(--black);
  padding:5px;box-shadow:var(--sh);
}
.nav-links a{
  font-family:var(--f-m);font-size:.75rem;font-weight:700;
  color:var(--black);text-decoration:none;padding:5px 12px;
  transition:all .1s;text-transform:uppercase;
}
.nav-links a:hover{background:var(--black);color:var(--cream)}
.nav-links a.active{background:var(--yellow);color:var(--black)}
.nav-ham{
  display:none;background:var(--cream);border:2px solid var(--black);
  padding:8px 10px;box-shadow:var(--sh);cursor:pointer;
  flex-direction:column;gap:4px;
}
.nav-ham span{display:block;width:20px;height:2px;background:var(--black);transition:all .25s}
.nav-ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0}
.nav-ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Mobile menu ── */
#mob-nav{
  display:none;position:fixed;inset:0;z-index:90;
  background:var(--yellow);
  flex-direction:column;align-items:center;justify-content:center;gap:2rem;
}
#mob-nav.open{display:flex;animation:slide-in .3s ease}
@keyframes slide-in{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
#mob-nav a{
  font-family:var(--f-m);font-size:2rem;font-weight:800;
  color:var(--black);text-decoration:none;
  border-bottom:3px solid var(--black);padding-bottom:4px;
  transition:all .15s;
}
#mob-nav a:hover{color:var(--black);padding-left:12px}
#mob-close{
  position:absolute;top:16px;right:20px;
  background:var(--black);color:var(--cream);
  border:2px solid var(--black);padding:7px 16px;
  font-family:var(--f-m);font-weight:800;font-size:.85rem;cursor:pointer;
}

/* ── Marquee ── */
.marquee-strip{
  background:var(--black);border-top:3px solid var(--black);border-bottom:3px solid var(--black);
  padding:10px 0;overflow:hidden;position:relative;z-index:2;
}
.marquee-track{display:flex;animation:march 28s linear infinite;width:max-content}
.marquee-track span{
  font-family:var(--f-m);font-size:.85rem;font-weight:700;
  color:var(--yellow);white-space:nowrap;padding:0 22px;
}
.marquee-track span.sep{color:var(--green)}
.marquee-strip:hover .marquee-track{animation-play-state:paused}
@keyframes march{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── Section layout ── */
.page-body{max-width:1380px;margin:0 auto;padding:0 24px 80px}

.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  border-bottom:3px solid var(--black);padding-bottom:12px;margin-bottom:2rem;
  flex-wrap:wrap;gap:12px;
}
.sec-head h2{
  font-family:var(--f-d);font-size:clamp(2rem,5vw,4rem);
  font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:1;
}
.sec-head h2 em{font-style:normal}
.sec-tag{
  font-family:var(--f-m);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;display:flex;align-items:center;gap:6px;
}
.sec-tag::before{content:'';display:block;width:8px;height:8px;background:currentColor;animation:blink 1.2s step-end infinite}
@keyframes blink{50%{opacity:0}}

.section-tag-label{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--black);color:var(--yellow);
  font-family:var(--f-m);font-size:.7rem;font-weight:700;
  padding:5px 14px;border:2px solid var(--black);margin-bottom:1.25rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.section-tag-label .dot{width:7px;height:7px;background:var(--green);display:inline-block;border-radius:50%;animation:blink 1s step-end infinite}

/* ── Buttons ── */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border:2px solid var(--black);
  background:var(--black);color:var(--cream);
  font-family:var(--f-m);font-size:.88rem;font-weight:700;
  text-decoration:none;text-transform:uppercase;
  box-shadow:var(--sh);transition:all .12s;cursor:pointer;
}
.btn-primary:hover{background:var(--yellow);color:var(--black);transform:translate(2px,2px);box-shadow:2px 2px 0 #111}
.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border:2px solid var(--black);
  background:var(--cream);color:var(--black);
  font-family:var(--f-m);font-size:.88rem;font-weight:700;
  text-decoration:none;text-transform:uppercase;
  box-shadow:var(--sh);transition:all .12s;cursor:pointer;
}
.btn-secondary:hover{background:var(--green);transform:translate(2px,2px);box-shadow:2px 2px 0 #111}
.btn-visit{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 16px;border:2px solid var(--black);
  background:var(--black);color:var(--cream);
  font-family:var(--f-m);font-size:.75rem;font-weight:700;
  text-decoration:none;text-transform:uppercase;
  box-shadow:3px 3px 0 #111;transition:all .12s;
}
.btn-visit:hover{background:var(--yellow);color:var(--black);box-shadow:1px 1px 0 #111;transform:translate(2px,2px)}
.btn-visit svg{width:10px;height:10px;flex-shrink:0}

/* ── Cards ── */
.neo-card{
  background:var(--cream);border:2px solid var(--black);
  box-shadow:var(--sh);transition:transform .12s,box-shadow .12s;
}
.neo-card:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 #111}
.neo-card-dark{
  background:var(--black);border:2px solid var(--black);
  box-shadow:var(--sh);transition:transform .12s,box-shadow .12s;
  color:var(--cream);
}

/* ── Badges ── */
.badge{
  display:inline-block;
  font-family:var(--f-m);font-size:.65rem;font-weight:700;
  padding:3px 9px;border:2px solid var(--black);
  text-transform:uppercase;letter-spacing:.04em;
}
.b-yellow{background:var(--yellow);color:var(--black)}
.b-green{background:var(--green);color:var(--black)}
.b-blue{background:var(--blue);color:#fff}
.b-pink{background:var(--pink);color:#fff}
.b-orange{background:var(--orange);color:#fff}
.b-cyan{background:var(--cyan);color:var(--black)}
.b-red{background:var(--red);color:#fff}
.b-purple{background:var(--purple);color:#fff}
.b-black{background:var(--black);color:var(--cream)}
.b-teal{background:var(--teal);color:#fff}
.b-gray{background:#888;color:#fff}
.b-white{background:#f0f0f0;color:var(--black)}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .55s,transform .55s}
.reveal.in{opacity:1;transform:none}

/* ── Footer ── */
footer{
  background:var(--black);color:var(--cream);
  border-top:4px solid var(--green);
  padding:3.5rem 24px 2rem;position:relative;overflow:hidden;
}
.footer-inner{
  max-width:1380px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;
}
.f-logo{font-family:var(--f-m);font-size:1.4rem;font-weight:800;margin-bottom:.75rem;letter-spacing:-.04em}
.f-desc{font-family:var(--f-m);font-size:.78rem;color:#666;line-height:1.9;max-width:280px}
.f-col h4{
  font-family:var(--f-m);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin-bottom:.9rem;
  border-bottom:1px solid #222;padding-bottom:7px;
}
.f-col ul{list-style:none;space:0}
.f-col li{margin-bottom:.45rem}
.f-col a{font-family:var(--f-m);font-size:.78rem;color:#666;text-decoration:none;transition:color .15s}
.f-col a:hover{color:var(--green)}
.f-copy{
  max-width:1380px;margin:2rem auto 0;
  padding-top:1.5rem;border-top:1px solid #1f1f1f;
  font-family:var(--f-m);font-size:.7rem;color:#333;text-align:center;
}
.f-watermark{
  position:absolute;bottom:-2rem;left:0;right:0;text-align:center;
  font-family:var(--f-d);font-size:16vw;font-weight:800;
  color:rgba(255,255,255,.03);line-height:1;pointer-events:none;user-select:none;
}

/* ── Responsive ── */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-ham{display:flex}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:580px){
  .footer-inner{grid-template-columns:1fr}
  .page-body{padding:0 16px 60px}
}

/* ── Shared hero ── */
.page-hero{
  padding:calc(var(--nav-h) + 60px) 24px 60px;
  max-width:1380px;margin:0 auto;
}
.page-hero-title{
  font-family:var(--f-d);font-size:clamp(3rem,8vw,6.5rem);
  font-weight:800;line-height:.88;letter-spacing:-.06em;
  text-transform:uppercase;margin-bottom:1.25rem;
}
.page-hero-title .outline{-webkit-text-stroke:3px var(--black);color:transparent}
.page-hero-sub{
  font-family:var(--f-m);font-size:.95rem;line-height:1.75;
  max-width:500px;
  background:var(--yellow);border:2px solid var(--black);
  padding:14px 18px;box-shadow:var(--sh);
  transform:rotate(.4deg);display:inline-block;margin-bottom:2rem;
}

/* ── Stat box ── */
.stat-box{
  background:var(--cream);border:2px solid var(--black);
  padding:16px 22px;box-shadow:var(--sh);text-align:center;min-width:110px;
}
.stat-num{font-family:var(--f-m);font-size:2rem;font-weight:800;line-height:1;display:block}
.stat-label{font-family:var(--f-m);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#666;margin-top:3px;display:block}