:root {
   --color-primary-100: #ecf4f8;
   --color-primary-200: #c9e6f2;
   --color-primary-300: #7da4b7;
   --color-primary-400: #648392;
 
   --color-neutral-100: #e2e2e2;
   --color-neutral-200: #929292;
   --color-neutral-300: #6f6f6f;
   --color-neutral-400: #000000;
 
   --color-accent-red: #dd1c1a;
   --color-accent-blue: #578ba4;
   --color-accent-orange: #ed9b40;
   --color-accent-green: #23ac32;
   --color-accent-coral: #ed6a5a;
 
  --color-page-bg: #ffffff;
  --color-secondary-bg: #f2f2f2;
  --color-secondary-text: #a3a3a3;

   --font-family-base: "SF Pro Display", "SF Pro Text", -apple-system,
     BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 
   --radius-xl: 60px;
   --radius-lg: 32px;
   --radius-md: 20px;
   --radius-sm: 14px;
  --radius-input: 12px;
 
   --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.12);
 
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
   --space-7: 32px;
   --space-8: 40px;
   --space-9: 48px;
   --space-10: 64px;
 
   --font-size-h1: 32px;
   --font-size-h2: 26px;
   --font-size-h3: 22px;
   --font-size-h4: 18px;
   --font-size-body: 16px;
   --font-size-caption: 13px;
 
   --line-height-tight: 1.2;
   --line-height-normal: 1.5;
 }
 
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 
 body {
   margin: 0;
   font-family: var(--font-family-base);
   color: var(--color-neutral-400);
  background: var(--color-page-bg);
   line-height: var(--line-height-normal);
 }
 
 img {
   max-width: 100%;
   display: block;
 }
 
 a {
   color: inherit;
   text-decoration: none;
 }
 
 .page {
   padding: var(--space-7) var(--space-4) var(--space-10);
 }
 
 .section {
   margin-bottom: var(--space-10);
 }
 
 .section-header {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
   margin-bottom: var(--space-5);
 }
 
 .eyebrow {
   font-size: var(--font-size-caption);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--color-neutral-300);
 }
 
 .card {
   background: #ffffff;
   border-radius: var(--radius-lg);
   padding: var(--space-6);
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--color-neutral-100);
 }
 
 .card--soft {
   background: var(--color-primary-100);
 }
 
 .grid {
   display: grid;
   gap: var(--space-4);
 }
 
 .grid--palette {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .grid--buttons,
 .grid--badges {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .grid--forms {
   grid-template-columns: 1fr;
 }
 
 .grid--cards {
   grid-template-columns: 1fr;
 }
 
 .palette-swatch {
   border-radius: var(--radius-md);
   padding: var(--space-4);
   color: var(--color-neutral-400);
   min-height: 88px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 .palette-swatch span {
   font-size: var(--font-size-caption);
 }
 
 .palette-swatch code {
   font-size: var(--font-size-caption);
 }
 
 .palette-swatch--dark {
   color: #ffffff;
 }
 
 .typography h1,
 .typography h2,
 .typography h3,
 .typography h4 {
   margin: 0 0 var(--space-2);
 }
 
 h1 {
   font-size: var(--font-size-h1);
   line-height: var(--line-height-tight);
 }
 
 h2 {
   font-size: var(--font-size-h2);
   line-height: var(--line-height-tight);
 }
 
 h3 {
   font-size: var(--font-size-h3);
   line-height: var(--line-height-tight);
 }
 
 h4 {
   font-size: var(--font-size-h4);
   line-height: var(--line-height-tight);
 }
 
 p {
   margin: 0 0 var(--space-3);
   font-size: var(--font-size-body);
 }
 
 .caption {
   font-size: 16px;
   color: var(--color-neutral-300);
 }
 
 .button {
   border: none;
   border-radius: var(--radius-xl);
   padding: var(--space-3) var(--space-6);
   font-weight: 600;
   cursor: pointer;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-2);
 }
 
 .button:active {
   transform: translateY(1px);
 }
 
 .button--primary {
   background: var(--color-neutral-400);
   color: #ffffff;
   box-shadow: var(--shadow-sm);
 }
 
 .button--secondary {
  background: var(--color-secondary-bg);
  color: var(--color-secondary-text);
 }
 
 .button--outline {
   background: transparent;
   color: var(--color-neutral-400);
   border: 2px solid var(--color-neutral-400);
 }
 
 .button--sm {
   padding: var(--space-2) var(--space-4);
   font-size: 14px;
 }
 
 .button--md {
   padding: var(--space-3) var(--space-6);
   font-size: 15px;
 }
 
 .button--lg {
   padding: var(--space-4) var(--space-7);
   font-size: 16px;
 }
 
 .input,
 .select {
   width: 100%;
  border-radius: var(--radius-input);
   border: 1px solid var(--color-neutral-100);
   padding: var(--space-3) var(--space-5);
   font-size: var(--font-size-body);
   font-family: var(--font-family-base);
   background: #ffffff;
 }
 
 .input:focus,
 .select:focus {
   outline: 2px solid var(--color-primary-300);
   outline-offset: 2px;
 }
 
 .form-field {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 }
 
 .checkbox {
   display: inline-flex;
   align-items: center;
   gap: var(--space-3);
   font-size: var(--font-size-body);
 }
 
 .checkbox input {
   accent-color: var(--color-accent-blue);
   width: 18px;
   height: 18px;
 }
 
 .badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
   border-radius: var(--radius-xl);
   font-size: var(--font-size-caption);
   font-weight: 600;
 }
 
 .badge--success {
   background: rgba(35, 172, 50, 0.15);
   color: var(--color-accent-green);
 }
 
 .badge--warning {
   background: rgba(237, 155, 64, 0.2);
   color: var(--color-accent-orange);
 }
 
 .badge--danger {
   background: rgba(221, 28, 26, 0.18);
   color: var(--color-accent-red);
 }
 
 .badge--info {
   background: rgba(87, 139, 164, 0.2);
   color: var(--color-accent-blue);
 }
 
 .icon-row {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
 }
 
 .icon {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--color-primary-200);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--color-neutral-400);
 }
 
 .icon svg {
   width: 20px;
   height: 20px;
 }

.icon-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.icon-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-100);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
  place-items: center;
}

.icon-image {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.icon-label {
  font-size: var(--font-size-caption);
  color: var(--color-neutral-300);
  text-align: center;
}

.svg-icons {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-100);
  padding: var(--space-4);
  overflow: auto;
}

.svg-icons svg {
  display: block;
}
 
 .card-stack {
   display: grid;
   gap: var(--space-4);
 }
 
 .card-title {
   font-weight: 600;
   margin: 0 0 var(--space-2);
 }
 
 .card-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: var(--color-neutral-300);
   font-size: var(--font-size-caption);
 }
 
 .pill-list {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2);
 }

.card-variants {
  display: grid;
  gap: var(--space-4);
}

.card-variant {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-100);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.card-variant--flat {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: var(--space-4) 0;
}

.card-variant--flat + .card-variant--flat {
  border-top: 1px solid var(--color-neutral-100);
  padding-top: var(--space-5);
}

.card-variant--accent {
  border: none;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.card-variant--accent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: var(--color-accent-blue);
}

.card-variant--media {
  border: none;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  grid-template-columns: auto 1fr;
  align-items: center;
}

.card-media {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--color-primary-200);
  display: grid;
  place-items: center;
}

.card-media img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.card-variant--metric {
  border: none;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  background: var(--color-primary-100);
  display: grid;
  gap: var(--space-2);
}

.card-variant--outline {
  border: 2px solid var(--color-neutral-400);
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
}

.card-variant--striped {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(
    90deg,
    var(--color-primary-200) 0%,
    #ffffff 60%
  );
}

.card-variant--glass {
  border-radius: 0;
  border: 1px solid rgba(100, 131, 146, 0.25);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
}

.card-variant--minimal {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-4) 0;
}

.card-variant--minimal + .card-variant--minimal {
  border-top: 1px solid var(--color-neutral-100);
  padding-top: var(--space-5);
}

.card-variant--metric .metric {
  font-size: 32px;
  font-weight: 600;
}

.card-variant--stat .stat-value {
  font-size: 28px;
  font-weight: 600;
}

.card-variant--stat .stat-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-neutral-300);
  font-size: var(--font-size-caption);
}

.card-variant--icon {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.card-variant--icon .icon {
  width: 48px;
  height: 48px;
}

.card-variant--split {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.card-variant--split .badge {
  justify-self: end;
}

.card-variant--action {
  background: var(--color-primary-100);
}

.svg-icon-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.svg-icon-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-100);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
  place-items: center;
}

.svg-icon {
  width: 28px;
  height: 28px;
  color: var(--color-neutral-400);
}

.how-variants {
  display: grid;
  gap: var(--space-6);
}

.how-variant {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-100);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.how-variant-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}

.how-grid {
  display: grid;
  gap: var(--space-3);
}

.how-step-card {
  background: var(--color-primary-100);
  border-radius: 18px;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}

.how-step-card strong {
  font-size: 16px;
}

.how-timeline {
  display: grid;
  gap: var(--space-3);
}

.how-timeline-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.how-timeline-badge {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--color-primary-200);
  display: grid;
  place-items: center;
  font-weight: 600;
}

.how-timeline-content {
  padding: var(--space-3);
  border-radius: 14px;
  border: 1px solid var(--color-neutral-100);
  background: #ffffff;
}

.how-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.how-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-primary-100);
  border: 1px solid rgba(100, 131, 146, 0.2);
  font-weight: 600;
}

.how-split {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.how-split-panel {
  background: var(--color-primary-100);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid rgba(100, 131, 146, 0.2);
}

.how-split-steps {
  display: grid;
  gap: var(--space-3);
}

.how-split-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--color-neutral-100);
}

.how-split-step strong {
  font-size: 16px;
}

.how-badges {
  display: grid;
  gap: var(--space-3);
}

.how-badge-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: 16px;
  border: 1px solid var(--color-neutral-100);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.how-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-primary-200);
  display: grid;
  place-items: center;
  font-weight: 600;
}

.trust-variants {
  display: grid;
  gap: var(--space-4);
}

.trust-badge-demo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-neutral-100);
  background: #ffffff;
  font-weight: 600;
}

.trust-badge-demo--stripe {
  border: none;
  background: linear-gradient(90deg, var(--color-primary-200) 0%, #ffffff 60%);
}

.trust-badge-demo--outline {
  border: 2px solid var(--color-neutral-400);
  background: transparent;
}

.trust-badge-demo--soft {
  border: 1px solid rgba(100, 131, 146, 0.2);
  background: var(--color-primary-100);
}

.trust-badge-demo--split {
  background: #ffffff;
  border: none;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.trust-badge-demo--split::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: var(--color-accent-blue);
}

.how-step-variants {
  display: grid;
  gap: var(--space-4);
}

.how-step-demo {
  padding: var(--space-4);
  background: #ffffff;
  border: 1px solid var(--color-neutral-100);
  display: grid;
  gap: var(--space-2);
}

.how-step-demo--flat {
  border: none;
  background: var(--color-primary-100);
}

.how-step-demo--stripe {
  border: none;
  background: linear-gradient(90deg, var(--color-primary-200) 0%, #ffffff 60%);
}

.how-step-demo--split {
  border: none;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.how-step-demo--line {
  border: none;
  background: transparent;
  border-top: 2px solid var(--color-neutral-400);
  padding-top: var(--space-3);
}

.trust-badge-demo--pill {
  border-radius: var(--radius-xl);
  border: none;
  background: #000000;
  color: #ffffff;
}

.trust-badge-demo--glass {
  border-radius: 0;
  border: 1px solid rgba(100, 131, 146, 0.2);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}

.trust-badge-demo--tag {
  border-radius: 0;
  border: none;
  background: var(--color-primary-100);
  position: relative;
  padding-left: calc(var(--space-4) + 10px);
}

.trust-badge-demo--tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background: var(--color-accent-orange);
}

.trust-badge-demo--chip {
  border-radius: 999px;
  border: 1px solid var(--color-neutral-400);
  background: transparent;
  font-weight: 500;
}

.how-step-demo--stack {
  border: none;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.how-step-demo--stack::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 6px;
  background: var(--color-accent-blue);
}

.how-step-demo--gradient {
  border: none;
  background: linear-gradient(135deg, var(--color-primary-200), #ffffff 70%);
}

.how-step-demo--accent {
  border: none;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  border-left: 6px solid var(--color-accent-green);
}

.how-step-demo--outline {
  border: 2px solid var(--color-neutral-400);
  background: transparent;
}
 
 @media (min-width: 768px) {
   .page {
     padding: var(--space-10) var(--space-8);
   }
 
   .grid--palette {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   .grid--buttons,
   .grid--badges {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .grid--forms {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .grid--cards {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }

  .icon-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .card-variants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .svg-icon-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .how-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-split {
    grid-template-columns: 1.2fr 1fr;
  }

  .how-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-variants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-step-variants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
 }