@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=Inter:wght@400;500;600&display=swap');

:root {
  --color-bg: #2E2D29;
  --color-surface: #3A3935;
  --color-text: #EDEBE4;
  --color-accent: #F26430;
  --color-accent-100: #fbd9c9;
  --color-accent-200: #f8bda2;
  --color-accent-300: #f59a76;
  --color-accent-400: #f27f50;
  --color-accent-600: #c9501f;
  --color-accent-700: #8f3a17;
  --color-neutral-200: #d6d3ca;
  --color-neutral-300: #bdb9ae;
  --color-neutral-400: #9d998d;
  --color-neutral-500: #7f7b70;
  --color-neutral-700: #58564d;
  --color-neutral-800: #494740;
  --color-divider: color-mix(in srgb, #EDEBE4 16%, transparent);
  --font-heading: Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-heading-weight: 500;
  --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px; --space-4: 11.2px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-md: 0 0 0 1px #58564d, 0 6px 18px rgba(0,0,0,.55);
  --shadow-lg: 0 0 0 1px #9d998d, 0 16px 40px rgba(0,0,0,.65);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}
a { color: var(--color-accent-300); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-100); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.btn, .tag, .field label { font-family: "JetBrains Mono", ui-monospace, monospace; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); }
textarea.input { min-height: 90px; resize: vertical; }
select.input option { background: #3A3935; }

.page {
  min-height: 100vh;
  background: radial-gradient(900px 420px at 12% -8%, color-mix(in oklch, var(--color-accent) 16%, transparent), transparent 70%), var(--color-bg);
}
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px 80px; }

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; margin: 18px 0 0; flex-wrap: wrap;
  background: #CDC4A5; color: #2E2D29;
  clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.brand { font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: 15px; letter-spacing: .08em; }
.brand span { font-size: 10px; letter-spacing: .2em; opacity: .65; margin-left: 6px; }
.nav { display: flex; gap: 18px; font-size: 12px; font-family: "JetBrains Mono", monospace; }
.nav a { text-decoration: none; color: inherit; }

.kicker {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent);
}
.hero { padding: 44px 0 36px; max-width: 760px; }
.hero h1 {
  font-family: Newsreader, serif; font-size: clamp(34px, 6vw, 56px);
  line-height: 1.05; font-weight: 400; margin: 14px 0; letter-spacing: -.02em;
}
.hero h1 em { color: var(--color-accent); font-style: italic; }
.hero p { font-size: 16px; line-height: 1.6; color: var(--color-neutral-300); margin: 0; max-width: 600px; }
.trust {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--color-neutral-300);
}

.layout { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.main { flex: 1 1 440px; min-width: 0; }
.aside {
  flex: 0 1 340px; min-width: min(100%, 300px);
  position: sticky; top: 16px; align-self: flex-start;
}
.panel {
  background: var(--color-surface); border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}

.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 360px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: inherit; font-size: 13px; cursor: pointer; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--color-neutral-700);
  background: transparent; color: var(--color-neutral-300);
}
.chip.on { border-color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 22%, transparent); color: var(--color-text); }
.chip span { opacity: .6; margin-left: 3px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.card {
  clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  border-radius: var(--radius-lg); background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); transition: border-color .15s, box-shadow .15s;
}
.card.in { border-color: var(--color-accent); box-shadow: 0 0 22px color-mix(in oklch, var(--color-accent) 22%, transparent); }
.card:hover { border-color: var(--color-accent-600); }
.meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em; color: var(--color-accent-300);
}
.card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.card .desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-neutral-300); }
.feats { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; color: var(--color-neutral-200); }
.feats li { display: flex; gap: 8px; }
.feats li::before { content: "✓"; color: var(--color-accent); }
.linkish { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: var(--color-accent-300); cursor: pointer; }
.tier-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.tier {
  font: inherit; cursor: pointer; text-align: left; padding: 8px 9px;
  border-radius: var(--radius-md); border: 1px solid var(--color-neutral-700);
  background: transparent; color: var(--color-text);
}
.tier.on { border-color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 22%, transparent); }
.tier .n { font-size: 11px; color: var(--color-neutral-300); }
.tier .p { font-size: 12.5px; margin-top: 2px; }
.price-block .cap, .price-block .note { font-size: 11px; color: var(--color-neutral-400); }
.price-block .now { font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.qty {
  display: flex; align-items: center; border: 1px solid var(--color-neutral-700); border-radius: var(--radius-md);
}
.qty button { font: inherit; background: none; border: 0; color: var(--color-text); width: 30px; height: 32px; cursor: pointer; }
.qty span { min-width: 22px; text-align: center; font-size: 13px; }

.steps {
  display: flex; gap: 0; padding: 14px 18px; border-bottom: 1px solid var(--color-neutral-800); font-size: 12px;
}
.steps button {
  font: inherit; font-size: 12px; background: none; border: 0; padding: 0; flex: 1; text-align: left; color: var(--color-neutral-500);
}
.steps button.on { color: var(--color-text); }
.steps .dot {
  display: inline-block; width: 18px; height: 18px; line-height: 17px; text-align: center;
  border-radius: 50%; border: 1px solid currentColor; margin-right: 6px; font-size: 10px;
}
.steps button.on .dot { background: var(--color-accent-700); }

.aside-body { padding: 18px; display: grid; gap: 14px; }
.err { font-size: 11.5px; color: #e08a8a; margin-top: 4px; }
.muted { color: var(--color-neutral-400); font-size: 12px; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.section { margin-top: 72px; }
.section.narrow { max-width: 760px; }
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }
.process > div { padding-top: 14px; border-top: 1px solid var(--color-accent-600); }
.faq-item { border-bottom: 1px solid var(--color-neutral-800); }
.faq-item button {
  font: inherit; font-size: 15px; width: 100%; display: flex; justify-content: space-between; gap: 12px;
  text-align: left; padding: 14px 0; background: none; border: 0; color: var(--color-text); cursor: pointer;
}
.faq-item button span:last-child { color: var(--color-accent); flex: none; }
.faq-item p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: var(--color-neutral-300); }

.overlay {
  position: fixed; inset: 0; background: rgba(28,27,24,.75);
  display: grid; place-items: center; padding: 20px; z-index: 50;
}
.overlay.drawer { display: flex; justify-content: flex-end; background: rgba(28,27,24,.7); }
.dialog {
  width: min(440px, 100%); background: var(--color-surface);
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 22px; display: grid; gap: 13px;
}
.drawer-panel {
  width: min(580px, 100%); height: 100%; overflow: auto; background: var(--color-surface);
  border-left: 1px solid var(--color-neutral-700); box-shadow: var(--shadow-lg);
  padding: 26px 24px; display: grid; gap: 22px; align-content: start;
}
.compare-panel {
  width: min(960px, 100%); max-height: 90vh; overflow: auto; background: var(--color-surface);
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 24px;
}

.fab, .cmp-bar {
  position: fixed; z-index: 40; border: 1px solid var(--color-accent); background: var(--color-surface);
  box-shadow: var(--shadow-lg); font-size: 13px; color: var(--color-text);
}
.fab {
  right: 20px; bottom: 20px; font: inherit; cursor: pointer;
  padding: 10px 16px; border-radius: 999px;
}
.cmp-bar {
  left: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 999px; border-color: var(--color-neutral-700);
}
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  padding: 11px 18px; border-radius: var(--radius-md); background: var(--color-surface);
  border: 1px solid var(--color-accent); box-shadow: var(--shadow-lg); font-size: 13px; z-index: 60;
}
.hidden { display: none !important; }
.wa-btn { font-size: 13px; }

@media (max-width: 720px) {
  .wrap { padding: 0 16px 72px; }
  .aside { position: static; flex: 1 1 100%; }
  .hero h1 { font-size: 34px; }
  .nav { gap: 12px; flex-wrap: wrap; }
  .tier-row { grid-auto-flow: row; }
  .filters {
    position: sticky;
    top: 0;
    z-index: 25;
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(8px);
    padding: 10px 0 12px;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .cat-block { margin-bottom: 22px; }
  .cat-head {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent-300);
    margin: 8px 0 12px;
  }
  .cat-head span { opacity: .55; margin-left: 6px; }
}

@media (max-width: 360px) {
  .wrap { padding: 0 12px 64px; overflow-x: hidden; }
  .site-header { padding: 12px 14px; }
  .card { padding: 14px; }
}