/* ==========================================================================
   CTF7 Design System — "Ops Console"
   Built on Bootstrap 5.3 grid/utilities. Dark-first, neon green + signal orange.
   ========================================================================== */

:root {
  --bg: #060907;
  --bg-rgb: 6, 9, 7;
  --bg-2: #0a0f0c;
  --bg-deep: #040605;
  --surface: #0f1612;
  --surface-rgb: 15, 22, 18;
  --surface-2: #141d18;
  --surface-3: #1a2620;
  --term-bg: #050806;
  --ink-rgb: 255, 255, 255;
  --heading: #fff;
  --orange-hover: #ffb46a;
  --line: rgba(var(--ink-rgb), .08);
  --line-2: rgba(var(--ink-rgb), .14);
  --line-green: rgba(52, 245, 91, .28);
  --line-orange: rgba(253, 154, 51, .35);
  --orange-glow: rgba(253, 154, 51, .35);
  --text: #e9f1eb;
  --text-2: #c3cec7;
  --muted: #8d9b93;
  --green: #34f55b;
  --green-2: #1fd14a;
  --green-3: #0e8f2c;
  --green-glow: rgba(52, 245, 91, .35);
  --green-btn: #1fb847;
  --orange: #fd9a33;
  --orange-fill: #fd9a33;
  --on-orange: #0b0f0c;
  --orange-2: #ff7a1a;
  --olive: #56663a;
  --olive-2: #3b4728;
  --cyan: #3ee6ff;
  --violet: #a78bfa;
  --red: #ff5d6c;
  --yellow: #ffd23f;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, .7);
  --header-bg: rgba(6, 9, 7, .55);
  --header-bg-solid: rgba(6, 9, 7, .86);
  --shadow-green: 0 0 0 1px rgba(52, 245, 91, .25), 0 20px 60px -25px rgba(52, 245, 91, .45);
  --font-display: "Nova Square", "Kode Mono", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Kode Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --header-h: 72px;
  --container-max: 1320px;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--line);
  --bs-link-color: var(--orange);
  --bs-link-hover-color: var(--orange-hover);
  --bs-body-font-family: var(--font-body);
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--muted);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--orange-fill); color: var(--on-orange); }
h1, h2, h3, h4, h5, h6, .display-font {
  font-family: var(--font-display);
  color: var(--heading);
  letter-spacing: -.02em;
  line-height: 1.15;
  font-weight: 700;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); letter-spacing: -.035em; line-height: 1.04; }
h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
h4 { font-size: 1.2rem; }
p { color: var(--text-2); }
a { color: var(--orange); text-decoration: none; transition: color .2s; }
a:hover { color: var(--orange-hover); }
img { max-width: 100%; height: auto; }
code, kbd, pre, .mono { font-family: var(--font-mono); }
code { color: var(--orange); font-size: .9em; background: rgba(253,154,51,.08); padding: .1em .4em; border-radius: 6px; }
hr { border-color: var(--line); opacity: 1; }
.container, .container-xl { max-width: var(--container-max); }
.text-muted, .text-secondary { color: var(--muted) !important; }
.text-green { color: var(--green) !important; }
.text-orange { color: var(--orange) !important; }
.text-cyan { color: var(--cyan) !important; }
.text-violet { color: var(--violet) !important; }
.text-red { color: var(--red) !important; }
.text-white { color: var(--heading) !important; }
.bg-surface { background: var(--surface) !important; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--orange-fill); color: var(--on-orange); padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

/* Gradient text */
.grad-text {
  background: linear-gradient(92deg, #7dff9a 0%, var(--green) 35%, #b8ff5a 65%, var(--orange) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-orange { color: var(--orange); }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-display); font-weight: 600; letter-spacing: -.005em; border-radius: 9px; padding: .72rem 1.25rem; transition: transform .18s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-lg { padding: .95rem 1.6rem; font-size: 1.05rem; border-radius: 10px; }
.btn-sm { padding: .45rem .9rem; font-size: .9rem; border-radius: 8px; }
.btn-ctf { background: var(--orange-fill); color: var(--on-orange); border: 1px solid var(--orange-fill); }
.btn-ctf:hover, .btn-ctf:focus-visible { background: var(--orange-fill); color: var(--on-orange); border-color: var(--orange-fill); filter: brightness(1.08); transform: translateY(-2px); }
.btn-orange { background: var(--green-btn); color: var(--on-orange); border: 1px solid var(--green-btn); }
.btn-orange:hover { background: var(--green-btn); color: var(--on-orange); filter: brightness(1.08); transform: translateY(-2px); }
.btn-ghost { background: rgba(var(--ink-rgb),.04); color: var(--heading); border: 1px solid var(--line-2); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(var(--ink-rgb),.08); color: var(--heading); border-color: rgba(var(--ink-rgb),.28); transform: translateY(-2px); }
.btn-outline-ctf { background: transparent; color: var(--orange); border: 1px solid var(--line-orange); }
.btn-outline-ctf:hover { background: rgba(253,154,51,.1); color: var(--orange-hover); border-color: var(--orange); }
.btn-link-ctf { color: var(--orange); font-weight: 600; font-family: var(--font-display); display: inline-flex; align-items: center; gap: .35rem; }
.btn-link-ctf i { transition: transform .2s; }
.btn-link-ctf:hover i { transform: translateX(4px); }

/* ---------- Chips / eyebrows / badges ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); padding: .38rem .8rem; border: 1px solid var(--line-green); border-radius: 999px;
  background: rgba(52, 245, 91, .06);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green-glow); animation: pulse 2s infinite; }
.eyebrow-orange { color: var(--orange); border-color: rgba(253,154,51,.3); background: rgba(253,154,51,.07); }
.eyebrow-orange .dot { background: var(--orange-fill); }
/* Hero event ticker: rotating live / registration-open announcements */
.hero-ticker { display: inline-flex; align-items: center; gap: .8rem; max-width: 100%; padding: .35rem .45rem .35rem .4rem; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(var(--ink-rgb),.03); }
.ticker-items { display: grid; min-width: 0; }
.ticker-item { grid-area: 1 / 1; display: flex; align-items: center; gap: .65rem; min-width: 0; color: var(--text); font-size: .92rem; font-weight: 500; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease, visibility 0s .35s; }
.ticker-item.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease; }
.ticker-item:hover { color: var(--heading); }
.ticker-item .t-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-item i { color: var(--muted); transition: transform .2s; }
.ticker-item:hover i { transform: translateX(3px); color: var(--orange); }
.t-status { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 7px; }
.t-status.is-live { color: var(--green); background: rgba(52,245,91,.1); }
.t-status.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.t-status.is-reg { color: var(--orange); background: rgba(253,154,51,.1); }
.t-status.is-ended { color: var(--muted); background: rgba(var(--ink-rgb),.06); }
.ticker-dots { display: flex; gap: .3rem; padding-right: .35rem; }
.ticker-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--ink-rgb),.22); transition: background .2s, width .2s; }
.ticker-dots button[aria-selected="true"] { width: 16px; border-radius: 4px; background: var(--orange-fill); }
.ticker-dots:empty { display: none; }
@media (max-width: 575.98px) { .hero-ticker { display: flex; align-items: center; } .ticker-items { flex: 1; } .ticker-item { font-size: .84rem; line-height: 1.3; } .ticker-item .t-text { white-space: normal; } .ticker-item i { display: none; } }
@media (prefers-reduced-motion: reduce) { .ticker-item, .ticker-item.is-active { transition: none; transform: none; } }
.kicker { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; display: inline-block; }
.tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .25rem .6rem; border-radius: 8px; background: rgba(var(--ink-rgb),.06); color: var(--text-2); border: 1px solid var(--line); font-family: var(--font-mono); }
.tag-green { background: rgba(52,245,91,.1); color: var(--green); border-color: rgba(52,245,91,.25); }
.tag-orange { background: rgba(253,154,51,.1); color: var(--orange); border-color: rgba(253,154,51,.25); }
.tag-cyan { background: rgba(62,230,255,.1); color: var(--cyan); border-color: rgba(62,230,255,.25); }
.tag-violet { background: rgba(167,139,250,.12); color: var(--violet); border-color: rgba(167,139,250,.28); }
.tag-red { background: rgba(255,93,108,.1); color: var(--red); border-color: rgba(255,93,108,.25); }
.tag-yellow { background: rgba(255,210,63,.1); color: var(--yellow); border-color: rgba(255,210,63,.25); }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--green-glow); } 70% { box-shadow: 0 0 0 10px rgba(52,245,91,0); } 100% { box-shadow: 0 0 0 0 rgba(52,245,91,0); } }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1030; height: var(--header-h);
  background: var(--header-bg); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent; transition: background .25s, border-color .25s;
}
.site-header.is-scrolled { background: var(--header-bg-solid); border-bottom-color: var(--line); }
.site-header .container { height: 100%; display: flex; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--heading); font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; flex-shrink: 0; }
.brand img { width: 46px; height: 46px; }
.brand:hover { color: var(--heading); }
.brand .seven { color: var(--orange); }
.main-nav { display: flex; align-items: center; gap: .15rem; margin: 0 auto; list-style: none; padding: 0; }
.main-nav > li { position: relative; }
.main-nav > li > a, .main-nav > li > button {
  display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .85rem; border-radius: 10px;
  color: var(--text-2); font-weight: 500; font-size: .96rem; background: none; border: 0; font-family: var(--font-body);
}
.main-nav > li > a:hover, .main-nav > li > button:hover, .main-nav > li.open > button, .main-nav > li > a.active { color: var(--heading); background: rgba(var(--ink-rgb),.06); }
.main-nav > li > button .bi { font-size: .7rem; transition: transform .2s; }
.main-nav > li.open > button .bi, .main-nav:not(.nav-js) > li:hover > button .bi { transform: rotate(180deg); }
/* Panels hang from their trigger's left edge. ctf7.js sets --mega-x to pull a
   panel back inside the viewport when it would overflow the right edge; the
   offset goes on `left`, not `transform`, so it never animates sideways. */
.mega {
  position: absolute; top: calc(100% + 10px); left: var(--mega-x, -8px); transform: translate(0, 8px);
  min-width: 560px; padding: 1rem; border-radius: 18px; background: rgba(var(--surface-rgb), .97);
  border: 1px solid var(--line-2); box-shadow: var(--shadow), 0 0 0 1px rgba(52,245,91,.05);
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
}
.mega.mega-wide { min-width: 760px; grid-template-columns: 1fr 1fr 1fr; }
.mega::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
/* ctf7.js marks the menu .nav-js and owns which single panel is .open; the
   :hover/:focus-within fallback applies only if the script never ran. */
.main-nav > li.open > .mega, .main-nav:not(.nav-js) > li:hover > .mega, .main-nav:not(.nav-js) > li:focus-within > .mega { opacity: 1; visibility: visible; transform: translate(0, 0); }
.mega a { display: flex; gap: .8rem; padding: .7rem .8rem; border-radius: 12px; color: var(--text); align-items: flex-start; }
.mega a:hover { background: rgba(52,245,91,.07); color: var(--heading); }
.mega a .mi { flex: 0 0 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(52,245,91,.1); color: var(--green); font-size: 1.05rem; border: 1px solid rgba(52,245,91,.18); }
.mega a strong { display: block; font-size: .93rem; font-weight: 600; font-family: var(--font-display); line-height: 1.3; }
.mega a small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.4; margin-top: 2px; }
.mega .mega-head { grid-column: 1 / -1; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .3rem .8rem .4rem; }
.mobile-nav .accordion-body .mega-head { margin: 1.1rem 0 .3rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mega .mega-foot { grid-column: 1 / -1; margin-top: .4rem; padding: .8rem; border-radius: 12px; background: linear-gradient(90deg, rgba(52,245,91,.1), rgba(253,154,51,.08)); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .88rem; color: var(--text-2); }
.header-cta { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.header-cta .signin { color: var(--text-2); font-weight: 500; padding: .5rem .8rem; font-size: .95rem; }
.header-cta .signin:hover { color: var(--heading); }
.nav-toggle { display: none; background: rgba(var(--ink-rgb),.05); border: 1px solid var(--line-2); color: var(--heading); width: 44px; height: 44px; border-radius: 12px; font-size: 1.4rem; align-items: center; justify-content: center; margin-left: auto; }
@media (max-width: 1199.98px) {
  .main-nav, .header-cta .signin, .header-cta .btn-ghost { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { margin-left: auto; }
  .header-cta + .nav-toggle { margin-left: 0; }
}
@media (max-width: 420px) { .header-cta .btn-ctf { display: none; } }

/* Mobile offcanvas nav */
.offcanvas.mobile-nav { background: var(--bg-2); color: var(--text); width: min(420px, 92vw); border-left: 1px solid var(--line); }
.mobile-nav .offcanvas-header { border-bottom: 1px solid var(--line); height: var(--header-h); }
.mobile-nav .btn-close { filter: invert(1); }
.mobile-nav .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line); --bs-accordion-color: var(--text); --bs-accordion-btn-color: var(--heading); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--green); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-btn-icon: none; --bs-accordion-btn-active-icon: none; }
.mobile-nav .accordion-button { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; padding: 1rem 0; }
.mobile-nav .accordion-button::after { content: "+"; background: none; font-size: 1.4rem; width: auto; height: auto; transform: none; color: var(--muted); }
.mobile-nav .accordion-button:not(.collapsed)::after { content: "–"; color: var(--green); }
.mobile-nav .accordion-body { padding: 0 0 1rem; }
.mobile-nav .accordion-body a, .mobile-nav .m-link { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; color: var(--text-2); }
.mobile-nav .accordion-body a i { color: var(--green); width: 20px; }
.mobile-nav .m-link { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--heading); padding: 1rem 0; border-bottom: 1px solid var(--line); }

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 2.5rem + 4vw, 6.5rem) 0; position: relative; }
.section-sm { padding: clamp(3rem, 2rem + 3vw, 5rem) 0; position: relative; }
.section-alt { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 12%, var(--bg-2) 88%, var(--bg) 100%); }
.section-line { border-top: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lead, .lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--text-2); line-height: 1.6; font-weight: 400; }
.section-head h2 { margin-bottom: 1rem; }

/* Background FX */
.bg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(var(--ink-rgb),.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb),.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%); }
.bg-hex { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V17L28 1l28 16v33L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='rgba(52,245,91,0.07)' stroke-width='1'/%3E%3C/svg%3E"); mask-image: radial-gradient(ellipse 60% 60% at 70% 40%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 70% 40%, #000 10%, transparent 75%); }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .5; }
.glow-green { background: radial-gradient(circle, rgba(52,245,91,.55), transparent 65%); }
.glow-orange { background: radial-gradient(circle, rgba(253,154,51,.45), transparent 65%); }
.glow-cyan { background: radial-gradient(circle, rgba(62,230,255,.35), transparent 65%); }
.noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Hero (home) ---------- */
.hero { position: relative; padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(3rem, 2rem + 3vw, 5rem); overflow: hidden; isolation: isolate; }
.hero .glow-a { width: 720px; height: 720px; top: -260px; right: -160px; }
.hero .glow-b { width: 520px; height: 520px; bottom: -280px; left: -200px; opacity: .3; }
.hero h1 { margin: 1.4rem 0 1.4rem; }
.hero h1 .line2 { display: block; }
.hero .lead { max-width: 620px; font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 2.4rem; color: var(--muted); font-size: .92rem; }
.hero-proof span { display: inline-flex; align-items: center; gap: .5rem; }
.hero-proof i { color: var(--green); }
.format-rotator { display: inline-grid; vertical-align: top; height: 1.6em; line-height: 1.6em; overflow: hidden; }
.format-rotator > span { grid-area: 1 / 1; animation: rotateWords 15s infinite; opacity: 0; transform: translateY(100%); white-space: nowrap; }
.format-rotator > span:nth-child(1) { animation-delay: 0s; }
.format-rotator > span:nth-child(2) { animation-delay: 2.5s; }
.format-rotator > span:nth-child(3) { animation-delay: 5s; }
.format-rotator > span:nth-child(4) { animation-delay: 7.5s; }
.format-rotator > span:nth-child(5) { animation-delay: 10s; }
.format-rotator > span:nth-child(6) { animation-delay: 12.5s; }
@keyframes rotateWords { 0% { opacity: 0; transform: translateY(100%); } 3%, 16% { opacity: 1; transform: translateY(0); } 19%, 100% { opacity: 0; transform: translateY(-100%); } }

.hero-visual { position: relative; min-height: 560px; display: grid; place-items: center; }
.hero-visual .hex-ring { position: absolute; width: min(520px, 90%); aspect-ratio: 1; }
.hero-visual .hex-ring svg { width: 100%; height: 100%; overflow: visible; }
.hero-visual .hex-ring .spin { transform-origin: 50% 50%; animation: spin 60s linear infinite; }
.hero-visual .hex-ring .spin-rev { transform-origin: 50% 50%; animation: spin 90s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-mascot { position: relative; z-index: 2; width: min(400px, 74%); filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(52,245,91,.15)); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-floor { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 60%; height: 40px; background: radial-gradient(ellipse, rgba(52,245,91,.35), transparent 70%); filter: blur(10px); z-index: 1; }
.float-card {
  position: absolute; z-index: 3; background: rgba(var(--surface-rgb), .82); border: 1px solid var(--line-2); border-radius: 14px;
  padding: .8rem 1rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); font-size: .85rem;
  animation: floaty 7s ease-in-out infinite;
}
.float-card .fc-title { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; display: flex; align-items: center; gap: .4rem; }
.float-card .fc-title .live { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse 1.6s infinite; box-shadow: 0 0 0 0 rgba(255,93,108,.6); }
.fc-leaderboard { top: 4%; left: -2%; width: 250px; animation-delay: -1s; }
.fc-leaderboard ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.fc-leaderboard li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: .5rem; padding: .3rem .45rem; border-radius: 8px; background: rgba(var(--ink-rgb),.03); font-size: .8rem; transition: transform .5s, background .5s; }
.fc-leaderboard li .rk { font-family: var(--font-mono); color: var(--muted); font-size: .72rem; }
.fc-leaderboard li:first-child { background: rgba(52,245,91,.1); }
.fc-leaderboard li:first-child .rk { color: var(--green); }
.fc-leaderboard li .pts { font-family: var(--font-mono); color: var(--green); font-size: .75rem; }
.fc-leaderboard li.bump { background: rgba(253,154,51,.15); }
.fc-flag { bottom: 14%; left: -4%; animation-delay: -3s; display: flex; align-items: center; gap: .7rem; }
.fc-flag .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(52,245,91,.15); color: var(--green); font-size: 1.1rem; }
.fc-flag b { color: var(--heading); display: block; font-size: .88rem; }
.fc-flag small { color: var(--muted); font-family: var(--font-mono); font-size: .72rem; }
.fc-report { top: 46%; right: -4%; width: 230px; animation-delay: -5s; }
.fc-report .sev { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }
.fc-report .cvss { font-family: var(--font-mono); font-weight: 700; color: var(--red); font-size: 1.4rem; }
.fc-report .bar { height: 5px; border-radius: 3px; background: rgba(var(--ink-rgb),.07); overflow: hidden; margin-top: .5rem; }
.fc-report .bar span { display: block; height: 100%; width: 92%; background: linear-gradient(90deg, var(--orange), var(--red)); }
.fc-koth { bottom: 3%; right: 12%; animation-delay: -2s; display: flex; align-items: center; gap: .7rem; }
.fc-koth .crown { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(253,154,51,.15); color: var(--orange); font-size: 1.1rem; }
.fc-koth b { color: var(--heading); display: block; font-size: .88rem; }
.fc-koth small { color: var(--muted); font-size: .75rem; font-family: var(--font-mono); }
@media (max-width: 991.98px) {
  .hero-visual { min-height: 480px; margin-top: 2rem; }
  .fc-leaderboard { left: 0; top: 0; }
  .fc-report { right: 0; top: 6%; }
}
@media (max-width: 575.98px) {
  .hero-visual { min-height: 420px; }
  .fc-leaderboard { width: 200px; font-size: .75rem; }
  .fc-leaderboard li:nth-child(n+4) { display: none; }
  .fc-report { width: 175px; top: auto; bottom: 22%; right: 0; }
  .fc-report .desc { display: none; }
  .fc-flag { bottom: 2%; left: 0; }
  .fc-koth { display: none; }
  .hero-mascot { width: 66%; }
}

/* Terminal */
.terminal { background: var(--term-bg); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); font-family: var(--font-mono); font-size: .86rem; }
.terminal-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: rgba(var(--ink-rgb),.02); }
.terminal-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; background: #ff5f57; }
.terminal-bar i:nth-child(2) { background: #febc2e; }
.terminal-bar i:nth-child(3) { background: #28c840; }
.terminal-bar span { margin-left: .6rem; color: var(--muted); font-size: .75rem; }
.terminal-body { padding: 1rem 1.1rem 1.2rem; color: #b9c8bf; line-height: 1.75; min-height: 180px; white-space: pre-wrap; word-break: break-word; }
.terminal-body .p { color: var(--green); }
.terminal-body .o { color: var(--orange); }
.terminal-body .c { color: var(--muted); }
.terminal-body .w { color: var(--heading); }
.caret { display: inline-block; width: .55em; height: 1.1em; background: var(--green); vertical-align: -.2em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Logo marquee ---------- */
.logos { padding: 2.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(var(--ink-rgb),.012); }
.logos-label { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: 1.4rem; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 4rem; width: max-content; animation: marquee 45s linear infinite; align-items: center; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { height: 44px; width: auto; max-width: 170px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Cards ---------- */
.card-ctf {
  position: relative; height: 100%; background: rgba(var(--ink-rgb),.025);
  border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 1.2rem + .6vw, 2rem);
  transition: transform .25s ease, border-color .25s, box-shadow .25s, background .25s; overflow: hidden;
}
a.card-ctf, .card-ctf.hoverable { color: inherit; display: block; }
a.card-ctf:hover, .card-ctf.hoverable:hover { transform: translateY(-2px); border-color: rgba(var(--ink-rgb),.24); background: rgba(var(--ink-rgb),.04); }
/* secondary items: no box, just a top rule */
.card-ctf.card-flat { background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 1.4rem 0 0; }
a.card-ctf.card-flat:hover { background: none; transform: none; border-top-color: var(--green); }
a.card-ctf.card-flat:hover h3 { color: var(--green); }
.card-ctf.card-flat h3 { margin-top: .9rem; transition: color .2s; }
.card-ctf h3 { font-size: 1.3rem; margin: 1.1rem 0 .6rem; }
.card-ctf h3.h5 { font-size: 1.08rem; margin: .9rem 0 .35rem; }
.card-ctf h3.h2, .card-ctf h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); margin: 0 0 1rem; }
.card-ctf .card-link { margin-top: 1.2rem; }
.card-ctf p { font-size: .98rem; margin-bottom: 0; }
.card-ctf .card-link { margin-top: 1.2rem; }
.card-ctf.card-pad-lg { padding: clamp(1.8rem, 1.4rem + 1.2vw, 2.8rem); }
.icon-tile { display: inline-flex; align-items: center; justify-content: flex-start; font-size: 1.6rem; line-height: 1; color: var(--green); flex-shrink: 0; }
.icon-tile.mx-auto { justify-content: center; }
.icon-tile.sm { font-size: 1.25rem; min-width: 1.5rem; padding-top: .15rem; }

/* Feature list rows */
.feature-row { display: flex; gap: 1rem; align-items: flex-start; }
.feature-row h3, .feature-row h4 { font-size: 1.1rem; margin: .1rem 0 .3rem; }
.feature-row p { font-size: .95rem; margin: 0; }

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.bento > * { grid-column: span 4; }
.bento > .b-span-5 { grid-column: span 5; }
.bento > .b-span-6 { grid-column: span 6; }
.bento > .b-span-7 { grid-column: span 7; }
.bento > .b-span-8 { grid-column: span 8; }
.bento > .b-span-12 { grid-column: span 12; }
@media (max-width: 991.98px) { .bento > *, .bento > [class*="b-span-"] { grid-column: span 6; } }
@media (max-width: 575.98px) { .bento { grid-template-columns: 1fr; } .bento > *, .bento > [class*="b-span-"] { grid-column: auto; } }
.format-card { display: flex; flex-direction: column; }
.format-card .fmt-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.format-card .fmt-art { margin-top: auto; padding-top: 1.4rem; }
.format-card.featured { background: radial-gradient(120% 120% at 100% 0%, rgba(52,245,91,.12), transparent 50%), linear-gradient(180deg, rgba(var(--ink-rgb),.04), rgba(var(--ink-rgb),.01)); border-color: rgba(52,245,91,.22); }

/* Mini UI mockups inside cards */
.mini-ui { background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 12px; padding: .8rem; font-family: var(--font-mono); font-size: .76rem; color: var(--text-2); }
.mini-ui .row-i { display: flex; justify-content: space-between; align-items: center; padding: .35rem .2rem; border-bottom: 1px dashed var(--line); gap: .5rem; }
.mini-ui .row-i:last-child { border-bottom: 0; }
.mini-ui .row-i.lbl { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .55rem; border-bottom: 0; }
.mini-ui .row-i.lbl:first-child { padding-top: .1rem; }
.mini-ui .bar { height: 6px; border-radius: 4px; background: rgba(var(--ink-rgb),.07); overflow: hidden; flex: 1; max-width: 120px; }
.mini-ui .bar span { display: block; height: 100%; background: var(--green); }
.chal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.chal-grid span { aspect-ratio: 1.4; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-mono); font-size: .72rem; background: rgba(var(--ink-rgb),.04); border: 1px solid var(--line); color: var(--muted); }
.chal-grid span.solved { background: rgba(52,245,91,.14); border-color: rgba(52,245,91,.35); color: var(--green); }
.chal-grid span.hot { background: rgba(253,154,51,.12); border-color: rgba(253,154,51,.35); color: var(--orange); }

/* Homepage format art: a jeopardy board and a Raw Ops report card.
   Built only from theme tokens so both read correctly in dark and light. */
.fmt-board, .fmt-report { --fa-panel: color-mix(in srgb, var(--bg) 72%, transparent); --fa-cell: rgba(var(--ink-rgb), .035); background: var(--fa-panel); border: 1px solid var(--line-2); border-radius: 12px; font-family: var(--font-mono); color: var(--text-2); font-size: .72rem; line-height: 1.35; }
.fmt-board { padding: .7rem; }
.fmt-board .fb-head, .fmt-report .fr-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--muted); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.fmt-board .fb-head { padding: 0 .1rem .6rem; }
.fmt-board .fb-head b, .fmt-report .fr-top b { color: var(--heading); font-weight: 600; }
.fmt-board .fb-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.fmt-board .fb-grid > span { position: relative; display: grid; place-items: center; height: 2.05rem; border-radius: 4px; background: var(--fa-cell); border: 1px solid var(--line); color: var(--text-2); font-variant-numeric: tabular-nums; overflow: hidden; }
.fmt-board .fb-grid > .cat { height: auto; padding: .1rem 0 .3rem; background: none; border: 0; border-bottom: 2px solid var(--line-2); border-radius: 0; color: var(--heading); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.fmt-board .fb-grid > .s { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: color-mix(in srgb, var(--green) 38%, transparent); color: var(--green); }
.fmt-board .fb-grid > .s::after { content: ""; position: absolute; right: 5px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.fmt-board .fb-grid > .fb::before { content: ""; position: absolute; left: 0; top: 0; border-style: solid; border-width: 11px 11px 0 0; border-color: var(--orange) transparent transparent transparent; }
.fmt-board .fb-grid > .lk { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(var(--ink-rgb), .045) 5px 6px); border-style: dashed; color: var(--muted); }
.fmt-board .fb-grid > .lk i { font-size: .7rem; }
.fmt-board .fb-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: .65rem .1rem 0; color: var(--muted); font-size: .62rem; }
.fmt-board .fb-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.fmt-board .fb-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 2px; border: 1px solid var(--line-2); }
.fmt-board .fb-legend .k-s::before { background: color-mix(in srgb, var(--green) 30%, transparent); border-color: var(--green); }
.fmt-board .fb-legend .k-fb::before { border: 0; border-radius: 0; width: 0; height: 0; border-style: solid; border-width: 9px 9px 0 0; border-color: var(--orange) transparent transparent transparent; }
.fmt-board .fb-legend .k-lk::before { border-style: dashed; }

.fmt-report { padding: .85rem .9rem .8rem; }
.fmt-report .fr-status { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .45rem; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); letter-spacing: .06em; }
.fmt-report .fr-title { margin: .55rem 0 .5rem; font-family: var(--font-body); font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--heading); }
.fmt-report .fr-title code { font-family: var(--font-mono); font-size: .8rem; color: var(--orange); background: none; padding: 0; }
.fmt-report .fr-vec { padding: .4rem .5rem; border-radius: 6px; background: var(--fa-cell); border: 1px solid var(--line); color: var(--muted); font-size: .64rem; word-break: break-all; }
.fmt-report .fr-vec b { color: var(--heading); font-weight: 600; }
.fmt-report .fr-sev { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .15rem .8rem; margin: .75rem 0 .2rem; }
.fmt-report .fr-score { grid-row: span 2; font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--orange); }
.fmt-report .fr-score small { display: block; margin-top: .2rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.fmt-report .fr-meter { position: relative; display: grid; grid-template-columns: 39fr 30fr 20fr 11fr; gap: 2px; height: 7px; }
.fmt-report .fr-meter i { border-radius: 2px; opacity: .28; }
.fmt-report .fr-meter i:nth-child(1) { background: var(--green); }
.fmt-report .fr-meter i:nth-child(2) { background: var(--yellow); }
.fmt-report .fr-meter i:nth-child(3) { background: var(--orange); opacity: 1; }
.fmt-report .fr-meter i:nth-child(4) { background: var(--red); }
.fmt-report .fr-meter b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--heading); }
.fmt-report .fr-scale { display: grid; grid-template-columns: 39fr 30fr 20fr 11fr; gap: 2px; color: var(--muted); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; }
.fmt-report .fr-scale span:nth-child(3) { color: var(--orange); }
.fmt-report .fr-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: .9rem 0 0; padding: .75rem 0 0; border-top: 1px dashed var(--line-2); font-size: .6rem; text-align: center; color: var(--muted); }
.fmt-report .fr-steps li { position: relative; padding-top: 1.05rem; }
.fmt-report .fr-steps li::before { content: ""; position: absolute; top: 0; left: 50%; z-index: 1; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); }
.fmt-report .fr-steps li + li::after { content: ""; position: absolute; top: 4.5px; right: 50%; width: 100%; height: 2px; background: var(--line-2); }
.fmt-report .fr-steps li.done, .fmt-report .fr-steps li.now { color: var(--text-2); }
.fmt-report .fr-steps li.done::before { border-color: var(--green); background: var(--green); }
.fmt-report .fr-steps li.done::after, .fmt-report .fr-steps li.now::after { background: var(--green); }
.fmt-report .fr-steps li.now { color: var(--heading); font-weight: 600; }
.fmt-report .fr-steps li.now::before { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
.fmt-board .fb-head > span { white-space: nowrap; }
@media (max-width: 575.98px) { .fmt-board .fb-team { display: none; } .fmt-board .fb-grid > span { height: 1.85rem; font-size: .66rem; } .fmt-board .fb-grid > .cat { font-size: .54rem; letter-spacing: .04em; } }

/* ---------- Stats ---------- */
.stat { padding: 1.5rem 0; }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); color: var(--heading); letter-spacing: -.04em; line-height: 1; }
.stat .num .u { color: var(--green); }
.stat .lbl { color: var(--muted); margin-top: .5rem; font-size: .95rem; }
.stats-band { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(var(--ink-rgb),.03), transparent); padding: 1rem 2rem; }
.stats-band .col + .col, .stats-band [class*="col-"] + [class*="col-"] { border-left: 1px solid var(--line); }
@media (max-width: 767.98px) { .stats-band [class*="col-"] + [class*="col-"] { border-left: 0; } .stats-band [class*="col-"]:nth-child(even) { border-left: 1px solid var(--line); } }

/* ---------- Steps timeline ---------- */
.steps { counter-reset: step; display: grid; gap: 1rem; }
.step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 1.25rem; padding: 1.4rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(var(--ink-rgb),.02); transition: border-color .25s, background .25s; }
.step:hover { border-color: var(--line-green); background: rgba(52,245,91,.03); }
.step .n { counter-increment: step; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: var(--green); background: rgba(52,245,91,.08); border: 1px solid rgba(52,245,91,.25); font-size: 1.1rem; }
.step .n::before { content: "0" counter(step); }
.step h3 { font-size: 1.2rem; margin: .2rem 0 .4rem; }
.step p { margin: 0; font-size: .97rem; }
.step .tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
@media (max-width: 575.98px) { .step { grid-template-columns: 1fr; } .step .n { width: 48px; height: 48px; } }

/* Tabs (custom) */
.ctf-tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding: .35rem; background: rgba(var(--ink-rgb),.03); border: 1px solid var(--line); border-radius: 14px; width: fit-content; max-width: 100%; }
.ctf-tabs button { border: 0; background: none; color: var(--text-2); padding: .55rem 1rem; border-radius: 10px; font-weight: 600; font-family: var(--font-display); font-size: .93rem; display: inline-flex; align-items: center; gap: .45rem; }
.ctf-tabs button:hover { color: var(--heading); }
.ctf-tabs button.active { background: var(--orange-fill); color: var(--on-orange); }
.tab-pane-ctf { display: none; animation: fadeUp .4s ease; }
.tab-pane-ctf.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Check lists */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.check-list li { position: relative; padding-left: 1.9rem; color: var(--text-2); }
.check-list li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05em; color: var(--green); font-size: 1.15rem; line-height: 1.4; }
.check-list.x li::before { content: "\F62A"; color: var(--muted); }
.check-list li strong { color: var(--heading); font-weight: 600; }
.check-list.cols-2 { grid-template-columns: 1fr 1fr; gap: .65rem 1.5rem; }
@media (max-width: 575.98px) { .check-list.cols-2 { grid-template-columns: 1fr; } }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(var(--ink-rgb),.015); -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.compare-table th, .compare-table td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--text-2); }
.compare-table thead th { font-family: var(--font-display); color: var(--heading); font-weight: 600; background: rgba(var(--ink-rgb),.03); position: sticky; top: 0; }
.compare-table thead th.us { color: var(--green); background: rgba(52,245,91,.08); }
.compare-table td.us { background: rgba(52,245,91,.035); color: var(--heading); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody th { color: var(--heading); font-weight: 500; }
.compare-table .yes { color: var(--green); }
.compare-table .no { color: var(--muted); }
.compare-table .part { color: var(--orange); }
.compare-table tr.group th { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: rgba(var(--ink-rgb),.03); padding: .55rem 1.1rem; position: static; }

/* ---------- Event cards ---------- */
.event-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); transition: transform .25s, border-color .25s, box-shadow .25s; color: inherit; }
.event-card:hover { transform: translateY(-4px); border-color: var(--line-green); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); color: inherit; }
.event-card .ev-img { aspect-ratio: 16 / 9; overflow: hidden; position: relative; background: #000; }
.event-card .ev-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.event-card:hover .ev-img img { transform: scale(1.04); }
.event-card .ev-date { position: absolute; top: 12px; left: 12px; background: rgba(var(--bg-rgb),.85); border: 1px solid var(--line-2); border-radius: 10px; padding: .35rem .6rem; font-family: var(--font-mono); font-size: .75rem; color: var(--heading); backdrop-filter: blur(6px); }
.event-card .ev-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.event-card h3 { font-size: 1.15rem; margin: 0; }
.event-card .ev-host { color: var(--muted); font-size: .9rem; }
.event-card .ev-foot { margin-top: auto; padding-top: .8rem; display: flex; justify-content: space-between; align-items: center; }

/* ---------- Pricing ---------- */
.price-card { position: relative; height: 100%; display: flex; flex-direction: column; padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--ink-rgb),.035), rgba(var(--ink-rgb),.01)); }
.price-card.popular { border-color: rgba(253,154,51,.5); background: radial-gradient(120% 80% at 50% 0%, rgba(253,154,51,.12), transparent 60%), linear-gradient(180deg, rgba(var(--ink-rgb),.04), rgba(var(--ink-rgb),.01)); box-shadow: 0 0 0 1px rgba(253,154,51,.25), 0 20px 60px -25px rgba(253,154,51,.45); }
.price-card .pop-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--orange-fill); color: var(--on-orange); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; white-space: nowrap; }
.price-card h3 { font-size: 1.35rem; margin: 0 0 .3rem; }
.price-card .for { color: var(--muted); font-size: .92rem; min-height: 2.8em; }
.price-card .price { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; color: var(--heading); letter-spacing: -.04em; margin: 1rem 0 .2rem; line-height: 1; }
.price-card .price small { font-size: .95rem; color: var(--muted); font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.price-card .check-list { margin: 1.5rem 0 2rem; font-size: .95rem; }
.price-card .btn { margin-top: auto; width: 100%; }

/* ---------- Testimonial ---------- */
.quote-card { position: relative; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-radius: var(--radius-lg); border: 1px solid var(--line); background: radial-gradient(90% 120% at 0% 0%, rgba(52,245,91,.08), transparent 60%), var(--surface); }
.quote-card blockquote { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .9vw, 2rem); line-height: 1.4; color: var(--heading); letter-spacing: -.015em; margin: 0 0 1.8rem; }
.quote-card .qmark { font-size: 3rem; color: var(--green); line-height: 1; margin-bottom: 1rem; }
.quote-card .who { display: flex; align-items: center; gap: .9rem; }
.quote-card .avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: linear-gradient(135deg, var(--green-3), var(--olive)); color: #fff; font-family: var(--font-display); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: rgba(var(--ink-rgb),.02); transition: border-color .2s, background .2s; }
.faq-item[open] { border-color: var(--line-green); background: rgba(52,245,91,.03); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.15rem 3.2rem 1.15rem 1.3rem; font-family: var(--font-display); font-weight: 600; color: var(--heading); font-size: 1.05rem; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--ink-rgb),.05); color: var(--green); font-size: 1.2rem; transition: transform .2s; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-a { padding: 0 1.3rem 1.3rem; color: var(--text-2); }
.faq-item .faq-a p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(2.5rem, 2rem + 3vw, 5rem); border: 1px solid rgba(52,245,91,.25); background: radial-gradient(80% 140% at 100% 100%, rgba(253,154,51,.18), transparent 55%), radial-gradient(80% 140% at 0% 0%, rgba(52,245,91,.2), transparent 55%), var(--surface); isolation: isolate; }
.cta-band h2 { max-width: 16ch; }
.cta-band .cta-mascot { position: absolute; right: 3%; bottom: -8%; width: min(330px, 30%); z-index: -1; opacity: .95; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
@media (max-width: 767.98px) { .cta-band .cta-mascot { position: relative; width: 60%; margin: 2rem auto -3.5rem; display: block; right: auto; } }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0 clamp(3rem, 2rem + 3vw, 5rem); border-bottom: 1px solid var(--line); isolation: isolate; }
.page-hero .glow-a { width: 600px; height: 600px; top: -300px; right: -100px; }
.page-hero h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 4rem); margin: 1.1rem 0 1.2rem; max-width: 20ch; }
.page-hero.center h1 { margin-left: auto; margin-right: auto; }
.page-hero .lead { max-width: 700px; }
.page-hero.center { text-align: center; }
.page-hero.center .lead { margin-left: auto; margin-right: auto; }
.page-hero.center .hero-ctas { justify-content: center; }
.page-hero-visual { position: relative; }
.page-hero-mascot { width: min(300px, 80%); display: block; margin: 0 auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); animation: floaty 6s ease-in-out infinite; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 .6rem; font-size: .85rem; font-family: var(--font-mono); color: var(--muted); }
.page-hero.center .breadcrumbs { justify-content: center; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: rgba(var(--ink-rgb),.2); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--orange); }
.breadcrumbs [aria-current] { color: var(--text-2); }

/* ---------- Prose (long-form) ---------- */
.prose { max-width: 760px; font-size: 1.09rem; line-height: 1.8; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-top: 2.4em; margin-bottom: .6em; }
.prose h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); margin-top: 2em; margin-bottom: .5em; }
.prose h4 { font-size: 1.05rem; margin-top: 1.6em; margin-bottom: .4em; }
.prose p, .prose li { color: var(--text-2); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--green); }
.prose strong { color: var(--heading); }
.prose a { text-decoration: underline; text-decoration-color: rgba(253,154,51,.45); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--orange); }
.prose blockquote { border-left: 3px solid var(--green); padding: .4rem 0 .4rem 1.2rem; color: var(--heading); font-size: 1.15rem; }
.prose pre { background: var(--term-bg); border: 1px solid var(--line-2); border-radius: 12px; padding: 1rem 1.2rem; overflow-x: auto; font-size: .88rem; color: #cfe0d5; }
.prose pre code { background: none; color: inherit; padding: 0; }
/* one-line formulas wrap rather than side-scroll; code blocks keep `pre` */
pre.formula { white-space: pre-wrap; overflow-wrap: anywhere; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: left; }
.prose th { background: rgba(var(--ink-rgb),.04); color: var(--heading); font-family: var(--font-display); }
.prose img { border-radius: 14px; border: 1px solid var(--line); }
.callout { border: 1px solid var(--line-green); background: rgba(52,245,91,.05); border-radius: 14px; padding: 1.1rem 1.3rem; display: flex; gap: .9rem; }
.callout i { color: var(--green); font-size: 1.3rem; line-height: 1.5; }
.callout.orange { border-color: rgba(253,154,51,.3); background: rgba(253,154,51,.05); }
.callout.orange i { color: var(--orange); }
.callout p { margin: 0; }
.key-takeaways { border: 1px solid var(--line-2); border-radius: 16px; padding: 1.4rem 1.6rem; background: var(--surface); }
.key-takeaways h2, .key-takeaways h3 { font-size: 1.1rem !important; margin: 0 0 .8rem !important; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--green); }

/* TOC */
.toc { position: sticky; top: calc(var(--header-h) + 24px); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem 1.3rem; background: rgba(var(--ink-rgb),.02); font-size: .9rem; }
.toc h2, .toc .toc-title { font-family: var(--font-mono); font-size: .75rem !important; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem !important; }
.toc ol, .toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.toc a { display: block; padding: .35rem .6rem; border-radius: 8px; color: var(--text-2); border-left: 2px solid transparent; }
.toc a:hover, .toc a.active { color: var(--heading); background: rgba(52,245,91,.06); border-left-color: var(--green); }
.toc ol ol { padding-left: .7rem; margin-top: .1rem; }
.toc ol ol a { font-size: .84rem; padding-top: .28rem; padding-bottom: .28rem; }

/* Article meta */
.article-meta { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; color: var(--muted); font-size: .9rem; font-family: var(--font-mono); }
.article-meta span { display: inline-flex; align-items: center; gap: .4rem; }

/* Blog cards */
.post-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); color: inherit; transition: transform .25s, border-color .25s; }
.post-card:hover { transform: translateY(-4px); border-color: var(--line-green); color: inherit; }
.post-card .pc-art { aspect-ratio: 16/8; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(80% 120% at 20% 0%, rgba(52,245,91,.22), transparent 60%), radial-gradient(80% 120% at 100% 100%, rgba(253,154,51,.18), transparent 60%), var(--surface-2); }
.post-card .pc-art i { font-size: 3rem; color: var(--green); opacity: .9; }
.post-card .pc-art .mono { position: absolute; bottom: 10px; left: 14px; font-size: .72rem; color: var(--muted); }
.post-card .pc-body { padding: 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-card h3 { font-size: 1.15rem; margin: 0; line-height: 1.35; }
.post-card p { font-size: .94rem; margin: 0; }
.post-card .pc-foot { margin-top: auto; padding-top: .6rem; color: var(--muted); font-size: .82rem; font-family: var(--font-mono); }

/* Glossary */
.glossary-index { display: flex; flex-wrap: wrap; gap: .35rem; }
.glossary-index a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); color: var(--text-2); font-family: var(--font-mono); font-weight: 600; }
.glossary-index a:hover { border-color: var(--orange); color: var(--orange); }
.term { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.term dt, .term h3 { font-size: 1.2rem; color: var(--heading); margin: 0 0 .4rem; font-family: var(--font-display); }
.term dd, .term p { margin: 0; color: var(--text-2); }

/* Forms */
.form-ctf .form-label { color: var(--heading); font-weight: 500; font-size: .93rem; margin-bottom: .4rem; }
.form-ctf .form-control, .form-ctf .form-select { background-color: rgba(var(--ink-rgb),.03); border: 1px solid var(--line-2); color: var(--heading); border-radius: 12px; padding: .75rem 1rem; font-size: 1rem; }
.form-ctf .form-control::placeholder { color: #6c7a72; }
.form-ctf .form-control:focus, .form-ctf .form-select:focus { background-color: rgba(253,154,51,.03); border-color: var(--orange); box-shadow: 0 0 0 4px rgba(253,154,51,.14); color: var(--heading); }
.form-ctf .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238d9b93' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-ctf .form-select option { background: var(--surface); color: var(--heading); }
.form-ctf .form-check-input { background-color: rgba(var(--ink-rgb),.05); border-color: var(--line-2); }
.form-ctf .form-check-input:checked { background-color: var(--orange-fill); border-color: var(--orange-fill); }
.form-panel { border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.6rem); background: linear-gradient(180deg, rgba(var(--ink-rgb),.035), rgba(var(--ink-rgb),.01)); }
.form-success { display: none; }
.form-sent .form-success { display: block; }
.form-sent .form-fields { display: none; }

/* Media frame */
.media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.media-frame img { display: block; width: 100%; }
.media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(var(--bg-rgb),.7)); pointer-events: none; }

/* Dashboard mock */
.dash { border-radius: 18px; border: 1px solid var(--line-2); background: var(--term-bg); overflow: hidden; box-shadow: var(--shadow), 0 0 80px -40px var(--green-glow); }
.dash-top { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); background: rgba(var(--ink-rgb),.02); font-size: .82rem; gap: 1rem; }
.dash-top .t { font-family: var(--font-mono); color: var(--muted); }
.dash-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1px; background: var(--line); }
.dash-body > div { background: var(--term-bg); padding: 1.1rem; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.dash-kpis div { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; }
.dash-kpis b { display: block; font-family: var(--font-display); color: var(--heading); font-size: 1.25rem; }
.dash-kpis small { color: var(--muted); font-size: .72rem; font-family: var(--font-mono); }
.spark { width: 100%; height: 90px; }
.feed { display: grid; gap: .45rem; font-family: var(--font-mono); font-size: .76rem; }
.feed div { display: flex; gap: .5rem; align-items: baseline; padding: .4rem .5rem; border-radius: 8px; background: rgba(var(--ink-rgb),.025); animation: fadeUp .4s ease; }
.feed .tm { color: var(--muted); flex-shrink: 0; }
.feed .ok { color: var(--green); }
.feed .warn { color: var(--orange); }
.feed .bad { color: var(--red); }
@media (max-width: 767.98px) { .dash-body { grid-template-columns: 1fr; } }

/* Split feature w/ visual */
.split { align-items: center; }
.split-visual { position: relative; }

/* Audience cards */
.aud-card { padding: 0; overflow: hidden; }
.aud-card .aud-top { padding: 1.6rem 1.6rem 0; }
.aud-card .aud-list { padding: 1rem 1.6rem 1.6rem; }

/* Numbered pill list */
.pill-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.pill-list li { padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .9rem; color: var(--text-2); background: rgba(var(--ink-rgb),.02); }

/* ---------- Footer ---------- */
.site-footer { position: relative; border-top: 1px solid var(--line); padding: 5rem 0 2rem; background: linear-gradient(180deg, var(--bg), var(--bg-deep)); overflow: hidden; }
.site-footer h2, .site-footer .f-h { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; font-weight: 500; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer ul a { color: var(--text-2); font-size: .93rem; }
.site-footer ul a:hover { color: var(--orange); }
.site-footer .f-about { color: var(--muted); font-size: .95rem; max-width: 340px; margin-top: 1rem; }
.socials { display: flex; gap: .5rem; margin-top: 1.4rem; }
.socials a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--text-2); font-size: 1.05rem; }
.socials a:hover { color: var(--orange); border-color: var(--orange); background: rgba(253,154,51,.06); }
.footer-bottom { margin-top: 4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: var(--muted); font-size: .86rem; }
.footer-bottom a { color: var(--muted); }
.footer-wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 18vw, 17rem); line-height: .8; letter-spacing: -.06em; text-align: center; margin-top: 3rem; color: transparent; user-select: none; pointer-events: none; }
.footer-wordmark span { display: inline-block; background: linear-gradient(180deg, rgba(52,245,91,.14), rgba(52,245,91,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-wordmark .wm-7 { background-image: linear-gradient(180deg, rgba(253,154,51,.18), rgba(253,154,51,0) 85%); }
.newsletter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; max-width: 380px; }
.newsletter input[type="email"] { flex: 1; min-width: 0; background: rgba(var(--ink-rgb),.04); border: 1px solid var(--line-2); border-radius: 11px; color: var(--heading); padding: .6rem .9rem; font-size: .92rem; }
.newsletter-captcha { flex: 0 0 100%; }
.newsletter-captcha:empty { display: none; }
.newsletter input[type="email"]:focus { outline: none; border-color: var(--orange); }
.newsletter .form-check-input { background-color: rgba(var(--ink-rgb),.05); border-color: var(--line-2); }
.newsletter .form-check-input:checked { background-color: var(--orange-fill); border-color: var(--orange-fill); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.no-js .reveal { opacity: 1; transform: none; }

/* Back to top */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 1000; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--surface-rgb),.9); color: var(--green); display: grid; place-items: center; font-size: 1.2rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s; backdrop-filter: blur(8px); }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--green); }

/* Ultra-wide tuning */
@media (min-width: 1920px) {
  :root { --container-max: 1480px; }
  body { font-size: 1.1rem; }
  h1 { font-size: 5rem; }
  .page-hero h1 { font-size: 4.3rem; }
  h2 { font-size: 3.3rem; }
  .hero-visual { min-height: 640px; }
}
@media (min-width: 2560px) {
  :root { --container-max: 1720px; }
  html { font-size: 17.5px; }
  body { font-size: 1.15rem; }
  h1 { font-size: 5.6rem; }
  .hero-visual { min-height: 720px; }
  .hero-mascot { width: min(460px, 74%); }
  .hero { padding-top: 7rem; padding-bottom: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .format-rotator > span:first-child { opacity: 1; transform: none; }
}

/* Utilities */
.maxw-60 { max-width: 60ch; }
.gap-y-4 { row-gap: 1.5rem; }
.divider-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); display: inline-block; vertical-align: middle; margin: 0 .6rem; }
.rounded-ctf { border-radius: var(--radius) !important; }
.border-ctf { border: 1px solid var(--line) !important; }

/* mobile hero refinements */
@media (max-width: 575.98px) {
  .hero .eyebrow { font-size: .68rem; letter-spacing: .04em; }
  .hero h1 .line2 { display: inline; }
  .hero-ctas .btn { width: 100%; }
  .hero-proof { gap: .6rem 1.2rem; font-size: .88rem; }
  .eyebrow { letter-spacing: .05em; }
}
.terminal-body[data-typewriter] { min-height: 300px; }
.mobile-nav .accordion-item { border-left: 0; border-right: 0; border-top: 0; border-radius: 0 !important; }
.mobile-nav .accordion-item:first-of-type { border-top: 0; }
.post-card .pc-body > .tag, .event-card .ev-body > .tag, .card-ctf > .tag, .format-card > .tag { align-self: flex-start; width: fit-content; }
@media (max-width: 575.98px) { .prose { font-size: 1.02rem; line-height: 1.75; } .key-takeaways { padding: 1.1rem 1.2rem; } }
.main-nav > li > .mega { max-width: calc(100vw - 32px); }
/* Comfortable side gutters at every width */
.container, .container-xl { padding-left: clamp(16px, 2.6vw, 40px); padding-right: clamp(16px, 2.6vw, 40px); }
@media (max-width: 1399.98px) { .fc-report { right: 0; } .fc-leaderboard { left: 0; } .fc-flag { left: 0; } }
@media (min-width: 992px) and (max-width: 1399.98px) { .fc-leaderboard { top: -3%; left: -2%; width: 215px; } .fc-leaderboard li { padding: .22rem .4rem; } .fc-leaderboard li:nth-child(5) { display: none; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .fc-koth { display: none; } .fc-report { top: 60%; width: 190px; } .fc-report .desc { display: none; } .fc-flag { bottom: 6%; } }
/* QA: footer link columns too cramped at 992-1199 (email overflowed viewport) — stack brand column above links */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-footer .container > .row > .col-lg-4, .site-footer .container > .row > .col-lg-8 { width: 100%; }
  .site-footer .container > .row > .col-lg-4 { display: grid; grid-template-columns: auto 1fr; column-gap: 3rem; align-items: start; }
  .site-footer .container > .row > .col-lg-4 > .brand { grid-column: 1 / -1; }
  .site-footer .container > .row > .col-lg-4 .f-about { grid-row: 2 / span 2; }
}
/* QA: visual polish pass */
/* small (2-3 column) comparison tables shouldn't force horizontal scroll on phones */
.compare-table:not(:has(tr > :nth-child(4))) { min-width: 0; }
.compare-table:has(tr > :nth-child(4)):not(:has(tr > :nth-child(5))) { min-width: 560px; }
@media (max-width: 767.98px) {
  .compare-table:not(:has(tr > :nth-child(4))) th, .compare-table:not(:has(tr > :nth-child(4))) td { padding: .8rem .75rem; }
}
/* paragraphs inside cards need breathing room */
.card-ctf p + p { margin-top: .75rem; }
/* long-form that opens with a heading shouldn't start 2.4em low */
.prose > :first-child { margin-top: 0; }
/* full-width timelines read too wide; match section-head measure */
.container > .steps { max-width: 960px; }
/* glossary definitions: keep a readable measure */
.term p, .term dd { max-width: 75ch; }
@media (max-width: 575.98px) {
  .cta-band .eyebrow { font-size: .68rem; letter-spacing: .04em; }
}
/* hero proof points: tighter row gap when they wrap (1024-1399) */
.hero-proof { row-gap: .8rem; }
/* tables inside half/two-thirds columns on desktop: don't force 640px (was clipping last column) */
@media (min-width: 992px) { [class*="col-lg-"] .compare-table { min-width: 0; } }
/* wide tables on phones: keep the row label visible while scrolling */
@media (max-width: 767.98px) {
  .compare-table:has(tr > :nth-child(4)) tbody th, .compare-table:has(tr > :nth-child(4)) thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--line-2); }
  .compare-table:has(tr > :nth-child(4)) tbody th { min-width: 118px; max-width: 150px; }
}
@media (max-width: 575.98px) {
  .compare-table { font-size: .88rem; }
  .compare-table th, .compare-table td { padding: .75rem .75rem; }
  .prose th, .prose td { min-width: 8.5rem; }
}
/* stacked feature rows need a gap */
:not(.d-grid):not(.row):not([class*="gap-"]) > .feature-row + .feature-row { margin-top: 1.1rem; }
/* mini-ui right-hand values/tags shouldn't wrap */
.mini-ui .row-i > .tag { white-space: nowrap; flex-shrink: 0; }
.mini-ui .row-i > span:last-child:not(:first-child):not(.tag) { flex-shrink: 0; max-width: 62%; text-align: right; }
.mini-ui .row-i > span:first-child { min-width: 0; }
/* readable measure for full-width callouts and footnotes */
.container > .callout { max-width: 960px; }
.container > .section-head.center ~ .callout { margin-left: auto; margin-right: auto; }
.container > p:not(.logos-label) { max-width: 92ch; }
.container > p.text-center { margin-left: auto; margin-right: auto; }
@media (max-width: 575.98px) {
  /* tab bars: wrapped buttons fill the row instead of leaving one orphan */
  .ctf-tabs { width: 100%; }
  .ctf-tabs button { flex: 1 1 auto; justify-content: center; }
  /* challenge-grid tiles */
  .chal-grid span { font-size: .6rem; white-space: nowrap; letter-spacing: -.02em; }
  /* static terminals: keep column-aligned output, scroll instead of wrapping */
  .terminal-body:not([data-typewriter]) { white-space: pre; overflow-x: auto; word-break: normal; font-size: .76rem; }
}
/* mobile hero: leaderboard card was covering the mascot's face/flag */
@media (max-width: 575.98px) {
  .fc-leaderboard { width: 172px; top: -1%; padding: .65rem .75rem; }
  .fc-leaderboard li { font-size: .74rem; padding: .25rem .4rem; }
  .fc-leaderboard li:nth-child(n+3) { display: none; }
}
/* event banners: avoid cropping key artwork in the 16:9 frame */
.event-card .ev-img img[src*="/bhi."] { object-position: 50% 100%; }
.event-card .ev-img:has(img[src*="/byteme."]) { background: #020d15; }
.event-card .ev-img img[src*="/byteme."] { object-fit: contain; }
.event-card .ev-img:has(img[src*="/identicode."]) { background: #08101b; }
.event-card .ev-img img[src*="/identicode."] { object-fit: contain; }
/* card headings using h2.h3/.h4 were inheriting the big .card-ctf h2 size */
.card-ctf h2.h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); margin: 1.1rem 0 .6rem; }
.card-ctf h2.h4, .card-ctf h2.h5 { font-size: 1.15rem; margin: 1rem 0 .5rem; }
/* feature rows inside prose: heading sits beside its icon */
.prose .feature-row h3, .prose .feature-row h4 { margin-top: .1rem; }
.prose .feature-row { margin-top: 1.6em; }
/* prose tables fill the column on tablet/desktop; scroll on phones */
@media (min-width: 768px) { .prose table, .prose .table-wrap > table { display: table; } }
@media (max-width: 767.98px) { .prose th, .prose td { min-width: 8.5rem; } }
.chal-grid span { white-space: nowrap; }
@media (max-width: 575.98px) { .eyebrow { border-radius: 12px; } }
/* CTA band: keep text clear of the mascot at 768-991 */
@media (min-width: 768px) and (max-width: 991.98px) { .cta-band .row > .col-lg-8 { flex: 0 0 64%; max-width: 64%; } }
/* homepage hero at 768-991: float cards covering mascot/flag */
@media (min-width: 768px) and (max-width: 991.98px) {
  .fc-leaderboard { width: 215px; }
  .fc-leaderboard li:nth-child(5) { display: none; }
  .fc-report { top: auto; bottom: 18%; width: 210px; }
}
/* odd item left alone in 2-up grids at tablet widths: let it span the row */
@media (min-width: 576px) and (max-width: 991.98px) {
  .row:not(:has(.event-card, .post-card, .form-control, .form-select)) > .col-md-6:last-child:nth-child(odd):not(.col-lg-3):not(.col-lg-6):not(.col-lg-12) { flex: 0 0 100%; max-width: 100%; }
  .bento > :last-child:nth-child(odd) { grid-column: span 12; }
}
/* 3-column mini-ui rows (e.g. comparison "at a glance") align in columns */
.mini-ui .row-i:has(> span:nth-child(3)):not(:has(> :not(span))) { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }
/* :not(:first-child):not(.tag) matches the 62% cap's specificity so this wins; the cap
   is for flex rows and squeezed long names (KotH "0xDEADBEEF") out of the grid cell */
.mini-ui .row-i:has(> span:nth-child(3)):not(:has(> :not(span))) > span:last-child:not(:first-child):not(.tag) { text-align: right; justify-self: end; max-width: none; }
/* a cell of several status chips stays on one line (A/D service status) */
.mini-ui .row-i > span:has(> .tag + .tag) { white-space: nowrap; }
/* challenge tiles must never widen their grid */
.chal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chal-grid span { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 .25rem; }
@media (max-width: 991.98px) { .chal-grid span { font-size: .64rem; letter-spacing: -.02em; } }

/* Original ctf7.com typography: Nova Square (display, single 400 weight) + Kode Mono (body/mono).
   Avoid faux-bold and tight tracking on the square display face; monospace body reads better slightly smaller. */
h1, h2, h3, h4, h5, h6, .display-font, .brand, .btn, .stat .num, .price-card .price, .quote-card blockquote,
.mega a strong, .faq-item summary, .main-nav > li > a, .main-nav > li > button, .mobile-nav .accordion-button,
.mobile-nav .m-link, .toc a, .ctf-tabs button, .btn-link-ctf, .footer-wordmark { font-synthesis: none; }
h1, h2, h3, h4, h5, h6, .display-font, .stat .num, .price-card .price, .footer-wordmark, .quote-card blockquote { font-weight: 400; letter-spacing: 0; }
h1 { letter-spacing: -.01em; line-height: 1.08; }
/* Hybrid: Hanken Grotesk for reading, Kode Mono for UI accents (nav, buttons, labels) */
.main-nav > li > a, .main-nav > li > button, .header-cta .signin, .btn, .btn-link-ctf, .ctf-tabs button,
.mobile-nav .m-link, .mobile-nav .accordion-button, .mega a strong, .toc a { font-family: var(--font-mono); letter-spacing: -.01em; }
.faq-item summary { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.main-nav > li > a, .main-nav > li > button { font-size: .92rem; }
.btn { font-weight: 600; }
body { font-size: 1.0625rem; }
.prose { font-size: 1.09rem; }

/* ==========================================================================
   Light theme — toggled from the header (html[data-theme="light"])
   ========================================================================== */
html { color-scheme: dark; }
.theme-toggle { width: 38px; height: 38px; border-radius: 9px; display: inline-grid; place-items: center; flex-shrink: 0;
  background: transparent; border: 1px solid var(--line-2); color: var(--text-2); font-size: 1.05rem; transition: color .2s, border-color .2s, background .2s; }
.theme-toggle:hover { color: var(--orange); border-color: var(--orange); background: rgba(253,154,51,.08); }
.theme-toggle .bi-sun { display: none; }
[data-theme="light"] .theme-toggle .bi-sun { display: inline; }
[data-theme="light"] .theme-toggle .bi-moon-stars { display: none; }
.logo-on-light { display: none; }
[data-theme="light"] .logo-on-dark { display: none; }
[data-theme="light"] .logo-on-light { display: inline-block; }
/* product mockups stay dark in both themes */
.terminal, .dash, .prose pre { --ink-rgb: 255, 255, 255; --heading: #fff; --text-2: #c3cec7; --muted: #8d9b93; --orange: #fd9a33; --green: #34f55b; --red: #ff5d6c; --yellow: #ffd23f; --cyan: #3ee6ff; --violet: #a78bfa; --text: #e9f1eb; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); }

[data-theme="light"] {
  color-scheme: light;
  --bg: #fcfaf8;
  --bg-rgb: 252, 250, 248;
  --bg-2: #f6f1ec;
  --bg-deep: #efe7df;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-2: #f8f3ee;
  --surface-3: #f1e9e1;
  --term-bg: #140e0a;
  --ink-rgb: 45, 28, 12;
  --heading: #160f0a;
  --text: #1d1611;
  --text-2: #4b4038;
  --muted: #6a5f57;
  --line-green: rgba(22, 163, 74, .3);
  --line-orange: rgba(232, 115, 12, .35);
  --green: #126a30;
  --green-2: #15803d;
  --green-3: #0e8f2c;
  --green-btn: #16a34a;
  --green-glow: rgba(22, 163, 74, .25);
  --orange: #a34d04;
  --orange-fill: #e8730c;
  --orange-2: #d4620a;
  --orange-hover: #7f3a03;
  --orange-glow: rgba(232, 115, 12, .3);
  --cyan: #0b6580;
  --violet: #6d28d9;
  --red: #a81818;
  --yellow: #7a4f00;
  --shadow: 0 18px 44px -24px rgba(60, 35, 10, .22);
  --header-bg: rgba(252, 250, 248, .72);
  --header-bg-solid: rgba(252, 250, 248, .94);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--heading);
}
[data-theme="light"] .grad-text { background-image: linear-gradient(92deg, #16a34a 0%, #15803d 35%, #5c9e1e 65%, #e8730c 100%); }
[data-theme="light"] .glow { opacity: .22; }
[data-theme="light"] .bg-hex { opacity: .8; }
[data-theme="light"] .mobile-nav .btn-close { filter: none; }
[data-theme="light"] .hero-mascot, [data-theme="light"] .page-hero-mascot, [data-theme="light"] .cta-band .cta-mascot { filter: drop-shadow(0 24px 34px rgba(60,35,10,.22)); }
[data-theme="light"] .hero-floor { opacity: .45; }
[data-theme="light"] .card-ctf, [data-theme="light"] .price-card, [data-theme="light"] .form-panel, [data-theme="light"] .faq-item,
[data-theme="light"] .step, [data-theme="light"] .toc, [data-theme="light"] .stats-band, [data-theme="light"] .table-wrap,
[data-theme="light"] .ctf-tabs { background: var(--surface); box-shadow: 0 1px 2px rgba(60,35,10,.05), 0 10px 30px -20px rgba(60,35,10,.18); }
[data-theme="light"] .price-card.popular { background: radial-gradient(120% 80% at 50% 0%, rgba(232,115,12,.08), transparent 60%), var(--surface); }
[data-theme="light"] .format-card.featured { background: radial-gradient(120% 120% at 100% 0%, rgba(22,163,74,.08), transparent 50%), var(--surface); }
[data-theme="light"] .card-ctf.card-flat { background: none; box-shadow: none; }
[data-theme="light"] .float-card { background: rgba(255,255,255,.92); box-shadow: 0 16px 40px -18px rgba(60,35,10,.3); }
[data-theme="light"] .mini-ui { background: var(--surface-2); }
[data-theme="light"] .media-frame::after { background: none; }
[data-theme="light"] .cta-band { background: radial-gradient(80% 140% at 100% 100%, rgba(232,115,12,.14), transparent 55%), radial-gradient(80% 140% at 0% 0%, rgba(22,163,74,.1), transparent 55%), var(--surface); }
[data-theme="light"] .post-card .pc-art { background: radial-gradient(80% 120% at 20% 0%, rgba(22,163,74,.14), transparent 60%), radial-gradient(80% 120% at 100% 100%, rgba(232,115,12,.14), transparent 60%), var(--surface-3); }
[data-theme="light"] code { background: rgba(232,115,12,.1); }
[data-theme="light"] .prose pre code, [data-theme="light"] .terminal code { background: none; }
[data-theme="light"] .form-ctf .form-select option { background: #fff; color: var(--text); }
[data-theme="light"] .event-card .ev-date { background: rgba(255,255,255,.9); }
/* light mode: header needs its own surface so it stands off the page */
[data-theme="light"] .site-header { background: rgba(255, 255, 255, .9); border-bottom: 1px solid rgba(45, 28, 12, .09); box-shadow: 0 1px 2px rgba(60, 35, 10, .05), 0 6px 20px -10px rgba(60, 35, 10, .18); }
[data-theme="light"] .site-header.is-scrolled { background: rgba(255, 255, 255, .96); border-bottom-color: rgba(45, 28, 12, .12); box-shadow: 0 1px 2px rgba(60, 35, 10, .06), 0 10px 28px -12px rgba(60, 35, 10, .26); }
[data-theme="light"] .mega { background: #fff; box-shadow: 0 24px 48px -20px rgba(60, 35, 10, .28); }

/* ==========================================================================
   CTF7 cursor — faceted green arrow + orange hex "target lock" on interactive elements
   ========================================================================== */
:root {
  --cursor-default: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M4 3 L4 25 L10 19.5 L14.2 28.4 L18.6 26.4 L14.5 17.6 L22.5 17.6 Z%22 fill=%22%23060907%22 stroke=%22%23060907%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M4 3 L4 25 L10 19.5 L14.2 28.4 L18.6 26.4 L14.5 17.6 L22.5 17.6 Z%22 fill=%22%2334f55b%22/%3E%3Cpath d=%22M4 3 L22.5 17.6 L14.5 17.6 L18.6 26.4 L14.2 28.4 L10 19.5 Z%22 fill=%22%230e8f2c%22 opacity=%22.55%22/%3E%3Cpath d=%22M4 3 L4 25%22 stroke=%22%23c8ffd4%22 stroke-width=%221%22 opacity=%22.7%22/%3E%3Crect x=%225.6%22 y=%228%22 width=%222.4%22 height=%222.4%22 fill=%22%23fd9a33%22/%3E%3C/svg%3E") 4 3, auto;
  --cursor-target: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg fill=%22none%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cpolygon points=%2216,4 26.4,10 26.4,22 16,28 5.6,22 5.6,10%22 stroke=%22%23060907%22 stroke-width=%224.2%22/%3E%3Cpolygon points=%2216,4 26.4,10 26.4,22 16,28 5.6,22 5.6,10%22 stroke=%22%23fd9a33%22 stroke-width=%222.2%22/%3E%3Cpath d=%22M16 0.8v4M16 27.2v4M0.8 16h4.6M26.6 16h4.6%22 stroke=%22%23060907%22 stroke-width=%223.6%22/%3E%3Cpath d=%22M16 1.2v3.4M16 27.4v3.4M1.2 16h4.2M26.6 16h4.2%22 stroke=%22%23fd9a33%22 stroke-width=%221.6%22/%3E%3C/g%3E%3Ccircle cx=%2216%22 cy=%2216%22 r=%223.1%22 fill=%22%23060907%22/%3E%3Ccircle cx=%2216%22 cy=%2216%22 r=%222%22 fill=%22%2334f55b%22/%3E%3C/svg%3E") 16 16, pointer;
}
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: var(--cursor-default); }
  a, button, summary, label[for], select, [role="button"], [role="tab"], .btn, .btn-check + .btn,
  input[type="checkbox"], input[type="radio"], input[type="range"], input[type="submit"], input[type="button"],
  .accordion-button, .marquee-track img { cursor: var(--cursor-target); }
  input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="number"],
  input[type="tel"], input[type="password"], textarea, [contenteditable="true"] { cursor: text; }
  :disabled, [aria-disabled="true"], .disabled { cursor: not-allowed; }
}
/* hex lock-on ring that trails the pointer (added by ctf7.js on fine pointers only) */
.cursor-ring { position: fixed; left: 0; top: 0; z-index: 2147483000; width: 38px; height: 38px; margin: -19px 0 0 -19px; pointer-events: none;
  opacity: 0; transition: opacity .2s; will-change: transform; }
.cursor-ring.on { opacity: 1; }
.cursor-ring svg { display: block; width: 100%; height: 100%; overflow: visible; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.cursor-ring polygon { fill: none; stroke: var(--green); stroke-width: 1.4; stroke-dasharray: 10 6; opacity: .28; transition: stroke .2s, opacity .2s, stroke-dasharray .3s; }
.cursor-ring.lock svg { transform: scale(1.45) rotate(30deg); }
.cursor-ring.lock polygon { stroke: var(--orange); opacity: .45; stroke-dasharray: 60 0; }
.cursor-ring.press svg { transform: scale(.8) rotate(30deg); }
.cursor-ring.hide { opacity: 0 !important; }
.cursor-ping { position: fixed; z-index: 2147482999; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; border: 2px solid var(--orange);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: cursorPing .5s ease-out forwards; }
@keyframes cursorPing { from { transform: scale(.6); opacity: .4; } to { transform: scale(3.2); opacity: 0; } }
.cursor-ring polygon.u { stroke: #060907; stroke-width: 3.6; opacity: 0; stroke-dasharray: 60 0; }
.cursor-ring.lock polygon.u { stroke: #060907; opacity: .22; }
/* keep coloured buttons coloured while pressed (Bootstrap's :active would blank them) */
.btn-ctf:active, .btn-ctf.active, .btn-ctf:first-child:active, :not(.btn-check) + .btn-ctf:active { background: var(--orange-fill); border-color: var(--orange-fill); color: var(--on-orange); filter: brightness(.95); transform: translateY(0); }
.btn-orange:active, .btn-orange.active, .btn-orange:first-child:active, :not(.btn-check) + .btn-orange:active { background: var(--green-btn); border-color: var(--green-btn); color: var(--on-orange); filter: brightness(.95); transform: translateY(0); }

/* Client logos: monochrome at rest, original colours on hover.
   Dark theme shows the colour logo on a white chip, since many marks have dark artwork. */
.client-logo { box-sizing: content-box; padding: 6px 10px; border-radius: 10px; background: transparent;
  filter: brightness(0) invert(1); opacity: .62; transition: filter .3s, opacity .3s, background-color .3s, box-shadow .3s; }
.client-logo:hover, .card-ctf:hover .client-logo { filter: none; opacity: 1; background-color: #fff; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); }
[data-theme="light"] .client-logo { filter: brightness(0); opacity: .55; }
[data-theme="light"] .client-logo:hover, [data-theme="light"] .card-ctf:hover .client-logo { filter: none; opacity: 1; background-color: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .client-logo { transition: none; } }

/* ==========================================================================
   Header layout: logo | centered menu | right-aligned action group
   ========================================================================== */
.site-header .container { gap: 1.5rem; }
.site-header nav[aria-label="Primary"] { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.main-nav { margin: 0; gap: .25rem; }
.main-nav > li > a, .main-nav > li > button { height: 38px; padding: 0 .85rem; border-radius: 9px; position: relative; }
.main-nav > li > a.active, .main-nav > li > button.active { color: var(--heading); background: transparent; }
.main-nav > li > a.active::after, .main-nav > li > button.active::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 2px; height: 2px; border-radius: 2px; background: var(--orange-fill); }
.main-nav > li > button.active::after { right: 1.75rem; }
.main-nav > li > a.active:hover, .main-nav > li > button.active:hover { background: rgba(var(--ink-rgb), .06); }
.header-cta { gap: .6rem; margin-left: 0; }
.header-cta .btn-sm { height: 38px; padding: 0 1rem; font-size: .9rem; border-radius: 9px; }
.cta-divider { width: 1px; height: 22px; background: var(--line-2); margin: 0 .15rem; }
.header-cta .signin { height: 38px; display: inline-flex; align-items: center; padding: 0 .7rem; border-radius: 9px; color: var(--text-2); }
.header-cta .signin:hover { color: var(--heading); background: rgba(var(--ink-rgb), .06); }
.header-cta .btn-ghost { background: transparent; border-color: var(--line-2); color: var(--heading); }
.header-cta .btn-ghost:hover { border-color: var(--orange); color: var(--orange); background: rgba(253,154,51,.06); transform: none; }
.header-cta .btn-ctf:hover { transform: none; }
.nav-toggle { width: 38px; height: 38px; border-radius: 9px; font-size: 1.25rem; }
/* 1200-1399: keep everything on one line */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-header .container { gap: .9rem; }
  .main-nav { gap: .05rem; }
  .main-nav > li > a, .main-nav > li > button { padding: 0 .6rem; font-size: .88rem; }
  .main-nav > li > a.active::after { left: .6rem; right: .6rem; }
  .main-nav > li > button.active::after { left: .6rem; right: 1.45rem; }
  .header-cta { gap: .4rem; }
  .header-cta .signin { padding: 0 .5rem; }
  .header-cta .btn-sm { padding: 0 .8rem; }
}
/* below 1200: logo | spacer | toggle · Get started · menu */
@media (max-width: 1199.98px) {
  .site-header nav[aria-label="Primary"], .cta-divider { display: none; }
  .header-cta { margin-left: auto; gap: .5rem; }
  .header-cta + .nav-toggle { margin-left: .5rem; }
  .site-header .container { gap: 0; }
}
@media (max-width: 420px) { .header-cta .btn-ctf { display: inline-flex; padding: 0 .75rem; font-size: .84rem; } }
@media (max-width: 359.98px) { .header-cta .btn-ctf { display: none; } }
@media (max-width: 767.98px) { .header-cta .signin { display: none; } }
.mega { background: var(--surface); }

/* ==========================================================================
   Visual system (replaces the old terminal mockups)
   .viz        framed illustration panel for inline SVG / HTML graphics
   .code-panel non-terminal code block, only where literal commands are the content
   .v-*        SVG paint classes that follow the light/dark theme
   ========================================================================== */
.viz { position: relative; border: 1px solid var(--line-2); border-radius: 18px; background:
  radial-gradient(90% 70% at 85% 0%, rgba(52,245,91,.07), transparent 60%),
  radial-gradient(70% 60% at 0% 100%, rgba(253,154,51,.06), transparent 60%), var(--surface);
  overflow: hidden; box-shadow: var(--shadow); isolation: isolate; }
.viz::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M14 33L0 25V8.5L14 .5l14 8V25L14 33zm0 16L0 41v-8l14 8 14-8v8L14 49z' fill='none' stroke='rgba(127,127,127,0.09)' stroke-width='1'/%3E%3C/svg%3E"); }
.viz > svg { display: block; width: 100%; height: auto; }
.viz-body { padding: clamp(1rem, .8rem + 1vw, 1.6rem); }
.viz-cap { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.viz-cap .hx { width: 10px; height: 11px; flex: 0 0 auto; background: var(--green); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); margin-right: .55rem; display: inline-block; vertical-align: -1px; }
.viz-cap .hx.o { background: var(--orange-fill); }
.viz-cap .chip { font-size: .66rem; letter-spacing: .06em; padding: .2rem .5rem; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-2); }
.viz-foot { padding: .7rem 1.1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }

/* SVG paint — use as class="v-stroke" etc. inside inline SVG */
.viz svg text, svg.v text { font-family: var(--font-mono); }
.v-ink { fill: var(--heading); } .v-text { fill: var(--text-2); } .v-muted { fill: var(--muted); }
.v-green { fill: var(--green); } .v-orange { fill: var(--orange); } .v-red { fill: var(--red); } .v-cyan { fill: var(--cyan); } .v-violet { fill: var(--violet); }
.v-surface { fill: var(--surface); } .v-surface-2 { fill: var(--surface-2); } .v-surface-3 { fill: var(--surface-3); } .v-bg { fill: var(--bg); }
.v-tint-green { fill: rgba(52,245,91,.12); } .v-tint-orange { fill: rgba(253,154,51,.12); } .v-tint-red { fill: rgba(255,93,108,.12); } .v-tint-ink { fill: rgba(var(--ink-rgb),.05); }
.v-stroke { fill: none; stroke: var(--line-2); stroke-width: 1.2; } .v-stroke-soft { fill: none; stroke: var(--line); stroke-width: 1; }
.v-stroke-green { fill: none; stroke: var(--green); stroke-width: 1.6; } .v-stroke-orange { fill: none; stroke: var(--orange); stroke-width: 1.6; }
.v-stroke-red { fill: none; stroke: var(--red); stroke-width: 1.6; } .v-stroke-muted { fill: none; stroke: var(--muted); stroke-width: 1.2; }
[data-theme="light"] .v-tint-green { fill: rgba(22,163,74,.1); } [data-theme="light"] .v-tint-orange { fill: rgba(232,115,12,.1); }
/* motion helpers (all disabled under reduced motion) */
.v-flow { stroke-dasharray: 6 8; animation: vFlow 1.6s linear infinite; }
@keyframes vFlow { to { stroke-dashoffset: -28; } }
.v-pulse { transform-box: fill-box; transform-origin: center; animation: vPulse 2.4s ease-in-out infinite; }
@keyframes vPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.92); } }
.v-blink { animation: vBlink 1.4s steps(1) infinite; } @keyframes vBlink { 50% { opacity: .25; } }
.v-spin { transform-box: fill-box; transform-origin: center; animation: spin 24s linear infinite; }
.v-float { animation: floaty 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .v-flow, .v-pulse, .v-blink, .v-spin, .v-float { animation: none !important; } }

/* Code panel: hex glyph + label + language chip, line rule; no window chrome */
.code-panel { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--term-bg); box-shadow: var(--shadow); font-family: var(--font-mono); font-size: .84rem;
  --ink-rgb: 255, 255, 255; --heading: #fff; --text-2: #c3cec7; --muted: #8d9b93; --orange: #fd9a33; --green: #34f55b; --red: #ff5d6c; --yellow: #ffd23f; --cyan: #3ee6ff; --violet: #a78bfa; --text: #e9f1eb; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); }
.code-panel .cp-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(52,245,91,.08), transparent 55%); }
.code-panel .cp-head .hx { width: 10px; height: 11px; background: var(--green); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.code-panel .cp-head .lbl { color: var(--text-2); font-size: .75rem; letter-spacing: .04em; }
.code-panel .cp-head .lang { margin-left: auto; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); border: 1px solid rgba(253,154,51,.35); border-radius: 6px; padding: .12rem .45rem; }
.code-panel pre { margin: 0; padding: .9rem 1rem 1rem 1.1rem; color: #c3cec7; line-height: 1.75; white-space: pre-wrap; word-break: break-word; border-left: 2px solid rgba(52,245,91,.35); background: none; border-radius: 0; font-size: inherit; }
.code-panel .p { color: var(--green); } .code-panel .o { color: var(--orange); } .code-panel .c { color: var(--muted); } .code-panel .w { color: #fff; }
@media (max-width: 575.98px) { .code-panel pre { white-space: pre; overflow-x: auto; word-break: normal; font-size: .76rem; } }
/* Kode Mono ligatures (==, ->, =>) garble code inside graphics */
.viz, .viz svg text, .code-panel { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* ==========================================================================
   Hyprland-style terminal (not a Mac window): no title bar, rounded tile,
   orange→green gradient border on the active window, starship-style prompt,
   optional Waybar strip + tiled workspace. Always dark, in both themes.
   ========================================================================== */
.hypr { --gap: 10px; margin: 0; font-family: var(--font-mono); font-size: .84rem; font-variant-ligatures: none; }
.prose .hypr { margin-top: 1.25em; }
.hypr-win { position: relative; border-radius: 12px; padding: 2px; background: rgba(127,127,127,.22); min-width: 0; }
.hypr-win.active { background: linear-gradient(135deg, #fd9a33, #34f55b 70%); box-shadow: 0 18px 44px -26px rgba(253,154,51,.5); }
.hypr-in { height: 100%; border-radius: 10px; background: #0b0f0c; padding: 14px 16px; color: #c3cec7; line-height: 1.75; overflow: hidden; }
[data-theme="light"] .hypr-in { background: #15110d; }
[data-theme="light"] .hypr-win.active { box-shadow: 0 16px 36px -24px rgba(232,115,12,.45); }
.hypr-tag { position: absolute; top: 8px; right: 12px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #6f7c74; pointer-events: none; }
.hypr pre { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; line-height: inherit; white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
.hypr pre code { background: none; color: inherit; padding: 0; font-size: inherit; border-radius: 0; }
.hypr .hp { display: inline-flex; align-items: stretch; line-height: 1.55; vertical-align: 1px; margin-right: .1rem; }
.hypr .hp .u { background: #fd9a33; color: #1d0e00; padding: 0 .5rem; border-radius: 6px 0 0 6px; font-weight: 600; }
.hypr .hp .d { background: rgba(52,245,91,.16); color: #34f55b; padding: 0 .5rem; border-radius: 0 6px 6px 0; }
.hypr .ha { color: #34f55b; margin: 0 .35rem 0 .3rem; }
.hypr .w { color: #fff; } .hypr .c { color: #7f8b84; } .hypr .o { color: #fd9a33; } .hypr .g { color: #34f55b; } .hypr .r { color: #ff5d6c; }
.hypr .cur { display: inline-block; width: .55em; height: 1.05em; background: #34f55b; vertical-align: -.18em; animation: blink 1.1s steps(1) infinite; }
/* Waybar strip + tiled workspace */
.hypr-bar { display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 4px; margin-bottom: var(--gap); font-size: .72rem; color: var(--text-2); }
.hypr-ws { display: flex; gap: 6px; }
.hypr-ws span { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: rgba(var(--ink-rgb), .07); color: var(--muted); font-size: .64rem; }
.hypr-ws span.on { width: 34px; background: var(--orange-fill); color: var(--on-orange); }
.hypr-title { margin: 0 auto; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hypr-mods { display: flex; gap: 12px; color: var(--muted); white-space: nowrap; }
.hypr-mods b { color: var(--green); font-weight: 500; }
.hypr-tiles { display: grid; gap: var(--gap); grid-template-columns: 1.6fr 1fr; grid-auto-rows: auto; }
.hypr-tiles > .tall { grid-row: span 2; }
.hypr-mini-head { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #7f8b84; margin-bottom: .55rem; }
@media (max-width: 767.98px) {
  .hypr-tiles { grid-template-columns: 1fr; } .hypr-tiles > .tall { grid-row: auto; }
  .hypr-title { display: none; } .hypr-mods { margin-left: auto; }
}
@media (max-width: 575.98px) { .hypr { font-size: .76rem; } .hypr-in { padding: 12px 12px; } }
@media (prefers-reduced-motion: reduce) { .hypr .cur { animation: none; } }
/* phones: drop the user@dir segments (keep ❯) so commands get the full line; hide corner tags */
@media (max-width: 575.98px) { .hypr .hp { display: none; } .hypr .ha { margin-left: 0; } }
@media (max-width: 767.98px) { .hypr-tag { display: none; } }

/* Highlighted nav item: Free Practice Arena (Ouroboros) */
.mega a:has(.bi-snake) {
  background: rgba(52, 245, 91, 0.05);
  border: 1px solid rgba(52, 245, 91, 0.2);
  border-radius: 10px;
}
.mega a:has(.bi-snake) .mi {
  background: rgba(52, 245, 91, 0.22);
  border-color: rgba(52, 245, 91, 0.5);
  box-shadow: 0 0 12px rgba(52, 245, 91, 0.35);
}
.mega a:has(.bi-snake):hover {
  background: rgba(52, 245, 91, 0.1);
  border-color: rgba(52, 245, 91, 0.4);
}

/* Top-level pricing link enhancement & badge */
.main-nav > li > a.has-badge {
  display: inline-flex;
  align-items: center;
}
.nav-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: rgba(52, 245, 91, .14);
  color: var(--green);
  border: 1px solid rgba(52, 245, 91, .32);
  line-height: 1;
  letter-spacing: 0;
  margin-left: .4rem;
  transition: all .15s ease;
}
.main-nav > li > a:hover .nav-badge {
  background: rgba(52, 245, 91, .25);
  border-color: rgba(52, 245, 91, .55);
}

/* Cookie consent banner (templates/partials/_consent_banner.html, js/consent.js).
   Sits above the back-to-top button; both choices share one button style. */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080; display: flex; justify-content: center; pointer-events: none; }
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner { pointer-events: auto; width: 100%; max-width: 560px; padding: 1.15rem 1.25rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: rgba(var(--surface-rgb), .97); color: var(--text); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.cookie-banner-title { font-family: var(--font-display); font-size: 1rem; color: var(--heading); margin: 0 0 .45rem; }
.cookie-banner-title:focus { outline: none; }
.cookie-banner-title:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cookie-banner-text { font-size: .92rem; color: var(--text-2, var(--text)); margin: 0 0 .5rem; }
.cookie-banner-text a { color: var(--orange); text-decoration: underline; }
.cookie-banner-status { font-size: .85rem; color: var(--muted); margin: 0 0 .5rem; }
.cookie-banner-status:empty { display: none; }
.cookie-banner-panel { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
.cookie-banner-panel[hidden] { display: none; }
.cookie-switch { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-size: .92rem; color: var(--text); cursor: pointer; }
.cookie-switch input { appearance: none; -webkit-appearance: none; flex: none; width: 2.4rem; height: 1.35rem; margin: 0; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2, transparent); position: relative; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.cookie-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.35rem - 6px); height: calc(1.35rem - 6px); border-radius: 50%; background: var(--muted); transition: transform .15s ease, background .15s ease; }
.cookie-switch input:checked { background: var(--green); border-color: var(--green); }
.cookie-switch input:checked::after { transform: translateX(1.05rem); background: var(--bg); }
.cookie-switch input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cookie-banner-panel .btn { margin-left: auto; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
@media (max-width: 575.98px) { .cookie-banner { left: 10px; right: 10px; bottom: 10px; } .cookie-banner-actions .btn { flex: 1 1 0; } }

/* ==========================================================================
   Accessibility layer
   Contrast tokens: --orange is orange used as TEXT (darker in the light
   theme), --orange-fill is orange used as a FILL, --on-orange the text on it.
   ========================================================================== */
.text-heading { color: var(--heading) !important; }

/* Keyboard focus: Bootstrap's `.btn:focus-visible { outline: 0 }` otherwise
   wins over the global ring and leaves custom buttons with no indicator. */
.btn:focus-visible, .btn-ctf:focus-visible, .btn-orange:focus-visible, .btn-ghost:focus-visible, .btn-outline-ctf:focus-visible,
.btn-check:focus-visible + .btn, .ctf-tabs button:focus-visible, .theme-toggle:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px; box-shadow: none;
}
.form-ctf .form-control:focus-visible, .form-ctf .form-select:focus-visible, .form-ctf .form-check-input:focus-visible,
.newsletter input:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px;
}
.form-ctf .form-control.is-invalid:focus-visible, .form-ctf .form-select.is-invalid:focus-visible { outline-color: var(--red); }
.btn-ctf:focus-visible, .btn-orange:focus-visible { transform: none; }

/* Inline links in running text are underlined, not distinguished by colour alone. */
main :is(p, li, dd, .faq-a) a:not([class]):not(nav a, .breadcrumbs a, .toc a),
main .prose a:not(.btn), main .callout a:not([class]) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
main :is(p, li, dd, .faq-a) a:not([class]):not(nav a, .breadcrumbs a, .toc a):hover { text-decoration-thickness: 2px; }

/* Inline code wraps instead of forcing horizontal scroll (pre blocks keep scrolling). */
:not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }

/* The dash mockup stays dark in both themes, including its mini-ui rows. */
[data-theme="light"] .dash .mini-ui { background: rgba(0, 0, 0, .35); }

.dash { color: var(--text); }

/* Scroll cue for wide tables: edge shadows (attached to the box) appear only
   while content is hidden on that side, because covers painted in the box's own
   background (attached to the content) slide over them at either end. The
   covers must match what sits behind them, so the colour is a variable:
   --cue-bg is the page background (section-alt sets its own), and .table-wrap
   adds its faint tint on top, or is plain --surface in the light theme. */
:root { --cue-bg: var(--bg); }
.section-alt { --cue-bg: var(--bg-2); }
/* a card's own tint (rgba ink .025 on the page in dark, --surface in light) */
.card-ctf { --cue-bg: color-mix(in srgb, rgb(var(--ink-rgb)) 2.5%, var(--bg)); }
[data-theme="light"] .card-ctf { --cue-bg: var(--surface); }
[data-theme="light"] .card-ctf.card-flat { --cue-bg: inherit; }
/* [data-theme] repeats .table-wrap so this wins over the light theme's plain
   `background: var(--surface)` on cards and wraps */
.table-wrap, .prose table, [data-theme="light"] .table-wrap {
  --cue-shadow: rgba(var(--ink-rgb), .24);
  background:
    linear-gradient(to right, var(--cue-cover) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--cue-cover) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--cue-shadow), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--cue-shadow), transparent) right center / 14px 100% no-repeat scroll,
    var(--cue-cover);
}
.prose table { --cue-cover: var(--cue-bg); }
.table-wrap { --cue-cover: color-mix(in srgb, rgb(var(--ink-rgb)) 1.5%, var(--cue-bg)); }
[data-theme="light"] .table-wrap { --cue-cover: var(--surface); }
[data-theme="light"] .table-wrap, [data-theme="light"] .prose table { --cue-shadow: rgba(var(--ink-rgb), .2); }
/* Bootstrap .table paints every cell in the opaque body colour, hiding the cue */
.prose table.table { --bs-table-bg: transparent; }
/* inside a wrap the wrap scrolls, so the table stays a plain table */
.prose .table-wrap > table { display: table; background: none; }

/* CVSS calculator: the phone score bar sticks over the form, so it needs an
   opaque fill (a card's own background is a translucent tint in the dark theme) */
#cvss-mini { background: var(--surface-2); border-color: var(--line-2); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); }
[data-theme="light"] #cvss-mini { background: var(--surface); box-shadow: 0 10px 28px -12px rgba(60, 35, 10, .3); }
/* clear the fixed back-to-top button (right 18px, 46px wide) at the bar's right end */
@media (max-width: 991.98px) { #cvss-mini { margin-right: 50px; } }