/* ==========================================================================
   Theme: Constructivist, diagonals, collage logic, red & black momentum.
   ========================================================================== */

[data-theme="constructivist"] {
  --bg: #f2e9d8;
  --bg-soft: #eaddc4;
  --surface: #f7f0e1;
  --ink: #1b1815;
  --muted: #57504a;
  --accent: #d23a2a;
  --accent-ink: #f2e9d8;
  --accent-2: #1b1815;
  --line: #c9bda5;
  --border-w: 1px;
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: none;
  --shadow-strong: -10px 10px 0 0 #1b1815;

  --font-display: "Oswald", "Inter", sans-serif;
  --h-weight: 600;
  --h-tracking: 0.015em;
  --h-transform: uppercase;
  --kicker-font: "Oswald", sans-serif;
  --btn-radius: 0px;
}

[data-theme="constructivist"] .kicker {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 600; letter-spacing: 0.22em;
  color: var(--accent);
}
[data-theme="constructivist"] .kicker::before {
  content: ""; width: 1.6rem; height: 0.55rem;
  background: var(--accent);
  transform: skewX(-18deg);
}

[data-theme="constructivist"] .hero-title { line-height: 1.0; }
[data-theme="constructivist"] .hero-title em { color: var(--accent); }
[data-theme="constructivist"] .ht-l2 { transform: translateX(clamp(0.5rem, 3vw, 2.4rem)); }

[data-theme="constructivist"] .btn {
  transform: skewX(-8deg);
  border-width: 2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
[data-theme="constructivist"] .btn > * { transform: skewX(8deg); }
[data-theme="constructivist"] .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
[data-theme="constructivist"] .btn--primary:hover { background: var(--ink); border-color: var(--ink); transform: skewX(-8deg) translateX(4px); }
[data-theme="constructivist"] .btn--ghost:hover { transform: skewX(-8deg) translateX(4px); }

[data-theme="constructivist"] .site-header { border-bottom: 3px solid var(--ink); }
[data-theme="constructivist"] .hp {
  border: 1.5px solid var(--ink);
  background: transparent;
  transform: skewX(-8deg);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}
[data-theme="constructivist"] .hp:nth-child(odd) { background: var(--ink); color: var(--bg); }

/* Hero: diagonal bars, a big red circle, striped block */
[data-theme="constructivist"] .ha-1 {
  opacity: 1; width: 9rem; height: 9rem; border-radius: 50%;
  background: var(--accent);
  top: -6%; right: 2%;
  z-index: 0;
}
[data-theme="constructivist"] .ha-2 {
  opacity: 1; width: 130%; height: 1.4rem;
  background: var(--ink);
  left: -15%; bottom: 12%;
  transform: rotate(-14deg);
  z-index: 0;
}
[data-theme="constructivist"] .ha-3 {
  opacity: 1; width: 5.5rem; height: 3.4rem;
  background: repeating-linear-gradient(135deg, var(--ink) 0 4px, transparent 4px 9px);
  bottom: 0; right: 14%;
  z-index: 3;
}
[data-theme="constructivist"] .ha-4 {
  opacity: 1; width: 0; height: 0;
  border-left: 1.4rem solid transparent;
  border-right: 1.4rem solid transparent;
  border-bottom: 2.4rem solid var(--accent);
  top: 14%; left: 0;
  transform: rotate(22deg);
  z-index: 3;
}
[data-theme="constructivist"] .win {
  border: 2px solid var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), calc(100% - 1.6rem) 100%, 0 100%);
}
[data-theme="constructivist"] .win-bar {
  background: var(--ink); color: var(--bg);
  font-family: "Oswald", sans-serif;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem;
  border-bottom: none;
}
[data-theme="constructivist"] .win-dots i { background: var(--accent); border-radius: 0; transform: skewX(-12deg); }
[data-theme="constructivist"] .ha-chip { background: var(--accent); transform: skewX(-12deg); }
[data-theme="constructivist"] .ha-chip--alt { background: transparent; border-color: var(--ink); transform: skewX(-12deg); }
[data-theme="constructivist"] .ha-line { background: #ddd0b4; }

/* Cards lean into the diagonal */
[data-theme="constructivist"] .svc-card, [data-theme="constructivist"] .why-card,
[data-theme="constructivist"] .step, [data-theme="constructivist"] .demo-card,
[data-theme="constructivist"] .price-card, [data-theme="constructivist"] .form {
  border: 1.5px solid var(--ink);
  border-top: 5px solid var(--ink);
}
[data-theme="constructivist"] .svc-card:nth-child(3n+1) { border-top-color: var(--accent); }
[data-theme="constructivist"] .svc-card:hover { transform: translate(4px, -4px); box-shadow: -6px 6px 0 0 var(--ink); }
[data-theme="constructivist"] .demo-card:hover { transform: translate(4px, -4px); box-shadow: -6px 6px 0 0 var(--ink); }
[data-theme="constructivist"] .demo-thumb { border: 1.5px solid var(--ink); }
[data-theme="constructivist"] .svc-icon { color: var(--accent); }

[data-theme="constructivist"] .why-num {
  font-family: "Oswald", sans-serif;
  font-size: 1.5rem; font-weight: 700;
  color: var(--accent);
}
[data-theme="constructivist"] .step-num {
  border-radius: 0;
  border: 2px solid var(--ink);
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent);
  font-family: "Oswald", sans-serif;
  transform: rotate(-8deg);
}
[data-theme="constructivist"] .steps .step:nth-child(even) { transform: translateY(0.9rem); }

[data-theme="constructivist"] .price-badge {
  background: var(--ink);
  transform: skewX(-10deg);
}
[data-theme="constructivist"] .price-card--featured { border-top-color: var(--accent); box-shadow: -10px 10px 0 0 var(--ink); }
[data-theme="constructivist"] .price-list li::before { content: "▶"; font-size: 0.6em; top: 0.45em; }

[data-theme="constructivist"] .field input, [data-theme="constructivist"] .field select, [data-theme="constructivist"] .field textarea {
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 0;
}
[data-theme="constructivist"] .site-footer { border-top: 3px solid var(--ink); }

/* Motion: slides in along the diagonal */
[data-theme="constructivist"] .reveal {
  transform: translate(-26px, 12px) rotate(-1deg);
  transition-duration: 0.55s;
}
[data-theme="constructivist"] .reveal.in-view { transform: none; }

[data-theme="constructivist"] .car-btn { border: 2px solid var(--ink); transform: skewX(-8deg); }

/* Poster texture: faint diagonal hatching over alternate sections */
[data-theme="constructivist"] .section--alt {
  background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(27, 24, 21, 0.035) 18px 20px);
}
/* motion lines behind the section heads */
[data-theme="constructivist"] .section-head { position: relative; }
[data-theme="constructivist"] .section-head::after {
  content: "";
  position: absolute; left: -6rem; bottom: -0.9rem;
  width: 9rem; height: 0.85rem;
  background:
    linear-gradient(var(--accent) 0 0) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--ink) 0 0) 12% 6px / 88% 3px no-repeat,
    linear-gradient(var(--accent) 0 0) 28% 12px / 72% 3px no-repeat;
  transform: skewX(-18deg);
}

/* Ticker: an agitprop banner in motion */
[data-theme="constructivist"] { --tk-speed: 70; }
[data-theme="constructivist"] .ticker {
  background: var(--ink);
  border-top: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
}
[data-theme="constructivist"] .tk-item {
  color: var(--bg);
  font-family: "Oswald", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  transform: skewX(-8deg);
}
[data-theme="constructivist"] .tk-sep { color: var(--accent); }
[data-theme="constructivist"] .tk-sep::before { content: "▶"; font-size: 0.75em; }

/* Philosophy panel: a poster plate */
[data-theme="constructivist"] .mode-panel {
  border: 2px solid var(--ink);
  border-left: 8px solid var(--accent);
}
[data-theme="constructivist"] .mp-title { text-transform: uppercase; letter-spacing: 0.04em; }
[data-theme="constructivist"] .mp-label {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.2em;
}

/* --------------------------------------------------------------------------
   Self-preview
   -------------------------------------------------------------------------- */
.mode-card[data-mode="constructivist"] .mc-prev {
  background: #f2e9d8;
  border: 1.5px solid #1b1815;
  border-radius: 0;
}
.mode-card[data-mode="constructivist"] .mp-a {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: #d23a2a;
  right: 0.7rem; top: 0.5rem;
}
.mode-card[data-mode="constructivist"] .mp-b {
  width: 130%; height: 0.5rem; background: #1b1815; border-radius: 0;
  left: -15%; bottom: 1.6rem;
  transform: rotate(-14deg);
}
.mode-card[data-mode="constructivist"] .mp-c {
  width: 2rem; height: 1.2rem;
  background: repeating-linear-gradient(135deg, #1b1815 0 3px, transparent 3px 7px);
  left: 0.6rem; top: 0.7rem;
}
.mode-card[data-mode="constructivist"] .mc-aa {
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase;
  color: #1b1815; left: 0.7rem; bottom: 0.4rem;
}