/* t9_neo — neo-brutalist. Hard 2px borders, offset shadows, bold colors. */
:root {
  --nb-bg: #fef9ec;
  --nb-paper: #ffffff;
  --nb-ink: #0a0a0a;
  --nb-ink-soft: #555050;
  --nb-line: #0a0a0a;
  --nb-accent: #ff5577;
  --nb-yellow: #ffcc00;
  --nb-green: #00d9c0;
  --nb-blue: #3fa9f5;
  --nb-radius: 4px;
  --nb-offset: 4px;
  --nb-shadow: var(--nb-offset) var(--nb-offset) 0 var(--nb-line);
  --nb-shadow-lg: 6px 6px 0 var(--nb-line);
}
.nb-page { background: var(--nb-bg); color: var(--nb-ink);
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }

.nb-bar { position: sticky; top: 0; background: var(--nb-paper);
  border-bottom: 2px solid var(--nb-line); z-index: 100; }
.nb-bar[data-stuck] { box-shadow: 0 4px 0 rgba(10,10,10,.1); }
.nb-bar__row { max-width: 1200px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 22px; }
.nb-bar__brand { display: flex; align-items: center; gap: 10px; }
.nb-bar__brand img { border: 2px solid var(--nb-line); border-radius: var(--nb-radius); }
.nb-bar__brand strong { font-size: 1rem; letter-spacing: -.01em; }
.nb-bar nav { margin-left: auto; display: flex; gap: 20px; }
.nb-bar nav a { font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 0; border-bottom: 2px solid transparent; }
.nb-bar nav a:hover { border-bottom-color: var(--nb-accent); }
.nb-burger { display: none; background: none; border: 0; font-size: 1.4rem; }
@media (max-width: 880px) {
  .nb-bar nav { position: fixed; top: 60px; left: 0; right: 0; background: var(--nb-paper);
    flex-direction: column; padding: 18px 24px; border-bottom: 2px solid var(--nb-line);
    transform: translateY(-110%); transition: transform .25s; margin-left: 0; }
  .nb-bar nav[data-open] { transform: translateY(0); }
  .nb-bar .nb-btn { display: none; }
  .nb-burger { display: block; margin-left: auto; }
}

.nb-tag { display: inline-block; background: var(--nb-yellow); color: var(--nb-line);
  border: 2px solid var(--nb-line); padding: 3px 12px;
  font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 16px; box-shadow: 2px 2px 0 var(--nb-line); }

.nb-stamp { display: inline-block; background: var(--nb-ink); color: var(--nb-bg);
  padding: 6px 14px; font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; }

.nb-btn { display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; background: var(--nb-accent); color: #fff;
  border: 2px solid var(--nb-line); border-radius: var(--nb-radius);
  font-weight: 800; font-size: .9rem; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
  box-shadow: var(--nb-shadow);
  transition: transform .08s, box-shadow .08s; }
.nb-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--nb-line); }
.nb-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--nb-line); }
.nb-btn--big { padding: 14px 32px; font-size: 1rem; box-shadow: var(--nb-shadow-lg); }
.nb-btn--big:hover { box-shadow: 7px 7px 0 var(--nb-line); }

.nb-hero { padding: 56px 24px 72px; }
.nb-hero__inner { max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.nb-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: -.028em;
  margin: 0 0 22px; line-height: 1.02; font-weight: 900; }
.nb-hero__lead { font-size: 1.1rem; color: var(--nb-ink); margin: 0 0 30px; max-width: 480px; }
.nb-hero__cta { margin-bottom: 28px; }
.nb-hero__chips { list-style: none; padding: 0; margin: 0;
  display: flex; gap: 12px; flex-wrap: wrap; }
.nb-hero__chips li { background: var(--nb-paper); border: 2px solid var(--nb-line);
  padding: 8px 14px; font-size: .88rem; border-radius: var(--nb-radius);
  box-shadow: 2px 2px 0 var(--nb-line); }
.nb-hero__chips strong { font-weight: 800; }
.nb-hero__art img { width: 100%; border: 2px solid var(--nb-line);
  border-radius: var(--nb-radius); box-shadow: var(--nb-shadow-lg);
  background: var(--nb-paper); }
@media (max-width: 880px) {
  .nb-hero__inner { grid-template-columns: 1fr; gap: 40px; }
}

.nb-stack { max-width: 1100px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column; gap: 36px; }
.nb-box { background: var(--nb-paper); border: 2px solid var(--nb-line);
  border-radius: var(--nb-radius); padding: 36px; box-shadow: var(--nb-shadow); }
.nb-box__head { margin-bottom: 22px; }
@media (max-width: 600px) { .nb-box { padding: 24px; } }

.nb-prose { font-size: 1rem; line-height: 1.7; color: var(--nb-ink); }
.nb-prose h3 { font-weight: 800; margin: 1.4em 0 .4em; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1rem; }
.nb-prose p { margin: 0 0 1em; }
.nb-prose a { color: var(--nb-accent); border-bottom: 2px solid currentColor; font-weight: 700; }

.nb-reviews { display: flex; flex-direction: column; gap: 16px; }
.nb-review { display: flex; gap: 16px; align-items: flex-start;
  padding: 18px; border: 2px solid var(--nb-line); border-radius: var(--nb-radius);
  background: var(--nb-bg); }
.nb-review__avatar { width: 48px; height: 48px; border: 2px solid var(--nb-line);
  border-radius: var(--nb-radius); display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.2rem; color: var(--nb-line); flex-shrink: 0;
  box-shadow: 2px 2px 0 var(--nb-line); }
.nb-review__body { flex: 1; }
.nb-review__body p { margin: 0 0 8px; font-size: .96rem; }
.nb-review__body footer { display: flex; gap: 12px; align-items: baseline; font-size: .86rem; }
.nb-review__body footer strong { font-weight: 800; }
.nb-stars { color: var(--nb-yellow); -webkit-text-stroke: 1px var(--nb-line);
  letter-spacing: 1px; }

.nb-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nb-shot { margin: 0; border: 2px solid var(--nb-line); border-radius: var(--nb-radius);
  overflow: hidden; box-shadow: var(--nb-shadow); background: var(--nb-paper); }
.nb-shot img { width: 100%; display: block; }
@media (max-width: 600px) { .nb-shots { grid-template-columns: 1fr; } }

.nb-faq details { border: 2px solid var(--nb-line); border-radius: var(--nb-radius);
  padding: 0 18px; margin-bottom: 10px; background: var(--nb-bg);
  box-shadow: 2px 2px 0 var(--nb-line); }
.nb-faq summary { list-style: none; padding: 14px 0; cursor: pointer;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .86rem;
  display: flex; justify-content: space-between; gap: 14px; }
.nb-faq summary::-webkit-details-marker { display: none; }
.nb-faq summary::after { content: '+'; color: var(--nb-accent); font-weight: 900; font-size: 1.2rem; line-height: 1; }
.nb-faq details[open] summary::after { content: '−'; }
.nb-faq details > p { padding: 0 0 14px; margin: 0; color: var(--nb-ink-soft);
  text-transform: none; letter-spacing: 0; font-size: .94rem; font-weight: 500; }

.nb-form { display: flex; flex-direction: column; gap: 14px; max-width: 500px; margin-top: 18px; }
.nb-form label { display: flex; flex-direction: column; gap: 6px;
  font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.nb-form input, .nb-form textarea { padding: 11px 14px; border: 2px solid var(--nb-line);
  border-radius: var(--nb-radius); font: inherit; font-weight: 500; background: var(--nb-paper); }
.nb-form input:focus, .nb-form textarea:focus { outline: 0;
  box-shadow: 3px 3px 0 var(--nb-accent); }
.nb-form button { align-self: flex-start; }
.nb-form__ok { color: var(--nb-accent); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; }

.nb-final { padding: 60px 24px 80px; }
.nb-final__box { max-width: 720px; margin: 0 auto; padding: 48px;
  background: var(--nb-accent); color: #fff; text-align: center;
  border: 2px solid var(--nb-line); border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow-lg); }
.nb-final__box h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 14px;
  font-weight: 900; letter-spacing: -.02em; }
.nb-final__box p { margin: 0 auto 26px; max-width: 460px; color: rgba(255,255,255,.92); }
.nb-final__box .nb-btn { background: #fff; color: var(--nb-line); }