:root {
      --cm-primary:        #0b4eff;
      --cm-primary-dark:   #0040dd;
      --cm-primary-shadow: rgba(11, 78, 255, 0.30);
      --cm-primary-focus:  rgba(11, 78, 255, 0.35);
      --cm-primary-glow:   rgba(11, 78, 255, 0.12);
      --cm-primary-light:  #eef3ff;
      --cm-button-text:    #ffffff;
      --cm-bg-from:        #a0c7ff;
      --cm-bg-to:          #f3f8ff;
      --cm-text-heading:   #0a1a2f;
      --cm-hero-para:      #2c3e66;
      --cm-hero-sub:       #4a5a7a;
      --cm-text:           #0a1a2f;
      --cm-text-dark:      #0d1b3e;
      --cm-text-mid:       #1e2a44;
      --cm-text-secondary: #2c3e66;
      --cm-text-muted:     #4a5a7a;
      --cm-text-hint:      #5b6e8c;
      --cm-text-faint:     #64748b;
      --cm-card:           #ffffff;
      --cm-surface:        #f8fafd;
      --cm-border:         #e0e8f5;
      --cm-border-input:   #d0d9ee;
      --cm-border-accent:  #c7d2fe;
      --cm-track:          #e2e8f0;
      --cm-danger:         #e53e3e;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: linear-gradient(180deg, var(--cm-bg-from) 0%, var(--cm-bg-to) 50%);
      color: var(--cm-text);
      line-height: 1.4;
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
    }

    .btn {
      padding: 16px 28px;
      border-radius: 60px;
      font-weight: 700;
      font-size: 1.1rem;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn--primary {
      position: relative;
      background: var(--cm-primary);
      color: var(--cm-button-text);
      overflow: hidden;
      margin-top: 5px ;
    }

    .btn--primary::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--cm-primary-dark);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .btn--primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 28px var(--cm-primary-shadow);
    }

    .btn--primary:hover::before {
      opacity: 1;
    }

    .btn--ghost {
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(0,0,0,0.08);
      color: var(--cm-text-mid);
    }

    .btn--ghost:hover {
      background: white;
    }
    
    .btn:focus-visible {
      outline: 3px solid var(--cm-primary-focus);
      outline-offset: 3px;
    }

    .hero {
      padding: 70px 0 40px;
      display: flex;
      align-items: center;
      min-height: 85vh;
    }

    .hero__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    .hero__title {
      font-size: 54px;
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
      color: var(--cm-text-heading);
    }

    .hero__subtitle {
      font-size: 1.1rem;
      color: var(--cm-hero-para);
      font-weight: 500;
      max-width: 500px;
      margin-bottom: 32px;
    }

    .hero__cta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
    }
    
    .hero__trust {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 0;
      margin: 0;
      color: var(--cm-hero-sub);
      font-weight: 600;
      font-size: 0.9rem;
    }
    
    .hero__trust li {
      background: rgba(255,255,255,0.7);
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 999px;
      padding: 6px 12px;
    }
    
    .hero__privacy {
      margin: 0;
      color: var(--cm-text-hint);
      font-weight: 500;
      font-size: 0.9rem;
    }
    
    .hero__privacy a {
      color: var(--cm-primary);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    
    .hero__privacy a:focus-visible {
      outline: 3px solid var(--cm-primary-focus);
      outline-offset: 3px;
      border-radius: 8px;
    }

    .hero__meta {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--cm-hero-sub);
      font-weight: 500;
      font-size: 0.9rem;
    }

    .hero__metaIcon {
      width: 32px;
      height: 32px;
      background: var(--cm-primary-glow);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--cm-primary);
    }

    .hero_image {
      width: 100%;
      max-width: 560px;
      display: block;
      margin: 0 auto;
      filter: drop-shadow(0 20px 30px rgba(0,0,0,0.08));
    }

    .section {
      padding: 40px 0 60px;
    }

    .section__header {
      text-align: center;
      margin-bottom: 48px;
    }

    .section__title {
      font-size: 44px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--cm-text-heading);
    }

    .section__subtitle {
      color: var(--cm-hero-sub);
      font-weight: 500;
      margin-top: 8px;
    }

    .section__previewBtn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 24px;
      text-decoration: none;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .stepCard {
      background: white;
      border-radius: 28px;
      padding: 32px 20px 28px;
      text-align: center;
      position: relative;
      box-shadow: 0 18px 32px rgba(0,0,0,0.04);
      transition: all 0.2s;
    }

    .stepCard__badge {
      position: absolute;
      top: -16px;
      left: 24px;
      width: 44px;
      height: 44px;
      background: var(--cm-primary);
      border-radius: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 1.5rem;
      color: white;
      box-shadow: 0 8px 16px var(--cm-primary-shadow);
    }

    .stepCard__icon {
      font-size: 2.5rem;
      color: var(--cm-primary);
      background: var(--cm-primary-light);
      width: 80px;
      height: 80px;
      border-radius: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }

    .stepCard__title {
      font-weight: 800;
      font-size: 1.3rem;
      margin-bottom: 8px;
      color: var(--cm-text-heading);
    }

    .stepCard__text {
      color: var(--cm-text-hint);
      font-weight: 500;
    }

    .projectplan-preview {
      display: flex;
      gap: 32px;
      justify-content: center;
      align-items: stretch;
      padding: 40px 0;
      perspective: 1200px;
    }

    .projectplan-preview__card {
      flex: 1;
      max-width: 440px;
      background: white;
      border-radius: 24px;
      padding: 20px !important;
      box-shadow: 0 12px 32px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      border: 1px solid #f1f5f9;
      cursor: pointer;
      position: relative;
    }

    .projectplan-preview__card:hover {
      box-shadow: 0 24px 48px var(--cm-primary-glow);
      border-color: var(--cm-primary);
    }

    .projectplan-preview__doc {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .projectplan-preview__doc img {
      width: 100%;
      height: auto;
      display: block;
    }

    
    .projectplan-preview__doc img:hover {
      border: 10px transparent solid;
      border-radius: 24px;
    }

    @media (max-width: 768px) {
      .projectplan-preview {
        flex-direction: column;
        align-items: center;
        perspective: none;     
      }
      .projectplan-preview__card {
        transform: none !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
      }
      .projectplan-preview__doc {
        transform: none !important;
      }
    }

    .bsvragenCard {
      background: white;
      border-radius: 32px;
      padding: 32px;
      box-shadow: 0 24px 48px rgba(0,0,0,0.08);
    }

    .bsvragenHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 28px;
    }

    .bsvragenBar {
      display: flex;
      gap: 12px;
      flex: 1;
    }

    .bsvragenBar__seg {
      flex: 1;
      height: 6px;
      background: var(--cm-track);
      border-radius: 10px;
    }

    .bsvragenBar__seg.is-active {
      background: var(--cm-primary);
    }

    .bsLivePrice {
      font-weight: 800;
      font-size: 1rem;
      color: var(--cm-primary);
      white-space: nowrap;
    }

    .bsQuestion__title {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 28px;
    }

    .bsQuestion__stepTitle {
      font-weight: 800;
      color: var(--cm-primary);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 0.85rem;
      margin: 8px 0 10px;
    }

    .bsQuestion__topText {
      color: var(--cm-text-secondary);
      font-weight: 600;
      margin: 10px 0 18px;
      line-height: 1.6;
    }

    .bsQuestion__topText > div + div {
      margin-top: 10px;
    }

    .bsQuestion__topTitle {
      font-weight: 800;
      font-size: 1.1rem;
      margin: 0 0 10px;
      color: var(--cm-primary);
    }

    .bsQuestion__topSubTitle {
      font-weight: 800;
    }

    .bsQuestion__list {
      margin: 10px 0 0;
      padding-left: 20px;
    }

    .bsQuestion__list li {
      margin: 4px 0;
    }

    .bsQuestion__imageWrap {
      border-radius: 24px;
      max-width: 720px;
      padding: 14px;
      margin: 0 0 22px;
    }

    .bsQuestion__image {
      display: block;
      max-width: 100%;
      max-height: 360px;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 18px;
    }

    .bsQuestion__imageCaption {
      margin: 10px 4px 0;
      font-size: 0.9rem;
      color: var(--cm-primary);
      font-weight: 700;
    }

    .bsOptions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 32px;
      position: relative;
    }

    .bsOtherInputWrap {
      background: var(--cm-surface);
      border: 1px solid #eef2f8;
      border-radius: 20px;
      padding: 20px 24px;
      margin: 8px 0 22px;
    }

    .bsOptions .bsOtherInputWrap.bsOtherInputWrap--mt {
      display: block;
      margin: 10px 0 0;
    }

    .bsOtherTextarea {
      min-height: 110px;
      resize: vertical;
      line-height: 1.5;
    }

    .bsOptions .bsOtherInputWrap.bsOtherInputWrap--perOption {
      display: block;
      margin: 10px 0 0;
      padding: 14px 16px;
      border-radius: 16px;
    }

    .bsOtherInputWrap--perOption .bsOtherInputLabel {
      white-space: normal;
    }

    .btnbeneden {
      margin-top: 32px;
    }

    .bsOtherInputLabel {
      font-weight: 700;
      color: var(--cm-text-secondary);
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    .bsOtherInputGrid {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 12px;
      align-items: center;
    }

    .bsOtherInput {
      width: 100%;
      border: 1px solid var(--cm-border-input);
      border-radius: 14px;
      padding: 12px 14px;
      font-size: 1rem;
      outline: none;
    }

    select.bsOtherInput {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: #ffffff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 14px 14px;
      padding-right: 34px;
    }

    select.bsOtherInput::-ms-expand {
      display: none;
    }

    .bsOtherInput:focus {
      border-color: var(--cm-primary);
      box-shadow: 0 0 0 4px var(--cm-primary-glow);
    }

    .bsEigenRow {
      display: grid;
      grid-template-columns: 1fr 220px 44px;
      gap: 10px;
      margin-bottom: 10px;
      align-items: center;
    }

    .bsEigenType {
      cursor: pointer;
      background: #ffffff;
    }

    .bsEigenActions {
      display: flex;
      gap: 10px;
      justify-content: flex-start;
      margin-top: 12px;
    }

    .bsEigenAdd {
      padding: 10px 16px;
    }

    .bsCustomQuestionBlock {
      border: 1px solid #eef2f8;
      border-radius: 20px;
      background: var(--cm-surface);
      padding: 18px 20px;
      margin-top: 20px;
    }

    .bsCustomQuestionLabel {
      font-weight: 800;
      color: var(--cm-primary);
      margin-bottom: 12px;
    }

    .bsCustomQuestionList {
      display: grid;
      gap: 10px;
      margin-bottom: 12px;
    }

    .bsCustomQuestionItem {
      display: grid;
      grid-template-columns: 1fr 200px 44px;
      gap: 10px;
      align-items: center;
    }

    .bsCustomQuestionInput {
      min-width: 0;
    }

    .bsCustomQuestionType {
      cursor: pointer;
      background: #ffffff;
      min-width: 0;
    }

    .bsCustomQuestionRemove {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid var(--cm-border-input);
      background: #ffffff;
      color: var(--cm-text-faint);
    }

    .bsCustomQuestionRemove:hover {
      border-color: var(--cm-border-accent);
      color: var(--cm-primary);
      box-shadow: 0 6px 14px var(--cm-primary-glow);
      transform: translateY(-1px);
    }

    .bsCustomQuestionNone {
      color: var(--cm-text-faint);
      font-size: 0.96rem;
      padding: 8px 0;
    }

    .bsEigenRemove {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      width: 44px;
      padding: 0;
      border-radius: 14px;
      border: 1px solid var(--cm-border-input);
      background: #ffffff;
      color: var(--cm-text-faint);
      transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    }

    .bsEigenRemove:hover {
      border-color: var(--cm-border-accent);
      color: var(--cm-primary);
      box-shadow: 0 6px 14px var(--cm-primary-glow);
      transform: translateY(-1px);
    }

    .bsEigenRemove:disabled {
      opacity: 0;
      pointer-events: none;
    }

    .bsOption {
      display: flex;
      align-items: center;
      gap: 18px;
      background: var(--cm-surface);
      border: 1px solid #eef2f8;
      border-radius: 20px;
      padding: 16px 24px;
      cursor: pointer;
      transition: 0.2s;
    }

    .bsOption__icon {
      font-size: 1.8rem;
      color: var(--cm-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
    }

    .bsOption__icon .fi {
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .bsOption__label {
      flex: 1;
      font-weight: 600;
      font-size: 1rem;
    }

    .bsOption__price {
      margin-left: auto;
      font-weight: 800;
      color: var(--cm-primary);
      white-space: nowrap;
    }

    .bsOption__info {
      margin-left: 12px;
      color: var(--cm-text-faint);
      font-size: 1.2rem;
      cursor: help;
      transition: color 0.2s;
      padding: 4px;
    }

    .bsOption__info:hover {
      color: var(--cm-primary);
    }

    .bsOptionOuter {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .bsOption__infoText {
      background: var(--cm-primary-light);
      border: 1px solid var(--cm-border-accent);
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 0.9rem;
      color: var(--cm-text-mid);
      margin-left: 60px;
      position: relative;
      animation: bsSlideIn 0.2s ease-out;
    }

    .bsOption__infoText::before {
      content: "";
      position: absolute;
      top: -6px;
      right: 24px;
      width: 10px;
      height: 10px;
      background: var(--cm-primary-light);
      border-left: 1px solid var(--cm-border-accent);
      border-top: 1px solid var(--cm-border-accent);
      transform: rotate(45deg);
    }

    @keyframes bsSlideIn {
      from { opacity: 0; transform: translateY(-5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .bsEmailPreview {
      margin-left: 0;
      animation: bsSlideIn 0.2s ease-out;
    }

    .bsOptInput {
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
      border: 0;
      white-space: nowrap;
    }
    
    .bsOptInput:focus-visible + .bsOption {
      outline: 3px solid var(--cm-primary-focus);
      outline-offset: 3px;
    }
    .bsOptInput:checked + .bsOption {
      background: var(--cm-primary-light);
      border-color: var(--cm-primary);
      box-shadow: 0 4px 12px var(--cm-primary-glow);
    }

    .bsOptions .bsOtherInputWrap { display: none; }
    
    .bsFooter {
      display: flex;
      justify-content: space-between;
    }

    .bsAccHeader {
      display: grid;
      grid-template-columns: 28px 1fr 1fr 80px 44px;
      gap: 10px;
      margin-bottom: 8px;
      font-weight: 800;
      color: var(--cm-primary);
    }

    .bsAccRow {
      display: grid;
      grid-template-columns: 28px 1fr 1fr 80px 44px;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }

    .bsAccRow__num {
      font-weight: 700;
      color: var(--cm-text-faint);
      text-align: center;
    }

    .bsAccRow__price {
      font-weight: 700;
      color: var(--cm-primary);
      text-align: right;
      font-size: 0.9rem;
    }

    .bsAccRow__placeholder {
      width: 44px;
    }

    .bsAccCount {
      font-size: 0.88rem;
      color: var(--cm-text-faint);
      align-self: center;
    }

    .bsAccRemove {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid var(--cm-border-input);
      background: #ffffff;
      color: var(--cm-text-faint);
    }

    .bsSliderWrap {
      padding: 10px 0 24px;
    }

    .bsSliderTrackRow {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .bsSliderMin, .bsSliderMax {
      font-size: 0.85rem;
      color: var(--cm-text-faint);
      white-space: nowrap;
    }

    .bsSlider {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 6px;
      border-radius: 10px;
      background: var(--cm-track);
      outline: none;
      cursor: pointer;
    }

    .bsSlider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--cm-primary);
      cursor: pointer;
      box-shadow: 0 2px 8px var(--cm-primary-shadow);
    }

    .bsSlider::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--cm-primary);
      cursor: pointer;
      border: none;
      box-shadow: 0 2px 8px var(--cm-primary-shadow);
    }

    .bsSliderValue {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--cm-text-dark);
      margin-bottom: 8px;
    }

    .bsSliderPrice {
      font-size: 1rem;
      color: var(--cm-text-muted);
    }

    .bsSliderPrice strong {
      color: var(--cm-primary);
      font-size: 1.1rem;
    }

    .bsSliderInputRow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .bsSliderNumberInput {
      width: 110px;
      padding: 8px 12px;
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--cm-text-dark);
      border: 2px solid var(--cm-border-input);
      border-radius: 12px;
      text-align: center;
      outline: none;
      transition: border-color 0.2s;
      font-family: inherit;
      -moz-appearance: textfield;
      appearance: textfield;
    }

    .bsSliderNumberInput::-webkit-outer-spin-button,
    .bsSliderNumberInput::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .bsSliderNumberInput:focus {
      border-color: var(--cm-primary);
    }

    .bsSliderInputLabel {
      font-size: 1rem;
      font-weight: 600;
      color: var(--cm-text-dark);
    }

    .bsSliderInputHint {
      font-size: 0.8rem;
      font-weight: 400;
      color: #7a8aaa;
    }

    .bsSliderNumberInput--error {
      border-color: var(--cm-danger);
    }

    .bsSliderInputError {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--cm-danger);
      margin-top: -6px;
      margin-bottom: 8px;
    }

    .bsAlertGroup__header {
      font-weight: 800;
      color: var(--cm-primary);
      font-size: 0.95rem;
      margin: 20px 0 8px;
      padding-bottom: 6px;
      border-bottom: 2px solid var(--cm-border);
    }

    .bsAlertGroup__header:first-child {
      margin-top: 8px;
    }

    .bsReview__header {
      margin-bottom: 28px;
    }

    .bsReview__title {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--cm-text-dark);
      margin-bottom: 8px;
    }

    .bsReview__sub {
      color: var(--cm-text-muted);
      font-size: 0.97rem;
    }

    .bsReview__item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid #eef2f8;
    }

    .bsReview__itemLabel {
      font-size: 0.95rem;
      color: var(--cm-text-dark);
      flex: 1;
    }

    .bsReview__itemRight {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
    }

    .bsReview__itemPrice {
      font-weight: 700;
      color: var(--cm-primary);
      min-width: 72px;
      text-align: right;
    }

    .bsReview__editBtn {
      font-size: 0.85rem;
      padding: 6px 14px;
      border-radius: 10px;
    }

    .bsReview__total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      padding: 16px 0;
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--cm-text-dark);
      border-top: 2px solid var(--cm-primary);
      margin-bottom: 32px;
    }

    .bsReview__total span:last-child {
      color: var(--cm-primary);
    }

    .bsvragen {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 40px 0;
    }

    .bsvragen__container {
      width: 100%;
    }

    .bsStart__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }

    .bsStart__title {
      font-size: 48px;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 18px;
    }

    .bsStart__text {
      font-size: 1.2rem;
      color: var(--cm-text-secondary);
      margin-bottom: 28px;
      line-height: 1.6;
    }

    .bsStart__logo {
      width: auto;
      max-width: 500px;
      height: auto;
      display: block;
      margin-top: 50px;
      margin-left: 110px;
      margin-right: 0;
    }

    .bsStart__left { max-width: 760px; }
    .bsStart__left ol {
      margin: 12px 0 18px;
      padding-left: 22px;
      list-style-position: outside;
      font-size: 1.2rem;
      color: var(--cm-text-secondary);
      line-height: 1.6;
    }
    .bsStart__left ol li { margin: 6px 0; font-size: inherit; color: inherit; line-height: inherit; }

    .bsStart__visual {
      position: relative;
      width: 100%;
      display: flex;
      align-items: stretch;
      justify-content: center;
    }

    .bsStart__image {
      width: 100%;
      max-width: 460px;
    }

    .bsStart__right {
      display: flex;
      align-items: stretch;
    }

    .phaseDiagram {
      position: relative;
      width: 100%;
      max-width: 560px;
      margin: 0 auto;
      border-radius: 28px;
      padding: 22px 22px 22px 24px;
      background: linear-gradient(180deg, rgba(0, 72, 255, 0.1) 0%, rgba(255, 255, 255, 0.85) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 18px;
      min-height: 340px;
    }

    .phaseDiagram__header {
      padding: 8px 10px 14px 10px;
      border-bottom: 1px dashed var(--cm-track);
    }
    .phaseDiagram__kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--cm-primary-light);
      color: var(--cm-primary);
      border: 1px solid var(--cm-border-accent);
      border-radius: 999px;
      padding: 6px 12px;
      font-weight: 800;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .phaseDiagram__subtitle {
      margin-top: 10px;
      font-weight: 800;
      font-size: 1.1rem;
      color: var(--cm-text-mid);
    }
    .phaseDiagram__list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .phaseDiagram::before { display: none; }

    .phaseDiagram__item {
      display: grid;
      grid-template-columns: 48px 1fr 40px;
      align-items: center;
      gap: 14px 16px;
      padding: 10px 12px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid #eef2fa;
      box-shadow: 0 6px 14px rgba(0,0,0,0.04);
      position: relative;
      z-index: 2;
      transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    
    .phaseDiagram__marker {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      background: var(--cm-primary);
      color: white;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 18px var(--cm-primary-shadow);
      flex: 0 0 48px;
    }

    .phaseDiagram__content { display: flex; flex-direction: column; }
    .phaseDiagram__title {
      font-weight: 800;
      color: var(--cm-text);
      font-size: 1.22rem;
      letter-spacing: -0.01em;
    }
    .phaseDiagram__text {
      color: var(--cm-text-hint);
      font-weight: 600;
      font-size: 0.95rem;
      margin-top: 2px;
    }
    .phaseDiagram__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: var(--cm-primary-light);
      color: var(--cm-primary);
      border: 1px solid var(--cm-border-accent);
      font-size: 1rem;
    }

    .bsGhost {
      background: transparent;
      border: none;
      font-weight: 600;
      font-size: 1rem;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      color: var(--cm-text-hint);
      padding: 10px 8px;
    }
    
    .bsGhost:focus-visible {
      outline: 3px solid var(--cm-primary-focus);
      outline-offset: 3px;
      border-radius: 12px;
    }

    .bsPrimary {
      background: var(--cm-primary);
      border: none;
      padding: 14px 32px;
      border-radius: 40px;
      color: white;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      font-size: 1rem;
    }
    
    .bsPrimary:focus-visible {
      outline: 3px solid var(--cm-primary-focus);
      outline-offset: 3px;
    }

    .bsError {
      color: var(--cm-danger);
      font-weight: 600;
      margin-bottom: 16px;
    }

    .bsOption.is-selected {
      background: var(--cm-primary-light);
      border-color: var(--cm-primary);
      box-shadow: 0 4px 12px var(--cm-primary-glow);
    }

    @media (max-width: 780px) {
      .hero__grid, .steps, .bsStart__grid {
        grid-template-columns: 1fr;
      }
      .hero_image {
        max-width: 320px;
        margin-top: 24px;
      }
      .hero__title { font-size: 32px; }
      .hero__subtitle { font-size: 1rem; }
      .section__title { font-size: 28px; }
      .bsStart__title { font-size: 32px; }
      .bsStart__text { font-size: 1.1rem; }
      .bsStart__left ol { font-size: 1.1rem; }
      
      .bsStart__visual {
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
      .bsStart__image {
        max-width: 320px;
      }
      .phaseDiagram {
        max-width: 340px;
        border-radius: 24px;
        padding: 18px 18px 18px 20px;
      }
      .phaseDiagram::before {
        left: 41px;
        top: 30px;
        bottom: 30px;
      }
      .phaseDiagram__title {
        font-size: 1.05rem;
      }
      .phaseDiagram__text {
        font-size: 0.9rem;
      }
      .container { padding: 0 20px; }
      .bsvragenCard { padding: 20px; border-radius: 24px; }
      
      .bsOtherInputGrid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      
      #accountsWrap_vraag13 > div {
        grid-template-columns: 1fr !important;
      }
      
      .bsOtherInputLabel {
        padding-top: 8px;
      }
      
      .bsvragenBar { gap: 6px; }
      .bsQuestion__title { font-size: 1.5rem; }
      .bsQuestion__imageWrap { padding: 0; margin-bottom: 16px; }
      
      .bsOption {
        padding: 12px 16px;
        gap: 12px;
      }
      .bsOption__icon {
        font-size: 1.4rem;
        min-width: 32px;
      }
      .bsOption__label {
        font-size: 0.95rem;
      }
      
      .bsOption__infoText {
        margin-left: 0;
        margin-top: 8px;
      }
      .bsOption__infoText::before {
        right: auto;
        left: 24px;
      }

      .bsEigenRow {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .bsEigenRemove {
        justify-self: flex-end;
      }

      .bsCustomQuestionItem {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .bsCustomQuestionRemove {
        justify-self: flex-end;
      }

      .bsFooter {
        flex-direction: column-reverse;
        gap: 12px;
      }
      .bsFooter button {
        width: 100%;
        justify-content: center;
      }

      /* ── Header: prijs + % op rij 1, progress bar op rij 2 ── */
      .bsvragenHeader {
        gap: 6px 12px;
      }
      .bsLivePriceWrap { order: 1; flex-shrink: 0; }
      #progressPct { order: 2; margin-left: auto; flex-shrink: 0; }
      .bsvragenBar { order: 3; width: 100%; flex: none; }

      /* ── Account-rijen: naam + email gestapeld ── */
      .bsAccHeader { display: none; }
      .bsAccRow {
        grid-template-columns: 1fr auto;
        gap: 8px;
      }
      .bsAccRow__num { display: none; }
      .bsAccName { grid-column: 1 / -1; }
      .bsAccEmail { grid-column: 1 / -1; }
      .bsAccRow__price { align-self: center; font-size: 0.85rem; }
      .bsAccRow__placeholder { display: none; }

      /* ── Minder verticale ruimte op mobiel ── */
      .bsvragen { padding: 16px 0 24px; }
      .section { padding: 24px 0 40px; }
      .hero { padding: 40px 0 24px; min-height: unset; }

      /* ── Review: label mag wrappen ── */
      .bsReview__item { flex-wrap: wrap; gap: 10px; }
      .bsReview__itemLabel { min-width: 0; }

    }

    @media (max-width: 480px) {
      .hero__title { font-size: 28px; }
      .bsvragenHeader { margin-bottom: 20px; }
      .bsQuestion__title { font-size: 1.3rem; }
      .bsPrimary { padding: 12px 24px; }
    }

    /* ── Scroll tab ── */
    .scrollTab {
      position: fixed;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 24px 13px;
      background: var(--cm-primary);
      border: none;
      border-radius: 0 0 28px 28px;
      box-shadow: 0 4px 24px var(--cm-primary-shadow);
      font-family: inherit;
      font-size: 0.83rem;
      font-weight: 600;
      color: var(--cm-button-text);
      letter-spacing: 0.01em;
      cursor: pointer;
      opacity: 0;
      white-space: nowrap;
      transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, box-shadow 0.2s;
    }

    .scrollTab__icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      flex-shrink: 0;
      transition: background 0.2s, transform 0.3s ease;
    }

    .scrollTab.is-visible {
      top: 0;
      opacity: 1;
    }

    .scrollTab:hover {
      background: var(--cm-primary-dark);
      box-shadow: 0 6px 28px var(--cm-primary-shadow);
      color: var(--cm-button-text);
    }

    .scrollTab:hover .scrollTab__icon {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-2px);
    }

    /* ── Stap-animatie ── */
    @keyframes bsFadeInUp {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .bsStepAnim {
      animation: bsFadeInUp 0.22s ease-out both;
    }

    /* ── Prijsuitsplitsing ── */
    .bsPriceBreakdown {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 260px;
      max-width: 340px;
      background: #fff;
      border: 1px solid var(--cm-border-accent);
      border-radius: 14px;
      padding: 12px 16px;
      box-shadow: 0 8px 24px var(--cm-primary-glow);
      z-index: 100;
      font-size: 0.85rem;
    }
    .bsPriceBreakdown__row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 4px 0;
      border-bottom: 1px solid #f1f5f9;
      color: var(--cm-text-secondary);
    }
    .bsPriceBreakdown__row:last-child { border-bottom: none; }
    .bsPriceBreakdown__label { flex: 1; }
    .bsPriceBreakdown__price { font-weight: 700; color: var(--cm-primary); white-space: nowrap; }
    .bsLivePriceWrap {
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .bsLivePriceToggle {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--cm-text-faint);
      font-size: 0.9rem;
      padding: 2px 4px;
      line-height: 1;
      transition: color 0.15s;
    }
    .bsLivePriceToggle:hover { color: var(--cm-primary); }

    /* ── E-mail status ── */
    .bsEmailStatus {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 14px;
      font-size: 0.95rem;
      font-weight: 600;
      margin-top: 16px;
      margin-bottom: 20px;
    }
    .bsEmailStatus--sending {
      background: #f0f4ff;
      color: var(--cm-text-secondary);
      border: 1px solid var(--cm-border-accent);
    }
    .bsEmailStatus--ok {
      background: #f0fdf4;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }
    .bsEmailStatus--error {
      background: #fff1f2;
      color: #be123c;
      border: 1px solid #fecdd3;
    }

    .bsPdfStore {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
      margin-bottom: 4px;
    }
    .bsPdfStore__status {
      flex: 1;
      font-size: 0.88rem;
      color: var(--cm-text-secondary);
      min-width: 0;
    }
    .bsPdfStore__btn {
      white-space: nowrap;
      font-size: 0.88rem;
      padding: 8px 14px;
    }

    /* ── Mobiel: compacte opties ── */
    @media (max-width: 480px) {
      .bsOption {
        padding: 10px 14px;
        gap: 10px;
      }
      .bsOption__icon {
        font-size: 1.2rem;
        min-width: 28px;
      }
      .bsOptions {
        gap: 6px;
      }

      /* ── Prijsuitsplitsing: links uitlijnen zodat hij niet buiten beeld valt ── */
      .bsPriceBreakdown {
        right: auto;
        left: 0;
        min-width: 0;
        width: min(280px, calc(100vw - 60px));
      }

      /* ── Optie-label: zorg dat het kan krimpen naast prijs + info ── */
      .bsOption__label { min-width: 0; }

      /* ── Review: wijzigen-knop op eigen rij ── */
      .bsReview__itemRight {
        width: 100%;
        justify-content: space-between;
      }
      .bsReview__itemPrice { min-width: unset; }
    }