:root {
   --container-max: 1100px;
   --section-gap: 72px;
   --text-muted: var(--color-neutral-300);
 }
 
 body {
   background: var(--color-page-bg);
 }
 
 .container {
   width: min(100%, var(--container-max));
   margin: 0 auto;
   padding: 0 var(--space-4);
 }
 
 .section-block {
   padding: var(--section-gap) 0;
 }
 
.section-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.section-block .section-title {
  align-items: center;
  text-align: center;
}
 
 .section-title p {
   color: var(--text-muted);
 }
 
 .button-group {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
 }
 
 .site-header {
   position: sticky;
   top: 0;
   z-index: 10;
   background: rgba(255, 255, 255, 0.92);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--color-neutral-100);
 }
 
 .header-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-4) 0;
   gap: var(--space-4);
 }
 
 .logo {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   font-weight: 600;
 }
 
 .logo img {
   width: 36px;
   height: 36px;
 }
 
 .nav {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   flex-wrap: wrap;
   font-size: 14px;
 }
 
 .nav a {
   color: var(--color-neutral-300);
   transition: color 0.2s ease;
 }
 
 .nav a:hover {
   color: var(--color-neutral-400);
 }

 .hero {
   padding: 56px 0 var(--section-gap);
 }
 
 .hero-grid {
   display: grid;
   gap: var(--space-7);
 }
 
 .hero-copy h1 {
   margin-bottom: var(--space-3);
 }
 
 .hero-copy p {
   color: var(--text-muted);
 }
 
 .trust-badges {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
   margin-top: var(--space-5);
 }
 
 .trust-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
   border-radius: var(--radius-xl);
   background: var(--color-primary-100);
   font-size: 13px;
 }
 
 .hero-mockup {
   display: grid;
   place-items: center;
 }
 
 .hero-mockup img {
   width: min(100%, 320px);
   border-radius: 36px;
   box-shadow: var(--shadow-md);
   border: 10px solid #ffffff;
 }
 
 .social-proof {
   background: var(--color-primary-100);
   border-radius: var(--radius-lg);
   padding: var(--space-5);
   display: grid;
   gap: var(--space-4);
 }
 
 .stat {
   display: grid;
   gap: var(--space-1);
 }
 
 .stat strong {
   font-size: 20px;
 }
 
 .steps-grid,
 .features-grid,
 .purpose-grid {
   display: grid;
   gap: var(--space-4);
 }
 
 .step-card,
 .feature-card,
 .purpose-card {
   background: #ffffff;
   border-radius: var(--radius-lg);
   padding: var(--space-5);
   border: 1px solid var(--color-neutral-100);
   box-shadow: var(--shadow-sm);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .step-card:hover,
 .feature-card:hover,
 .purpose-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-md);
 }
 
 .card-icon {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   margin-bottom: var(--space-3);
 }
 
 .card-icon img {
   width: 28px;
   height: 28px;
   object-fit: contain;
 }
 
 .carousel {
   position: relative;
 }
 
 .carousel-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
 }
 
 .carousel-track::-webkit-scrollbar {
  height: 0;
 }
 
 .carousel-track::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 0;
 }
 
.carousel-track::before,
.carousel-track::after {
  content: "";
  flex: 0 0 27.5%;
}

.carousel-item {
  flex: 0 0 45%;
  max-width: 360px;
   scroll-snap-align: center;
   display: grid;
   place-items: center;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-100);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform: scale(0.7);
  transform-origin: center;
 }
 
.carousel-item img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.carousel-item.is-center {
  transform: scale(1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

 
 .carousel-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
 }
 
 .carousel-button {
  border-radius: 50%;
  width: 44px;
  height: 44px;
   border: 1px solid var(--color-neutral-100);
   background: #ffffff;
   cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 24px;
  pointer-events: all;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
 }
 
 .faq-list {
   display: grid;
   gap: var(--space-3);
 }
 
 .faq-item {
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-neutral-100);
   background: #ffffff;
   padding: var(--space-4);
 }
 
 .faq-item summary {
   cursor: pointer;
   list-style: none;
   font-weight: 600;
 }
 
 .faq-item summary::-webkit-details-marker {
   display: none;
 }
 
 .faq-item p {
   margin-top: var(--space-3);
   color: var(--text-muted);
 }
 
 .cta {
   background: var(--color-primary-100);
   border-radius: var(--radius-lg);
   padding: var(--space-6);
   display: grid;
   gap: var(--space-5);
   text-align: center;
 }
 
 .store-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
   justify-content: center;
 }
 
 .store-button {
   padding: var(--space-3) var(--space-6);
   border-radius: var(--radius-xl);
   border: 1px solid var(--color-neutral-100);
   background: #ffffff;
   font-weight: 600;
 }
 
 .disclosures {
   font-size: 13px;
   color: var(--text-muted);
   line-height: 1.6;
 }
 
 .footer {
   border-top: 1px solid var(--color-neutral-100);
   margin-top: 0;
 }
 
 .footer-links {
  display: grid;
  gap: 12px;
  font-size: 14px;
   font-size: 14px;
   color: var(--text-muted);
 }
 
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
 
 @media (min-width: 768px) {
   .hero-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     align-items: center;
   }
 
   .social-proof {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   .steps-grid {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
   .features-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .purpose-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .carousel-track {
     grid-auto-columns: minmax(320px, 1fr);
   }
 
   .cta {
     text-align: left;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     align-items: center;
   }
 
   .cta .store-buttons {
     justify-content: flex-start;
   }
 }