:root{
  --vk-max: 1100px;
  --vk-gap: 32px;
  --vk-radius: 16px;
  --vk-bg: #ffffff;
  --vk-text: #1a1a1a;
  --vk-muted: #5b5b5b;
  --vk-accent: #ffca05; /* VierCycle yellow */
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--vk-text);
  background: #ffffff;
}

/* Section wrapper */
.vk-section {
  // padding: clamp(20px, 5vw, 48px);
}
.vk-wrap{
  max-width: var(--vk-max);
  margin: 0 auto;
  background: var(--vk-bg);
  // border-radius: 20px;
  padding: clamp(16px, 3vw, 28px);
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* media | content */
  gap: var(--vk-gap);
  align-items: start;
}

/* ===== Hero Education Section ===== */
.vier-hero-edu {
  background: #fff;
  padding: clamp(40px, 8vw, 10px) 20px;
  display: flex;
  justify-content: center;
}
.edu-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: top;
  max-width: 1200px;
  width: 100%;
}

/* Text */
.edu-text h1 {
  font-size: clamp(32px, 6vw, 54px);
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.1;
}
.edu-text h3 {
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  margin-bottom: 12px;
}
.edu-text p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.edu-text ul {
  margin: 0 0 20px 18px;
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
}
.edu-text li {
  margin-bottom: 6px;
}
.edu-btn {
  display: inline-block;
  background: #ffca05;
  color: #111;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.edu-btn:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* Image */
.edu-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Responsive */
@media (max-width: 900px) {
  .edu-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .edu-text ul {
    text-align: left;
    display: inline-block;
  }
  .edu-image {
    order: -1;
  }
}


/* Media column */

.vk-hero{
  margin: 0 0 14px 0;
  border-radius: var(--vk-radius);
  overflow: hidden;
  background: #e9ecef;
}
.vk-hero img{
  display:block;
  width:100%;
  height: 320px;
  object-fit: cover;
}

.vk-hero {
  width: 100%;
  max-width: 600px; /* optional */
  margin: 0 auto;
}

.vk-hero-ratio {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;    /* makes it square */
  overflow: hidden;
  border-radius: 12px;    /* optional */
}

.vk-hero-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crop and fill nicely */
}


.vk-thumbs{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  padding-top: 10px;
  -webkit-overflow-scrolling: touch;
}
.vk-thumb{
  padding:0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #0000;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, transform .1s ease;
}
.vk-thumb:focus { outline: none; border-color: #222; }
.vk-thumb:hover { transform: translateY(-1px); }
.vk-thumb.is-active{ border-color: var(--vk-accent); }
.vk-thumb img{
  display:block;
  width: 100%;
  height: 56px;
  object-fit: cover;
}

/* Content column */
.vk-content{ padding-top: 4px; }
.vk-title{
  margin: 4px 0 10px;
  line-height: 1.15;
  font-size: clamp(20px, 2.4vw + 8px, 40px);
  font-weight: 600;
}
.vk-sub{
  color: var(--vk-muted);
  margin: 0 0 8px 0;
  font-size: 15px;
}
.vk-list{
  margin: 0 0 18px 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.vk-list li{
  color:#2b2b2b;
  line-height: 1.45;
}

.vk-feature-list .icon {
  color: #ffca05; /* brand yellow */
  font-weight: bold;
  font-size: 20px;
  line-height: 1;
}

.vk-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 10px 18px;
  background: var(--vk-accent);
  color: #111;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
  transition: transform .05s ease, box-shadow .2s ease, filter .2s ease;
  width: 100%;
}
.vk-cta:hover{ filter: brightness(0.97); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.vk-cta:active{ transform: translateY(1px); }

a:hover, a:focus {
  color: black;
}

/* Responsive */
@media (max-width: 960px){
  .vk-wrap{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .vk-hero img{ 
    // height: clamp(220px, 45vw, 320px);
  }
  .vk-content{ padding-top: 0; }
}

/* Make thumbs a horizontal scroll row on small screens */
@media (max-width: 768px) {
  .vk-thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 25%;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 2px 2px;
  }
  .vk-thumb {
    min-width: 0;
  }
  .vk-thumb img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
  }
}

/* Optional: highlight active thumb */
.vk-thumb.is-active img {
  outline: 2px solid #ffca05;
  outline-offset: 2px;
  border-radius: 8px;
}


/* Full width image section */
.vk-fullwidth-photo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vk-full-img {
  display: block;
  width: 80%;
  height: auto;
  object-fit: cover;
}

/* Text Header Section */
.vk-text-section {
  padding: clamp(40px, 8vw, 80px) 20px;
  background: #fff;
  display: flex;
  justify-content: center;
}

.vk-text-wrap {
  max-width: 900px;
  width: 100%;
  text-align: center;
}

.vk-heading {
  margin-bottom: 24px;
}

.vk-heading-line {
  height: 4px;
  width: 80%;
  background: #ffca05; /* VierCycle yellow */
  margin: 0 auto 20px;
}

.vk-heading h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

.vk-body {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
  display: grid;
  gap: 16px;
  text-align: justify;
}

@media (max-width: 768px) {
  .vk-body {
    font-size: 15px;
    text-align: left;
  }
}

/* ===== Timeline / Steps ===== */
.vk-steps{
  margin-top: 14px;
  padding: 16px 10px 0;
}
.vk-steps-list{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 2vw, 18px);
  padding: 24px 0 0;
  margin: 0;
  list-style: none;
}

/* base track */
.vk-steps-list::before{
  content:"";
  position: absolute; left: 0; right: 0; top: 18px;
  height: 8px; border-radius: 999px;
  background: #e5e7eb;
}
.vk-steps-list::after{
  // content:"";
  position: absolute; left: 0; top: 18px;
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #21a5ff 0%, #21a5ff 70%, #ffca05 70%);
  width: 0%;
  transition: width .5s ease;
}

.vk-step{
  position: relative;
  text-align: center;
}

/* CIRCLE node */
.vk-num{
  position: absolute; 
  left: 50%; 
  top: -20px; 
  transform: translateX(-50%);
  width: 44px; 
  height: 44px; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500; 
  color: #fff;
  background: #c7cdd4; /* default gray */
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.vk-step .vk-title{
  display: block;
  margin-top: 50px;
  font-weight: 500;
  color: #111827;
  font-size: 17px;
}

.vk-step.is-done .vk-num{ background:#21a5ff; }
.vk-step.is-current .vk-num{ background:#ffca05; color:#111; }
.vk-step.is-upcoming .vk-num{ background:#c7cdd4; }

/* Responsive */
@media (max-width: 640px){
  .vk-steps-list{ gap: 8px; }
  .vk-step .vk-title{ font-size: 14px; }
  .vk-num{ width:38px; height:38px; font-size:13px; }
  .vk-steps-list::before, .vk-steps-list::after{ top: 16px; height:6px; }
}



/* ===== Specs Section ===== */
.vk-specs{
  padding: clamp(24px, 6vw, 56px) 20px;
  display: flex;
  justify-content: center;
  background: #fff;
}
.vk-specs-wrap{
  width: 100%;
  max-width: 1100px;
  display: grid;
  gap: 18px;
}

/* Top cards */
.vk-specs-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.vk-card{
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 8px 18px rgba(0,0,0,.06);
  padding: 14px 14px 18px;
  display: grid;
  gap: 10px;
  text-align: center;
  border: 1px solid #eef0f3;
}
.vk-card-media{
  display: grid;
  place-items: center;
}
.vk-card-media img{
  max-width: 90%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.vk-card-head h3{
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.15;
}
.vk-card-body p{
  margin: 2px 0;
  font-size: 15px;
}

/* Bottom features panel */
.vk-benefits{
  border-radius: 16px;
  border: 1px solid #eef0f3;
  background: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
  padding: clamp(14px, 3vw, 18px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 22px;
}
.vk-benefit{
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
}
.vk-ico{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e8f7ea;       /* soft green tile */
  border: 1px solid #d7eedb;
}
.vk-ico svg{
  width: 20px; height: 20px;
  fill: #22a35a;             /* green icon */
  stroke: #22a35a; stroke-width: 1.5; 
}

/* Text inside benefit */
.vk-btxt{
  font-size: 24px;
  line-height: 1.45;
}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .vk-specs-cards{ grid-template-columns: 1fr; }
  .vk-card-media{ height: 100%; }
  .vk-benefits{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .vk-benefits{ grid-template-columns: 1fr; }
}


/* ============== 3 Steps Section ============== */
.vk-steps{
  // padding: clamp(40px, 8vw, 84px) 20px 0;
  padding: 10px;
  background:#fff;
  display:flex; justify-content:center;
}
.vk-steps-wrap{ width:100%; max-width:1100px; }

/* Heading block */
.vk-steps-head { text-align:center; margin-bottom: clamp(18px, 4vw, 28px); }
.vk-line{
  width:100px; height:6px; background:#ffca05;
  margin:0 auto 12px; border-radius:3px;
}
.vk-steps-head h2{
  margin:0 0 12px; font-size: clamp(28px, 5vw, 56px);
  line-height:1.1; font-weight: 500;
}

/* Two-column intro under heading (empty left column creates the “offset” look) */
.vk-head-grid{
  display:flex; gap: 12px;
  grid-template-columns: 1fr minmax(0, 640px);
  align-items:start; justify-content:center;
  margin: 0 auto;
}
.vk-head-copy{
  text-align:left; color:#2d2d2d; line-height:1.6;
  font-size: 15.8px; display:grid; gap:10px;
}

/* Steps row */
.vk-steps-row{
  margin-top: clamp(18px, 4vw, 28px);
  display:grid; gap: 24px;
  grid-template-columns: repeat(3, 1fr);
  align-items:start;
}

/* Step card */
.vk-step{ text-align:center; }
.vk-step h3{
  margin: 8px 0 6px; font-size: clamp(16px, 2vw, 20px); font-weight:800;
}
.vk-step p{ margin:0; color:#444; font-size:15px; }

/* Bike visuals */
.vk-step-media{
  position:relative;
  border-radius: 14px;
  border: 1px solid #eef0f3;
  background:#fff;
  overflow:hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
}
.vk-step-media img{
  display:block; width:100%; height:auto;
  // filter: grayscale(100%) brightness(1.05); /* “ghost” vibe like screenshot */
}
.vk-arrow{
  position:absolute; top:6%; right:6%;
  width:min(120px, 36%); height:auto;
  display:block;
}
.vk-arrow svg{ width:100%; height:auto; }

/* Responsive */
@media (max-width: 960px){
  .vk-head-grid{ grid-template-columns: 1fr; }
  .vk-steps-row{
    grid-template-columns: 80% 80% 80%;
    overflow-x:auto; gap:16px; padding-bottom:8px;
    scroll-snap-type: x mandatory;
  }
  .vk-step{ scroll-snap-align: start; }
}
@media (max-width: 520px){
  .vk-step h3{ font-size:16px; }
  .vk-step p{ font-size:14px; }
}

/* ===== Modes Section ===== */
.vk-modes { padding: clamp(40px, 8vw, 84px) 20px; background: #fff; }
.vk-modes-wrap { max-width: 1100px; margin: 0 auto; }

.vk-modes-head { text-align: center; margin-bottom: clamp(18px, 4vw, 28px); }
.vk-line { width: 100px; height: 6px; background: #ffca05; margin: 0 auto 12px; border-radius: 3px; }
.vk-modes-head h2 { margin: 0; font-size: clamp(28px, 5vw, 48px); line-height: 1.1; font-weight: 500; }

.vk-modes-list { display: grid; gap: clamp(18px, 4vw, 32px); }

.vk-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}

/* alternate layout on desktop */
.vk-mode.vk-flip .vk-mode-media { order: 2; }
.vk-mode.vk-flip .vk-mode-txt   { order: 1; }

/* media card */
.vk-mode-media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eef0f3;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
  background: #f6f6f6;
}
.vk-mode-media img { display: block; width: 100%; height: auto; object-fit: cover; }
.vk-mode-badge {
  position: absolute;
  right: 8px; bottom: 8px;
  padding: 6px 10px;
  font-weight: 500;
  background: rgba(0,0,0,.75);
  color: #fff;
  border-radius: 6px;
  font-size: 12.5px;
  letter-spacing: .2px;
}

/* text */
.vk-mode-txt h3 { margin: 0 0 6px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; }
.vk-mode-txt p  { margin: 0; color: #3a3a3a; line-height: 1.6; font-size: 15.8px; }

/* responsive */
@media (max-width: 960px) {
  .vk-mode { grid-template-columns: 1fr; }
  .vk-mode.vk-flip .vk-mode-media,
  .vk-mode.vk-flip .vk-mode-txt { order: initial; } /* stack naturally */
  .vk-mode-media img { height: clamp(200px, 45vw, 260px); }
}

/* ===== Mobile App Section ===== */
.vk-app {
  padding: clamp(40px, 8vw, 84px) 20px;
  background: #fff;
  display: flex;
  justify-content: center;
}

.vk-app-wrap {
  width: 100%;
  max-width: 1100px;
}

.vk-app-head {
  text-align: center;
  margin-bottom: clamp(18px, 4vw, 28px);
}

.vk-app-head h2 {
  margin: 0;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
  font-weight: 500;
}

.vk-line {
  width: 100px;
  height: 6px;
  background: #ffca05;
  margin: 0 auto 12px;
  border-radius: 3px;
}

.vk-app-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(18px, 4vw, 36px);
  align-items: center;
}

.vk-app-copy {
  color: #2d2d2d;
  line-height: 1.7;
  font-size: 15.8px;
}

.vk-app-phone {
  display: grid;
  place-items: center;
}

.vk-phone {
  width: min(360px, 90%);
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
  border-radius: 20px;
}

@media (max-width: 960px) {
  .vk-app-grid {
    grid-template-columns: 1fr;
  }

  .vk-app-copy {
    font-size: 15.2px;
  }

  .vk-phone {
    width: min(440px, 100%);
  }
}

/* Store buttons (sit under .vk-app-copy) */
.vk-store-buttons{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:20px;
}
.vk-store-btn{
  display:flex; align-items:center; gap:10px;
  background:#111; color:#fff; text-decoration:none;
  padding:10px 14px; border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .08s ease, filter .15s ease;
}
.vk-store-btn:hover{ filter:brightness(1.05); }
.vk-store-btn:active{ transform:translateY(1px); }

.vk-store-ico{
  width:22px; height:22px; display:grid; place-items:center;
}
.vk-store-ico svg{ width:100%; height:100%; fill:#fff; }

.vk-store-txt{
  display:flex; flex-direction:column; line-height:1;
}
.vk-store-txt small{ font-size:11px; opacity:.85; }
.vk-store-txt strong{ font-size:15px; letter-spacing:.2px; }

/* Color accents per store (optional) */
.vk-store-android{ background:#1f1f1f; }
.vk-store-ios{ background:#000; }

/* Tighten on mobile */
@media (max-width: 480px){
  .vk-store-btn{ flex:1; justify-content:center; }
}


/* ===== CTA Section ===== */
.vk-cta-section {
  background: #111;
  padding: 20px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.vk-cta-wrap {
  display: grid;
  gap: 18px;
}

.vk-cta-wrap h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.vk-cta-btn {
  background: #ffca05;
  color: #111;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  min-width: 180px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.vk-cta-btn:hover {
  background: #e6b804;
}

.vk-cta-btn:active {
  transform: translateY(1px);
}

@media (max-width: 768px) {
  .vk-cta-btn {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ===== Range Section ===== */
.vk-range {
  background: #f9f9f9;
  padding: clamp(40px, 8vw, 80px) 20px;
  display: flex;
  justify-content: center;
}

.vk-range-wrap {
  width: 100%;
  max-width: 1100px;
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}

.vk-range-head p {
  text-align: center;
  font-size: 15.8px;
  color: #333;
  margin: 0;
}

.vk-range-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.vk-range-label h2 {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 500;
  margin: 0;
  line-height: 1;
  color: #000;
}

.vk-range-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .vk-range-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .vk-range-label h2 {
    font-size: clamp(42px, 10vw, 80px);
  }
}

/* ===== Minimal Design Section ===== */
.vk-minimal {
  background: #fafafa;
  padding: clamp(40px, 8vw, 90px) 20px;
  display: flex;
  justify-content: center;
}

.vk-minimal-wrap {
  width: 100%;
  max-width: 820px;            /* narrow column like mock */
}

.vk-minimal-head {
  text-align: center;
  margin-bottom: clamp(16px, 3vw, 24px);
}

.vk-line {
  width: 120px;
  height: 6px;
  background: #ffca05;         /* brand yellow */
  margin: 0 auto 14px;
  border-radius: 3px;
}

.vk-minimal-head h2 {
  margin: 0;
  line-height: 1.08;
  font-weight: 500;
  font-size: clamp(28px, 6vw, 48px);  /* big title like screenshot */
}

.vk-minimal-caption {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin: 0 0 12px;
}

/* Stack of rounded photos */
.vk-minimal-stack {
  display: grid;
  gap: clamp(14px, 2.6vw, 18px);
}

.vk-shot {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eceff2;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.vk-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Responsive tweaks */
@media (max-width: 560px) {
  // .vk-minimal-head h2 { font-size: clamp(26px, 9vw, 42px); }
  .vk-minimal-caption { font-size: 13px; text-align: left; }
}

/* ===== Safety & Protection ===== */
.vk-safety {
  background: #f5f7f6;
  padding: clamp(40px, 8vw, 84px) 20px;
  display: flex;
  justify-content: center;
}
.vk-safety-wrap { width: 100%; max-width: 1100px; }
.vk-safety-head { text-align: center; margin-bottom: clamp(18px, 4vw, 28px); }
.vk-safety-head h2 {
  margin: 0;
  font-weight: 500;
  line-height: 1.12;
  font-size: clamp(26px, 4.6vw, 40px);
}
.vk-line {
  width: 100px; height: 6px; border-radius: 3px;
  background: #ffca05; margin: 0 auto 12px;
}

/* Grid */
.vk-safety-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Cards */
.vk-safe-card {
  position: relative;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid #e6eaee;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  display: grid;
  gap: 8px;
}

.vk-safe-card h3 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.2;
  font-weight: 500;
}

.vk-safe-card p {
  margin: 0;
  color: #e6e6e6;           /* overridden in light cards */
  line-height: 1.55;
  font-size: 15px;
}

/* color variants */
.vk-dark {
  background: #171717;
  color: #fff;
  border-color: #2a2a2a;
}

.vk-dark h3 {
  color: white; /* override */
}
.vk-accent {
  background: #ffca05; 
  border-color: #ffca05;
  color: #102b10;
}
.vk-accent p { color: #213821; }
.vk-light {
  background: #dff7c8;      /* light green */
  border-color: #cfeeb5;
  color: #123012;
}
.vk-light p { color: #2e4a2e; }

/* big middle card spans both columns */
.vk-wide { grid-column: 1 / -1; }

/* Icon chip */
.vk-safe-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: #202020;      /* default for dark */
  border: 1px solid #2b2b2b;
}
.vk-safe-ico svg {
  width: 20px; height: 20px;
  fill: #b8f28c;            /* neon green accent */
  stroke: none;
}
.vk-accent .vk-safe-ico {
  background: rgba(16, 32, 16, .08);
  border-color: rgba(16, 32, 16, .12);
}
.vk-accent .vk-safe-ico svg { fill: #0f7a2b; }
.vk-light .vk-safe-ico {
  background: rgba(17, 96, 35, .07);
  border-color: rgba(17, 96, 35, .12);
}
.vk-light .vk-safe-ico svg { fill: #1a8f3c; }

/* Responsive */
@media (max-width: 920px) {
  .vk-safety-grid { grid-template-columns: 1fr; }
  .vk-wide { grid-column: auto; }
}

/* ===== Health Benefits Section ===== */
.vk-health {
  background: #fff;
  padding: clamp(40px, 8vw, 90px) 20px;
  display: flex;
  justify-content: center;
}
.vk-health-wrap { width: 100%; max-width: 1100px; }

.vk-health-head { text-align: center; margin-bottom: clamp(16px, 3vw, 24px); }
.vk-health-head h2 {
  margin: 0;
  line-height: 1.08;
  font-weight: 500;
  font-size: clamp(28px, 6vw, 48px);
}
.vk-line {
  width: 120px; height: 6px; border-radius: 3px;
  background: #ffca05; margin: 0 auto 14px;
}

.vk-health-copy {
  max-width: 640px;
  margin: 0 auto clamp(18px, 3.5vw, 26px);
  color: #333; line-height: 1.65; font-size: 15.8px;
  display: grid; gap: 10px;
  text-align: left;
}

.vk-health-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2vw, 16px);
}

.vk-health-card {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f3f3;
}
.vk-health-card img {
  display: block;
  width: 100%; height: 220px; object-fit: cover;
  transition: transform .4s ease;
}
.vk-health-card::after { /* subtle gradient for text legibility */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  pointer-events: none;
}
.vk-health-card figcaption {
  position: absolute; left: 14px; bottom: 12px; right: 14px;
  color: #fff; font-weight: 500; font-size: clamp(16px, 2.2vw, 22px);
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.vk-health-card:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
  .vk-health-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .vk-health-head h2 { 
    // font-size: clamp(26px, 9vw, 42px); 
  }
  .vk-health-grid { grid-template-columns: 1fr; }
  .vk-health-card img { height: 200px; }
}

/* ===== Extended Features Section ===== */
.vk-extended {
  background: #fff;
  padding: clamp(40px, 8vw, 96px) 20px;
  display: flex;
  justify-content: center;
}

.vk-extended-wrap {
  width: 100%;
  max-width: 980px;          /* narrow column like mock */
}

.vk-extended-head {
  text-align: center;
  margin-bottom: clamp(12px, 2.8vw, 16px);
}
.vk-extended-head h2 {
  margin: 0;
  font-size: clamp(32px, 6.2vw, 48px); /* big headline */
  line-height: 1.05;
  font-weight: 500;
}

.vk-extended-copy {
  max-width: 560px;
  margin: 0 auto clamp(20px, 4vw, 32px);
  text-align: center;
  color: #2f2f2f;
  line-height: 1.65;
  font-size: 15.6px;
  display: grid;
  gap: 8px;
}

.vk-extended-media {
  display: grid;
  gap: clamp(14px, 2.6vw, 18px);
}
.vk-extended-shot {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f3f3;
  border: 1px solid #e9edf2;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.vk-extended-shot img,
.vk-extended-shot video {
  display: block;
  // width: auto;
  height: 300px;              /* keep aspect ratio */
  object-fit: contain;
}

/* Optional: if you use <video> */
.vk-extended-shot video {
  /* adds mobile autoplay support when muted/inline set in HTML */
}

/* Responsive tweaks */
@media (max-width: 560px) {
  .vk-extended-head h2 { 
    // font-size: clamp(28px, 9vw, 42px); 
  }
  .vk-extended-copy { text-align: left; }
}

/* ===== Add-ons Section ===== */
.vk-addons {
  background: #fff;
  padding: clamp(40px, 8vw, 80px) 20px;
  display: flex;
  justify-content: center;
}

.vk-addons-wrap {
  width: 100%;
  max-width: 1200px;
}

.vk-addons-head {
  text-align: center;
  margin-bottom: clamp(20px, 4vw, 40px);
}
.vk-addons-head h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 4.6vw, 36px);
  font-weight: 500;
}
.vk-addons-head p {
  margin: 0;
  color: #555;
  font-size: 15.8px;
}

.vk-addons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.vk-addon-card {
  background: #fafafa;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid #eaeaea;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vk-addon-card img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
  margin-bottom: 16px;
}

.vk-addon-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

.vk-addon-card p {
  color: #555;
  font-size: 14px;
  flex-grow: 1;
}

.vk-addon-price {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 500;
  color: #ff9900;
}

.vk-addon-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 1024px) {
  .vk-addons-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .vk-addons-grid {
    grid-template-columns: 1fr;
  }
  .vk-addon-card img {
    height: 120px;
  }
}

/* ===== What's in the Box ===== */
.vk-box {
  background: #fff;
  padding: clamp(36px, 7vw, 80px) 20px;
  display: flex;
  justify-content: center;
}
.vk-box-wrap { width: 100%; max-width: 980px; text-align: center; }

.vk-box-head { margin-bottom: clamp(14px, 3vw, 20px); }
.vk-box-line {
  width: 100px; height: 4px; background: #a6f06a; margin: 0 auto 10px; border-radius: 3px;
}
.vk-box-head h2 {
  margin: 0; font-size: clamp(26px, 4.8vw, 36px); line-height: 1.15; font-weight: 500;
}

/* green rounded panel */
.vk-box-card {
  margin: 0 auto;
  background: #b8f28c;
  border: 1px solid #a9e67f;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: clamp(16px, 3vw, 22px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2vw, 20px);
  max-width: 820px;
  text-align: left;
}

/* two checkmark columns */
.vk-box-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
  font-size: 15.5px; color: #0f2d0f; line-height: 1.55; font-weight: 600;
}
.vk-box-list li {
  position: relative; padding-left: 26px;
}
.vk-box-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; line-height: 18px;
  text-align: center; font-weight: 500;
  background: #0f7a2b; color: #fff; border-radius: 50%;
  font-size: 12px;
}

/* product image overlaps the card bottom */
.vk-box-product {
  margin: 10px auto 0; width: min(420px, 80%); 
  transform: translateY(-14px);
}
.vk-box-product img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.18));
}

/* responsive stacking */
@media (max-width: 640px) {
  .vk-box-card { grid-template-columns: 1fr; }
  .vk-box-product { transform: translateY(-8px); width: min(360px, 92%); }
}

/* ===== Dark Specs Section ===== */
.vk-specs-dark{
  background:#121212;
  color:#e9ecef;
  padding: clamp(40px, 8vw, 96px) 20px;
  display:flex; justify-content:center;
}
.vk-specs-dark-wrap{ width:100%; max-width:900px; }

.vk-specs-dark-head{ text-align:center; margin-bottom: clamp(22px, 4vw, 32px); }
.vk-specs-accent{
  width:110px; height:6px; border-radius:3px;
  background:#7CFF65; margin:0 auto 12px;
}
.vk-specs-dark-head h2{
  margin:0; font-weight:800; line-height:1.15;
  font-size: clamp(24px, 4.8vw, 36px);
  color: white;
}
.vk-specs-illust{
  display:block; margin: 14px auto 0;
  width: min(320px, 70%); height:auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* table-like layout */
.vk-specs-table{
  margin-top: clamp(12px, 3vw, 18px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.vk-row{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.vk-cell{ align-self:center; }
.vk-key{
  font-weight:800;
  color:#ffffff;
}
.vk-val{
  color:#cfd6dc;
}

/* responsive */
@media (max-width: 640px){
  .vk-row{ grid-template-columns: 1fr; gap:6px; }
  .vk-key{ font-size: 14.5px; }
  .vk-val{ font-size: 14.5px; }
}

/* ===== Video Reviews ===== */
.vk-videos {
  background: #fff;
  padding: clamp(40px, 8vw, 84px) 20px;
  display: flex;
  justify-content: center;
}
.vk-videos-wrap { width: 100%; max-width: 1100px; }
.vk-videos-head { text-align: center; margin-bottom: clamp(18px, 4vw, 28px); }
.vk-videos-head h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 4.8vw, 36px);
  font-weight: 500;
}
.vk-videos-head p { margin: 0; color: #555; font-size: 15.6px; }

.vk-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 24px);
}

/* 16:9 responsive embed */
.vk-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;       /* modern browsers */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.vk-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* caption */
.vk-video {
  margin: 0;
}
.vk-video figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .vk-embed { padding-top: 56.25%; }
  .vk-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* Responsive */
@media (max-width: 900px) {
  .vk-videos-grid { grid-template-columns: 1fr; }
}

/* ===== Timeline ===== */
.vk-timeline {
  background: #fff;
  padding: clamp(40px, 8vw, 96px) 20px;
  display: flex; justify-content: center;
}
.vk-tl-wrap { width: 100%; max-width: 940px; }

/* Heading */
.vk-tl-head { text-align: center; margin-bottom: clamp(20px, 4vw, 32px); }
.vk-tl-head h2 {
  margin: 0 0 6px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #3a434a;
  font-size: clamp(28px, 5vw, 44px);
}
.vk-tl-head p {
  margin: 0 0 14px;
  color: #8a95a0;
  font-size: 15.5px;
}
.vk-tl-badge {
  display: inline-block;
  background: #e9ecef;
  color: #3a434a;
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12.5px;
}

/* Spine + list */
.vk-tl-list {
  position: relative;
  list-style: none;
  margin: clamp(14px, 3vw, 24px) 0 8px;
  padding: 0;
}
.vk-tl-list::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 6px; transform: translateX(-50%);
  background: #e5e8eb;
  border-radius: 3px;
}

/* Item */
.vk-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
}
.vk-tl-item::after { /* node */
  content: "";
  position: absolute;
  left: 50%; transform: translate(-50%, 0);
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 4px solid #c7cfd6;
}

/* Card & date */
.vk-tl-card {
  background: #f3f6f9;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  padding: 16px 18px;
  color: #3a434a;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.vk-tl-card h3 {
  margin: 0 0 6px;
  font-size: 16px; font-weight: 500;
}
.vk-tl-card p { margin: 0 0 6px; }
.vk-tl-card ul { margin: 0; padding-left: 18px; }
.vk-tl-card li { margin: 4px 0; }

.vk-tl-date {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .02em;
  color: #222;
}

/* Placement rules (desktop) */
.vk-tl-item.is-right .vk-tl-date { grid-column: 1; text-align: right; padding-right: 24px; }
.vk-tl-item.is-right .vk-tl-card { grid-column: 2; }

.vk-tl-item.is-left  .vk-tl-card { grid-column: 1; }
.vk-tl-item.is-left  .vk-tl-date { grid-column: 2; text-align: left; padding-left: 24px; }

/* Note */
.vk-tl-note {
  color: #8a95a0;
  font-size: 12.8px;
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 780px) {
  .vk-tl-list::before { left: 12px; transform: none; }
  .vk-tl-item { grid-template-columns: 1fr; padding-left: 28px; }
  .vk-tl-item::after { left: 12px; transform: none; }
  .vk-tl-date { order: -1; text-align: left; padding: 0 0 6px; }
  .vk-tl-item.is-right .vk-tl-date,
  .vk-tl-item.is-left  .vk-tl-date { padding: 0; }
}

/* ===== Story / Team / Awards ===== */
.vk-story {
  background: #f7f9fb;
  padding: clamp(40px, 8vw, 96px) 20px;
  display: flex; justify-content: center;
}
.vk-story-wrap { width: 100%; max-width: 1100px; }

.vk-story-head { text-align: center; margin-bottom: clamp(18px, 4vw, 28px); }
.vk-story-head h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(28px, 5.8vw, 46px);
  line-height: 1.1;
}
.vk-story-head p { margin: 8px auto 0; max-width: 740px; color:#4a5661; }
.vk-line { width: 110px; height: 6px; background:#ffca05; border-radius:3px; margin:0 auto 12px; }

.vk-sec-title { margin: 10px 0 6px; font-weight: 500; font-size: 18px; }
.vk-sec-sub   { margin: 0 0 14px; color:#60707e; }

/* Team */
.vk-team-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}
.vk-member {
  background:#fff; border:1px solid #e7edf3; border-radius:12px;
  text-align:center; padding:14px; box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.vk-member img { width:100%; object-fit:contain; border-radius:10px; }
.vk-member h4 { margin:10px 0 4px; font-weight:800; }
.vk-member p  { margin:0; color:#5b6976; font-size:14px; }

/* What we made */
.vk-made-grid {
  display:grid; gap:12px; margin-top:6px;
  grid-template-columns: repeat(4, 1fr);
}
.vk-shot { margin:0; border-radius:12px; overflow:hidden; border:1px solid #e7edf3; background:#fff; }
.vk-shot img { width:100%; object-fit:cover; display:block; }

.vk-made-video { margin-top: 14px; }
.vk-embed { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.vk-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Awards */
.vk-awards-grid {
  margin-top: 8px;
  display:grid; gap:12px;
  grid-template-columns: repeat(3, 1fr);
}
.vk-award {
  background:#fff; border:1px solid #e7edf3; border-radius:12px;
  padding:12px; display:grid; grid-template-columns: 56px 1fr; gap:12px;
  align-items:center;
}
.vk-award img { width:56px; height:56px; object-fit:contain; }
.vk-award h4 { margin:0 0 4px; font-size:16px; font-weight:800; }
.vk-award p  { margin:0; color:#5b6976; font-size:14px; }

/* Responsive */
@media (max-width: 1024px) {
  .vk-team-grid   { grid-template-columns: repeat(2, 1fr); }
  .vk-made-grid   { grid-template-columns: repeat(2, 1fr); }
  .vk-awards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .vk-team-grid   { grid-template-columns: 1fr; }
  .vk-made-grid   { grid-template-columns: 1fr; }
  .vk-awards-grid { grid-template-columns: 1fr; }
}

/* ===== Certificates Section ===== */
.vk-cert {
  background: #fff;
  padding: clamp(32px, 7vw, 72px) 20px;
  display: flex;
  justify-content: center;
}
.vk-cert-wrap { width: 100%; max-width: 1200px; }

.vk-cert-head { text-align: center; margin-bottom: clamp(18px, 4vw, 28px); }
.vk-cert-head h2 {
  margin: 0 0 6px;
  font-weight: 500;
  font-size: clamp(22px, 4.6vw, 28px);
  color: #1e293b;
}
.vk-cert-head p {
  margin: 0;
  color: #6b7280;
  font-size: 18px;
}

/* row of cards */
.vk-cert-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: clamp(12px, 2vw, 16px);
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.vk-cert-card {
  scroll-snap-align: start;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vk-cert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.vk-cert-card img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  display: block;
}
.vk-cert-card h3 {
  margin: 10px 0 2px;
  font-size: 15px;
  font-weight: 500;
  color: #0f172a;
}
.vk-cert-card p {
  margin: 0 8px 2px;
  font-size: 13px;
  color: #475569;
}

/* wider screens: 5 in a grid without scroll */
@media (min-width: 1024px) {
  .vk-cert-row {
    overflow: visible;
    grid-auto-flow: initial;
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ===== Submit Form ===== */
.vk-form {
  background: #fff;
  padding: clamp(36px, 7vw, 80px) 20px;
  display: flex; justify-content: center;
}
.vk-form-wrap { width: 100%; max-width: 980px; }

.vk-form-head { text-align: center; margin-bottom: clamp(18px, 4vw, 28px); }
.vk-form-head h2 { margin: 0 0 6px; font-weight: 500; font-size: clamp(22px, 4.6vw, 28px); }
.vk-form-head p { margin: 0; color: #8a95a0; }

.vk-form-body {
  background: #fafafa;
  border: 1px solid #eceff3;
  border-radius: 14px;
  padding: clamp(16px, 3vw, 22px);
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.vk-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 16px;
  margin-bottom: 12px;
}
.vk-field { display: grid; gap: 6px; }
.vk-field label {
  font-size: 13.5px; font-weight: 700; color: #3a434a;
}
.vk-field input,
.vk-field textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vk-field input::placeholder,
.vk-field textarea::placeholder { color: #a0a6ad; }
.vk-field input:focus,
.vk-field textarea:focus {
  border-color: #ffca05;
  box-shadow: 0 0 0 3px rgba(255,202,5,.25);
}

.vk-field textarea { resize: vertical; min-height: 120px; }

/* errors */
.vk-err { color: #d00; font-size: 12.5px; min-height: 16px; }

/* CTA button */
.vk-btn {
  margin-top: 8px;
  width: 100%;
  background: #ffca05;
  color: #111;
  font-weight: 500;
  border: 0;
  border-radius: 8px;
  padding: 14px 18px;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease, box-shadow .2s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.vk-btn:hover { filter: brightness(0.98); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.vk-btn:active { transform: translateY(1px); }

/* form status text */
.vk-form-msg { margin: 10px 0 0; color: #2e7d32; font-weight: 600; }

/* Responsive */
@media (max-width: 980px) { .vk-form-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .vk-form-grid { grid-template-columns: 1fr; } }

/* ===== Banner Carousel ===== */
.vk-banner {
  background: #fff;
  padding: clamp(12px, 2vw, 18px);
  display: flex; justify-content: center;
}
.vk-banner-wrap{
  position: relative;
  width: 100%;
  max-width: 1200px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Slides track */
.vk-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  width: 100%;
  overflow: hidden;
  scroll-snap-type: x mandatory;           /* smooth touch scrolling */
  scroll-behavior: smooth;
}
.vk-slide{
  position: relative;
  display: flex;
  width: 100%;
  height: clamp(180px, 28vw, 420px);       /* responsive height */
  scroll-snap-align: start;
  user-select: none;
  justify-content: center;
}
.vk-slide img{
  width: auto; height: 100%;
  display: block; object-fit: cover;
}

/* Arrows */
.vk-nav{
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.9);
  display: grid; place-items: center;
  font-size: 20px; line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  cursor: pointer;
}
.vk-nav.prev{ left: 10px; }
.vk-nav.next{ right: 10px; }
.vk-nav:hover{ background: #fff; }

/* Dots */
.vk-dots{
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 8px; z-index: 2;
}
.vk-dots button{
  width: 8px; height: 8px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.7);
}
.vk-dots button.is-active{ background: #111; }

/* Small screens: show lighter shadows/arrows */
@media (max-width: 560px){
  .vk-nav{ width: 32px; height: 32px; font-size: 18px; }
}

/* ===== Campaign Progress ===== */
.vk-campaign{
  margin-top: 30px;
  background: #000;
  border: 1px solid #eceff3;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
  font-size: 14px;
  color: #fff;
}

.vk-cp-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.vk-cp-head strong{ font-weight: 500; font-size: 14px; }
.vk-cp-head .vk-cp-count{ color: #fff; }

.vk-cp-bar{
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}

/* subtle tick marks at 25/50/75/100% */
.vk-cp-bar::after{
  content:"";
  position:absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.08) 0 1px, transparent 1px) 0 0 / 25% 100% repeat-x;
  pointer-events: none;
}

.vk-cp-fill{
  height: 100%;
  width: 0%;
  background: #ffca05;
  border-radius: 999px;
  transition: width .7s ease;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

.vk-cp-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  color: #fff;
  font-size: 13px;
}
.vk-cp-foot .vk-cp-pct{ font-weight: 500; color: #fff; }

@media (max-width: 520px){
  .vk-cp-head, .vk-cp-foot{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ===== Instruction Videos ===== */
.vk-howto{ background:#fff; padding: clamp(36px,8vw,84px) 20px; display:flex; justify-content:center; }
.vk-howto-wrap{ width:100%; max-width:1100px; }
.vk-howto-head{ text-align:center; margin-bottom: clamp(16px,3vw,22px); }
.vk-howto-head h2{ margin:0; font-weight:800; font-size: clamp(22px,4.6vw,28px); }
.vk-line{ width:100px; height:6px; border-radius:3px; background:#ffca05; margin:0 auto 10px; }

.vk-howto-grid{
  display:grid; gap: clamp(14px,2vw,24px);
  grid-template-columns: 1fr 300px;
  align-items:start;
}

/* Player */
.vk-embed{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.08); }
.vk-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Playlist */
.vk-playlist{
  display:grid; gap:10px;
}
.vk-item{
  display:grid; grid-template-columns: 120px 1fr; gap:10px; align-items:center;
  text-align:left; background:#f7f8fa; border:1px solid #e8edf2; border-radius:10px;
  padding:8px; cursor:pointer;
  transition: box-shadow .2s ease, transform .1s ease, border-color .2s ease;
}
.vk-item img{ width:120px; height:68px; object-fit:cover; border-radius:8px; display:block; }
.vk-item-title{ font-size:14px; font-weight:700; color:#1f2937; line-height:1.3; }
.vk-item:hover{ box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#dbe3ea; }
.vk-item.is-active{ outline:2px solid #ffca05; outline-offset:2px; }

/* Mobile: stack + horizontal thumbs */
@media (max-width: 900px){
  .vk-howto-grid{ grid-template-columns: 1fr; }
  .vk-playlist{
    grid-auto-flow: column; grid-auto-columns: 70%; gap:12px;
    overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;
  }
  .vk-item{ grid-template-columns: 120px 1fr; min-width: 280px; }
}

/* ===== Pre-order Combos (What's in the Box) ===== */
.vk-box-combos{ background:#f6f7f8; padding:clamp(34px,7vw,80px) 20px; display:flex; justify-content:center; }
.vk-bc-wrap{ width:100%; max-width:1100px; }

.vk-bc-head{ text-align:center; margin-bottom:clamp(16px,3.5vw,22px); }
.vk-bc-line{ width:120px; height:6px; background: var(--vk-accent); margin:0 auto 10px; border-radius:3px; }
.vk-bc-head h2{ margin:0; font-weight:600; font-size:clamp(26px,5vw,40px); line-height:1.1; }

.vk-bc-grid{
  display:grid; gap:clamp(14px,2vw,24px);
  grid-template-columns:repeat(2, 1fr);
}

/* Card */
.vk-bc-card{
  background:#fff; border:1px solid #e8edf2; border-radius:16px;
  padding:14px; display:grid; gap:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}

/* Photo (black placeholder if no image) */
.vk-bc-photo{
  border-radius:12px; overflow:hidden;
  background:#fff center/contain no-repeat;  /* shows black if no img */
  height:300px; position:relative;
}
.vk-bc-off{
  position:absolute; top:10px; left:10px;
  background:#111; color:#fff; font-weight:600; font-size:12px;
  padding:6px 10px; border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}

/* Text */
.vk-bc-card h3{ margin:2px 0 0; font-size:24px; font-weight:800; }
.vk-bc-list{ margin:0; padding-left:18px; color:#4a4f56; font-size:18px; }
.vk-bc-list li{ margin:4px 0; }

/* Price */
.vk-bc-price{ display:flex; align-items:baseline; gap:10px; }
.vk-old{ color:#9aa3ab; text-decoration:line-through; font-weight:700; }
.vk-new{ color:#FF0C30; font-weight:600; font-size:32px; }

/* CTA */
.vk-bc-btn{
  margin-top:4px; display:inline-block; text-align:center;
  background:#ffca05; color:#111; font-weight:600; text-decoration:none;
  padding:10px 14px; border-radius:10px; box-shadow:0 2px 0 rgba(0,0,0,.12);
  transition:filter .15s ease, transform .05s ease;
}
.vk-bc-btn:hover{ filter:brightness(.98); }
.vk-bc-btn:active{ transform:translateY(1px); }

/* Responsive */
@media (max-width: 760px){
  .vk-bc-grid{ grid-template-columns:1fr; }
  .vk-bc-photo{ height:200px; }
}


.vk-fullwidth-photo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 10%;
}

.phone-frame {
  border: 16px solid #333;
  border-radius: 40px;
  padding: 10px;
  background: #000;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  max-width: 360px;
}

.vk-full-img {
  width: 100%;
  // border-radius: 30px;
  display: block;
}

.vk-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* keeps correct ratio on all screens */
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;    /* optional: rounded corners */
}

.vk-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Optional: responsive text padding */
.vk-text-section {
  padding: 40px 20px;
}

@media (max-width: 600px) {
  .vk-text-section {
    padding: 20px 16px;
  }
}

/* ===== Form Section ===== */
.form-section {
  background: #f9fafb;
  padding: clamp(40px, 8vw, 80px) 20px;
  display: flex;
  justify-content: center;
}

.form-section .container {
  width: 100%;
  max-width: 860px;
}

.form-section h2.center {
  text-align: center;
  font-weight: 500;
  font-size: clamp(22px, 4.2vw, 32px);
  margin-bottom: 6px;
}

.form-section .sub {
  text-align: center;
  color: #6b7280;
  margin-bottom: 20px;
  font-size: 15.2px;
}

/* ===== Form Grid ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.form-section label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.form-section label span {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

/* ===== Inputs ===== */
.form-section input,
.form-section select,
.form-section textarea {
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-section input:focus,
.form-section select:focus,
.form-section textarea:focus {
  border-color: #ffca05;
  box-shadow: 0 0 0 3px rgba(255, 202, 5, 0.25);
}

.form-section textarea {
  resize: vertical;
  min-height: 100px;
  margin-top: 6px;
}

/* ===== Button ===== */
.btn.btn-primary.btn-block {
  width: 100%;
  background: #ffca05;
  color: #111;
  font-weight: 500;
  font-size: 16px;
  border: 0;
  padding: 14px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}

.btn.btn-primary.btn-block:hover {
  filter: brightness(0.98);
}

.btn.btn-primary.btn-block:active {
  transform: translateY(1px);
}

/* ===== Alert ===== */
.alert.alert-success {
  background: #e7f7e7;
  color: #166534;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #bbf7d0;
  margin-bottom: 16px;
  font-size: 14.5px;
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* common section */
.vk-section {
  background: #fff;
  // padding: clamp(32px, 7vw, 80px) 20px;
  display: flex;
  justify-content: center;
}
.vk-section-wrap { width: 100%; max-width: 1100px; }

.vk-section-head {
  text-align: center;
  margin-bottom: clamp(14px, 3vw, 20px);
}
.vk-section-head h2 {
  margin: 0;
  font-size: clamp(24px, 5.5vw, 38px);
  line-height: 1.15;
  font-weight: 900;
}

.vk-section-hero {
  margin: 0 auto clamp(16px, 3vw, 22px);
  border: 1px solid #eceff3;
  border-radius: 14px;
  overflow: hidden;
  background: #fafafa;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.vk-section-hero img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Thumbnails row */
.vk-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 16px);
}


/* Responsive */
@media (max-width: 900px) {
  .vk-section-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Fits Any Bike Section ===== */
.vk-fitany {
  background: #fff;
  padding: clamp(32px, 7vw, 80px) 20px;
  display: flex;
  justify-content: center;
}
.vk-fitany-wrap { width: 100%; max-width: 1100px; }

.vk-fitany-head {
  text-align: center;
  margin-bottom: clamp(14px, 3vw, 20px);
}
.vk-fitany-head h2 {
  margin: 0;
  font-size: clamp(24px, 5.5vw, 38px);
  line-height: 1.15;
  font-weight: 900;
}

.vk-fitany-hero {
  margin: 0 auto clamp(16px, 3vw, 22px);
  border: 1px solid #eceff3;
  border-radius: 14px;
  overflow: hidden;
  background: #fafafa;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.vk-fitany-hero img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Thumbnails row */
.vk-fitany-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 16px);
}
.vk-thumb {
  margin: 0;
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .12s ease, border-color .2s ease;
}
.vk-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vk-thumb:hover {
  border-color: #d6dde6;
  box-shadow: 0 8px 18px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 900px) {
  .vk-fitany-grid { grid-template-columns: repeat(2, 1fr); }
  .vk-thumb img { height: 140px; }
}
@media (max-width: 520px) {
  .vk-thumb img { height: 120px; }
}

/* ===== Separator Line ===== */
.vk-separator {
  width: 80%;
  max-width: 700px;
  height: 2px;
  margin: 40px auto;
  background: linear-gradient(to right, rgba(0,0,0,0.15), rgba(0,0,0,0.5), rgba(0,0,0,0.15));
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ===== Unique Features Section ===== */
.vk-features {
  background: #fff;
  // padding: clamp(40px, 8vw, 100px) 20px;
  display: flex;
  justify-content: center;
}
.vk-features-wrap {
  max-width: 1100px;
  width: 100%;
  text-align: center;
}
.vk-features h2 {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 800;
  margin-bottom: 24px;
}

/* Feature grid */
.vk-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  justify-items: center;
  margin-bottom: 60px;
}
.vk-feature-item {
  background: #f4f4f4;
  border-radius: 10px;
  padding: 30px 0;
  width: 100%;
  max-width: 160px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vk-feature-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}
.vk-feature-item i {
  font-size: 28px;
  color: #111;
  margin-bottom: 10px;
}
.vk-feature-item h4 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.vk-feature-item p {
  font-size: 18px;
  margin: 4px 0 0;
  color: #333;
}

/* Bottom content */
.vk-feature-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  text-align: left;
}
.vk-feature-text h3 {
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 10px;
}
.vk-feature-text h3 {
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 10px;
}
.vk-feature-text p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.vk-feature-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 900px) {
  .vk-feature-bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .vk-feature-image {
    order: -1;
  }
}

/* ===== Easy Install ===== */
.vk-install {
  background:#fff;
  padding: clamp(36px,8vw,90px) 20px;
  display:flex; justify-content:center;
}
.vk-install-wrap { width:100%; max-width:1000px; }

.vk-install-head { text-align:center; margin-bottom: clamp(16px,3.5vw,24px); }
.vk-install-head h2 {
  margin:0 0 6px; font-weight:800; font-size: clamp(24px,5.2vw,36px);
}
.vk-install-head p { margin:0; color:#4b5563; }
.vk-install-head ul {
  margin:10px auto 0; padding-left:18px; max-width:620px; text-align:left;
  line-height:1.6; color:#374151;
}

/* Steps */
.vk-steps-asm {
  display:grid; gap: clamp(12px,2vw,18px);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
}
.vk-step-asm {
  position:relative; margin:0; background:#f2f2f2;
  border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  text-align:center;
}
.vk-step-asm img { width:100%; height:100%; object-fit:cover; display:block; }
.vk-step-asm figcaption { padding:10px; font-size:14px; color:#111; }
.vk-step-asm strong { font-weight:800; }

.vk-badge {
  position:absolute; top:8px; left:8px;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:#ffca05; color:#111; font-weight:900; font-size:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* Video */
.vk-install-video { margin-top: clamp(16px,3.5vw,26px); }
.vk-embed {
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border-radius:14px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.vk-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Responsive */
@media (max-width: 900px){
  .vk-steps { grid-template-columns: 1fr; }
  .vk-step img { height:200px; }
}

.vk-gallery {
  padding: clamp(24px, 5vw, 48px) 16px;
}

/* Responsive grid layout */
.vk-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

.vk-g-item {
  grid-column: span 4;         /* 3 per row on desktop */
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  background: #f2f4f7;
}

.vk-g-item.wide {
  grid-column: span 8;
  aspect-ratio: 16 / 10;
}

.vk-g-item.tall {
  grid-column: span 4;
  aspect-ratio: 3 / 4;
}

.vk-g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.vk-g-item:hover img {
  transform: scale(1.03);
}

/* Tablet: 2–3 columns */
@media (max-width: 900px) {
  .vk-g-item { grid-column: span 6; }
  .vk-g-item.wide { grid-column: span 12; }
}

/* Mobile: 2 columns */
@media (max-width: 560px) {
  .vk-g-item { grid-column: span 6; }
  .vk-g-item.wide { grid-column: span 12; }
  .vk-g-item.tall { aspect-ratio: 1 / 1.2; }
}