/* ==========================================================================
   Theme: Neo Brutal, thick borders, hard shadows, loud but controlled.
   ========================================================================== */

[data-theme="brutal"] {
  --bg: #faf3e7;
  --bg-soft: #f4e9d2;
  --surface: #fffdf6;
  --ink: #000000;
  --muted: #3b3b3b;
  --accent: #ff4f78;
  --accent-ink: #000000;
  --accent-2: #2f6fed;
  --line: #000000;
  --border-w: 2px;
  --radius: 10px;
  --radius-lg: 12px;
  --shadow: 4px 4px 0 0 #000;
  --shadow-strong: 9px 9px 0 0 #000;

  --font-display: "Archivo Black", "Inter", sans-serif;
  --h-weight: 400; /* Archivo Black only ships one (very heavy) weight */
  --h-tracking: 0;
  --h-transform: none;
  --kicker-font: "Space Grotesk", sans-serif;
  --btn-radius: 10px;
  --font-body: "Space Grotesk", "Inter", sans-serif;
}

[data-theme="brutal"] .kicker {
  display: inline-block;
  background: #ffd43b;
  color: #000;
  border: 2px solid #000;
  border-radius: 6px;
  padding: 0.25rem 0.7rem;
  font-weight: 700;
  box-shadow: 3px 3px 0 0 #000;
}

[data-theme="brutal"] .hero-title em {
  color: #000;
  background: var(--accent);
  padding: 0 0.18em;
  border-radius: 6px;
  box-decoration-break: clone;
}
[data-theme="brutal"] .why .section-title em { background: #ffd43b; color: #000; padding: 0 0.15em; border-radius: 6px; }

[data-theme="brutal"] .btn {
  border: 3px solid #000;
  font-weight: 700;
  box-shadow: 4px 4px 0 0 #000;
}
[data-theme="brutal"] .btn--primary { background: var(--accent); color: #000; }
[data-theme="brutal"] .btn--primary:hover {
  background: #ffd43b; color: #000; border-color: #000;
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 0 #000;
}
[data-theme="brutal"] .btn--ghost { background: var(--surface); }
[data-theme="brutal"] .btn--ghost:hover {
  background: var(--accent-2); color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 0 #000;
}

[data-theme="brutal"] .site-header { border-bottom: 3px solid #000; }
[data-theme="brutal"] .lang-btn { border: 2px solid #000; background: var(--surface); box-shadow: 3px 3px 0 0 #000; }
[data-theme="brutal"] .hp {
  border: 2px solid #000;
  background: #ffd43b;
  box-shadow: 3px 3px 0 0 #000;
  border-radius: 8px;
  font-weight: 700;
}
[data-theme="brutal"] .hp:nth-child(2) { background: var(--accent); }
[data-theme="brutal"] .hp:nth-child(3) { background: #6ee7b7; }
[data-theme="brutal"] .hp:nth-child(4) { background: #9ad2ff; }

/* Hero: scattered color blocks */
[data-theme="brutal"] .ha-1 {
  opacity: 1; width: 4.4rem; height: 4.4rem;
  background: #ffd43b; border: 3px solid #000; border-radius: 12px;
  box-shadow: 5px 5px 0 0 #000;
  top: -4%; right: 4%;
  transform: rotate(8deg);
}
[data-theme="brutal"] .ha-2 {
  opacity: 1; width: 3.2rem; height: 3.2rem;
  background: var(--accent-2); border: 3px solid #000; border-radius: 50%;
  box-shadow: 4px 4px 0 0 #000;
  bottom: 2%; left: -2%;
}
[data-theme="brutal"] .ha-3 {
  opacity: 1; width: 2.4rem; height: 2.4rem;
  background: var(--accent); border: 3px solid #000;
  bottom: 18%; right: 10%;
  transform: rotate(-12deg);
}
[data-theme="brutal"] .win { border: 3px solid #000; box-shadow: 9px 9px 0 0 #000; }
[data-theme="brutal"] .win-bar { border-bottom: 3px solid #000; background: #ffd43b; color: #000; font-weight: 700; }
[data-theme="brutal"] .win-dots i { background: #000; border-radius: 2px; }
[data-theme="brutal"] .ha-chip { background: var(--accent); border: 2px solid #000; box-shadow: 3px 3px 0 0 #000; }
[data-theme="brutal"] .ha-chip--alt { background: var(--surface); border: 2px solid #000; }
[data-theme="brutal"] .ha-line { background: #e8dec4; }

[data-theme="brutal"] .svc-card, [data-theme="brutal"] .why-card,
[data-theme="brutal"] .step, [data-theme="brutal"] .demo-card,
[data-theme="brutal"] .price-card, [data-theme="brutal"] .form,
[data-theme="brutal"] .win--admin { border: 2px solid #000; }
[data-theme="brutal"] .svc-card:nth-child(odd) { transform: rotate(-0.5deg); }
[data-theme="brutal"] .svc-card:nth-child(even) { transform: rotate(0.5deg); }
[data-theme="brutal"] .svc-card:hover { transform: rotate(0) translate(-3px, -3px); box-shadow: 7px 7px 0 0 #000; }
[data-theme="brutal"] .demo-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 0 #000; }
[data-theme="brutal"] .demo-thumb { border: 2px solid #000; }
[data-theme="brutal"] .svc-icon { color: #000; }

[data-theme="brutal"] .why-num {
  font-family: "Archivo Black", sans-serif;
  font-size: 1.2rem;
  color: var(--accent);
  -webkit-text-stroke: 1px #000;
}
[data-theme="brutal"] .step-num {
  border: 2px solid #000;
  background: #ffd43b;
  box-shadow: 3px 3px 0 0 #000;
  border-radius: 8px;
  font-weight: 700;
}
[data-theme="brutal"] .demo-status { border: 2px solid #000; color: #000; font-weight: 700; }
[data-theme="brutal"] .demo-status--prod { background: #6ee7b7; }

[data-theme="brutal"] .price-card--featured { background: #fff3b8; }
[data-theme="brutal"] .price-badge {
  background: var(--accent); color: #000;
  border: 2px solid #000; box-shadow: 3px 3px 0 0 #000;
}
[data-theme="brutal"] .price-list li::before { content: "■"; font-size: 0.7em; top: 0.35em; color: var(--accent-2); }

[data-theme="brutal"] .field input, [data-theme="brutal"] .field select, [data-theme="brutal"] .field textarea {
  border: 2px solid #000; background: var(--surface); border-radius: 8px;
}
[data-theme="brutal"] .field input:focus, [data-theme="brutal"] .field select:focus, [data-theme="brutal"] .field textarea:focus {
  box-shadow: 3px 3px 0 0 var(--accent);
}
[data-theme="brutal"] .form-submit { border: 3px solid #000; }
[data-theme="brutal"] .site-footer { border-top: 3px solid #000; }

/* Snappy, slightly rotated entrance */
[data-theme="brutal"] .reveal {
  transform: translate(-8px, 14px) rotate(-1.2deg);
  transition-duration: 0.4s;
}
[data-theme="brutal"] .reveal.in-view { transform: none; }

[data-theme="brutal"] .car-btn { border: 2px solid #000; box-shadow: 3px 3px 0 0 #000; }
[data-theme="brutal"] .car-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 #000; }
[data-theme="brutal"] .mode-card.is-selected::after { border: 3px solid #000; }

/* Ticker: a loud striped banner */
[data-theme="brutal"] { --tk-speed: 75; }
[data-theme="brutal"] .ticker {
  background: #ffd43b;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}
[data-theme="brutal"] .tk-item {
  color: #000;
  font-weight: 700;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.82rem;
}
[data-theme="brutal"] .tk-sep { color: #000; }
[data-theme="brutal"] .tk-sep::before { content: "★"; }

/* Philosophy panel: a sticker sheet */
[data-theme="brutal"] .mode-panel { border: 2px solid #000; box-shadow: 6px 6px 0 0 #000; }
[data-theme="brutal"] .mp-label {
  display: inline-block;
  background: #ffd43b;
  border: 2px solid #000;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  color: #000;
}
[data-theme="brutal"] .mp-col + .mp-col .mp-label { background: #9ad2ff; }

/* --------------------------------------------------------------------------
   Self-preview
   -------------------------------------------------------------------------- */
.mode-card[data-mode="brutal"] .mc-prev {
  background: #faf3e7;
  border: 2px solid #000;
  border-radius: 8px;
  box-shadow: 3px 3px 0 0 #000;
}
.mode-card[data-mode="brutal"] .mp-a {
  width: 2rem; height: 2rem; background: #ffd43b;
  border: 2px solid #000; border-radius: 6px;
  left: 0.6rem; top: 0.6rem; transform: rotate(-6deg);
  box-shadow: 2px 2px 0 0 #000;
}
.mode-card[data-mode="brutal"] .mp-b {
  width: 1.3rem; height: 1.3rem; background: #2f6fed;
  border: 2px solid #000; border-radius: 50%;
  right: 0.8rem; top: 0.7rem;
}
.mode-card[data-mode="brutal"] .mp-c {
  width: 2.6rem; height: 1rem; background: #ff4f78;
  border: 2px solid #000; border-radius: 4px;
  right: 0.6rem; bottom: 0.7rem;
  box-shadow: 2px 2px 0 0 #000;
}
.mode-card[data-mode="brutal"] .mc-aa {
  font-family: "Archivo Black", sans-serif;
  color: #000; left: 0.7rem; bottom: 0.45rem; font-size: 1.35rem;
}