:root {
  --ks-green: #05ce78;
  --ks-green-dark: #009e5a;
  --ks-black: #08090c;
}

.ks-campaign { background: #08090c; }
.ks-campaign main { overflow: hidden; }
.campaign-bar {
  min-height: 38px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #07110c;
  background: var(--ks-green);
  font-size: 12px;
  letter-spacing: .01em;
}
.campaign-bar strong { font-weight: 900; }
.campaign-header { top: 0; }
.ks-button {
  color: #04110a;
  border-color: rgba(0,0,0,.08);
  background: var(--ks-green);
  box-shadow: 0 10px 30px rgba(5,206,120,.18);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.ks-button:hover { transform: translateY(-2px); background: #16dd8b; box-shadow: 0 14px 34px rgba(5,206,120,.3); }
.ks-button.compact { min-height: 40px; padding: 9px 15px; }
.ks-button.large { min-height: 54px; padding: 14px 24px; font-size: 15px; }
.ks-secondary { color: #fff; background: rgba(8,9,12,.6); backdrop-filter: blur(12px); }

.ks-hero {
  min-height: min(760px, calc(100vh - 110px));
  margin-top: 24px;
  position: relative;
  display: flex;
  align-items: end;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;
  background: #121419;
  box-shadow: 0 34px 100px rgba(0,0,0,.4);
}
.hero-image { position: absolute; inset: 0 0 0 auto; width: 65%; height: 100%; object-fit: cover; object-position: center; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,5,7,.93) 0%, rgba(4,5,7,.62) 39%, rgba(4,5,7,.03) 72%), linear-gradient(0deg, rgba(4,5,7,.75), transparent 48%); }
.hero-copy-block { width: min(610px, 62%); padding: clamp(30px, 5vw, 66px); position: relative; z-index: 1; }
.ks-eyebrow { margin: 0 0 16px; color: var(--ks-green); font-size: 12px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.hero-copy-block h1 { margin: 0 0 22px; font-size: clamp(48px, 6.3vw, 88px); line-height: .94; color: #fff; }
.hero-copy-block > p:not(.ks-eyebrow) { max-width: 540px; margin: 0 0 26px; color: #d9dce0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-copy-block small { display: block; margin-top: 16px; color: #a9adb4; }

.promise-strip { margin-top: 18px; padding: 18px 22px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; border: 1px solid var(--line); border-radius: 20px; color: #cbcdd1; background: rgba(255,255,255,.035); font-size: 13px; text-align: center; }
.promise-strip span + span { border-left: 1px solid var(--line); }

.campaign-section { margin: 24px auto; padding: clamp(26px, 5vw, 64px); color: #15171b; border-radius: 30px; background: #f5f2ec; }
.campaign-section.dark-section { color: #fff; background: linear-gradient(145deg, #171a21, #0b0c10); border: 1px solid var(--line); }
.section-copy { max-width: 720px; }
.section-copy.centered { margin: 0 auto 34px; text-align: center; }
.campaign-section h2, .final-cta h2 { margin: 0 0 18px; font-size: clamp(38px, 5vw, 68px); line-height: 1; }
.campaign-section .section-copy > p:not(.ks-eyebrow), .final-cta > p:not(.ks-eyebrow) { margin: 0; color: #666a70; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.7; }
.dark-section .section-copy > p:not(.ks-eyebrow) { color: #afb4bc; }

.feature-cards { margin-top: 38px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: start; }
.feature-card { overflow: hidden; border-radius: 24px; color: #fff; background: #111318; }
.feature-card img { width: 100%; height: auto; display: block; object-fit: contain; }
.feature-card > div { padding: 21px 23px 24px; }
.feature-card h3 { margin: 0 0 8px; font-size: 25px; }
.feature-card p { margin: 0; color: #aeb2b9; line-height: 1.55; }

.video-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.video-frame { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: #050608; }
.video-frame video { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; }
.video-toggle { position: absolute; left: 18px; bottom: 18px; min-width: 66px; min-height: 40px; padding: 8px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(5,6,8,.7); backdrop-filter: blur(12px); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

.split-feature { display: grid; grid-template-columns: 1.16fr .84fr; gap: clamp(28px,5vw,68px); align-items: center; }
.split-feature img, .package-section > img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 24px;
  box-shadow: 0 24px 55px rgba(23,25,31,.15);
}
.text-cta { display: inline-flex; margin-top: 24px; color: #087948; font-weight: 900; }
.package-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(28px,5vw,68px); align-items: center; }

.final-cta { margin: 24px auto 50px; padding: clamp(46px,8vw,100px) 26px; border: 1px solid rgba(5,206,120,.25); border-radius: 32px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(5,206,120,.17), transparent 42%), #101217; }
.final-cta .ks-eyebrow { justify-content: center; }
.final-cta > p:not(.ks-eyebrow) { max-width: 660px; margin: 0 auto 28px; color: #afb4bc; }
.campaign-footer { padding-bottom: 90px; }
.mobile-ks-cta { display: none; }

@media (max-width: 880px) {
  .campaign-nav { display: none; }
  .ks-hero { min-height: 700px; }
  .hero-image { width: 72%; object-position: 55% center; }
  .hero-scrim { background: linear-gradient(0deg, rgba(4,5,7,.96) 0%, rgba(4,5,7,.82) 40%, rgba(4,5,7,.08) 82%); }
  .hero-copy-block { width: 100%; padding: 30px; }
  .hero-copy-block h1 { font-size: clamp(43px,12vw,68px); }
  .promise-strip { grid-template-columns: repeat(2,1fr); }
  .promise-strip span + span { border-left: 0; }
  .promise-strip span:nth-child(even) { border-left: 1px solid var(--line); }
  .split-feature, .package-section { grid-template-columns: 1fr; }
  .package-section .section-copy { order: 2; }
  .feature-cards { grid-template-columns: 1fr; }
  .feature-card { max-width: 640px; margin-inline: auto; }
}

@media (max-width: 620px) {
  .campaign-bar { justify-content: space-between; font-size: 11px; }
  .campaign-bar span { max-width: 52%; }
  .campaign-header .nav-actions { display: none; }
  .campaign-header .nav { min-height: 60px; }
  .ks-hero { width: 100%; min-height: 690px; margin-top: 0; border-width: 0 0 1px; border-radius: 0; }
  .hero-image { width: 100%; height: 56%; object-position: 55% center; }
  .hero-copy-block { padding: 30px 20px 36px; }
  .hero-copy-block > p:not(.ks-eyebrow) { font-size: 17px; }
  .hero-actions .button { width: 100%; }
  .promise-strip { width: calc(100% - 24px); padding: 14px 8px; font-size: 11px; }
  .campaign-section { width: calc(100% - 24px); padding: 28px 18px; border-radius: 22px; }
  .feature-cards, .video-grid { grid-template-columns: 1fr; }
  .campaign-section h2, .final-cta h2 { font-size: 39px; }
  .final-cta { width: calc(100% - 24px); margin-bottom: 24px; }
  .campaign-footer { padding-bottom: 104px; }
  .mobile-ks-cta { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); min-height: 54px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; color: #03100a; background: var(--ks-green); box-shadow: 0 15px 45px rgba(0,0,0,.45); font-size: 14px; font-weight: 900; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ks-button { transition: none; }
}