/* Nexifit — Design tokens from design.json */

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --colorPrimary50: #fdf5e6;
  --colorPrimary100: #f5e6cc;
  --colorPrimary500: #8d5524;
  --colorPrimary900: #3e1c09;
  --colorSecondary500: #8b3a00;
  --colorSecondary900: #a04000;
  --colorWhite: #ffffff;
  --colorGrayLight: #f0f0f0;
  --colorGrayMedium: #576366;
  --colorGrayDark: #2c3e50;
  --colorBlack: #1a1a1a;
  --colorSuccess: #196f3d;
  --colorWarning: #f1c40f;
  --colorError: #e74c3c;
  --colorInfo: #3498db;
  --colorBody: #4a2312;
  --colorBtn: #9a3d00;
  --colorBtnHover: #7a3100;
  --bgPrimary: #fdf5e6;
  --bgSecondary: #f5e6cc;
  --bgSurface: #ffffff;
  --fontPrimary: "Poppins", "Inter", sans-serif;
  --fontSecondary: "Helvetica Neue", sans-serif;
  --radiusSm: 4px;
  --radiusMd: 8px;
  --radiusLg: 12px;
  --radiusXl: 16px;
  --radius2xl: 24px;
  --radiusFull: 9999px;
  --shadowSm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadowMd: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  --shadowLg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.03);
  --shadowCard: 0 4px 20px rgba(0, 0, 0, 0.05);
  --transitionFast: 150ms ease-in-out;
  --transitionNormal: 300ms ease-in-out;
  --transitionSlow: 500ms ease-in-out;
  --space1: 4px;
  --space2: 8px;
  --space3: 12px;
  --space4: 16px;
  --space5: 20px;
  --space6: 24px;
  --space8: 32px;
  --space10: 40px;
  --space12: 48px;
  --containerMax: 480px;
  --containerWide: 960px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fontPrimary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--colorBody);
  background: var(--bgPrimary);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--colorPrimary500);
}

:focus-visible {
  outline: 2px solid var(--colorBtn);
  outline-offset: 2px;
}

.skipLink {
  position: absolute;
  left: -9999px;
  top: var(--space2);
  z-index: 1000;
  padding: var(--space2) var(--space4);
  background: var(--colorPrimary900);
  color: var(--colorWhite);
  border-radius: var(--radiusMd);
}

.skipLink:focus {
  left: var(--space4);
}

.topBar {
  background: var(--colorPrimary900);
  color: var(--colorWhite);
  text-align: center;
  padding: var(--space2) var(--space4);
  font-size: 12px;
}

.siteHeader {
  background: var(--bgPrimary);
  padding: var(--space4);
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.headerInner {
  max-width: var(--containerWide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space4);
}

.brandLogo {
  font-size: 22px;
  font-weight: 700;
  color: var(--colorPrimary900);
  text-decoration: none;
}

.brandLogo span {
  color: var(--colorBtn);
}

.headerCta {
  font-size: 12px;
  padding: var(--space2) var(--space4);
  min-height: 40px;
}

.pageContainer {
  max-width: var(--containerMax);
  margin: 0 auto;
  padding: 0 var(--space4);
}

.pageContainerWide {
  max-width: var(--containerWide);
  margin: 0 auto;
  padding: 0 var(--space4);
}

h1,
.h1Style {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--colorPrimary900);
  margin: 0 0 var(--space4);
}

h2,
.h2Style {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--colorPrimary900);
  margin: 0 0 var(--space4);
  text-align: center;
}

.subtitleText {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--colorSecondary500);
}

.captionText {
  font-size: 12px;
  color: var(--colorGrayMedium);
}

.sectionBlock {
  padding: var(--space10) 0;
}

.sectionBlockAlt {
  background: var(--bgSecondary);
}

.ctaButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space2);
  background: var(--colorBtn);
  color: var(--colorWhite);
  border: none;
  border-radius: var(--radiusXl);
  padding: 16px 24px;
  font-family: var(--fontPrimary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  min-height: 56px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--transitionFast),
    transform var(--transitionFast);
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.ctaButton:hover {
  background: var(--colorBtnHover);
}

.ctaButton:active {
  transform: scale(0.98);
}

.ctaButtonSecondary {
  background: var(--colorWhite);
  color: var(--colorPrimary900);
  border: 1px solid #e0e0e0;
}

.ctaButtonSecondary:hover {
  border-color: var(--colorBtn);
  color: var(--colorBtn);
  background: var(--colorWhite);
}

.ctaWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space3);
  margin-top: var(--space6);
}

.heroSection {
  padding: var(--space6) 0 var(--space10);
}

.ratingRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space2);
  margin-bottom: var(--space4);
  font-size: 13px;
  color: var(--colorPrimary900);
}

.starRating {
  display: inline-flex;
  gap: 2px;
  color: var(--colorWarning);
}

.heroLead {
  text-align: center;
  margin-bottom: var(--space6);
}

.heroSubtitle {
  font-size: 16px;
  color: var(--colorGrayDark);
  margin: 0;
  text-align: center;
}

.heroVisual {
  display: grid;
  gap: var(--space4);
  margin-bottom: var(--space6);
}

.heroImageCard {
  background: var(--bgSurface);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadowCard);
}

.heroStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space3);
}
@media (max-width: 576px) {
  .heroStats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.statCard {
  background: var(--bgSurface);
  border-radius: var(--radiusLg);
  padding: var(--space4);
  text-align: center;
  box-shadow: var(--shadowSm);
}

.statValue {
  font-size: 22px;
  font-weight: 700;
  color: var(--colorBtn);
  display: block;
}

.statLabel {
  font-size: 11px;
  color: var(--colorGrayMedium);
  margin-top: var(--space1);
}

.problemContent,
.solutionContent {
  text-align: left;
}

.problemContent p,
.solutionContent p {
  margin: 0 0 var(--space4);
}

.infographicWrap {
  margin: var(--space6) 0;
  border-radius: var(--radiusXl);
  overflow: hidden;
  box-shadow: var(--shadowMd);
}

.expertQuote {
  display: flex;
  gap: var(--space4);
  background: var(--bgSurface);
  border-radius: 20px;
  padding: var(--space6);
  margin-top: var(--space6);
  box-shadow: var(--shadowCard);
}

.img-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.img-wrapper figure {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  display: flex;
}

.img-wrapper figure img {
  object-fit: cover;
}

@media (max-width: 460px) {
  .expertQuote {
    flex-direction: column;
    margin: 20px 0 0;
  }
}

.expertQuote img {
  width: 72px;
  height: 72px;
  border-radius: var(--radiusFull);
  flex-shrink: 0;
}

.expertName {
  font-weight: 600;
  color: var(--colorPrimary900);
  margin: 0 0 var(--space1);
}

.expertTitle {
  font-size: 12px;
  color: var(--colorGrayMedium);
  margin: 0 0 var(--space3);
}

.uspList {
  list-style: none;
  padding: 0;
  margin: var(--space6) 0 0;
}

.uspList li {
  padding: var(--space2) 0 var(--space2) 28px;
  position: relative;
}

.uspList li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--colorSuccess);
  font-weight: 700;
}

.benefitsGrid {
  display: grid;
  gap: var(--space4);
  margin-top: var(--space6);
}

.benefitCard {
  background: var(--bgSurface);
  border-radius: var(--radiusLg);
  padding: var(--space5);
  box-shadow: var(--shadowSm);
  display: flex;
  gap: var(--space4);
  align-items: flex-start;
  transition:
    box-shadow var(--transitionNormal),
    transform var(--transitionNormal);
}

.benefitCard:hover {
  box-shadow: var(--shadowMd);
}

.benefitIcon {
  width: 44px;
  height: 44px;
  border-radius: var(--radiusMd);
  background: var(--colorBtn);
  color: var(--colorWhite);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefitCard h3 {
  font-size: 16px;
  margin: 0 0 var(--space2);
  color: var(--colorPrimary900);
}

.benefitCard p {
  margin: 0;
  font-size: 13px;
}

.testimonialSlider {
  position: relative;
  margin-top: var(--space6);
}

.testimonialTrack {
  display: flex;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.testimonialCard {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--bgSurface);
  border-radius: 20px;
  padding: var(--space5);
  box-shadow: var(--shadowCard);
  display: flex;
  flex-direction: column;
  gap: var(--space4);
}

.testimonialHeader {
  display: flex;
  gap: var(--space4);
  align-items: center;
}

.testimonialAvatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radiusFull);
}

.testimonialMeta strong {
  display: block;
  color: var(--colorPrimary900);
}

.testimonialResult {
  font-size: 13px;
  font-weight: 600;
  color: var(--colorSuccess);
  margin-top: var(--space3);
}

.sliderNav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space4);
  margin-top: var(--space5);
}

.sliderBtn {
  width: 44px;
  height: 44px;
  border-radius: var(--radiusFull);
  border: 1px solid #e0e0e0;
  background: var(--colorWhite);
  color: var(--colorPrimary900);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transitionFast);
}

.sliderBtn:hover {
  border-color: var(--colorBtn);
  color: var(--colorBtn);
}

.sliderDots {
  display: flex;
  gap: var(--space2);
}

.sliderDot {
  width: 8px;
  height: 8px;
  border-radius: var(--radiusFull);
  border: none;
  background: #e0e0e0;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.sliderDotActive {
  background: var(--colorBtn);
  width: 24px;
}

.stepsTimeline {
  display: grid;
  gap: var(--space6);
  margin-top: var(--space6);
  position: relative;
  max-width: 700px;
  margin: var(--space6) auto 0;
}

.stepItem {
  display: flex;
  gap: var(--space4);
  align-items: flex-start;
}

.stepNumber {
  width: 40px;
  height: 40px;
  border-radius: var(--radiusFull);
  background: var(--colorPrimary900);
  color: var(--colorWhite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.stepItem h3 {
  margin: 0 0 var(--space2);
  font-size: 16px;
  color: var(--colorPrimary900);
}

.stepItem p {
  margin: 0;
  font-size: 13px;
}

.comparisonTableWrap {
  overflow-x: auto;
  margin-top: var(--space6);
  border-radius: var(--radiusXl);
  box-shadow: var(--shadowCard);
}

.comparisonTable {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  background: var(--bgSurface);
  font-size: 13px;
}

.comparisonTable th,
.comparisonTable td {
  padding: var(--space4);
  text-align: center;
  border-bottom: 1px solid var(--colorGrayLight);
}

.comparisonTable th {
  background: var(--colorPrimary900);
  color: var(--colorWhite);
  font-weight: 600;
}

.comparisonTable th:first-child,
.comparisonTable td:first-child {
  text-align: left;
  font-weight: 500;
}

.comparisonTable th.colNexifit {
  background: var(--colorBtn);
  color: var(--colorWhite);
}

.comparisonTable td.colNexifit {
  background: rgba(154, 61, 0, 0.08);
  font-weight: 600;
}

.checkYes {
  color: var(--colorSuccess);
  font-weight: 700;
}

.checkNo {
  color: var(--colorError);
}

.urgencyCard {
  background: var(--bgSurface);
  border-radius: 20px;
  padding: var(--space6);
  box-shadow: var(--shadowCard);
  text-align: center;
}

.stockLabel {
  font-weight: 600;
  color: var(--colorPrimary900);
  margin: var(--space4) 0 var(--space2);
}

.progressBarTrack {
  height: 8px;
  background: #e0e0e0;
  border-radius: var(--radiusSm);
  overflow: hidden;
}

.progressBarFill {
  height: 100%;
  background: linear-gradient(90deg, var(--colorBtn), var(--colorSecondary500));
  border-radius: var(--radiusSm);
  transition: width var(--transitionSlow, 500ms ease);
}

.faqList {
  margin-top: var(--space6);
  display: flex;
  flex-direction: column;
  gap: var(--space3);
}

.faqItem {
  background: var(--bgSurface);
  border-radius: var(--radiusLg);
  overflow: hidden;
  box-shadow: var(--shadowSm);
}

.faqQuestion {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space4);
  padding: var(--space4) var(--space5);
  border: none;
  background: transparent;
  font-family: var(--fontPrimary);
  font-size: 15px;
  font-weight: 600;
  color: var(--colorPrimary900);
  text-align: left;
  cursor: pointer;
}

.faqAnswer {
  padding: 0 var(--space5) var(--space5);
  font-size: 14px;
  line-height: 1.6;
}

.faqAnswer[hidden] {
  display: none;
}

.faqIcon {
  flex-shrink: 0;
  transition: transform var(--transitionNormal);
}

.faqItemOpen .faqIcon {
  transform: rotate(180deg);
}

.finalCtaSection {
  text-align: center;
  background: linear-gradient(
    180deg,
    var(--bgPrimary) 0%,
    var(--bgSecondary) 100%
  );
  padding: var(--space12) var(--space4);
}

.guaranteeBadge {
  display: inline-flex;
  align-items: center;
  gap: var(--space2);
  margin-top: var(--space5);
  padding: var(--space3) var(--space5);
  background: var(--bgSurface);
  border-radius: var(--radiusFull);
  font-size: 13px;
  font-weight: 600;
  color: var(--colorPrimary900);
  box-shadow: var(--shadowSm);
}

.trustBar {
  background: var(--bgSecondary);
  padding: var(--space6) var(--space4);
}

.trustIcons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space5);
  max-width: var(--containerWide);
  margin: 0 auto var(--space6);
}

.trustItem {
  display: flex;
  align-items: center;
  gap: var(--space2);
  font-size: 12px;
  color: var(--colorPrimary900);
}

.trustIconBox {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--colorBtn);
  color: var(--colorWhite);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paymentRow {
  display: flex;
  justify-content: center;
  max-width: 400px;
  margin: 0 auto;
}

.siteFooter {
  background: var(--colorPrimary900);
  color: var(--colorWhite);
  padding: var(--space8) var(--space4);
  font-size: 13px;
}

.footerInner {
  max-width: var(--containerWide);
  margin: 0 auto;
  text-align: center;
}

.footerLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space4);
  margin: var(--space5) 0;
}

.footerLinks a {
  color: var(--colorPrimary100);
  text-decoration: none;
}

.footerLinks a:hover {
  text-decoration: underline;
}

.siteFooter .captionText {
  color: var(--colorPrimary100);
}

.footerDisclaimer {
  font-size: 11px;
  color: #e8d5c0;
  margin-top: var(--space6);
  line-height: 1.5;
}

.fadeIn {
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.legalPage {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space10) var(--space4);
}

.legalPage h1 {
  text-align: left;
}

.legalPage p,
.legalPage li {
  line-height: 1.7;
}

@media (min-width: 640px) {
  .pageContainer {
    max-width: 600px;
  }

  h1,
  .h1Style {
    font-size: 36px;
  }

  h2,
  .h2Style {
    font-size: 28px;
  }

  .heroVisual {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

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

  .ctaButton {
    width: auto;
  }
}

@media (min-width: 960px) {
  .pageContainer {
    max-width: var(--containerWide);
  }

  .heroSection .pageContainerWide {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
    max-width: 700px;
    align-items: center;
  }

  .heroSection .ratingRow {
    grid-column: 1 / -1;
  }

  .heroLead {
    text-align: left;
    grid-column: 1;
  }

  .heroVisual {
    grid-column: 2;
    grid-row: 2 / 4;
  }

  .heroSection .ctaWrapper {
    justify-content: flex-start;
  }

  .heroStats {
    grid-column: 1;
    grid-row: 3;
  }

  .benefitsGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  .fadeIn {
    animation: none !important;
    transition: none !important;
  }
}