/* ==========================================================================
   FlexGold X-Cell — Landing Page
   style.css — Mobile-first, exact Figma design tokens
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Colors */
  --clr-black:          #000000;
  --clr-white:          #ffffff;
  --clr-accent:         #82fa08;
  --clr-accent-banner:  #74dd09;
  --clr-footer-bg:      #2c5700;
  --clr-text-dark:      #111111;
  --clr-text-dark2:     #222222;
  --clr-form-bg:        rgba(61, 61, 61, 0.76);
  --clr-form-border:    #989898;
  --clr-input-bg:       #585858;
  --clr-input-border:   #82fa08;
  --clr-highlight:      rgba(142, 255, 27, 0.3);
  --clr-catalog-grad:   linear-gradient(142.906deg, #ffffff 1.576%, #d9d9d9 97.952%);

  /* Typography */
  --ff: 'Montserrat', sans-serif;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Button glows */
  --btn-glow:      0px 0px 25.282px 12.641px rgba(130, 250, 8, 0.3);
  --btn-inset:     inset 0px -5.056px 5.056px 0px rgba(0, 0, 0, 0.4);
  --btn-glow-sm:   0px 0px 23.76px 11.88px rgba(130, 250, 8, 0.3);
  --btn-inset-sm:  inset 0px -4.752px 4.752px 0px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ff);
  background: var(--clr-black);
  color: var(--clr-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  text-decoration: none;
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-family: var(--ff);
  text-align: center;
  white-space: nowrap;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.btn:hover  { opacity: 0.9; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Hero CTA / Catalog CTA (shared shape) */
.btn--hero,
.btn--catalog {
  background: var(--clr-accent);
  color: var(--clr-text-dark2);
  font-weight: var(--fw-semibold);
  border-radius: 100px;
}

.btn--hero {
  font-size: clamp(18px, 3vw, 32.87px);
  height: clamp(50px, 7vw, 70px);
  padding: 0 clamp(20px, 4vw, 40px);
  box-shadow: var(--btn-glow), var(--btn-inset);
}

.btn--catalog {
  font-size: clamp(16px, 2.5vw, 30.89px);
  height: clamp(48px, 6.5vw, 66px);
  padding: 0 clamp(20px, 3.5vw, 36px);
  box-shadow: var(--btn-glow-sm), var(--btn-inset-sm);
}

/* Form submit */
.btn--submit {
  background: var(--clr-accent);
  color: var(--clr-text-dark2);
  font-weight: var(--fw-extrabold);
  font-family: var(--ff);
  font-size: clamp(18px, 2.5vw, 30px);
  height: 61px;
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
  border: none;
}
.btn--submit:hover    { opacity: 0.9; }
.btn--submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn--submit:active   { transform: none; }

/* ==========================================================================
   4. HERO — mobile
   ========================================================================== */
.s-hero {
  background: var(--clr-white);
  position: relative;
  z-index: 1;
  overflow: visible; /* floaters from s-how can cover bottom area */
}

.s-hero__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px 56px;
}

.s-hero__deco-circle { display: none; }

.s-hero__logo {
  margin-bottom: 28px;
}
.s-hero__logo img {
  height: clamp(50px, 7vw, 86px);
  width: auto;
  object-fit: contain;
  object-position: left center;
}

.s-hero__headline {
  font-size: clamp(30px, 6vw, 58px);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-dark);
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 20px;
  max-width: 560px;
}

.s-hero__subtext {
  font-size: clamp(16px, 2.8vw, 30px);
  font-weight: var(--fw-regular);
  color: var(--clr-text-dark);
  line-height: 1.2;
  margin-bottom: 32px;
  max-width: 545px;
}

.s-hero__cta {
  display: flex;
  width: 100%;
  max-width: 340px;
}

.s-hero__product {
  margin-top: 36px;
}
.s-hero__product img {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* ==========================================================================
   5. HOW IT WORKS — mobile
   ========================================================================== */
.s-how {
  background: var(--clr-black);
  position: relative;
  z-index: 2; /* above hero (z-index:1) so floaters overlap correctly */
  overflow: visible; /* products overflow above (into hero) and below (into catalog) */
}

.s-how__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 24px 80px;
  overflow: visible;
}

/* All floating products hidden on mobile */
.s-how__float,
.s-how__bg-img { display: none; }

.s-how__arrow {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}
.s-how__arrow img {
  width: clamp(60px, 12vw, 87px);
  height: auto;
}

.s-how__title {
  font-size: clamp(22px, 4.5vw, 48px);
  font-weight: var(--fw-bold);
  color: var(--clr-white);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  line-height: 1;
  margin-bottom: 48px;
}

/* Steps — mobile: vertical stack */
.s-how__steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.s-how__connector { display: none; }

.s-how__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 260px;
}

.s-how__circle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #b0d01f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: none;
}
.s-how__circle--accent {
  background: #b0d01f;
  box-shadow: none;
}

.s-how__num {
  font-size: 48px;
  font-weight: var(--fw-bold);
  color: var(--clr-text-dark2);
  line-height: 1;
}

.s-how__step-title {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--clr-white);
  line-height: 1.2;
  width: 190px;
}

.s-how__step-text {
  font-size: 14px;
  font-weight: var(--fw-regular);
  color: var(--clr-white);
  line-height: 1.1;
  width: 200px;
}

/* ==========================================================================
   6. CATALOG (section 3) — mobile
   ========================================================================== */
.s-catalog {
  background: var(--clr-catalog-grad);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.s-catalog__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 24px 80px;
}

.s-catalog__bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.s-catalog__bg-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
}

/* Decorative elements hidden on mobile */
.s-catalog__highlight,
.s-catalog__products,
.s-catalog__smartwatch { display: none; }

.s-catalog__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.s-catalog__title {
  font-size: clamp(26px, 5vw, 45px);
  font-weight: var(--fw-bold);
  color: var(--clr-text-dark2);
  line-height: 1;
}

.s-catalog__subtitle {
  font-size: clamp(16px, 2.8vw, 26px);
  font-weight: var(--fw-regular);
  color: var(--clr-text-dark2);
}

.s-catalog__body {
  font-size: clamp(15px, 2.5vw, 25px);
  color: var(--clr-text-dark2);
  line-height: 1.4;
}
.s-catalog__body strong {
  font-weight: var(--fw-bold);
}

.s-catalog__cta {
  display: flex;
  width: 100%;
  max-width: 340px;
}

/* ==========================================================================
   7. DARK AREA — mobile
   ========================================================================== */
.s-dark {
  position: relative;
  background: var(--clr-black);
}

.s-dark__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

.s-dark__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.s-dark__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ==========================================================================
   8. CTA BANNER — mobile
   ========================================================================== */
.s-cta-banner {
  position: relative;
  z-index: 1;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.s-cta-banner__prod-left,
.s-cta-banner__prod-right { display: none; }

.s-cta-banner__box {
  background: var(--clr-accent-banner);
  border-radius: 10px;
  padding: 36px 24px;
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.s-cta-banner__text {
  font-size: clamp(28px, 5vw, 45px);
  font-weight: var(--fw-medium);
  color: var(--clr-black);
  line-height: 1.15;
}
.s-cta-banner__text strong {
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   9. FORM SECTION — mobile
   ========================================================================== */
.s-form {
  position: relative;
  z-index: 1;
  padding: 0 24px 80px;
}

/* Decorative products hidden on mobile */
.s-form__deco { display: none; }

.s-form__box {
  background: var(--clr-form-bg);
  border: 1.5px solid var(--clr-form-border);
  border-radius: 10px;
  padding: 40px 30px;
  max-width: 771px;
  margin: 0 auto;
}

.s-form__box form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-label {
  font-size: 16px;
  font-weight: var(--fw-regular);
  color: var(--clr-white);
  line-height: 1;
}

.form-input {
  background: var(--clr-input-bg);
  border: 2px solid var(--clr-input-border);
  border-radius: 8px;
  height: 46px;
  width: 100%;
  color: var(--clr-white);
  font-family: var(--ff);
  font-size: 16px;
  padding: 0 16px;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
}
.form-input:focus {
  border-color: var(--clr-white);
}

.form-textarea {
  background: var(--clr-input-bg);
  border: 2px solid var(--clr-input-border);
  border-radius: 8px;
  height: 228px;
  width: 100%;
  color: var(--clr-white);
  font-family: var(--ff);
  font-size: 16px;
  padding: 14px 16px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  line-height: 1.4;
}
.form-textarea:focus {
  border-color: var(--clr-white);
}

.form-feedback {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  text-align: center;
  padding: 14px 16px;
  border-radius: 8px;
}
.form-feedback.success {
  background: rgba(130, 250, 8, 0.15);
  color: var(--clr-accent);
}
.form-feedback.error {
  background: rgba(255, 80, 80, 0.15);
  color: #ff6b6b;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.s-footer {
  background: var(--clr-footer-bg);
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.s-footer__text {
  font-size: clamp(12px, 1.5vw, 18px);
  font-weight: var(--fw-medium);
  color: var(--clr-white);
  text-align: center;
  white-space: nowrap;
  padding: 0 16px;
}

/* ==========================================================================
   11. TABLET (≥768px) — side-by-side form row, steps row
   ========================================================================== */
@media (min-width: 768px) {
  .s-hero__inner { padding: 48px 48px 72px; }

  .form-row {
    flex-direction: row;
    gap: 36px;
  }
  .form-row .form-group {
    flex: 1;
  }

  .s-cta-banner {
    flex-direction: row;
    justify-content: center;
  }
  .s-cta-banner__box { max-width: 500px; }

  /* Steps: horizontal on tablet */
  .s-how__steps {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
  }
  .s-how__step { max-width: 220px; }
  .s-how__connector {
    display: flex;
    align-items: center;
    margin-top: 46px;
    flex-shrink: 0;
  }
  .s-how__connector::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
  }
}

/* ==========================================================================
   12. DESKTOP (≥1024px) — approaching full Figma layout
   ========================================================================== */
@media (min-width: 1024px) {

  /* ---- HERO ---- */
  /* Solid green = fills right margin on wide screens */
  .s-hero {
    background-color: #47bc39;
  }

  /* Full-width gradient anchored to content center via calc(50% ± Xpx):
     - left of content  → solid white
     - inside content   → white fades to transparent (~32% → ~85%)
     - right of content → transparent → reveals solid green background   */
  .s-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      to right,
      #ffffff                    0%,
      #ffffff                    calc(50% - 52px),
      rgba(255,255,255,0.88)     calc(50% + 108px),
      rgba(255,255,255,0.45)     calc(50% + 312px),
      rgba(255,255,255,0.10)     calc(50% + 490px),
      transparent                calc(50% + 590px)
    );
  }

  .s-hero__inner {
    padding: 0;
    height: 788px;
    overflow: hidden;
  }

  /* Gradient moved to .s-hero background — no clipping, full-width */
  .s-hero__deco-circle { display: none; }

  .s-hero__logo {
    position: absolute;
    left: 162px;
    top: 132px;
    width: 406px;
    height: 86px;
    margin: 0;
    z-index: 1;
  }
  .s-hero__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
  }

  .s-hero__headline {
    position: absolute;
    left: 162px;
    top: 280px;
    transform: translateY(-50%);
    width: 621px;
    font-size: 58px;
    margin: 0;
    max-width: none;
    z-index: 1;
  }

  .s-hero__subtext {
    position: absolute;
    left: 162px;
    top: 480px;
    transform: translateY(-50%);
    width: 545px;
    font-size: 30px;
    line-height: 1.1;
    margin: 0;
    max-width: none;
    z-index: 1;
  }

  .s-hero__cta {
    position: absolute;
    left: 162px;
    top: 610px;
    width: 515px;
    height: 70.322px;
    font-size: 32.866px;
    max-width: none;
    border-radius: 63.204px;
    box-shadow: var(--btn-glow), var(--btn-inset);
    z-index: 2;
    display: inline-flex;
  }

  .s-hero__product {
    position: absolute;
    left: 618px;
    top: 25px;
    width: 696px;
    height: 696px;
    margin: 0;
    z-index: 1;
  }
  .s-hero__product img {
    width: 696px;
    height: 696px;
    object-fit: contain;
    max-width: none;
  }

  /* ---- HOW IT WORKS ---- */
  .s-how__inner {
    padding: 0;
    height: 929px;
    overflow: visible;
  }

  /* Background image: centered, top=254, 1350x675 */
  .s-how__bg-img {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 254px;
    width: 1350px;
    height: 675px;
    pointer-events: none;
    z-index: 0;
  }
  .s-how__bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Down arrow */
  .s-how__arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 17px;
    width: 174px;
    height: 132px;
    margin: 0;
    z-index: 1;
  }
  .s-how__arrow img { width: 174px; height: 132px; }

  /* Title: center-y=229 in section */
  .s-how__title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 229px;
    font-size: 48px;
    width: 623.61px;
    white-space: nowrap;
    margin: 0;
    z-index: 1;
  }

  /* Steps container: top=340.37 covers circles + texts */
  .s-how__steps {
    position: absolute;
    left: 0;
    right: 0;
    top: 340.37px;
    height: 260px;
    flex-direction: row;
    gap: 0;
    z-index: 1;
  }

  /* Each step: absolute within .s-how__steps */
  .s-how__step {
    position: absolute;
    top: 0;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    max-width: none;
  }

  /* Step positions: center-x at 343.5, 700, 1057.5 → left = center - 100 */
  .s-how__step[data-step="1"] { left: 243.5px; }
  .s-how__step[data-step="2"] { left: 600px; }
  .s-how__step[data-step="3"] { left: 957.5px; }

  /* Step text gaps from circle */
  .s-how__step-title { margin-top: 0; width: 190px; }
  .s-how__step[data-step="2"] .s-how__step-title { width: 195px; }
  .s-how__step[data-step="3"] .s-how__step-title { width: 195px; }

  /* Connectors: horizontal lines between step circles */
  .s-how__connector {
    display: block;
    position: absolute;
    height: 4px;
    width: 149.348px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    /* vertical center of circles = 46px from top of .s-how__steps */
    top: 44px;
  }
  .s-how__connector::after { display: none; }

  /* C1: center-x=522, left=522-74.67=447.33 */
  .s-how__connector--1 { left: 447.33px; }
  /* C2: center-x=879, left=879-74.67=804.33 */
  .s-how__connector--2 { left: 804.33px; }

  /* ---- FLOATING PRODUCTS (desktop only) ---- */
  .s-how__float {
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: 3;
  }

  /* Shadow ellipses beneath floating products */
  .s-how__shadow {
    display: block;
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  /* Alarm clock: page y=704, sect02 starts y=788 → top = -84px */
  .s-how__float--alarm {
    top: -100px;
    left: 100px;
    width: 340px;
    height: 290px;
  }
  .s-how__float--alarm img { width: 100%; height: 100%; object-fit: contain; }
  .s-how__shadow--alarm {
    display: none;
  }

  /* Smartwatches: page y=721 → top = -67px */
  .s-how__float--watches {
    top: -67px;
    left: calc(75% - 49.64px); /* = 1000.36px */
    width: 470px;
    height: 260px;
  }
  .s-how__float--watches img { width: 100%; height: 100%; object-fit: contain; }
  .s-how__shadow--watches {
    display: none;
  }

  /* Product 01 (fone 01): page y=1549 → sect02 top = 761px, overflows below */
  .s-how__float--p1 {
    top: 761px; /* page 1549 - sect02 start 788 = 761 */
    left: 118px;
    width: 310.474px;
    height: 310.472px;
  }
  .s-how__float--p1 img { width: 100%; height: 100%; object-fit: contain; }
  .s-how__shadow--p1 {
    display: none;
  }

  /* Product 02 (radio): page y=1447 → sect02 top = 659px */
  .s-how__float--p2 {
    top: 659px;
    left: calc(25% + 148.66px); /* = 498.66px */
    width: 373.2px;
    height: 434.104px;
  }
  .s-how__float--p2 img { width: 100%; height: 100%; object-fit: contain; }
  .s-how__shadow--p2 {
    display: none;
  }

  /* Product 03 (fone 02): page y=1537 → sect02 top = 749px */
  .s-how__float--p3 {
    top: 749px;
    left: calc(75% - 64px); /* = 986px */
    width: 250.287px;
    height: 297.783px;
  }
  .s-how__float--p3 img { width: 100%; height: 100%; object-fit: contain; }
  .s-how__shadow--p3 {
    display: none;
  }

  /* ---- CATALOG (section 3) ---- */
  .s-catalog__inner {
    padding: 0;
    height: 1150px;
    overflow: visible; /* allow products to bleed up */
  }

  /* BG overlay: wider than container, centered, top=-21 */
  .s-catalog__bg-overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -21px;
    width: 2133.827px;
    height: 1171px;
    pointer-events: none;
    overflow: visible;
    right: auto;  /* override mobile inset:0 */
    bottom: auto; /* override mobile inset:0 */
  }
  .s-catalog__bg-overlay img {
    width: 2133.827px;
    height: 1171px;
    object-fit: cover;
    object-position: top center;
    opacity: 0.8;
    max-width: none;
  }

  /* Green highlight box — glassmorphism */
  .s-catalog__highlight {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 251.88px;
    width: 1012.045px;
    height: 331.643px;
    background: rgba(142, 255, 27, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    border-top: 1.5px solid rgba(255, 255, 255, 0.6);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 8px 32px rgba(0, 0, 0, 0.08);
    z-index: 1;
  }

  /* Products group: left side */
  .s-catalog__products {
    display: block;
    position: absolute;
    left: 55px;
    top: 209px;
    width: 600px;
    height: 470px;
    z-index: 2;
    pointer-events: none;
  }
  .s-catalog__products img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left bottom;
    max-width: none;
  }

  /* Smartwatch: right side */
  .s-catalog__smartwatch {
    display: block;
    position: absolute;
    left: 1098px;
    top: 516px;
    width: 263px;
    height: 263px;
    z-index: 2;
    pointer-events: none;
  }
  .s-catalog__smartwatch img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: none;
  }

  /* Content: center-x = 50%+193.38 = 893.38, width=590.76 → left=598px */
  .s-catalog__content {
    position: absolute;
    left: 598px;
    top: 0;
    width: 590.759px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0;
    z-index: 2;
  }

  .s-catalog__title {
    position: absolute;
    top: 310px;
    transform: translateY(-50%);
    left: 0;
    width: 590.759px;
    font-size: 45px;
    text-align: center;
  }

  .s-catalog__subtitle {
    position: absolute;
    top: 420px;
    transform: translateY(-50%);
    left: 0;
    width: 590.759px;
    font-size: 26px;
    text-align: center;
  }

  .s-catalog__body {
    position: absolute;
    top: 490px;
    transform: translateY(-50%);
    left: 0;
    width: 590.759px;
    font-size: 25px;
    text-align: center;
    line-height: 1;
  }

  .s-catalog__cta {
    position: absolute;
    /* left=458 on page; content starts at left=598 on page; so cta left = 458-598 = -140px from content left */
    left: -140px;
    top: 651.14px;
    width: 484px;
    height: 66.089px;
    font-size: 30.888px;
    max-width: none;
    border-radius: 59.4px;
    box-shadow: var(--btn-glow-sm), var(--btn-inset-sm);
  }

  /* ---- DARK AREA ---- */
  .s-dark {
    margin-top: -160px;
    position: relative;
    z-index: 3;
  }

  .s-dark__inner {
    position: relative;
    min-height: auto;
  }

  /* ---- CTA BANNER ---- */
  .s-cta-banner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    padding: 0;
    height: 340px;
    width: 100%;
    max-width: 1400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 0;
  }

  /* Green box: centered, flex row — radio | text | vendedor */
  .s-cta-banner__box {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 965px;
    height: 222px;
    max-width: none;
    border-radius: 10px;
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
    overflow: visible;
  }

  .s-cta-banner__text {
    font-size: 45px;
    line-height: 1.15;
    text-align: center;
    flex: 1;
    z-index: 1;
    align-self: center;
  }

  /* cx-01 (radio): left inside green box, overflows top */
  .s-cta-banner__prod-left {
    display: block;
    flex-shrink: 0;
    width: 260px;
    height: 260px;
    margin-left: -30px;
    align-self: flex-end;
    margin-bottom: -18px;
    pointer-events: none;
  }
  .s-cta-banner__prod-left img {
    width: 100%; height: 100%; object-fit: contain;
  }

  /* vendedor: right inside green box, bottom flush with box edge, overflows top */
  .s-cta-banner__prod-right {
    display: block;
    flex-shrink: 0;
    width: 280px;
    height: 300px;
    margin-right: -20px;
    align-self: flex-end;
    margin-bottom: -12px;
    pointer-events: none;
  }
  .s-cta-banner__prod-right img {
    width: 100%; height: 100%; object-fit: contain;
  }

  /* ---- FORM SECTION ---- */
  .s-form {
    padding: 0;
    position: relative;
    z-index: 1;
  }

  /* Decorative: fone-xc01 at left=1086, top=310 (relative to dark area) */
  /* Relative to .s-form top: form top = 405px in dark area, fone top = 310 → top = -95px above form */
  .s-form__deco { display: block; position: absolute; pointer-events: none; z-index: 2; }

  .s-form__deco--fone {
    left: 1086px;
    top: 80px;
    width: 332px;
    height: 332px;
  }
  .s-form__deco--fone img { width: 100%; height: 100%; object-fit: contain; max-width: none; }

  /* Mouse: left side of form */
  .s-form__deco--mouse {
    left: 88px;
    top: 230px;
    width: 168px;
    height: 208px;
  }
  .s-form__deco--mouse img { width: 100%; height: 100%; object-fit: contain; max-width: none; }

  /* Form box: centered, width=889, top offset handled by parent dark area */
  .s-form__box {
    position: relative;
    width: 771px;
    padding: 40px 70px;
    z-index: 1;
  }

  /* Form row: exact widths */
  .form-row {
    flex-direction: row;
    gap: 36px;
  }
  .form-row .form-group { flex: none; width: 297px; }

}

/* ---- Dark area offset for form: top=405px within dark inner ---- */
@media (min-width: 1024px) {
  .s-form {
    padding-top: 230px;   /* space below CTA banner (half banner + gap) */
    padding-bottom: 60px; /* gap before footer */
    overflow: visible;    /* allow deco images with negative top to show */
  }
}

/* ==========================================================================
   13. LARGE DESKTOP (≥1400px) — exact 1400px Figma measurements
   ========================================================================== */
@media (min-width: 1400px) {
  /* At exactly 1400px, inner containers match Figma exactly */
  .s-hero__inner,
  .s-how__inner,
  .s-catalog__inner,
  .s-dark__inner {
    width: 1400px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   14. ULTRA-WIDE (≥1920px) — keep content centered, no distortion
   ========================================================================== */
@media (min-width: 1920px) {
  /* Sections with full-width backgrounds stay full-width.
     Content containers remain max-width: 1400px centered.
     Background images use cover + center to fill width cleanly. */

  .s-dark__bg img {
    object-position: center center;
  }
  .s-catalog__bg-overlay img {
    object-position: center center;
  }
}

/* ==========================================================================
   15. SUCCESS MODAL
   ========================================================================== */

/* Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
  padding: 24px;
}
.modal-overlay.is-active {
  display: flex;
  opacity: 1;
}

/* Card */
.modal {
  position: relative;
  background: linear-gradient(165deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 1.5px solid rgba(130, 250, 8, 0.35);
  border-radius: 20px;
  padding: 48px 36px 40px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 0 60px rgba(130, 250, 8, 0.12),
    0 24px 48px rgba(0, 0, 0, 0.5);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.is-active .modal {
  transform: scale(1) translateY(0);
}

/* Close X */
.modal__close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  padding: 4px 8px;
}
.modal__close:hover {
  color: #ffffff;
}

/* Checkmark icon */
.modal__icon {
  margin: 0 auto 24px;
  width: 72px;
  height: 72px;
}

.modal__check-circle {
  stroke: var(--clr-accent);
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-linecap: round;
}
.modal-overlay.is-active .modal__check-circle {
  animation: modal-circle 0.6s 0.3s ease forwards;
}

.modal__check-path {
  stroke: var(--clr-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}
.modal-overlay.is-active .modal__check-path {
  animation: modal-check 0.35s 0.7s ease forwards;
}

@keyframes modal-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes modal-check {
  to { stroke-dashoffset: 0; }
}

/* Title */
.modal__title {
  font-family: var(--ff);
  font-size: clamp(22px, 4vw, 28px);
  font-weight: var(--fw-bold);
  color: var(--clr-accent);
  margin-bottom: 12px;
}

/* Text */
.modal__text {
  font-family: var(--ff);
  font-size: clamp(14px, 2.5vw, 16px);
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 32px;
}

/* Actions */
.modal__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* WhatsApp button */
.btn--whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25d366;
  color: #ffffff;
  font-family: var(--ff);
  font-size: clamp(15px, 2.5vw, 17px);
  font-weight: var(--fw-semibold);
  height: 52px;
  width: 100%;
  max-width: 320px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn--whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
}
.btn--whatsapp:active {
  transform: translateY(0);
}

.btn__wpp-icon {
  flex-shrink: 0;
}

/* Close (secondary) */
.btn--modal-close {
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--ff);
  font-size: 15px;
  font-weight: var(--fw-medium);
  height: 44px;
  width: 100%;
  max-width: 320px;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn--modal-close:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

/* ==========================================================================
   16. REDUCED MOTION — disable animations for accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}