:root {
  --bg: #070a12;
  --panel: #0d111d;
  --panel-2: #111625;
  --line: rgba(255,255,255,.1);
  --text: #f5f7ff;
  --muted: #9aa3b8;
  --purple: #8b5cf6;
  --blue: #4f8cff;
  --mint: #5ee6c4;
  --warning: #ffbd66;
  --radius: 22px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.ambient { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .18; pointer-events: none; }
.ambient-one { width: 540px; height: 540px; background: var(--purple); top: -260px; left: 47%; }
.ambient-two { width: 430px; height: 430px; background: #1769ff; top: 520px; right: -260px; opacity: .11; }
.section-shell, .site-header { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.site-header { height: 80px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: #fff; font-size: .72rem; background: linear-gradient(135deg, var(--purple), var(--blue)); box-shadow: 0 8px 28px rgba(107,91,255,.35); }
.desktop-nav { display: flex; gap: 30px; color: var(--muted); font-size: .92rem; }
.desktop-nav a:hover { color: var(--text); }
.header-cta { border: 1px solid var(--line); padding: 9px 15px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: .9rem; }
.header-cta:hover { background: rgba(255,255,255,.08); }
.hero { min-height: 690px; padding: 108px 0 70px; text-align: center; position: relative; }
.eyebrow, .kicker { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #b7c0d4; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; background: rgba(255,255,255,.025); }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
h1, h2, h3 { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin-top: 0; line-height: 1.08; letter-spacing: -.045em; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #b8a8ff; outline-offset: 3px; }
h1 { margin: 28px auto 24px; font-size: clamp(3.2rem, 7.5vw, 6.7rem); max-width: 1020px; }
h1 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #a989ff 15%, #66a5ff 65%, #66ecd1); background-clip: text; -webkit-background-clip: text; }
.hero-copy { color: var(--muted); max-width: 660px; margin: 0 auto 34px; font-size: 1.18rem; }
.search-shell { width: min(740px, 100%); margin: auto; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(15,20,34,.86); border-radius: 18px; padding: 8px 9px 8px 18px; box-shadow: 0 24px 80px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.05); }
.search-shell:focus-within { border-color: rgba(139,92,246,.75); box-shadow: 0 24px 90px rgba(94,78,220,.18); }
.search-icon { font-size: 1.55rem; color: #788198; transform: rotate(-20deg); }
.search-shell input { flex: 1; min-width: 0; color: var(--text); background: none; border: 0; outline: 0; font-size: 1rem; }
.search-shell button, .compare-dock button { color: white; background: linear-gradient(135deg, var(--purple), #5a7ff5); border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(105,77,238,.25); }
.quick-goals { margin: 20px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; font-size: .83rem; color: #7f899e; }
.quick-goals button { color: #aeb7c8; border: 0; border-bottom: 1px solid #3a4253; background: none; padding: 0; cursor: pointer; }
.quick-goals button:hover { color: white; }
.proof-row { display: flex; justify-content: center; gap: 66px; margin-top: 74px; }
.proof-row div { display: flex; flex-direction: column; }
.proof-row strong { font-family: Manrope; font-size: 1.55rem; }
.proof-row span { color: #7f899e; font-size: .78rem; }
.directory, .compare-section, .stacks-section { padding: 90px 0; }
.section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 36px; }
.section-heading h2, .truth-copy h2, .method-section h2 { font-size: clamp(2rem, 4vw, 3.6rem); margin: 10px 0 0; }
.section-heading > p { max-width: 430px; color: var(--muted); margin: 0; }
.kicker { color: #8fa0c0; }
.workspace { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
.filters { position: sticky; top: 20px; padding: 20px; background: rgba(14,18,30,.75); border: 1px solid var(--line); border-radius: 18px; }
.filter-top { display: flex; justify-content: space-between; align-items: center; }
.filter-top h3 { font-size: 1rem; letter-spacing: -.01em; margin: 0; }
.filter-top button { background: none; border: 0; color: #8f9ab1; font-size: .78rem; cursor: pointer; }
.field-label, fieldset legend { display: block; color: #c8cedb; font-size: .8rem; font-weight: 700; margin-bottom: 10px; }
.field-label { margin-top: 20px; }
.filter-search { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: white; padding: 10px 11px; border-radius: 10px; outline: none; }
fieldset { border: 0; padding: 0; margin: 23px 0 0; }
fieldset label { display: flex; align-items: center; gap: 8px; color: #929cb0; font-size: .86rem; padding: 5px 0; cursor: pointer; }
fieldset input { accent-color: var(--purple); }
.results-bar { min-height: 42px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--muted); font-size: .86rem; }
.results-bar p { margin: 0; }
.results-bar strong { color: white; }
.results-bar select { color: #c2c9d6; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.tool-card { position: relative; display: flex; flex-direction: column; min-height: 330px; padding: 20px; background: linear-gradient(145deg, rgba(19,24,40,.93), rgba(11,15,26,.95)); border: 1px solid var(--line); border-radius: 18px; transition: .25s ease; }
.tool-card:hover { transform: translateY(-4px); border-color: rgba(136,115,255,.42); box-shadow: 0 22px 55px rgba(0,0,0,.24); }
.card-head { display: flex; justify-content: space-between; gap: 10px; }
.tool-logo { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: white; font-family: Manrope; font-weight: 800; font-size: 1.1rem; background: var(--logo, linear-gradient(135deg,#714ee5,#3988ff)); }
.reviewed { height: fit-content; color: var(--mint); background: rgba(94,230,196,.08); border: 1px solid rgba(94,230,196,.18); border-radius: 999px; padding: 4px 8px; font-size: .67rem; font-weight: 700; }
.tool-card h3 { font-size: 1.18rem; margin: 17px 0 5px; letter-spacing: -.02em; }
.tool-card .tagline { color: var(--muted); font-size: .86rem; margin: 0 0 14px; min-height: 44px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { color: #aeb8cc; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.065); border-radius: 7px; padding: 3px 7px; font-size: .69rem; }
.card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 18px; }
.card-meta span { color: #778197; display: block; font-size: .67rem; }
.card-meta strong { display: block; font-size: .8rem; margin-top: 1px; }
.card-actions { display: flex; gap: 8px; margin-top: 15px; }
.card-actions button { flex: 1; border-radius: 9px; padding: 9px; cursor: pointer; font-size: .77rem; font-weight: 700; }
.details-btn { color: white; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.compare-btn { color: #bdb2ff; background: transparent; border: 1px solid rgba(139,92,246,.3); }
.compare-btn.selected { background: rgba(139,92,246,.16); color: white; }
.empty-state, .comparison-empty { text-align: center; border: 1px dashed rgba(255,255,255,.14); background: rgba(255,255,255,.02); border-radius: 20px; padding: 65px 20px; }
.empty-state p, .comparison-empty p { color: var(--muted); }
.empty-state button { color: white; background: var(--purple); border: 0; border-radius: 9px; padding: 9px 14px; }
.truth-section { padding: 80px 0; display: grid; grid-template-columns: .75fr 1.25fr; gap: 65px; align-items: start; }
.editorial-paths { padding-top: 82px; }
.editorial-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.editorial-path-grid a { display: block; min-height: 210px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg,rgba(139,92,246,.13),rgba(14,19,32,.9)); }
.editorial-path-grid span { color: #a999f7; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.editorial-path-grid h3 { margin: 12px 0 8px; font-size: 1.35rem; }
.editorial-path-grid p { color: var(--muted); margin: 0 0 22px; }
.editorial-path-grid b { color: #c8bcff; font-size: .85rem; }
.truth-copy { position: sticky; top: 40px; }
.truth-copy p { color: var(--muted); max-width: 410px; }
.truth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.truth-grid article { min-height: 215px; padding: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 18px; }
.truth-grid article > span { color: #68738b; font-size: .72rem; }
.truth-grid h3 { margin: 43px 0 10px; letter-spacing: -.02em; }
.truth-grid p { color: var(--muted); font-size: .86rem; margin: 0; }
.compare-icon { margin: 0 auto 16px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(139,92,246,.12); color: #aa94ff; font-size: 1.4rem; }
.comparison-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 18px; }
.comparison-table { border-collapse: collapse; width: 100%; min-width: 650px; background: rgba(12,16,28,.85); }
.comparison-table th, .comparison-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.comparison-table th { color: #7f899e; width: 180px; font-size: .78rem; }
.comparison-table td { font-size: .88rem; }
.comparison-table .tool-table-name { font-family: Manrope; font-size: 1.05rem; }
.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stack-card { padding: 26px; min-height: 330px; display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(145deg, #111623, #0c101a); }
.featured-stack { background: radial-gradient(circle at 90% 5%, rgba(139,92,246,.27), transparent 36%), linear-gradient(145deg, #17152b, #0c101a); border-color: rgba(139,92,246,.34); }
.stack-tag { color: #9e91f2; font-size: .67rem; font-weight: 700; letter-spacing: .1em; }
.stack-card h3 { margin: 25px 0 10px; font-size: 1.4rem; }
.stack-card > p { margin: 0; color: var(--muted); font-size: .88rem; }
.stack-tools { margin: 26px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack-tools span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); font-size: .76rem; }
.stack-tools b { color: #5f687b; }
.stack-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 17px; margin-top: auto; color: #7f899e; font-size: .74rem; }
.stack-card footer button { border: 0; background: none; color: #bbb0ff; cursor: pointer; }
.method-section { margin-top: 70px; margin-bottom: 100px; padding: 56px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; background: linear-gradient(130deg, rgba(52,43,103,.45), rgba(13,17,29,.8)); border: 1px solid rgba(139,92,246,.24); border-radius: 28px; }
.method-copy p { color: #b0b8c9; }
.method-copy a { display: inline-block; color: white; font-weight: 700; margin-top: 10px; }
.method-copy a span { color: #ad9aff; }
.site-footer { padding: 45px 0 55px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 25px; color: var(--muted); }
.site-footer > div:first-child p { font-size: .82rem; }
.footer-links { display: flex; justify-content: flex-end; gap: 22px; font-size: .82rem; }
.legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; font-size: .71rem; }
.tool-dialog { width: min(680px, calc(100% - 26px)); max-height: 88vh; color: white; background: #0c101b; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; padding: 0; box-shadow: 0 30px 120px #000; }
.tool-dialog::backdrop { background: rgba(2,4,10,.78); backdrop-filter: blur(7px); }
.dialog-close { position: sticky; z-index: 2; float: right; top: 14px; right: 14px; margin: 14px; width: 36px; height: 36px; border-radius: 50%; color: white; background: rgba(255,255,255,.07); border: 1px solid var(--line); cursor: pointer; }
.dialog-inner { padding: 38px; }
.dialog-title { display: flex; align-items: center; gap: 15px; }
.dialog-title h2 { margin: 0 0 3px; }
.dialog-title p { margin: 0; color: var(--muted); }
.dialog-verdict { margin: 28px 0; padding: 19px; border-radius: 14px; background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.23); }
.dialog-verdict span { font-size: .67rem; color: #a999f7; font-weight: 700; letter-spacing: .09em; }
.dialog-verdict p { margin: 5px 0 0; }
.detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-columns h3 { font-size: .9rem; margin-bottom: 9px; letter-spacing: -.01em; }
.detail-columns ul { color: #aab2c2; font-size: .84rem; margin: 0; padding-left: 18px; }
.truth-box { margin-top: 24px; padding: 18px; border-radius: 13px; background: rgba(255,189,102,.07); border: 1px solid rgba(255,189,102,.18); }
.truth-box h3 { color: var(--warning); margin: 0 0 5px; font-size: .86rem; }
.truth-box p { margin: 0; color: #c0b6a8; font-size: .84rem; }
.dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 26px; padding-top: 19px; border-top: 1px solid var(--line); }
.dialog-footer small { color: #929bb0; }
.dialog-footer a { padding: 10px 15px; border-radius: 10px; background: white; color: #0b0e16; font-weight: 700; }
.dialog-links { display: flex; gap: 8px; }
.dialog-links a:first-child { background: rgba(255,255,255,.07); color: white; border: 1px solid var(--line); }
.compare-dock { position: fixed; z-index: 20; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(720px, calc(100% - 24px)); padding: 10px 10px 10px 18px; display: flex; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.16); background: rgba(13,17,29,.92); backdrop-filter: blur(18px); box-shadow: 0 20px 60px rgba(0,0,0,.5); border-radius: 16px; }
.compare-dock > div:first-child { display: flex; flex-direction: column; min-width: 112px; }
.compare-dock strong { font-size: .78rem; }
.compare-dock span { color: #7d879b; font-size: .67rem; }
.dock-tools { display: flex; gap: 7px; flex: 1; }
.dock-chip { padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.05); font-size: .7rem; }
.compare-dock button { padding: 9px 13px; font-size: .77rem; }
@media (max-width: 980px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .stack-grid { grid-template-columns: 1fr; }
  .stack-card { min-height: 280px; }
  .desktop-nav { gap: 18px; font-size: .82rem; }
}
@media (max-width: 760px) {
  .section-shell, .site-header { width: min(100% - 26px, 1180px); }
  .desktop-nav { display: none; }
  .header-cta { font-size: 0; }
  .header-cta span { font-size: 1rem; }
  .hero { padding-top: 82px; min-height: 650px; }
  h1 { font-size: clamp(2.7rem, 14vw, 4.6rem); }
  .hero-copy { font-size: 1rem; }
  .search-shell { padding-left: 14px; }
  .search-shell button { padding: 11px 13px; font-size: .8rem; }
  .proof-row { gap: 28px; }
  .section-heading, .truth-section, .method-section { display: block; }
  .editorial-path-grid { grid-template-columns: 1fr; }
  .section-heading > p { margin-top: 16px; }
  .workspace { display: block; }
  .filters { position: static; margin-bottom: 24px; }
  .filters fieldset { display: flex; flex-wrap: wrap; gap: 3px 14px; }
  .filters fieldset legend { width: 100%; }
  .tool-grid { grid-template-columns: 1fr; }
  .truth-copy { position: static; margin-bottom: 28px; }
  .truth-grid { grid-template-columns: 1fr; }
  .truth-grid article { min-height: 180px; }
  .method-section { padding: 34px 24px; }
  .method-copy { margin-top: 24px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; flex-wrap: wrap; }
  .legal { grid-column: auto; }
  .detail-columns { grid-template-columns: 1fr; }
  .dialog-inner { padding: 26px; }
  .compare-dock { gap: 8px; }
  .dock-tools { display: none; }
  .compare-dock > div:first-child { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }