/* ==========================================================================
   Theme: Kinetic Brutalism, black, white, lime. Built to move.
   Heavy type, hard borders, directional arrows, animated blocks, a fast
   ticker. Aggression with a grid under it: loud, never messy.
   ========================================================================== */

[data-theme="kinetic"] {
  --bg: #f4f4ef;
  --bg-soft: #eaeae2;
  --surface: #ffffff;
  --ink: #0c0c0c;
  --muted: #44443f;
  --accent: #c4f000;
  --accent-ink: #0c0c0c;
  --accent-2: #0c0c0c;
  --line: #0c0c0c;
  --border-w: 2px;
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: none;
  --shadow-strong: 8px 8px 0 0 #0c0c0c;

  --font-display: "Archivo Black", "Inter", sans-serif;
  --font-body: "Space Grotesk", "Inter", sans-serif;
  --h-weight: 400; /* Archivo Black is single-weight */
  --h-tracking: 0;
  --h-transform: uppercase;
  --kicker-font: "Space Grotesk", sans-serif;
  --btn-radius: 0px;
  --tk-speed: 140;
}

[data-theme="kinetic"] .hero-title { font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.02; }
[data-theme="kinetic"] .hero-title em {
  color: var(--ink);
  background: var(--accent);
  padding: 0 0.18em;
  box-shadow: 0.12em 0.12em 0 0 var(--ink);
  display: inline-block;
}
[data-theme="kinetic"] .kicker {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.2em;
}
[data-theme="kinetic"] .kicker::after {
  content: " →";
  color: var(--ink);
  background: var(--accent);
  padding: 0 0.3em;
  margin-left: 0.3em;
}

/* Sharp, instant interaction. Nothing eases for long. */
[data-theme="kinetic"] .btn {
  border: 2.5px solid var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.86rem;
  transition-duration: 0.09s;
}
[data-theme="kinetic"] .btn--primary { background: var(--ink); color: #fff; }
[data-theme="kinetic"] .btn--primary::after { content: " →"; }
[data-theme="kinetic"] .btn--primary:hover {
  background: var(--accent); color: var(--ink); border-color: var(--ink);
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 0 var(--ink);
}
[data-theme="kinetic"] .btn--ghost { background: var(--surface); }
[data-theme="kinetic"] .btn--ghost:hover {
  background: var(--accent); color: var(--ink);
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 0 var(--ink);
}

[data-theme="kinetic"] .site-header { border-bottom: 3px solid var(--ink); }
[data-theme="kinetic"] .nav-link { font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; }
[data-theme="kinetic"] .nav-link:hover { background: var(--accent); color: var(--ink); box-shadow: 2px 2px 0 0 var(--ink); }
[data-theme="kinetic"] .lang-btn { border: 2px solid var(--ink); }
[data-theme="kinetic"] .brand-name i { color: inherit; background: var(--accent); padding: 0 0.15em; }

[data-theme="kinetic"] .hp {
  border: 2px solid var(--ink);
  background: var(--surface);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}
[data-theme="kinetic"] .hp:nth-child(2n) { background: var(--accent); }

/* Hero: marching blocks and a directional field */
[data-theme="kinetic"] .ha-1 {
  opacity: 1; width: 7rem; height: 7rem;
  background: var(--accent);
  border: 3px solid var(--ink);
  top: -6%; right: 2%;
  animation: kin-step 2.4s steps(4) infinite alternate;
}
[data-theme="kinetic"] .ha-2 {
  opacity: 1; width: 46%; height: 1rem;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1.2rem, transparent 1.2rem 2rem);
  left: -4%; bottom: 8%;
}
[data-theme="kinetic"] .ha-3 {
  opacity: 1;
  right: 0; bottom: -2%;
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  animation: kin-nudge 1.6s steps(2) infinite alternate;
}
[data-theme="kinetic"] .ha-3::before { content: "→→→"; }
[data-theme="kinetic"] .ha-4 {
  opacity: 1; width: 2.4rem; height: 2.4rem;
  background: var(--ink);
  top: 16%; left: -2%;
  animation: kin-step 1.8s 0.4s steps(3) infinite alternate;
}
@keyframes kin-step { from { transform: translateY(0); } to { transform: translateY(1.4rem); } }
@keyframes kin-nudge { from { transform: translateX(0); } to { transform: translateX(0.9rem); } }

[data-theme="kinetic"] .win { border: 3px solid var(--ink); box-shadow: var(--shadow-strong); }
[data-theme="kinetic"] .win-bar {
  background: var(--ink); color: var(--accent);
  border-bottom: none;
  font-weight: 600;
}
[data-theme="kinetic"] .win-dots i { background: var(--accent); border-radius: 0; }
[data-theme="kinetic"] .ha-chip { background: var(--accent); border: 2px solid var(--ink); }
[data-theme="kinetic"] .ha-chip--alt { border: 2px solid var(--ink); }
[data-theme="kinetic"] .ha-line { background: var(--bg-soft); border-radius: 0; }
[data-theme="kinetic"] .ha-bar { display: block; border: 2px solid var(--ink); border-radius: 0; }
[data-theme="kinetic"] .ha-bar i { background: var(--accent); animation: kin-load 1.6s steps(8) infinite; }
@keyframes kin-load { 0% { width: 10%; } 100% { width: 95%; } }

/* Ticker: the loudest element on the page, and it knows it */
[data-theme="kinetic"] .ticker {
  background: var(--accent);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding-block: 0.55rem;
}
[data-theme="kinetic"] .tk-item {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-theme="kinetic"] .tk-sep { color: var(--ink); font-weight: 700; }
[data-theme="kinetic"] .tk-sep::before { content: "→"; }

/* Cards: heavy frames, controlled grid breaks, snap hovers */
[data-theme="kinetic"] .svc-card, [data-theme="kinetic"] .why-card,
[data-theme="kinetic"] .step, [data-theme="kinetic"] .demo-card,
[data-theme="kinetic"] .price-card, [data-theme="kinetic"] .form,
[data-theme="kinetic"] .win--admin {
  border: 2.5px solid var(--ink);
}
[data-theme="kinetic"] .svc-grid .svc-card:nth-child(3n+2) { transform: translateY(0.8rem); }
[data-theme="kinetic"] .svc-card { transition-duration: 0.09s; }
[data-theme="kinetic"] .svc-card:hover,
[data-theme="kinetic"] .demo-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--ink);
  border-bottom: 6px solid var(--accent);
}
[data-theme="kinetic"] .svc-grid .svc-card:nth-child(3n+2):hover { transform: translate(-3px, calc(0.8rem - 3px)); }
[data-theme="kinetic"] .svc-icon {
  color: var(--ink);
  background: var(--accent);
  padding: 0.4rem;
  width: 2.8rem; height: 2.8rem;
  border: 2px solid var(--ink);
}

[data-theme="kinetic"] .why-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
[data-theme="kinetic"] .why-card { border-left: 8px solid var(--accent); }

[data-theme="kinetic"] .step-num {
  border-radius: 0;
  border: 2px solid var(--ink);
  background: var(--accent);
  font-weight: 700;
}
[data-theme="kinetic"] .steps .step:nth-child(even) { transform: translateY(0.7rem); }

[data-theme="kinetic"] .demo-thumb { border: 2px solid var(--ink); background: var(--bg-soft); }
[data-theme="kinetic"] .dt-b { background: var(--accent); border: 2px solid var(--ink); }
[data-theme="kinetic"] .demo-status { border: 2px solid var(--ink); border-radius: 0; color: var(--ink); font-weight: 600; }
[data-theme="kinetic"] .demo-status--prod { background: var(--accent); border-color: var(--ink); color: var(--ink); }

[data-theme="kinetic"] .price-badge {
  background: var(--accent); color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
}
[data-theme="kinetic"] .price-card--featured { box-shadow: var(--shadow-strong); }
[data-theme="kinetic"] .price-list li::before { content: "→"; color: var(--ink); }
[data-theme="kinetic"] .price-amount { font-family: var(--font-display); }

[data-theme="kinetic"] .field input, [data-theme="kinetic"] .field select, [data-theme="kinetic"] .field textarea {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
}
[data-theme="kinetic"] .field input:focus, [data-theme="kinetic"] .field select:focus, [data-theme="kinetic"] .field textarea:focus {
  box-shadow: 3px 3px 0 0 var(--accent), 3px 3px 0 2px var(--ink);
}
[data-theme="kinetic"] .site-footer { border-top: 3px solid var(--ink); background: var(--ink); color: #fff; }
[data-theme="kinetic"] .site-footer .footer-brand p,
[data-theme="kinetic"] .site-footer .footer-nav a,
[data-theme="kinetic"] .site-footer .footer-meta { color: #d6d6cd; }
[data-theme="kinetic"] .site-footer .footer-nav a:hover { color: var(--accent); }
[data-theme="kinetic"] .site-footer .footer-meta a { color: var(--accent); }

/* Panel and carousel chrome */
[data-theme="kinetic"] .mode-panel { border: 2.5px solid var(--ink); box-shadow: 6px 6px 0 0 var(--accent), 6px 6px 0 2.5px var(--ink); }
[data-theme="kinetic"] .mp-label { color: var(--ink); }
[data-theme="kinetic"] .mp-label::after { content: " →"; }
[data-theme="kinetic"] .car-btn { border: 2.5px solid var(--ink); transition-duration: 0.09s; }
[data-theme="kinetic"] .car-btn:hover { background: var(--accent); color: var(--ink); }
[data-theme="kinetic"] .mode-card.is-selected::after { border-color: var(--ink); }

/* Motion: fast, stepped, directional */
[data-theme="kinetic"] .reveal {
  transform: translateX(-22px);
  transition-duration: 0.28s;
  transition-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
}
[data-theme="kinetic"] .reveal.in-view { transform: none; }
[data-theme="kinetic"] ::selection { background: var(--accent); color: var(--ink); }

/* --------------------------------------------------------------------------
   Self-preview
   -------------------------------------------------------------------------- */
.mode-card[data-mode="kinetic"] .mc-prev {
  background: #ffffff;
  border: 2px solid #0c0c0c;
  border-radius: 0;
}
.mode-card[data-mode="kinetic"] .mp-a {
  width: 1.6rem; height: 1.6rem;
  background: #c4f000;
  border: 2px solid #0c0c0c;
  right: 0.55rem; top: 0.55rem;
}
.mode-card[data-mode="kinetic"] .mp-b {
  width: 2.8rem; height: 0.45rem;
  background: repeating-linear-gradient(90deg, #0c0c0c 0 0.5rem, transparent 0.5rem 0.85rem);
  left: 0.6rem; top: 0.8rem;
}
.mode-card[data-mode="kinetic"] .mp-c {
  width: auto; height: auto; background: none;
  right: 0.6rem; bottom: 0.4rem;
}
.mode-card[data-mode="kinetic"] .mp-c::before {
  content: "→";
  font-family: "Archivo Black", sans-serif;
  font-size: 1.1rem; color: #0c0c0c;
}
.mode-card[data-mode="kinetic"] .mc-aa {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  color: #0c0c0c; left: 0.6rem; bottom: 0.45rem;
}