/* ================================================================
   180 DARTS — Kickstarter additions
   Layered on top of styles.css for the campaign launch. Owns only
   the new components introduced by index.html for the campaign
   (KS section, KS buttons and KS badges). No global overrides.
   ================================================================ */

:root {
  --ks-green: #05ce78;
  --ks-green-dark: #04a763;
  --ks-green-soft: rgba(5, 206, 120, 0.12);
}

/* ---- Kickstarter buttons ---- */
.btn--ks {
  background: var(--ks-green);
  color: #062418;
  border-color: var(--ks-green);
}
.btn--ks:hover {
  background: var(--ks-green-dark);
  border-color: var(--ks-green-dark);
  color: #fff;
}
.btn--ks svg path { stroke: currentColor; }

.btn--ks-big {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px 16px 16px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--ks-green);
  color: #062418;
  border: 1px solid var(--ks-green);
  border-radius: 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 10px 30px -12px rgba(5, 206, 120, 0.55);
  text-decoration: none;
}
.btn--ks-big:hover {
  transform: translateY(-2px);
  background: var(--ks-green-dark);
  box-shadow: 0 18px 40px -14px rgba(5, 206, 120, 0.65);
}
.btn--ks-big svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.ks-cta__badge {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 6px;
}

/* ---- "Just launched" hero pill ---- */
.ks-badge-link {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ks-badge-link img {
  display: block;
  height: auto;
}
.ks-badge-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(5, 206, 120, 0.45);
}
.ks-badge-link--hero img {
  height: 56px;
  margin: 22px 0 14px;
}

/* PWL circular badge stays a perfect circle */
#download .ks-badge-link img {
  height: 64px;
  border-radius: 50%;
}

/* ---- Kickstarter section ---- */
.section--ks {
  padding: 14vh 8vw 12vh;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.section--ks::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 10%, var(--ks-green-soft), transparent 60%),
    radial-gradient(ellipse at 10% 90%, rgba(196, 153, 81, 0.10), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.ks {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
.ks__title em {
  color: var(--ks-green);
  font-style: normal;
}

.ks__stretch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 48px 0 56px;
  width: 100%;
}

.ks-stretch {
  position: relative;
  padding: 24px 22px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.ks-stretch:hover {
  transform: translateY(-3px);
  border-color: rgba(5, 206, 120, 0.45);
  background: rgba(5, 206, 120, 0.04);
}
.ks-stretch__num {
  font-family: 'Nexa', "Space Grotesk", "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  color: var(--ks-green);
  margin-bottom: 10px;
}
.ks-stretch h4 {
  font-family: 'Nexa', "Space Grotesk", "Inter", sans-serif;
  font-size: 1.1rem;
  margin: 0 0 8px;
  font-weight: 600;
}
.ks-stretch p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  color: var(--text-soft, currentColor);
  opacity: 0.78;
}

/* Light theme fallbacks: read soft text from a darker palette if the
   page uses light colours, since some pages flip on the body class. */
body.is-light .ks-stretch {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}
body.is-light .ks-stretch p { opacity: 0.72; }

/* ---- KS CTA block ---- */
.ks__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-top: 12px;
}
.ks__hint {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  opacity: 0.65;
  margin: 0;
  max-width: 560px;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 720px) {
  .ks-badge-link--hero img { height: 44px; margin: 18px 0 10px; }
  .btn--ks-big {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    font-size: 0.98rem;
  }
  .ks-cta__badge { height: 36px; }
  .section--ks { padding: 10vh 6vw 8vh; }
  .ks__stretch { margin: 36px 0 40px; gap: 12px; }
  #download .ks-badge-link img { height: 52px; }
}
@media (max-width: 480px) {
  .ks__stretch { grid-template-columns: 1fr; }
  .btn--ks-big { flex-wrap: wrap; gap: 10px; padding: 12px 16px; font-size: 0.92rem; }
  .ks-cta__badge { height: 32px; }
  .ks__hint { font-size: 0.78rem; }
  .ks-badge-link--hero img { height: 38px; }
}
@media (max-width: 360px) {
  .ks-cta__badge { display: none; }
}

/* ---- Coming-soon modal ---- */
.cs-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.cs-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}
.cs-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cs-modal__panel {
  position: relative;
  z-index: 1;
  background: #f5ecd8;
  color: #2d2620;
  padding: 40px 36px 32px;
  border-radius: 22px;
  width: min(440px, calc(100vw - 32px));
  text-align: center;
  box-shadow: 0 30px 80px -10px rgba(20, 16, 10, 0.55);
  transform: translateY(14px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-modal.is-open .cs-modal__panel {
  transform: translateY(0) scale(1);
}
.cs-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgba(45, 38, 32, 0.55);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.18s, color 0.18s;
}
.cs-modal__close:hover {
  background: rgba(45, 38, 32, 0.08);
  color: #2d2620;
}
.cs-modal__close svg {
  width: 18px;
  height: 18px;
  fill: none;
}
.cs-modal__kicker {
  display: inline-block;
  font-family: 'Nexa', 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ks-green-dark, #04a763);
  margin-bottom: 14px;
}
.cs-modal__title {
  font-family: 'Nexa', 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 14px;
  color: #2d2620;
}
.cs-modal__body {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(45, 38, 32, 0.72);
  margin: 0 0 24px;
}
.cs-modal__cta {
  width: 100%;
  justify-content: center;
}

@media (max-width: 480px) {
  .cs-modal__panel { padding: 32px 24px 24px; border-radius: 18px; }
  .cs-modal__title { font-size: 26px; }
  .cs-modal__body { font-size: 14px; }
}

/* Disable page scroll while modal is open */
body.cs-modal-open { overflow: hidden; }