/* Distributor landing — shared styles
   Light: data-theme="light" (default)
   Dark : data-theme="dark"
*/

:root {
  --d-pad: clamp(20px, 5vw, 64px);
  --d-max: 1240px;
  --d-radius: 14px;
  --d-radius-lg: 22px;

  /* light tokens */
  --d-bg: #fbf6ec;
  --d-bg-2: #f4eadb;
  --d-card: #ffffff;
  --d-ink: #15110b;
  --d-ink-soft: #2a241c;
  --d-mute: #6a6256;
  --d-line: #ebe1cf;
  --d-rule: #d8ceb8;
  --d-accent: #ff5b1f;
  --d-accent-deep: #e94a0f;
  --d-ember: #ff8a3d;
  --d-gold: #c89b5c;
  --d-success: #2d8a5b;
}

[data-theme="dark"] {
  --d-bg: #0a0908;
  --d-bg-2: #15110d;
  --d-card: #1b1611;
  --d-ink: #f6efde;
  --d-ink-soft: #d8ccb3;
  --d-mute: #8a8273;
  --d-line: #2a2218;
  --d-rule: #3a2e22;
  --d-accent: #ff7a3a;
  --d-accent-deep: #ff5b1f;
  --d-ember: #ffb072;
  --d-gold: #e8b878;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--d-bg);
  color: var(--d-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body { padding-bottom: 96px; }
@media (min-width: 760px) { body { padding-bottom: 0; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.display, .h1, .h2, .h3 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.0;
  text-wrap: balance;
}
.h1 { font-size: clamp(42px, 9.2vw, 104px); }
.h2 { font-size: clamp(34px, 6.6vw, 72px); }
.h3 { font-size: clamp(22px, 4vw, 32px); }
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--d-accent);
  font-weight: 600;
}
.lede {
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.5;
  color: var(--d-ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
}
.accent { color: var(--d-accent); }
.wrap { max-width: var(--d-max); margin: 0 auto; padding-inline: var(--d-pad); }

/* Promo bar */
.promo {
  background: var(--d-ink);
  color: #f9e9d1;
  padding: 10px 14px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
[data-theme="dark"] .promo {
  background: var(--d-accent);
  color: #fff;
  font-weight: 700;
}
.promo strong { color: var(--d-ember); font-weight: 700; }
[data-theme="dark"] .promo strong { color: #fff; }

/* Header */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--d-bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--d-line);
}
.site-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
}
.site-actions {
  display: flex; align-items: center; gap: 8px;
}
.site-actions .lang-btn,
.site-actions .bo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--d-line);
  color: var(--d-ink);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.site-actions .lang-btn:hover,
.site-actions .bo-btn:hover { border-color: var(--d-accent); color: var(--d-accent); }
.site-actions .lang-btn .caret { font-size: 9px; opacity: 0.6; }
.lang-wrap { position: relative; }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 12px;
  padding: 6px;
  display: none;
  min-width: 180px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.25);
  z-index: 70;
}
.lang-wrap.is-open .lang-menu { display: block; }
.lang-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: 8px;
  font-size: 13px;
  color: var(--d-ink);
  text-align: left;
}
.lang-menu button:hover { background: var(--d-bg-2); color: var(--d-accent); }
.lang-menu button.is-active { color: var(--d-accent); font-weight: 700; }
@media (max-width: 640px) {
  .site-actions .bo-btn .lbl-long { display: none; }
  .site-actions .lang-btn .lbl-long { display: none; }
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.logo .flame {
  width: 26px; height: 26px;
  background: var(--d-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2c0 4-5 5-5 11a5 5 0 0010 0c0-3-2-4-2-7 0 2-2 3-3 3 0-3 2-4 0-7z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2c0 4-5 5-5 11a5 5 0 0010 0c0-3-2-4-2-7 0 2-2 3-3 3 0-3 2-4 0-7z'/></svg>") center/contain no-repeat;
}
.logo .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--d-mute);
  letter-spacing: 0.18em;
  border-left: 1px solid var(--d-line);
  padding-left: 10px;
  margin-left: 2px;
  text-transform: uppercase;
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--d-ink);
  color: var(--d-bg);
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
}
[data-theme="dark"] .nav-cta { background: var(--d-accent); color: #fff; }
.nav-cta:hover { background: var(--d-accent); color: #fff; }

@media (max-width: 540px) { .logo .role { display: none; } }

/* Hero */
.hero { padding: clamp(28px, 6vw, 64px) 0 clamp(40px, 8vw, 96px); position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } }

.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 999px;
  padding: 7px 14px 7px 8px;
  font-size: 12px;
  color: var(--d-ink-soft);
  margin-bottom: 20px;
  font-weight: 600;
}
.hero-tag .dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--d-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--d-accent) 18%, transparent);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--d-accent) 0%, transparent); } }

.hero h1 .l { display: block; }
.hero h1 .l.accent { color: var(--d-accent); }
.hero p.lede { margin-top: 22px; }

.hero-cta { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }

.btn-primary {
  background: var(--d-accent);
  color: #fff;
  padding: 18px 26px;
  border-radius: 999px;
  border: 0;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 36px -14px color-mix(in srgb, var(--d-accent) 60%, transparent);
  transition: background .15s, transform .12s;
}
.btn-primary:hover { background: var(--d-accent-deep); }
.btn-primary:active { transform: translateY(1px); }
.btn-outline {
  color: var(--d-ink);
  padding: 16px 22px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  border: 1px solid var(--d-ink);
  background: transparent;
  border-radius: 999px;
}
.btn-outline:hover { background: var(--d-ink); color: var(--d-bg); }

.hero-stats {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--d-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--d-line);
  column-gap: 1px;
}
.hero-stat {
  background: var(--d-card);
  padding: 16px 14px;
}
.hero-stat .n {
  font-family: 'Anton', sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
  color: var(--d-accent);
}
.hero-stat .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-mute);
  margin-top: 6px;
}

.hero-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--d-bg-2);
}
.hero-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero-art .chip {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  background: rgba(21, 17, 11, 0.86);
  color: #f5ecdb;
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-art .chip strong { color: var(--d-ember); font-weight: 700; }
@media (min-width: 960px) { .hero-art { aspect-ratio: 1 / 1.1; } }

/* Marquee */
.proof {
  background: var(--d-ink);
  color: #f5ecdb;
  padding: 14px 0;
  overflow: hidden;
  border-block: 1px solid var(--d-rule);
}
[data-theme="dark"] .proof { background: var(--d-accent); color: #fff; }
.proof-track {
  display: flex; gap: 56px;
  animation: marquee 32s linear infinite;
  width: max-content;
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.proof-track span { display: inline-flex; align-items: center; gap: 14px; }
.proof-track span::after { content: '★'; color: var(--d-ember); font-size: 14px; }
[data-theme="dark"] .proof-track span::after { color: #fff; opacity: 0.85; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Section common */
section { padding-block: clamp(56px, 9vw, 110px); }
.sec-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 5vw, 56px); max-width: 760px; }
.sec-head .eyebrow { display: inline-block; }