/* Coding Ibex — shared site styles.
   Palette + comic halftone lifted from the STAX game UI so the site feels like the same brand.
   All artwork is inline SVG, so there are no image files to host and it stays sharp at any size. */

:root {
  --ink:        #12021a;
  --ink-2:      #1f0827;
  --card:       #2a0730;
  --lime:       #c6ff2e;
  --pink:       #ff5aa5;
  --cyan:       #39f2c4;
  --gold:       #ffd76a;
  --text:       #f2e7f5;
  --text-dim:   #bda6c6;
  --border:     rgba(198, 255, 46, 0.20);
  --max:        900px;
}

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

body {
  margin: 0;
  color: var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background: var(--ink);
  overflow-x: hidden;
}

/* ---------- animated gradient backdrop ---------- */
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(45% 45% at 12% 8%,  rgba(255, 90, 165, 0.30) 0%, transparent 70%),
    radial-gradient(45% 45% at 88% 12%, rgba(57, 242, 196, 0.22) 0%, transparent 70%),
    radial-gradient(55% 50% at 70% 90%, rgba(122, 31, 162, 0.45) 0%, transparent 70%),
    radial-gradient(50% 50% at 20% 85%, rgba(198, 255, 46, 0.14) 0%, transparent 70%),
    linear-gradient(160deg, #1b0630 0%, #12021a 45%, #0d1430 100%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0)      scale(1);    }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}

/* comic Ben-Day dots over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.7px);
  background-size: 15px 15px;
}

.wrap {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 34px 22px 80px;
}

/* ---------- header ---------- */
header.site {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.logo {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 13px;
  background: linear-gradient(160deg, var(--lime), var(--cyan));
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 21px;
  color: var(--ink);
  border: 2px solid rgba(0, 0, 0, .55);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5);
}

.brand { font-weight: 800; font-size: 1.22rem; letter-spacing: .3px; }
.brand span { color: var(--lime); }
.brand small {
  display: block; font-weight: 500; font-size: .74rem;
  color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase;
}

nav.site { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
nav.site a {
  color: var(--text-dim); text-decoration: none; font-size: .92rem;
  padding: 7px 14px; border-radius: 999px; border: 1px solid transparent;
  transition: .18s ease;
}
nav.site a:hover { color: var(--lime); border-color: var(--border); background: rgba(198,255,46,.07); }

/* ---------- hero banner ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(57,242,196,.20) 0%, transparent 55%),
    radial-gradient(110% 130% at 0% 100%, rgba(255,90,165,.26) 0%, transparent 55%),
    linear-gradient(150deg, #340b3f 0%, #23093a 55%, #141a3d 100%);
  padding: 40px 38px;
  margin-bottom: 34px;
  display: flex;
  align-items: center;
  gap: 26px;
  box-shadow: 0 10px 0 rgba(0,0,0,.35), 0 22px 50px rgba(0,0,0,.45);
}
.hero::before {   /* halftone inside the banner */
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.7px);
  background-size: 14px 14px;
  mask-image: linear-gradient(120deg, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 70%);
}
.hero-copy { position: relative; flex: 1 1 320px; min-width: 0; }
.hero-art  { position: relative; flex: 0 0 auto; width: 210px; }
.hero-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.float { animation: bob 4.5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  padding: 5px 13px; border-radius: 999px; margin-bottom: 14px;
  border: 2px solid rgba(0,0,0,.5);
}

/* ---------- ribbon strip ---------- */
.ribbon {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  background: linear-gradient(90deg, var(--pink), #a23bd6 45%, var(--cyan));
  color: #17021d;
  font-weight: 800; font-size: .84rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 20px; border-radius: 999px;
  border: 2px solid rgba(0,0,0,.5);
  box-shadow: 0 5px 0 rgba(0,0,0,.4);
  margin: 0 0 34px;
}
.ribbon span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- typography ---------- */
h1 {
  font-size: clamp(1.9rem, 5.2vw, 2.9rem);
  line-height: 1.12; margin: 0 0 12px; letter-spacing: -.6px;
  text-shadow: 0 3px 0 rgba(0,0,0,.4);
}
h1 .accent { color: var(--lime); }

h2 {
  font-size: 1.28rem; margin: 44px 0 14px; color: #fff;
  display: flex; align-items: center; gap: 11px;
}
h2::before {   /* little stacked-block accent */
  content: ""; flex: none;
  width: 16px; height: 16px; border-radius: 4px;
  background: linear-gradient(160deg, var(--lime), var(--cyan));
  border: 2px solid rgba(0,0,0,.55);
  box-shadow: 0 3px 0 rgba(0,0,0,.4);
}

h3 { font-size: 1rem; margin: 22px 0 8px; color: var(--cyan); }

p, li { color: var(--text); }
a { color: var(--lime); }
a:hover { color: var(--pink); }
ul { padding-left: 20px; }
li { margin: 7px 0; }

.lede { font-size: 1.06rem; color: #e2d2e8; max-width: 62ch; }
.meta { color: var(--text-dim); font-size: .88rem; margin: 0 0 8px; }

/* ---------- blocks ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(52,12,62,.92), rgba(24,8,36,.92));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 24px 0;
  box-shadow: 0 7px 0 rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 11px 0 rgba(0,0,0,.35); }

.note {
  border-left: 5px solid var(--pink);
  background: rgba(255, 90, 165, 0.12);
  border-radius: 10px; padding: 14px 18px; margin: 22px 0; font-size: .95rem;
}
.todo {
  border-left: 5px solid var(--gold);
  background: rgba(255, 215, 106, 0.14);
  border-radius: 10px; padding: 14px 18px; margin: 24px 0; font-size: .95rem;
}

table {
  width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .94rem;
  display: block; overflow-x: auto;
  border-radius: 12px;
}
th, td { text-align: left; padding: 12px 13px; border-bottom: 1px solid rgba(255,255,255,.10); vertical-align: top; }
th { color: var(--lime); font-weight: 800; white-space: nowrap; background: rgba(0,0,0,.28); }
tbody tr:hover { background: rgba(255,255,255,.035); }

/* ---------- buttons / grid ---------- */
.btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--lime), #93d100);
  color: var(--ink); font-weight: 800; text-decoration: none;
  padding: 12px 24px; border-radius: 999px;
  border: 2px solid rgba(0,0,0,.55);
  box-shadow: 0 5px 0 rgba(0,0,0,.45);
  margin-top: 12px; transition: .15s ease;
}
.btn:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0,0,0,.45); }
.btn.alt { background: linear-gradient(180deg, var(--pink), #d63b83); color: #fff; }
.btn.alt:hover { color: #fff; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 26px; }

.icon-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.icon-row svg { flex: none; }

footer.site {
  margin-top: 62px; padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: .88rem;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
footer.site a { color: var(--text-dim); }
footer.site a:hover { color: var(--lime); }

/* ---------- responsive ---------- */
@media (max-width: 680px) {
  .hero { padding: 30px 24px; flex-direction: column-reverse; text-align: center; gap: 18px; }
  .hero-art { width: 160px; }
  .eyebrow { margin-inline: auto; }
  .lede { margin-inline: auto; }
}
@media (max-width: 560px) {
  .wrap { padding: 24px 15px 60px; }
  nav.site { width: 100%; margin-left: 0; }
  .ribbon { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  body::after, .float { animation: none; }
  .card, .btn { transition: none; }
}