/* ============================================================
   The Hacker's Notes — hacker.hamcodes.com
   Dark terminal / matrix-green. Built for red/blue/purple teams.
   ============================================================ */

:root {
  --bg:        #06090a;
  --surface:   #0c1214;
  --surface-2: #10181b;
  --surface-3: #14201f;
  --line:      #1d2b2a;
  --line-2:    #263838;

  --text:  #d7e4e0;
  --muted: #7c918c;
  --dim:   #56675f;

  --green:      #24ff9c;   /* terminal / primary */
  --green-2:    #10d47f;
  --green-dim:  #0b7a4c;
  --green-glow: rgba(36,255,156,.35);

  --cyan:   #38e1ff;   /* blue team */
  --red:    #ff3d5f;   /* red team / brand */
  --purple: #b57bff;   /* purple team */
  --amber:  #f5b942;

  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 16px 40px rgba(0,0,0,.5);
  --shadow-green: 0 0 0 1px rgba(36,255,156,.25), 0 10px 30px rgba(36,255,156,.14);

  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;

  --maxw: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--body); color: var(--text); line-height: 1.65;
  background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-image: radial-gradient(circle at 50% -10%, rgba(36,255,156,.08), transparent 45%);
}
/* moving square grid */
body::before {
  content: ""; position: fixed; inset: -60px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(36,255,156,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,255,156,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: gridmove 5s linear infinite;
}
@keyframes gridmove { from { transform: translate(0,0); } to { transform: translate(46px,46px); } }

/* blinking green dot (shared) */
.blink-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 1.6s infinite; flex: 0 0 auto; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4.4vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
p  { margin: 0 0 1rem; }
a  { color: var(--green); text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
section { padding: clamp(56px, 8vw, 110px) 0; position: relative; }

.ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: 0 0 auto; vertical-align: -.2em; }
.btn .ic { width: 1.2em; height: 1.2em; }

/* mono eyebrow / prompt */
.eyebrow {
  font-family: var(--mono); font-weight: 600; font-size: .82rem; letter-spacing: .06em;
  color: var(--green); display: inline-flex; align-items: center; gap: .5em; margin-bottom: 1rem;
}
.eyebrow::before { content: "> "; color: var(--green-dim); }
.lead { font-size: clamp(1.05rem, 2.1vw, 1.28rem); color: var(--muted); max-width: 52ch; }
.center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; }
.sec-head { max-width: 720px; } .sec-head.center { margin: 0 auto; }
.mono { font-family: var(--mono); }
.hl-g { color: var(--green); } .hl-r { color: var(--red); } .hl-c { color: var(--cyan); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em; font-family: var(--mono); font-weight: 600;
  font-size: .98rem; padding: .85em 1.5em; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
  touch-action: manipulation; line-height: 1; white-space: nowrap;
}
.btn-primary { background: var(--green); color: #032015; box-shadow: 0 0 24px var(--green-glow); font-weight: 700; }
.btn-primary:hover { background: #4dffb2; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-red { background: transparent; color: var(--red); border-color: rgba(255,61,95,.5); }
.btn-red:hover { background: rgba(255,61,95,.12); border-color: var(--red); }
.btn-cyan { background: transparent; color: var(--cyan); border-color: rgba(56,225,255,.5); }
.btn-cyan:hover { background: rgba(56,225,255,.12); border-color: var(--cyan); }
.btn-lg { font-size: 1.05rem; padding: 1em 1.9em; }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60; background: rgba(6,9,10,.82);
  backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 68px; }
.brand { display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 700; font-size: clamp(.98rem, 3.2vw, 1.1rem); color: var(--text); text-decoration: none; white-space: nowrap; min-width: 0; }
.brand img { width: clamp(30px, 8vw, 36px); height: clamp(30px, 8vw, 36px); flex: 0 0 auto; }
.brand b { color: var(--green); }
.nav-links { display: flex; align-items: center; gap: 1.5rem; flex: 0 0 auto; }
.nav-links a { color: var(--muted); font-family: var(--mono); font-size: .88rem; font-weight: 500; display: inline-flex; align-items: center; gap: .4em; }
.nav-links a:not(.btn):hover { color: var(--green); }
.nav-links a .ic { width: 15px; height: 15px; }
.nav-links a.btn { color: #032015; }
@media (max-width: 940px) { .nav-links a:not(.btn) { display: none; } }
@media (max-width: 560px) {
  .nav { height: 58px; }
  .brand .blink-dot { width: 7px; height: 7px; }
  .nav-links a.btn { padding: .55em .95em; font-size: .82rem; }
}

/* ---------- Hero ---------- */
.hero { overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 60px); align-items: center; padding-top: clamp(24px, 4vw, 50px); }
.hero .term-tag { font-family: var(--mono); font-size: .8rem; color: var(--green); border: 1px solid var(--line-2); border-radius: 999px; padding: .35em .9em; display: inline-flex; align-items: center; gap: .5em; margin-bottom: 1.4rem; }
.hero .term-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 1.8s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero h1 { margin-bottom: .3em; }
.hero h1 .type { color: var(--green); }
.hero-sub { font-family: var(--mono); font-size: clamp(1rem,2.2vw,1.3rem); color: var(--text); margin: 0 0 1.4rem; }
.hero-sub b { color: var(--red); } .hero-sub .c2 { color: var(--cyan); } .hero-sub .c3 { color: var(--green); }
.hero-teams { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 1.9rem; }
.team-chip { font-family: var(--mono); font-size: .8rem; font-weight: 600; padding: .4em .85em; border-radius: 6px; border: 1px solid; }
.team-chip.red { color: var(--red); border-color: rgba(255,61,95,.4); background: rgba(255,61,95,.08); }
.team-chip.blue { color: var(--cyan); border-color: rgba(56,225,255,.4); background: rgba(56,225,255,.08); }
.team-chip.purple { color: var(--purple); border-color: rgba(181,123,255,.4); background: rgba(181,123,255,.08); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-art { position: relative; display: flex; justify-content: center; }
.hero-art img { width: 100%; max-width: 420px; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hero-art::before { content:""; position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, var(--green-glow), transparent 65%); z-index:-1; }
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .lead, .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-teams, .hero-cta { justify-content: center; }
  .hero-art { order: -1; margin-bottom: 8px; } .hero-art img { max-width: 300px; }
}

/* ---------- Audience ---------- */
.audience { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.aud { display: flex; gap: .8rem; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.aud .ic-box { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); }
.aud .ic-box .ic { width: 22px; height: 22px; }
.aud .ic-box.red .ic { color: var(--red); } .aud .ic-box.blue .ic { color: var(--cyan); }
.aud .ic-box.green .ic { color: var(--green); } .aud .ic-box.purple .ic { color: var(--purple); }
.aud b { font-family: var(--display); font-size: 1.02rem; display: block; }
.aud span { font-size: .84rem; color: var(--muted); font-family: var(--mono); }
@media (max-width: 820px) { .aud-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .aud-grid { grid-template-columns: 1fr; } }

/* ---------- The Book ---------- */
.book { background:
  radial-gradient(circle at 85% 15%, rgba(255,61,95,.06), transparent 40%),
  radial-gradient(circle at 10% 80%, rgba(56,225,255,.05), transparent 40%); }
.book-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.book-visual { position: relative; display: flex; justify-content: center; }
.book-visual img { width: 100%; max-width: 380px; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); animation: floaty 6s ease-in-out infinite; }
.book-visual::before { content:""; position:absolute; inset:8% 12%; background: radial-gradient(circle, rgba(255,61,95,.28), transparent 62%); z-index:-1; filter: blur(24px); animation: pulseglow 6s ease-in-out infinite; }
@keyframes pulseglow { 0%,100%{opacity:.7} 50%{opacity:1} }
.feat-list { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .9rem; }
.feat-list li { display: flex; gap: .8rem; align-items: flex-start; }
.feat-list .ic { width: 22px; height: 22px; color: var(--green); margin-top: .15em; }
.feat-list b { font-family: var(--display); }
.feat-list span { color: var(--muted); font-size: .92rem; }
.highlights { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.6rem; }
.highlights .tagm { font-family: var(--mono); font-size: .78rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: .4em .8em; }
.book-cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.book-note { font-family: var(--mono); font-size: .78rem; color: var(--dim); margin-top: 1.2rem; }
.book-note b { color: var(--amber); }
@media (max-width: 860px) { .book-grid { grid-template-columns: 1fr; } .book-visual { max-width: 340px; margin: 0 auto; } }

/* ---------- Free access (gate) ---------- */
.access { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.access-card {
  max-width: 640px; margin: 0 auto; text-align: center; background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(28px, 5vw, 46px);
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.access-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, var(--green), transparent); }
.gate input[type=email] {
  width: 100%; padding: .9em 1.1em; border-radius: var(--radius-sm); background: var(--bg);
  border: 1px solid var(--line-2); color: var(--text); font-family: var(--mono); font-size: 1rem; margin: 1rem 0;
}
.gate input[type=email]::placeholder { color: var(--dim); }
.gate input[type=email]:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,255,156,.12); }
.gate .btn { width: 100%; justify-content: center; }
.gate small { display: block; color: var(--dim); font-family: var(--mono); font-size: .76rem; margin-top: .8rem; }
.gate-success { display:none; color: var(--green); font-family: var(--mono); font-weight: 600; margin-bottom: 1rem; }
.gate-success.show { display: block; }
.unlocked { display: none; } .unlocked.show { display: block; animation: fade .4s ease; }
@keyframes fade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ---------- Card game ---------- */
.game { background: radial-gradient(circle at 50% 0%, rgba(181,123,255,.08), transparent 45%); }
.game-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0 8px; }
.game-step { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; }
.game-step .n { font-family: var(--mono); font-weight: 700; color: var(--purple); font-size: .82rem; }
.game-step b { font-family: var(--display); display: block; margin: .3em 0 .1em; }
.game-step span { color: var(--muted); font-size: .9rem; }
@media (max-width: 760px) { .game-steps { grid-template-columns: 1fr; } }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 16px; margin: 40px 0; perspective: 800px; }
.card-grid img { width: 100%; border-radius: 9px; border: 1px solid var(--line-2); box-shadow: var(--shadow); background: #fff; animation: bob 4.5s ease-in-out infinite; transition: transform .2s; }
.card-grid img:nth-child(3n+1){ animation-delay: 0s; } .card-grid img:nth-child(3n+2){ animation-delay: .7s; } .card-grid img:nth-child(3n){ animation-delay: 1.4s; }
.card-grid img:nth-child(5n){ animation-duration: 5.2s; } .card-grid img:nth-child(4n){ animation-duration: 3.9s; }
@media (hover:hover){ .card-grid img:hover { transform: translateY(-8px) scale(1.06) rotate(-1deg); box-shadow: 0 20px 40px rgba(0,0,0,.6), 0 0 0 1px var(--green); } }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.game-foot { text-align: center; margin-top: 8px; }
.roles { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin: 0 0 1.6rem; }
.role { font-family: var(--mono); font-size: .78rem; padding: .4em .8em; border-radius: 5px; border: 1px solid var(--line-2); color: var(--muted); }
.role.k { color: var(--red); border-color: rgba(255,61,95,.35); } .role.w { color: var(--cyan); border-color: rgba(56,225,255,.35); } .role.p { color: var(--purple); border-color: rgba(181,123,255,.35); }

/* ---------- Merch strips (tees + gear) ---------- */
.merch { border-top: 1px solid var(--line); }
.merch + .merch { border-top: 1px solid var(--line); }
.merch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.merch-strip { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 30px 4px 22px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--green) var(--surface-2); }
.merch-strip::-webkit-scrollbar { height: 10px; }
.merch-strip::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 999px; }
.merch-strip::-webkit-scrollbar-thumb { background: var(--green-dim); border-radius: 999px; }
.merch-strip::-webkit-scrollbar-thumb:hover { background: var(--green); }
.merch-strip img { flex: 0 0 auto; scroll-snap-align: center; border-radius: 12px; border: 1px solid var(--line-2); }
.merch-strip.tees img { height: clamp(300px, 46vw, 440px); width: auto; }
.merch-strip.gear img { height: clamp(240px, 38vw, 340px); width: auto; background: #fff; }
.strip-hint { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .82rem; color: var(--green); white-space: nowrap; }

/* ---------- Swag ---------- */
.swag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.swag { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.swag-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.swag-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; }
.swag-body { padding: 22px 24px 26px; }
.swag-body .kick { font-family: var(--mono); font-size: .76rem; color: var(--green); letter-spacing: .05em; }
.swag-body h3 { margin: .25em 0 .3em; }
.swag-body p { color: var(--muted); font-size: .92rem; }
.swag-body .btn { margin-top: .4rem; }
@media (max-width: 780px) { .swag-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 0 0 34px; position: relative; }
.foot-term {
  font-family: var(--mono); font-size: .82rem; color: var(--muted); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 14px 16px;
  margin: 46px 0 42px; overflow: hidden;
}
.foot-term .bar { display: flex; align-items: center; gap: .5em; color: var(--dim); margin-bottom: .6rem; }
.foot-term .bar i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.foot-term .bar i.r{background:#ff5f57}.foot-term .bar i.y{background:#febc2e}.foot-term .bar i.g{background:#28c840}
.foot-term .line { white-space: nowrap; }
.foot-term .p { color: var(--green); } .foot-term .c { color: var(--cyan); }
.foot-term .cursor { display: inline-block; width: 8px; height: 1em; background: var(--green); vertical-align: -2px; margin-left: 3px; animation: blink 1.1s steps(1) infinite; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.foot-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; color: var(--text); font-size: 1.15rem; }
.foot-brand img { width: 40px; height: 40px; }
.foot-col h4 { font-family: var(--mono); font-size: .8rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .8rem; }
.foot-col a { display: block; color: var(--muted); font-size: .9rem; margin-bottom: .5rem; font-family: var(--mono); }
.foot-col a:hover { color: var(--green); }
.socials { display: flex; gap: .6rem; margin-top: 1rem; }
.socials a { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--muted); }
.socials a:hover { color: var(--green); border-color: var(--green); }
.socials a .ic { width: 18px; height: 18px; }
.coffee { display: inline-flex; align-items: center; gap: .5em; margin-top: 1rem; font-family: var(--mono); font-size: .85rem; color: var(--amber); border: 1px solid rgba(245,185,66,.4); border-radius: 8px; padding: .5em 1em; }
.coffee:hover { background: rgba(245,185,66,.1); }
.foot-bottom { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 22px; font-family: var(--mono); font-size: .8rem; color: var(--dim); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }