:root {
  --bio-lime: #cef79e;
  --abyss: #222f30;
  --bone: #f7f7f5;
  --paper: #ffffff;
  --graphite: #4d5757;
  --lichen: #c9cbbe;
  --tissue: #e7e8e1;
  --void: #000000;
}

html { scroll-behavior: smooth; background: var(--abyss); }
body { background: var(--abyss) !important; color: var(--abyss); }
body > div { --ac: var(--bio-lime) !important; background: var(--abyss) !important; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, a, button, label, [style*="letter-spacing"] { letter-spacing: 0 !important; }
::selection { background: var(--bio-lime) !important; color: var(--abyss) !important; }

.v4-site { display: flex; flex-direction: column; min-height: 100vh; }
.v4-nav { order: 0; }
.v4-hero { order: 1; }
section[data-screen-label="Trust and Safety"] { order: 2; }
#directory { order: 3; }
#categories { order: 4; }
#platforms { order: 5; }
#sources { order: 6; }
#developers { order: 7; }
section[data-screen-label="Future Vision"] { order: 8; }
footer[data-screen-label="Footer"] { order: 9; }

body > div > div:first-child { display: none !important; }

.v4-nav {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 80 !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
.v4-nav > div { max-width: none !important; height: 86px !important; padding: 16px clamp(18px, 3vw, 48px) !important; }
.v4-brand-mark { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; background: var(--bio-lime); color: var(--abyss); font-size: 13px; font-weight: 700; }
.v4-nav > div > div:first-child > div:nth-child(2) { font-weight: 400 !important; }
.v4-nav nav {
  margin-left: auto;
  gap: 0 !important;
  padding: 4px;
  border-radius: 12px;
  background: rgba(247,247,245,.86);
  backdrop-filter: blur(12px);
}
.v4-nav nav a { padding: 10px 15px; border-radius: 8px; color: var(--abyss) !important; font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; }
.v4-nav nav a:hover { background: rgba(34,47,48,.1); }
.v4-nav > div > div:last-child { margin-left: 6px; }
.v4-nav > div > div:last-child a { padding: 11px 17px !important; border: 1px solid rgba(247,247,245,.65) !important; border-radius: 8px !important; background: var(--abyss) !important; color: #fff !important; font-family: 'IBM Plex Mono', monospace; font-size: 10px !important; text-transform: uppercase; }
.v4-nav.is-light > div > div:first-child > div:nth-child(2) { color: var(--abyss) !important; }

.v4-hero {
  position: relative;
  height: 96svh;
  min-height: 720px;
  padding: 0 !important;
  overflow: hidden;
  background: var(--abyss) !important;
  color: #fff;
}
.v4-hero-video { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: contrast(1.12) saturate(.84); transform: scale(1.03); }
.v4-hero-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,23,23,.26), rgba(13,23,23,.04) 48%, rgba(13,23,23,.58)), linear-gradient(90deg, rgba(12,20,20,.58), transparent 62%); }
.v4-section-marker { position: absolute; z-index: 4; right: clamp(18px,3vw,48px); top: 50%; font: 11px 'IBM Plex Mono', monospace; color: rgba(255,255,255,.55); writing-mode: vertical-rl; }

.v4-hero-inner { position: relative !important; z-index: 5; width: 100%; max-width: none !important; height: 100%; padding: 0 clamp(20px,3.5vw,56px); pointer-events: none; }
.v4-hero-copy { position: absolute; inset: 0; max-width: none !important; min-width: 0 !important; padding: 132px clamp(20px,3.5vw,56px) 36px; pointer-events: auto; }
.v4-eyebrow { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: rgba(255,255,255,.72) !important; font-size: 10px !important; }
.v4-eyebrow > span:first-child { width: 6px !important; height: 6px !important; }
.v4-eyebrow > span:first-child span:first-child { background: var(--bio-lime) !important; }
.v4-eyebrow > span:first-child span:last-child { display: none; }
.v4-hero-copy h1 { margin-top: 20px !important; max-width: 10ch; font-size: clamp(72px,9.7vw,148px) !important; line-height: .92 !important; font-weight: 400 !important; color: #fff !important; }
.v4-hero-copy h1 span { color: #fff !important; background: none !important; -webkit-text-fill-color: #fff !important; animation: none !important; }
.v4-hero-copy h1 + p { position: absolute; left: clamp(20px,3.5vw,56px); bottom: 38px; max-width: 49ch !important; margin: 0 !important; color: rgba(255,255,255,.9) !important; font-size: 16px !important; line-height: 1.48 !important; }
.v4-actions { position: absolute; right: clamp(20px,3.5vw,56px); bottom: 38px; margin: 0 !important; gap: 6px !important; }
.v4-actions a { min-height: 44px; padding: 11px 17px !important; border-radius: 8px !important; box-shadow: none !important; font-family: 'IBM Plex Mono', monospace; font-size: 11px !important; text-transform: uppercase; }
.v4-actions a:first-child { background: var(--abyss) !important; color: #fff !important; }
.v4-actions a:first-child svg { margin-left: 12px; }
.v4-actions a:last-child { display: none !important; }

section:not(.v4-hero) { position: relative; padding: clamp(74px,8vw,118px) clamp(18px,4vw,48px) !important; }
section:not(.v4-hero) > div { max-width: 1220px !important; }
section:not(.v4-hero) h2 { font-size: clamp(42px,5.6vw,82px) !important; line-height: 1.02; font-weight: 400 !important; color: inherit !important; }
section:not(.v4-hero) [style*="text-transform: uppercase"] { font-size: 11px !important; font-family: 'IBM Plex Mono', monospace !important; }
.v4-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.v4-reveal.is-visible { opacity: 1; transform: none; }

section[data-screen-label="Trust and Safety"] { min-height: 92svh; display: flex; align-items: center; background: var(--abyss) !important; color: #fff; }
section[data-screen-label="Trust and Safety"]::before { content: "Trust before reach."; position: absolute; left: 50%; top: 100px; width: 44%; color: rgba(255,255,255,.52); font-size: clamp(34px,4vw,58px); line-height: 1.04; font-weight: 400; }
section[data-screen-label="Trust and Safety"] > div > div:first-child { width: 45%; margin-bottom: 70px !important; }
section[data-screen-label="Trust and Safety"] > div > div:nth-child(2) { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
section[data-screen-label="Trust and Safety"] [style*="border-radius: 18px"],
section[data-screen-label="Trust and Safety"] [style*="border-radius: 16px"] { border-radius: 16px !important; border-color: var(--graphite) !important; background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; }
section[data-screen-label="Trust and Safety"] [style*="color: #97A6BC"] { color: rgba(255,255,255,.66) !important; }

#directory, #categories, #platforms, #sources, #developers { background: var(--bone) !important; color: var(--abyss); }
#directory { border-radius: 40px 40px 0 0; }
#directory [style*="color: #FFFFFF"], #categories [style*="color: #FFFFFF"], #platforms [style*="color: #FFFFFF"], #sources [style*="color: #FFFFFF"], #developers [style*="color: #FFFFFF"] { color: var(--abyss) !important; }
#directory [style*="color: #97A6BC"], #categories [style*="color: #97A6BC"], #platforms [style*="color: #97A6BC"], #sources [style*="color: #97A6BC"], #developers [style*="color: #97A6BC"] { color: var(--graphite) !important; }
#directory [style*="color: #66768B"], #categories [style*="color: #66768B"], #platforms [style*="color: #66768B"], #sources [style*="color: #66768B"], #developers [style*="color: #66768B"] { color: #778080 !important; }
#directory [style*="color: var(--ac"], #categories [style*="color: var(--ac"], #platforms [style*="color: var(--ac"], #sources [style*="color: var(--ac"], #developers [style*="color: var(--ac"] { color: var(--graphite) !important; }

.directory-controls { margin: 0 0 22px; padding: 14px; border: 1px solid var(--lichen); border-radius: 16px; background: var(--paper); }
.directory-control-field { color: var(--graphite) !important; }
.directory-control-field input, .directory-control-field select, .submit-bot-form input, .submit-bot-form select, .submit-bot-form textarea { border-radius: 8px !important; border-color: var(--lichen) !important; background: var(--bone) !important; color: var(--abyss) !important; box-shadow: none !important; }
.directory-control-field input:focus, .directory-control-field select:focus, .submit-bot-form input:focus, .submit-bot-form select:focus, .submit-bot-form textarea:focus { border-color: var(--graphite) !important; box-shadow: 0 0 0 2px rgba(34,47,48,.08) !important; }
.directory-reset-button { border-radius: 8px !important; border-color: var(--graphite) !important; background: transparent !important; color: var(--abyss) !important; }
#bot-directory-grid { gap: 14px !important; }
#directory article { border-radius: 20px !important; border-color: var(--lichen) !important; background: var(--paper) !important; backdrop-filter: none !important; box-shadow: none !important; transition: transform .2s ease, border-color .2s ease; }
#directory article:hover { transform: translateY(-4px); border-color: var(--graphite) !important; }
#directory article [style*="color: #E6ECF5"], #directory article [style*="color: #C5D0DF"] { color: var(--abyss) !important; }
#directory article button { color: var(--abyss) !important; }
#directory article > div:nth-child(2) > div:first-child { border-radius: 12px !important; border: 0 !important; background: var(--tissue) !important; color: var(--abyss) !important; }

#categories [style*="grid-template-columns"] { grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 0 !important; border-top: 1px solid var(--lichen); border-left: 1px solid var(--lichen); }
#categories [style*="grid-template-columns"] > a { min-height: 148px; padding: 20px !important; border: 0 !important; border-right: 1px solid var(--lichen) !important; border-bottom: 1px solid var(--lichen) !important; border-radius: 0 !important; background: transparent !important; backdrop-filter: none !important; }
#categories [style*="grid-template-columns"] > a:hover { background: var(--paper) !important; transform: translateY(-3px); z-index: 2; }
#categories svg { color: var(--abyss) !important; }

#platforms > div > div:last-child { border-radius: 20px !important; border-color: var(--lichen) !important; background: var(--paper) !important; backdrop-filter: none !important; }
#platforms > div > div:last-child > div { background: transparent !important; border-color: var(--lichen) !important; }
#platforms > div > div:last-child > div:hover { background: var(--bone) !important; }

#sources [style*="grid-template-columns"] { gap: 12px !important; }
#sources [style*="grid-template-columns"] > a { border-radius: 20px !important; border-color: var(--lichen) !important; background: var(--paper) !important; }
#sources [style*="grid-template-columns"] > a:hover { transform: translateY(-3px); border-color: var(--graphite) !important; }

section[data-screen-label="Users and Developers"] > div > div { border-radius: 20px !important; border-color: var(--lichen) !important; background: var(--paper) !important; backdrop-filter: none !important; }
section[data-screen-label="Users and Developers"] a, section[data-screen-label="Users and Developers"] button { border-radius: 8px !important; box-shadow: none !important; }
section[data-screen-label="Users and Developers"] a[style*="linear-gradient"] { background: var(--abyss) !important; color: #fff !important; }

section[data-screen-label="Future Vision"] { min-height: 72svh; display: flex; align-items: center; background: var(--abyss) !important; color: #fff; }
section[data-screen-label="Future Vision"] > div:first-child { background: none !important; }
section[data-screen-label="Future Vision"] h2 span { color: var(--bio-lime) !important; background: none !important; -webkit-text-fill-color: var(--bio-lime) !important; animation: none !important; }
section[data-screen-label="Future Vision"] [style*="border-radius: 999px"] { border-color: var(--graphite) !important; background: transparent !important; }
section[data-screen-label="Future Vision"] a { border-radius: 8px !important; box-shadow: none !important; }
section[data-screen-label="Future Vision"] a:first-child { background: #fff !important; color: var(--abyss) !important; }

footer[data-screen-label="Footer"] { background: var(--void); color: #fff; border-color: #252525 !important; }
footer[data-screen-label="Footer"] [style*="linear-gradient"] { background: var(--bio-lime) !important; color: var(--abyss) !important; }
.footer-legal { border-color: #252525 !important; }
.bot-modal-card { border-radius: 20px !important; border-color: var(--lichen) !important; background: var(--paper) !important; box-shadow: none !important; color: var(--abyss); }

@media (max-width: 900px) {
  .v4-nav nav a:nth-child(2), .v4-nav nav a:nth-child(3) { display: none; }
  .v4-hero-copy h1 { font-size: clamp(64px,12vw,104px) !important; }
  section[data-screen-label="Trust and Safety"] > div > div:nth-child(2) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #categories [style*="grid-template-columns"] { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}

@media (max-width: 760px) {
  .v4-nav > div { height: 70px !important; padding: 12px 16px !important; }
  .v4-nav nav { display: none !important; }
  .v4-nav > div > div:last-child { display: block !important; }
  .v4-nav > div > div:last-child a { padding: 9px 11px !important; }
  .v4-hero { height: 92svh; min-height: 680px; }
  .v4-hero-video { inset: 0; width: 100%; height: 100%; transform: scale(1.06); }
  .v4-section-marker { display: none; }
  section.v4-hero .v4-hero-inner > .v4-hero-copy { width: 100% !important; max-width: none !important; padding: 100px 18px 24px; }
  .v4-hero-copy h1 { max-width: 8ch; font-size: clamp(54px,16vw,76px) !important; }
  .v4-hero-copy h1 + p { left: 18px; right: 18px; bottom: 84px; max-width: none !important; font-size: 14px !important; }
  .v4-actions { left: 18px; right: auto; bottom: 24px; }
  section:not(.v4-hero) { padding: 58px 18px !important; }
  section:not(.v4-hero) h2 { font-size: 42px !important; }
  section[data-screen-label="Trust and Safety"] { display: block; min-height: auto; }
  section[data-screen-label="Trust and Safety"]::before { position: static; display: block; width: 100%; margin-bottom: 42px; font-size: 34px; }
  section[data-screen-label="Trust and Safety"] > div > div:first-child { width: 100%; }
  section[data-screen-label="Trust and Safety"] > div > div:nth-child(2) { grid-template-columns: 1fr !important; }
  #categories [style*="grid-template-columns"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 0 !important; }
  #categories [style*="grid-template-columns"] > a { min-height: 120px; padding: 16px !important; }
  #platforms > div > div:last-child > div { grid-template-columns: minmax(90px,1.2fr) minmax(70px,.8fr) minmax(80px,1fr) !important; }
  #platforms > div > div:last-child > div > :nth-child(4) { display: none !important; }
  .directory-controls, .submit-bot-form { grid-template-columns: 1fr !important; }
  .footer-legal { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .v4-hero-video { display: none; }
  .v4-hero { background: url('tgb-organic-poster.jpg') center/cover no-repeat !important; }
  .v4-reveal { opacity: 1; transform: none; }
}