/**
 * Landing Page - Responsive Styles
 * Mobile and tablet overrides for landing-desktop.css
 *
 * Breakpoints:
 * - Desktop: >= 1200px (default in landing-desktop.css)
 * - Tablet:  768px - 1199px
 * - Mobile:  <= 767px (based on Figma 440px design)
 *
 * Structure:
 * Each section has both mobile and tablet overrides grouped together.
 * Mobile styles come first (mobile-first within this file), tablet adjusts from there.
 */

/* ==========================================================================
   MOBILE STYLES (<= 767px)
   Based on Figma mobile design (440px)
   ========================================================================== */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     General / Page Layout
     ------------------------------------------------------------------------ */

  .landing {
    overflow-x: hidden;
  }

  .landing__section {
    padding: 0;
  }

  /* ------------------------------------------------------------------------
     Mobile Titles - Prevent line wrapping, scale with viewport
     ------------------------------------------------------------------------ */

  /* Section titles that should never wrap */
  .details__title,
  .think-about__title,
  .pricing__title,
  .contact__title,
  .about__title {
    white-space: nowrap;
  }

  /* Titles that should wrap to multiple lines */
  .qa__title {
    white-space: normal;  /* 2 lines: "Questions" / "and Answers" */
  }

  .final-cta__title {
    white-space: normal;  /* 3 lines: "Want to see if" / ... */
  }

  /* Use clamp() for responsive title sizing - scales with viewport */
  .details__title {
    font-size: clamp(28px, 11vw, 64px);
  }

  .qa__title {
    font-size: clamp(28px, 11vw, 64px);  /* Unified section-title scale */
  }

  .think-about__title {
    font-size: clamp(26px, 11vw, 64px);
  }

  .pricing__title {
    font-size: clamp(28px, 11vw, 64px);
  }

  .contact__title {
    font-size: clamp(24px, 10vw, 58px);
  }

  .about__title {
    font-size: clamp(22px, 9vw, 48px);
  }

  .final-cta__title {
    font-size: clamp(26px, 7vw, 44px);  /* Smaller max keeps each line fitting */
  }

  /* UA: Ukrainian titles run longer than the English originals. Let the
     single-line section titles wrap, and guard any long word against
     overflowing the viewport on very narrow screens (~320px). */
  :lang(ua) .problem__title,
  :lang(ua) .details__title,
  :lang(ua) .think-about__title,
  :lang(ua) .pricing__title,
  :lang(ua) .contact__title,
  :lang(ua) .about__title {
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* problem__title is a fixed 40px and holds a long word ("Неефективного");
     scale it with the viewport so it fits narrow screens (40px at 440px). */
  :lang(ua) .problem__title {
    font-size: clamp(28px, 9.1vw, 40px);
  }

  /* ------------------------------------------------------------------------
     Mobile Buttons - Ensure single line text
     ------------------------------------------------------------------------ */

  .btn--primary {
    white-space: nowrap;
  }

  /* ------------------------------------------------------------------------
     Header
     ------------------------------------------------------------------------ */

  .header {
    position: absolute;
    top: 53px;
    left: var(--section-padding-x, 20px);
    right: var(--section-padding-x, 20px);
    transform: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header__logo {
    width: 88px;
    height: 19px;
  }

  .header__lang {
    margin-right: 0;
  }

  .header__lang-link {
    font-size: 14px;
  }

  .header__lang-separator {
    font-size: 14px;
  }

  /* ------------------------------------------------------------------------
     Section: Hero
     ------------------------------------------------------------------------ */

  .hero {
    width: 100%;
    height: auto;
    min-height: 720px;
    padding: 0 var(--section-padding-x);
    padding-top: 90px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  /* Hide the desktop frame */
  .hero__frame {
    display: none;
  }

  /* Hero content wrapper - ensure it's above shapes */
  .hero__content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Badge - "Virtual Consultant - Interactive Product Finder Plugin" */
  .hero__badge {
    position: static;
    transform: none;
    width: 100%;
    max-width: 310px;
    margin-bottom: 12px;
    text-align: center;
    white-space: normal;
    z-index: 10;
  }

  .hero__badge-text {
    font-size: 24px;
    line-height: 1.2;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
  }

  /* Hero Title */
  .hero__title {
    position: static;
    transform: none;
    text-align: center;
    white-space: normal;
    margin-bottom: 20px;
    z-index: 10;
  }

  .hero__title .text-hero--light {
    display: block;
    font-size: 40px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -78, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 72;
    line-height: 1.2;
  }

  .hero__title .text-hero--bold {
    display: block;
    font-size: 64px;
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    line-height: 1.1;
  }

  /* UA: scale bold title on small screens to prevent viewport overflow */
  :lang(ua) .hero__title .text-hero--bold {
    font-size: clamp(44px, 17vw, 64px);
  }

  /* Hero Description Card */
  .hero__description {
    position: static;
    transform: none;
    width: 100%;
    max-width: 385px;
    min-height: 192px;
    padding: 22px 34px;
    margin-bottom: 28px;
    border-color: #5f5f5f;
    z-index: 10;
  }

  .hero__description-text {
    font-size: 24px;
    line-height: 1.4;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
  }

  /* Hero CTA area */
  .hero__cta {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    z-index: 10;
  }

  .hero__cta .btn--primary {
    min-width: 223px;
    width: auto;
    height: 56px;
    font-size: 22px;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    white-space: nowrap;
    padding: 8px 32px;
  }

  .hero__cta .btn--link {
    font-size: 24px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    padding: 8px 16px;
  }

  /* Hero Tagline */
  .hero__tagline {
    position: static;
    transform: none;
    width: 100%;
    max-width: 221px;
    font-size: 16px;
    color: var(--color-text-black);
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    z-index: 10;
  }

  /* Hero Shapes - repositioned for mobile, behind content */
  .hero__shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
  }

  /* All shapes behind content */
  .hero .shape {
    z-index: 1 !important;
  }

  /* Blue hexagon - top left corner */
  .shape--hexagon-blue {
    width: 166px;
    height: 166px;
    top: -35px;
    left: -80px;
    right: auto;
    bottom: auto;
    transform: rotate(-45deg);
  }

  /* Blue triangle - right side, near bottom (smaller, moved down) */
  .shape--triangle-blue {
    width: 120px;
    height: 120px;
    top: auto;
    bottom: 148px;
    left: auto;
    right: -30px;
    transform: rotate(10deg);
  }

  /* Green triangle - bottom right (smaller, moved down) */
  .shape--triangle-green {
    width: 200px;
    height: 200px;
    top: auto;
    bottom: 18px;
    left: auto;
    right: -100px;
    transform: rotate(-12deg);
  }

  /* Peach rectangle - hidden on mobile */
  .shape--rectangle-peach {
    display: none;
  }

  /* Yellow circle - right side, behind title area */
  .shape--circle-yellow {
    width: 205px;
    height: 205px;
    top: 205px;
    bottom: auto;
    left: auto;
    right: -105px;
  }

  /* Pink circle - overlaps button area (swapped with purple) */
  .shape--circle-pink {
    width: 81px;
    height: 81px;
    top: auto;
    bottom: 120px;
    left: -20px;
    right: auto;
    z-index: 15;
  }

  /* Purple circle - overlaps description card bottom-left (swapped with pink) */
  .shape--circle-purple {
    width: 143px;
    height: 143px;
    top: auto;
    bottom: 200px;
    left: -20px;
    right: auto;
    z-index: 20;
  }

  /* ------------------------------------------------------------------------
     Section: Problem
     ------------------------------------------------------------------------ */

  .problem {
    width: 100%;
    min-height: auto;
    padding: 40px var(--section-padding-x);
    padding-bottom: 140px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Decorative shape - scaled for mobile */
  .problem__shape {
    width: 162px;
    height: 162px;
    top: 80px;
    left: -60px;
    transform: rotate(-79deg);
  }

  /* Header - stack vertically on mobile */
  .problem__header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
    max-width: 100%;
  }

  .problem__title {
    width: 100%;
    max-width: 392px;
    font-size: 40px;
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    line-height: 1.1;
    margin-bottom: 8px; /* Tight spacing per Figma */
    text-align: left;
  }

  .problem__question {
    width: 100%;
    max-width: 313px;
    font-size: 24px;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    line-height: 1.2; /* Tighter line-height */
    text-align: right;
    align-self: flex-end;
  }

  /* Cards - stack vertically on mobile */
  .problem__cards {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    max-width: 100%;
  }

  .problem__card {
    width: 100%;
    max-width: 377px;
    min-height: 226px;
    padding: 20px 32px;
    border-color: #929292;
  }

  .problem__card-text {
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
  }

  .problem__highlight-card {
    width: 100%;
    max-width: 376px;
    min-height: 165px;
    padding: 33px 47px;
    border-color: #929292;
  }

  .problem__highlight-text {
    font-size: 28px;
    text-align: center;
    line-height: 1.4;
  }

  .problem__stat {
    width: 100%;
    max-width: 381px;
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    text-align: center;
    line-height: 1.4;
  }

  /* ------------------------------------------------------------------------
     Section: Solution (Stop screen)
     Based on Figma mobile design (440px) - node 2039:769
     ------------------------------------------------------------------------ */

  .solution {
    width: 100%;
    height: auto;
    min-height: 560px;
    padding: 69px var(--section-padding-x) 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  /* Shapes container */
  .solution__shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
  }

  /* Hexagon pink - left side */
  .shape--hexagon-pink-dark {
    width: 180px;
    height: 180px;
    top: 124px;
    left: -85px;
    transform: rotate(-79deg);
  }

  /* Triangle blue - top right */
  .shape--triangle-blue-dark {
    width: 135px;
    height: 135px;
    top: 43px;
    left: auto;
    right: -20px;
    transform: rotate(10deg);
  }

  /* Circle magenta - right side below triangle */
  .shape--circle-magenta {
    width: 70px;
    height: 70px;
    top: 140px;
    left: auto;
    right: -10px;
  }

  /* Title */
  .solution__title {
    position: relative;
    z-index: 10;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 311px;
    font-size: 40px;
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 48px;
  }

  /* Card */
  .solution__card {
    position: relative;
    z-index: 10;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 385px;
    min-height: 189px;
    padding: 25px 24px;
    border-color: #5f5f5f;
    margin-bottom: 29px;
    box-sizing: border-box;
  }

  .solution__card-text {
    font-size: 24px;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    line-height: 1.4;
  }

  /* Subtitle */
  .solution__subtitle {
    position: static;
    transform: none; /* Reset desktop translateX(-50%) */
    white-space: normal; /* Reset desktop nowrap - allow text wrap */
    z-index: 10;
    width: 100%;
    max-width: 349px;
    font-size: 24px;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    text-align: center;
    line-height: 1.4;
  }

  /* Extra small screens (320px) */
  @media (max-width: 380px) {
    .solution__card {
      padding: 20px 16px;
    }

    .solution__card-text {
      font-size: 20px;
    }

    .solution__subtitle {
      font-size: 20px;
    }
  }

  /* ------------------------------------------------------------------------
     Section: Branding
     Based on Figma mobile design (440px) - node 2039:813
     Figma spacing: star→title ~0px, title→subtitle 14px, subtitle→star 19px
     ------------------------------------------------------------------------ */

  .branding {
    height: 840px;
    min-height: auto;
    padding: 0 var(--section-padding-x);
    padding-top: 300px; /* Less space above big star */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .branding__star {
    position: static;
    transform: none;
    width: 34px;
    height: 35px;
    margin-bottom: 10px;
  }

  .branding__title {
    position: static;
    transform: none;
    font-size: 46px; /* Base size for narrow screens */
    font-weight: 653;
    font-variation-settings: 'GRAD' 0, 'XOPQ' 86, 'XTRA' 482, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 30;
    letter-spacing: 2px;
    white-space: nowrap;
    line-height: 1.0;
    margin-bottom: 14px; /* Figma: title→subtitle gap */
  }

  .branding__subtitle {
    position: static;
    transform: none;
    font-size: 16px;
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    line-height: 1.0;
    margin-bottom: 18px; /* Figma: subtitle→star gap */
  }

  .branding__star-small {
    position: static;
    transform: none;
    width: 20px;
    height: 20px;
  }

  /* Larger mobile screens (440px+) - match Figma design exactly */
  @media (min-width: 460px) {
    .branding__title {
      font-size: 64px;
      font-variation-settings: 'GRAD' 0, 'XOPQ' 86, 'XTRA' 482, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 39;
      letter-spacing: 4.48px;
    }

    .branding__subtitle {
      font-size: 20px;
    }

  }

  /* Extra small screens - more condensed to fit */
  @media (max-width: 350px) {
    .branding__title {
      font-size: 38px;
      letter-spacing: 1px;
      font-variation-settings: 'GRAD' 0, 'XOPQ' 86, 'XTRA' 482, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 25;
    }

    .branding__letter--settled {
      font-variation-settings: 'GRAD' 0, 'XOPQ' 86, 'XTRA' 482, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 25;
    }
  }

  /* Branding letter animation - mobile settled state */
  .branding__letter--settled {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 400;
    font-variation-settings: 'GRAD' 0, 'XOPQ' 86, 'XTRA' 482, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 39;
  }

  /* ------------------------------------------------------------------------
     Section: What Is It
     Based on Figma mobile frames 2039:825 and 2039:1037
     ------------------------------------------------------------------------ */

  .what-is-it {
    height: auto;
    min-height: auto;
    padding: 39px var(--section-padding-x) 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
  }

  /* Header */
  .what-is-it__header {
    padding-top: 0;
    margin-bottom: 32px;
  }

  .what-is-it__badge {
    font-size: 20px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    line-height: 1.4;
  }

  .what-is-it__badge-light {
    font-weight: var(--font-weight-medium);
  }

  .what-is-it__title {
    font-size: clamp(28px, 11vw, 64px);  /* Match details__title ("Для кого:") */
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    line-height: 1.1;
    margin-top: 24px;  /* More space below the eyebrow badge */
  }

  /* Cards container */
  .what-is-it__content {
    width: 100%;
    max-width: 381px;
    margin-bottom: 40px;
  }

  .what-is-it__cards {
    flex-direction: column;
    gap: 31px;
  }

  /* Cards - both use light gray background on mobile */
  .what-is-it__card {
    width: 100%;
    max-width: 381px;
    height: auto;
    min-height: 196px;
    padding: 24px 24px;
    background-color: #e3e3e3;
    border: 1.5px solid #000000;
    border-radius: 22px;
  }

  .what-is-it__card--dark {
    background-color: #e3e3e3;
    border-color: #000000;
  }

  .what-is-it__card-text {
    font-size: 24px;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: #000000;
    text-align: center;
    line-height: 1.4;
  }

  .what-is-it__card--dark .what-is-it__card-text {
    color: #000000;
  }

  .what-is-it__card-text--bold {
    font-weight: var(--font-weight-extrabold);
    color: #000000;
  }

  .what-is-it__card--dark .what-is-it__card-text--bold {
    color: #000000;
  }

  /* Mockup */
  .what-is-it__mockup {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 389px;
    height: auto;
    aspect-ratio: 389 / 784;
    margin: 0 auto;
    border-radius: 40px;
  }

  .what-is-it__mockup-image {
    position: absolute;
    width: 498.35%;
    height: 164.78%;
    left: -141.15%;
    top: -39.43%;
  }

  /* Purple shape - positioned relative to center, aligned with mockup right edge */
  .what-is-it__shape {
    width: 113px;
    height: 113px;
    top: 710px;
    bottom: auto;
    left: calc(50% + 100px); /* Fixed relative to center - aligns with mockup right edge */
    right: auto;
  }

  /* Extra small screens */
  @media (max-width: 400px) {
    .what-is-it__card-text {
      font-size: 20px;
    }
  }

  /* ------------------------------------------------------------------------
     Section: Details (Best Fit, What You Get, How It Works, Features)
     Based on Figma mobile frame 2039:1220
     ------------------------------------------------------------------------ */

  .details {
    padding: 40px var(--section-padding-x) 60px;
    overflow: visible;
    position: relative;
  }

  /* Mobile decorative shapes for Details section */
  .details__shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
    /* No z-index here - let individual shapes control their own stacking */
  }

  /* Green triangle - left of center */
  .details__shape--polygon-green {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 870px;
    left: calc(50% - 180px);
    right: auto;
    transform: translateX(-50%) rotate(-12deg);
    z-index: 0;
  }

  /* Peach square - right of center (swapped with green) - overlaps text */
  .details__shape--polygon-peach {
    position: absolute;
    width: 140px;
    height: 140px;
    top: 450px;
    left: calc(50% + 180px);
    right: auto;
    transform: translateX(-50%) rotate(-90deg);
    z-index: 15;
  }

  /* Blue circle - hidden on mobile, use the one inside how-it-works container instead */
  .details__shape--ellipse-pink {
    display: none;
  }

  /* Blue circle inside how-it-works container - sticks to top-left corner of textbox */
  .how-it-works__shape-circle {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    top: -30px;
    left: -40px;
    z-index: 20;
  }

  /* Pink circle - horizontally centered - overlaps text */
  .details__shape--ellipse-blue {
    position: absolute;
    width: 113px;
    height: 113px;
    top: 1200px;
    left: calc(50% + 175px);
    right: auto;
    transform: translateX(-50%);
    z-index: 0;
  }

  /* Blue triangle - right side at Key Features section */
  .details__shape--triangle-blue {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 2750px;
    right: -80px;
    left: calc(50% + 100px);
    transform: rotate(10deg);
    z-index: 0;
  }

  .details__section {
    margin-bottom: 40px;
    max-width: 397px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .details__title {
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    line-height: 1.1;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  /* Best Fit Card */
  .details__card {
    width: 100%;
    max-width: 397px;
    min-height: auto;
    padding: 32px 38px;
    background-color: #e3e3e3;
    border: 1.5px solid #a6a6a6;
    border-radius: 22px;
  }

  .details__card-text {
    font-size: 28px;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    line-height: 1.3;
    text-align: center;
  }

  .details__card-text--bold {
    font-weight: var(--font-weight-extrabold);
    color: #151515;
  }

  /* What You Get - Single column grid */
  .details__grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 397px;
  }

  .details__grid-card {
    width: 100%;
    max-width: 397px;
    min-height: 123px;
    padding: 28px 24px;
    background-color: #e3e3e3;
    border: 1.5px solid #a6a6a6;
    border-radius: 22px;
    box-shadow: 9px 10px 30.3px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .details__grid-card .details__card-text {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    text-align: center;
    color: #151515;
  }

  .details__grid-card .details__card-text--light {
    font-weight: var(--font-weight-medium);
    color: #5f5f5f;
  }

  /* How It Works */
  .how-it-works__container {
    position: relative;
    width: 100%;
    max-width: 397px;
  }

  /* Hide progress indicator on mobile */
  .how-it-works__progress {
    display: none;
  }

  /* Slides container for mobile */
  .how-it-works__slides {
    position: relative;
    width: 100%;
    height: 390px;
    min-height: 390px;
    overflow: visible;
  }

  .how-it-works__slide {
    position: relative;
    display: none;
  }

  .how-it-works__slide--active {
    display: block;
  }

  .how-it-works__card {
    width: 100%;
    max-width: 397px;
    min-height: 390px;
    padding: 26px 28px 0;
    background-color: #e3e3e3;
    border: 1.5px solid #a6a6a6;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  .how-it-works__card--step4 {
    min-height: 200px;
    padding: 26px 28px;
    justify-content: center;
  }

  .how-it-works__content {
    position: static;
    width: 100%;
    max-width: 339px;
    text-align: center;
    margin-bottom: 20px;
  }

  .how-it-works__content--centered {
    margin-bottom: 0;
  }

  .how-it-works__step-title {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: #151515;
    margin-bottom: 4px;
  }

  .how-it-works__step-subtitle {
    font-size: 28px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: #5f5f5f;
  }

  .how-it-works__mockup {
    position: relative;
    width: 274px;
    height: 219px;
    border-radius: 24px 24px 0 0;
    right: auto;
    bottom: 0;
    overflow: hidden;
  }

  /* Step 2 mockup - shows questions screen */
  .how-it-works__mockup--step2 {
    height: 220px;
    border-radius: 24px;
  }

  .how-it-works__mockup--step2 .how-it-works__mockup-image {
    width: 498.35%;
    height: 372.7%;
    left: -141.15%;
    top: -182.28%;
  }

  /* Step 3 mockup - cropped phone mockup */
  .how-it-works__mockup--step3 {
    height: 220px;
    border-radius: 24px;
    overflow: visible;
  }

  .how-it-works__mockup--step3 .how-it-works__mockup-image {
    width: 274px;
    height: auto;
    max-height: none;
    left: auto;
    right: 0;
    top: -10px;
    bottom: auto;
    transform: none;
  }

  /* Step 4 shapes for mobile */
  .how-it-works__shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: visible;
    pointer-events: none;
  }

  .how-it-works__shape {
    position: absolute;
  }

  .how-it-works__shape--hexagon {
    width: 150px;
    height: 150px;
    left: -30px;
    top: auto;
    bottom: 5px;
    right: auto;
    transform: rotate(15deg);
  }

  .how-it-works__shape--star {
    width: 120px;
    height: 123px;
    top: 10px;
    right: 20px;
    left: auto;
    bottom: auto;
  }

  .how-it-works__shape--circle {
    width: 82px;
    height: 82px;
    top: 80px;
    right: -5px;
    left: auto;
    bottom: auto;
  }

  /* Mobile navigation buttons */
  .how-it-works__nav--mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 16px;
    order: 2; /* Place after content, before mockup */
  }

  .how-it-works__nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #e8e8e8;
    border: 1.5px solid #a6a6a6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .how-it-works__nav-btn:hover {
    background-color: #d8d8d8;
    border-color: #888888;
  }

  .how-it-works__nav-btn:active {
    background-color: #d0d0d0;
  }

  .how-it-works__nav-btn img {
    width: 22px;
    height: 22px;
  }

  /* Up arrow - chevron points up */
  .how-it-works__nav-btn--up img {
    transform: rotate(0deg);
  }

  /* Down arrow - chevron points down (rotate 180deg) */
  .how-it-works__nav-btn--down img {
    transform: rotate(180deg);
  }

  /* Restart button - no rotation needed */
  .how-it-works__nav-btn--restart img {
    transform: none;
  }

  /* Adjust card layout for mobile to include nav buttons */
  .how-it-works__card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Fixed height for all cards */
  .how-it-works__card {
    min-height: 390px;
    height: 390px;
  }

  /* Step 1: text, button, mockup (top to bottom) - less spacing around button */
  .how-it-works__slide[data-step="0"] .how-it-works__content {
    order: 1;
    margin-bottom: 4px;
  }
  .how-it-works__slide[data-step="0"] .how-it-works__nav--mobile {
    order: 2;
    margin-top: 0;
    margin-bottom: 4px;
  }
  .how-it-works__slide[data-step="0"] .how-it-works__mockup {
    order: 3;
  }

  /* Step 2: text at top, buttons, mockup at bottom */
  .how-it-works__slide[data-step="1"] .how-it-works__content {
    order: 1;
    margin-bottom: 8px;
  }
  .how-it-works__slide[data-step="1"] .how-it-works__nav--mobile {
    order: 2;
    margin-top: 0;
    margin-bottom: 12px;
  }
  .how-it-works__slide[data-step="1"] .how-it-works__mockup {
    order: 3;
  }

  /* Step 3: mockup at top (truncated), text centered vertically, buttons with bottom spacing */
  .how-it-works__slide[data-step="2"] .how-it-works__card {
    padding-top: 0;
    justify-content: flex-start;
  }
  .how-it-works__slide[data-step="2"] .how-it-works__mockup {
    order: 1;
    margin-top: -30px;
    margin-bottom: 0;
    border-radius: 0 0 24px 24px;
    flex-shrink: 0;
  }
  .how-it-works__slide[data-step="2"] .how-it-works__content {
    order: 2;
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink: 0;
  }
  .how-it-works__slide[data-step="2"] .how-it-works__nav--mobile {
    order: 3;
    margin-top: 0;
    margin-bottom: 20px;
    flex-shrink: 0;
  }

  /* Step 4: shapes background, text centered, buttons at bottom */
  .how-it-works__card--step4 {
    justify-content: center;
    min-height: 390px;
    height: 390px;
  }
  .how-it-works__card--step4 .how-it-works__nav--mobile {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    margin: 0;
  }

  .details__note {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: #151515;
    margin-top: 20px;
    margin-left: 0;
    text-align: center;
    max-width: 345px;
    margin-left: auto;
    margin-right: auto;
  }

  .details__note-light {
    font-weight: var(--font-weight-medium);
    color: #5f5f5f;
  }

  /* Key Features */
  .details__features {
    width: 100%;
    max-width: 397px;
    min-height: auto;
    padding: 32px 24px;
    background-color: #e3e3e3;
    border: 1.5px solid #a6a6a6;
    border-radius: 22px;
  }

  .details__features-list {
    padding-left: 0;
  }

  .details__features-item {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: #151515;
    line-height: 1.4;
    margin-bottom: 16px;
    text-align: center;
  }

  .details__features-item:last-child {
    margin-bottom: 0;
  }

  .details__features-item--light {
    font-weight: var(--font-weight-medium);
    color: #5f5f5f;
  }

  /* CTA in Details */
  .details__cta {
    text-align: center;
    margin-top: 40px;
    padding: 0;
    max-width: 397px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
  }

  .details__cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .details__cta .btn--primary {
    width: 223px;
    height: 56px;
    font-size: 28px;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
  }

  .details__cta .btn--link {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
  }

  .details__cta-tagline {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    max-width: 283px;
    margin: 0 auto;
  }

  /* Extra small screens */
  @media (max-width: 400px) {
    .details__card-text,
    .details__grid-card .details__card-text,
    .how-it-works__step-title,
    .how-it-works__step-subtitle,
    .details__note,
    .details__features-item {
      font-size: 24px;
    }

    .details__cta .btn--primary,
    .details__cta .btn--link {
      font-size: 24px;
    }
  }

  /* ------------------------------------------------------------------------
     Section: Q&A
     Based on Figma mobile frame 2039:1220
     ------------------------------------------------------------------------ */

  .qa {
    padding: 40px var(--section-padding-x) 60px;
    overflow: visible;
    position: relative;
  }

  /* Mobile decorative shapes for Q&A section */
  .qa__shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
    /* No z-index - let individual shapes control their own stacking */
  }

  /* Purple hexagon - left side near title, relative to center */
  .qa__shape--purple {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 280px;
    left: calc(50% - 275px);
    right: auto;
    transform: rotate(-45deg);
    z-index: 15;
  }

  /* Pink hexagon - right side near questions, relative to center */
  .qa__shape--pink {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 120px;
    left: calc(50% + 100px);
    right: auto;
    transform: rotate(-45deg);
    z-index: 0;
  }

  /* Green hexagon - left side lower, relative to center */
  .qa__shape--green {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 720px;
    left: calc(50% - 250px);
    right: auto;
    transform: rotate(-45deg);
    z-index: 0;
  }

  /* Blue hexagon - right side near bottom, relative to center */
  .qa__shape--blue {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 560px;
    left: calc(50% + 100px);
    right: auto;
    transform: rotate(-45deg);
    z-index: 0;
  }

  .qa__title {
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.1;
    position: relative;
    z-index: 1;
  }

  .qa__card {
    width: 100%;
    max-width: 396px;
    min-height: auto;
    padding: 27px 22px;
    background-color: #ffffff;
    border: 1.5px solid #a6a6a6;
    border-radius: 22px;
    box-shadow: 9px 19px 27.1px 0px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .qa__question {
    align-items: flex-start;  /* Align icon with first row of text */
  }

  .qa__question-icon {
    margin-top: 8px;  /* Fine-tune vertical alignment with first line */
  }

  .qa__question-text {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
  }

  .qa__answer {
    padding: 8px 0 16px 38px;
  }

  .qa__answer-text {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    line-height: 1.4;
  }

  /* Extra small screens */
  @media (max-width: 400px) {
    .qa__question-text {
      font-size: 24px;
    }

    .qa__answer-text {
      font-size: 20px;
    }
  }

  /* ------------------------------------------------------------------------
     Section: Think About
     Based on Figma mobile frame 2039:1220
     ------------------------------------------------------------------------ */

  .think-about {
    padding: 40px var(--section-padding-x) 60px;
    overflow: visible;
    position: relative;
  }

  /* Mobile decorative shapes for Think About section */
  .think-about__shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
  }

  /* Pink hexagon - left side */
  .think-about__shape--pink {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 420px;
    left: calc(50% - 265px);
    right: auto;
    transform: rotate(-45deg);
    z-index: 15;
  }

  /* Yellow hexagon - right side near top */
  .think-about__shape--yellow {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 70px;
    right: calc(50% - 250px);
    left: auto;
    transform: rotate(-45deg);
    z-index: 0;
  }

  .think-about__title {
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.1;
    position: relative;
    z-index: 1;
  }

  .think-about__card {
    width: 100%;
    max-width: 396px;
    min-height: auto;
    padding: 32px 28px;
    background-color: #ffffff;
    border: 1.5px solid #a6a6a6;
    border-radius: 22px;
    box-shadow: 9px 19px 27.1px 0px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .think-about__list {
    padding: 0;
  }

  .think-about__item {
    font-size: 28px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: #5f5f5f;
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: center;
  }

  .think-about__item:last-child {
    margin-bottom: 0;
  }

  .think-about__item--bold {
    font-weight: var(--font-weight-extrabold);
    color: #151515;
  }

  /* Extra small screens */
  @media (max-width: 400px) {
    .think-about__item {
      font-size: 24px;
    }
  }

  /* ------------------------------------------------------------------------
     Section: Pricing
     Based on Figma mobile frame 2039:1220
     ------------------------------------------------------------------------ */

  .pricing {
    padding: 40px var(--section-padding-x) 60px;
    overflow: visible;
    position: relative;
  }

  /* Mobile decorative shapes for Pricing section */
  .pricing__shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
  }

  /* Purple hexagon - left side */
  .pricing__shape--purple {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 120px;
    left: calc(50% - 250px);
    right: auto;
    transform: rotate(-45deg);
    z-index: 0;
  }

  /* Green/lime hexagon - right side top */
  .pricing__shape--green {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 40px;
    right: calc(50% - 270px);
    left: auto;
    transform: rotate(-45deg);
    z-index: 15;
  }

  /* Blue hexagon - right side bottom */
  .pricing__shape--blue {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 600px;
    right: calc(50% - 270px);
    left: auto;
    transform: rotate(-45deg);
    z-index: 15;
  }

  .pricing__title {
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.1;
    position: relative;
    z-index: 20;
  }

  .pricing__card {
    width: 100%;
    max-width: 396px;
    min-height: auto;
    padding: 32px 28px;
    background-color: #ffffff;
    border: 1.5px solid #a6a6a6;
    border-radius: 22px;
    box-shadow: 9px 19px 27.1px 0px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .pricing__price {
    font-size: 40px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: #151515;
    margin-bottom: 20px;
    text-align: center;
  }

  .pricing__price-light {
    font-weight: var(--font-weight-medium);
    color: #5f5f5f;
  }

  .pricing__description {
    font-size: 28px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: #5f5f5f;
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: center;
  }

  .pricing__description:last-of-type {
    margin-bottom: 0;
  }

  .pricing__description--bold {
    font-weight: var(--font-weight-extrabold);
    color: #151515;
  }

  /* Extra small screens */
  @media (max-width: 400px) {
    .pricing__price {
      font-size: 32px;
    }

    .pricing__description {
      font-size: 24px;
    }
  }

  /* ------------------------------------------------------------------------
     Section: Final CTA
     Based on Figma mobile frame 2039:1220
     ------------------------------------------------------------------------ */

  .final-cta {
    padding: 40px var(--section-padding-x) 60px;
    text-align: center;
    overflow: visible;
  }

  .final-cta__title {
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    max-width: 396px;
    margin: 0 auto 24px;
    line-height: 1.1;
    text-align: center;
    position: relative;
    z-index: 20;
  }

  .final-cta__subtitle {
    font-size: 28px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: #5f5f5f;
    max-width: 353px;
    margin: 0 auto 32px;
    line-height: 1.4;
    text-align: center;
  }

  .final-cta__subtitle--bold {
    font-weight: var(--font-weight-extrabold);
    color: #151515;
  }

  .final-cta__buttons {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .final-cta__buttons .btn--primary {
    width: 223px;
    height: 56px;
    font-size: 28px;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
  }

  .final-cta__buttons .btn--link {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
  }

  .final-cta__tagline {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    max-width: 341px;
    margin: 0 auto;
    text-align: center;
  }

  /* Extra small screens */
  @media (max-width: 400px) {
    .final-cta__subtitle {
      font-size: 24px;
    }

    .final-cta__buttons .btn--primary,
    .final-cta__buttons .btn--link {
      font-size: 24px;
    }
  }

  /* ------------------------------------------------------------------------
     Section: Contact Form
     Mobile layout - stacked form elements
     Figma mobile: 440px width, node 2049:36
     ------------------------------------------------------------------------ */

  .contact {
    padding: 30px var(--section-padding-x) 60px;
    overflow: visible;
    position: relative;
  }

  /* Mobile decorative shapes for Contact section - center-relative positioning */
  .contact__shape {
    position: absolute;
    z-index: 0;
  }

  .contact__shape--purple {
    width: calc(143px * (100vw / 440px));
    height: calc(143px * (100vw / 440px));
    top: calc(290px * (100vw / 440px));
    left: calc(50% - (283px * (100vw / 440px))); /* Center-relative: 283px left of center */
  }

  .contact__shape--green {
    width: calc(143px * (100vw / 440px));
    height: calc(143px * (100vw / 440px));
    top: calc(632px * (100vw / 440px));
    left: calc(50% + (97px * (100vw / 440px))); /* Center-relative: 97px right of center */
  }

  .contact__title {
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.1;
    position: relative;
    z-index: 1;
  }

  .contact__form {
    width: 100%;
    max-width: 381px;
    margin: 0 auto;
    padding: 24px 20px;
    border-radius: 22px;
    border: 1.5px solid #000000;
    background-color: #ffffff;
    position: relative;
    z-index: 1;
  }

  .contact__form-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .contact__field {
    flex-direction: column;
  }

  .contact__field:first-child {
    display: contents; /* Flatten into form-grid for reordering */
  }

  /* Flatten structure for reordering */
  .contact__field-content {
    display: contents;
  }

  /* Order elements within form-grid */
  .contact__email-container {
    order: 1;
  }

  .contact__privacy {
    order: 2;
    margin-top: 12px; /* Visually attached to email */
    margin-bottom: 20px;
  }

  .contact__field:last-child {
    order: 3; /* Platform container */
  }

  .contact__error,
  .contact__success {
    order: 4; /* Messages above button */
  }

  .contact__submit-btn {
    order: 5; /* Button at the very bottom */
  }

  .contact__email-container {
    height: 64px;
    padding: 0 22px;
    border-radius: 61px;
    border: 1px solid var(--color-border);
    background-color: #e3e3e3;
    overflow: hidden;
  }

  .contact__label {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    flex-shrink: 0; /* Prevent label from shrinking */
  }

  .contact__input {
    font-size: 28px;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    min-width: 0; /* Allow input to shrink below content width */
    max-width: 100%;
    text-overflow: ellipsis;
  }

  .contact__platform-container {
    margin-top: -16px;
    height: auto;
    min-height: 409px;
    padding: 15px 30px;
    border-radius: 32px;
    border: 1px solid var(--color-border);
    background-color: #e3e3e3;
  }

  .contact__platform-label {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    margin-bottom: 14px;
  }

  .contact__radio-group {
    gap: 19px;
  }

  .contact__radio-label {
    font-size: 28px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: var(--color-text-gray);
  }

  .contact__privacy {
    font-size: 20px;
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    margin-top: -20px; /* Visually attached to email */
    margin-bottom: 20px; /* Space before platform container */
    margin-left: 0;
    text-align: center;
  }

  .contact__error,
  .contact__success {
    font-size: 24px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    margin-left: 0;
    text-align: center;
    margin-top: 20px; /* Space after platform container */
    margin-bottom: 8px; /* Space before button */
    padding: 0 16px;
    width: 100%;
  }

  /* Ensure error/success are visible when displayed */
  .contact__error[style*="display: block"],
  .contact__success[style*="display: block"] {
    display: block !important;
  }

  .contact__error {
    color: #dc3545;
  }

  .contact__success {
    color: var(--color-text-gray);
  }

  .contact__submit-btn {
    display: block;
    width: 100%;
    height: 56px;
    margin-top: 6px;
    font-size: 28px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
  }

  /* Extra small screens */
  @media (max-width: 400px) {
    .contact__label,
    .contact__input,
    .contact__platform-label,
    .contact__radio-label {
      font-size: 22px;
    }

    .contact__privacy {
      font-size: 16px;
    }

    .contact__error,
    .contact__success {
      font-size: 20px;
    }

    .contact__submit-btn {
      font-size: 24px;
      height: 48px;
    }
  }

  /* ------------------------------------------------------------------------
     Section: About (Built by)
     Mobile layout
     Figma mobile: 440px width, node 2049:62
     ------------------------------------------------------------------------ */

  .about {
    padding: 20px var(--section-padding-x) 100px;
    text-align: center;
  }

  .about__title {
    font-size: 58px;
    font-weight: var(--font-weight-black);
    font-variation-settings: 'GRAD' -142, 'XOPQ' 81, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 95;
    margin-bottom: 30px;
    line-height: 1.1;
    position: relative;
    z-index: 1;
    white-space: normal;
  }

  .about__title-light {
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -78, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 72;
  }

  .about__card {
    width: 100%;
    max-width: 381px;
    min-height: 364px;
    padding: 35px 27px;
    background-color: #e3e3e3;
    border: 1.5px solid #a6a6a6;
    border-radius: 22px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .about__text {
    font-size: 28px;
    font-weight: var(--font-weight-medium);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    color: #5f5f5f;
    line-height: 1.4;
    margin-bottom: 24px;
  }

  .about__text:last-of-type {
    margin-bottom: 0;
  }

  .about__text--bold {
    font-weight: var(--font-weight-extrabold);
    color: #151515;
  }

  /* Extra small screens */
  @media (max-width: 400px) {
    .about__title {
      font-size: 48px;
    }

    .about__text {
      font-size: 22px;
    }
  }

  /* ------------------------------------------------------------------------
     Footer
     Mobile layout - stacked columns, centered
     Figma mobile: 440px width, node 2049:91
     ------------------------------------------------------------------------ */

  .footer {
    padding: 54px var(--section-padding-x) 40px;
  }

  .footer__content {
    max-width: 381px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__top {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    width: 100%;
  }

  .footer__column {
    align-items: center;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .footer__column--left {
    min-width: auto;
    width: 100%;
    order: 1;
  }

  .footer__column--center {
    min-width: auto;
    width: 100%;
    order: 3; /* Move Photos/Icons credits after partners section */
    margin-top: 0;
  }

  .footer__logo {
    width: 148px;
    height: 32px;
    margin-bottom: 24px;
  }

  .footer__contact {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    text-align: center;
    color: #ffffff;
  }

  .footer__contact a {
    font-weight: 300; /* Light weight for values, matching desktop */
    color: #ffffff;
    text-decoration: none;
  }

  .footer__credits {
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    text-align: center;
    color: #ffffff;
    margin-bottom: 8px;
  }

  .footer__credits a {
    font-weight: 300; /* Light weight for values, matching desktop */
    color: #ffffff;
    text-decoration: none;
  }

  .footer__partners {
    flex-direction: column;
    gap: 16px;
    padding-top: 0;
    align-items: center;
    order: 2; /* After contact info, before Photos/Icons credits */
  }

  .footer__partner-logo {
    height: 72px;
    width: auto;
  }

  .footer__partner-logo--seeds {
    margin-right: 0;
  }

  .footer__partner-logo--eu {
    width: 64px;
    height: 63px;
  }

  .footer__funding {
    flex-direction: row;
    gap: 19px;
    align-items: center;
    justify-content: center;
  }

  .footer__funding-text {
    font-size: 20px;
    max-width: 167px;
    text-align: left;
  }

  /* Mobile-specific credits section for Photos/Icons */
  .footer__mobile-credits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    text-align: center;
  }

  .footer__disclaimer {
    font-size: 14px;
    font-weight: 300; /* Light weight to match values styling */
    font-variation-settings: 'GRAD' -200, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 87, 'YTAS' 649, 'YTDE' -167, 'YTFI' 717, 'YTLC' 514, 'YTUC' 616, 'wdth' 59;
    line-height: 1.5;
    padding-top: 16px;
    text-align: center;
    max-width: 346px;
    color: #ffffff;
  }

  /* Extra small screens */
  @media (max-width: 400px) {
    .footer__contact,
    .footer__credits {
      font-size: 22px;
    }

    .footer__funding-text {
      font-size: 16px;
    }

    .footer__disclaimer {
      font-size: 12px;
    }
  }

}

/* ==========================================================================
   DESKTOP NARROW — Ukrainian Hero Overflow Fix (1200px - 1555px)
   Switches to flex flow layout so wrapped Ukrainian title pushes content down
   ========================================================================== */

@media (min-width: 1200px) and (max-width: 1555px) {
  :lang(ua) .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    padding-top: 231px; /* Match frame top */
    padding-bottom: 80px;
  }

  :lang(ua) .hero__badge {
    position: static;
    transform: none;
    margin-bottom: 8px;
  }

  :lang(ua) .hero__title {
    position: static;
    transform: none;
    text-align: center;
    white-space: normal;
    margin-bottom: 16px;
  }

  :lang(ua) .hero__title .text-hero--light {
    display: block;
    font-size: clamp(58px, 6.2vw, 96px);
  }

  :lang(ua) .hero__title .text-hero--bold {
    display: block;
    font-size: clamp(58px, 6.2vw, 96px);
  }

  :lang(ua) .hero__description {
    position: static;
    transform: none;
    margin-bottom: 24px;
  }

  :lang(ua) .hero__cta {
    position: static;
    transform: none;
    margin-bottom: 16px;
  }

  :lang(ua) .hero__tagline {
    position: static;
    transform: none;
  }

  /* UA: move shapes down and closer to center to frame the wrapped title */
  :lang(ua) .shape--hexagon-blue {
    top: 200px;
    left: calc(50% - 670px);
  }

  :lang(ua) .shape--circle-yellow {
    top: 250px;
    left: calc(50% + 370px);
  }
}

/* ==========================================================================
   TABLET STYLES (768px - 1199px)
   Intermediate scaled-down desktop
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  /* ------------------------------------------------------------------------
     General / Page Layout
     ------------------------------------------------------------------------ */

  .landing__section {
    padding: var(--section-padding-y) var(--section-padding-x);
  }

  /* ------------------------------------------------------------------------
     Header
     ------------------------------------------------------------------------ */

  .header {
    top: 35px;
    left: var(--section-padding-x);
    right: var(--section-padding-x);
  }

  .header__logo {
    width: 100px;
    height: 22px;
  }

  .header__lang {
    margin-right: 12px;
  }

  .header__lang-link {
    font-size: 16px;
  }

  .header__lang-separator {
    font-size: 16px;
  }

  /* ------------------------------------------------------------------------
     Section: Hero
     Exact desktop layout scaled to 0.6×
     Desktop: 1728px → Tablet: ~1037px center
     Every px value = desktop_value × 0.6
     Every calc offset = desktop_offset × 0.6
     ------------------------------------------------------------------------ */

  .hero {
    height: 670px; /* 1117 × 0.6 */
    min-height: auto;
    padding: 0;
    overflow: hidden;
  }

  /* Frame */
  .hero__frame {
    width: 620px; /* 1034 × 0.6 */
    height: 361px; /* 602 × 0.6 */
    top: 139px; /* 231 × 0.6 */
  }

  /* Badge */
  .hero__badge {
    top: 169px; /* 281 × 0.6 */
  }

  .hero__badge-text {
    font-size: 24px; /* 40 × 0.6 */
  }

  /* Title */
  .hero__title {
    top: 197px; /* 328 × 0.6 */
  }

  .hero__title .text-hero--light,
  .hero__title .text-hero--bold {
    font-size: 58px; /* 96 × 0.6 */
  }

  /* Description card */
  .hero__description {
    top: 281px; /* 469 × 0.6 */
    width: 436px; /* 727 × 0.6 */
    min-height: auto;
    padding: 12px 17px; /* 20/28 × 0.6 */
  }

  .hero__description-text {
    font-size: 17px; /* 28 × 0.6 */
  }

  /* CTA */
  .hero__cta {
    top: 391px; /* 651 × 0.6 */
    gap: 24px; /* 40 × 0.6 */
  }

  .hero__cta .btn--primary {
    width: auto;
    min-width: auto;
    height: 34px; /* 56 × 0.6 */
    font-size: 17px; /* 28 × 0.6 */
    padding: 5px 24px;
    white-space: nowrap;
  }

  .hero__cta .btn--link {
    font-size: 17px; /* 28 × 0.6 */
    white-space: nowrap;
  }

  /* Tagline */
  .hero__tagline {
    top: 439px; /* 732 × 0.6 */
    font-size: 12px; /* 16 × 0.6 */
  }

  /* --- Ukrainian hero override: flex flow layout for wrapped title --- */
  :lang(ua) .hero {
    height: auto;
  }

  :lang(ua) .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding-top: 139px;
    padding-bottom: 48px;
  }

  :lang(ua) .hero__frame {
    height: auto;
    bottom: 48px;
  }

  :lang(ua) .hero__badge {
    position: static;
    transform: none;
    margin-bottom: 4px;
  }

  :lang(ua) .hero__title {
    position: static;
    transform: none;
    text-align: center;
    white-space: normal;
    margin-bottom: 12px;
  }

  :lang(ua) .hero__title .text-hero--light {
    display: block;
    font-size: clamp(32px, 5vw, 58px);
  }

  :lang(ua) .hero__title .text-hero--bold {
    display: block;
    font-size: clamp(40px, 6vw, 58px);
  }

  :lang(ua) .hero__description {
    position: static;
    transform: none;
    margin-bottom: 16px;
  }

  :lang(ua) .hero__cta {
    position: static;
    transform: none;
    margin-bottom: 12px;
  }

  :lang(ua) .hero__tagline {
    position: static;
    transform: none;
  }

  /* UA: move shapes down and closer to center to frame the wrapped title */
  :lang(ua) .shape--hexagon-blue {
    top: 114px;
    left: calc(50% - 310px);
  }

  :lang(ua) .shape--circle-yellow {
    top: 150px;
    left: calc(50% + 210px);
  }

  /* Shapes - same calc(50% ± X) as desktop, offset × 0.6, then × 1.25 larger */
  .shape--hexagon-blue {
    width: 180px;
    height: 180px;
    top: 54px; /* 90 × 0.6 */
    left: calc(50% - 390px); /* 600 × 0.6 */
    right: auto;
    bottom: auto;
    transform: rotate(-20deg); /* desktop -45deg + 15deg clockwise */
  }

  .shape--triangle-blue {
    width: 141px; /* 113 × 1.25 */
    height: 141px;
    top: 326px; /* 544 × 0.6 */
    left: calc(50% + 161px); /* 268 × 0.6 */
    right: auto;
    bottom: auto;
    transform: rotate(15deg); /* desktop 10deg + 15deg clockwise */
  }

  .shape--triangle-green {
    width: 300px; /* 240 × 1.25 */
    height: 300px;
    top: 250px; /* 417 × 0.6 */
    left: calc(50% - 630px); /* 994 × 0.6 */
    right: auto;
    bottom: auto;
    transform: rotate(-20deg); /* desktop -12deg - 15deg counter-clockwise */
  }

  .shape--rectangle-peach {
    width: 300px;
    height: 300px;
    top: 340px;
    left: calc(50% + 330px);
    right: auto;
    bottom: auto;
    display: block;
  }

  .shape--circle-yellow {
    width: 180px;
    height: 180px;
    top: 90px;
    left: calc(50% + 290px);
    right: auto;
    bottom: auto;
  }

  .shape--circle-pink {
    width: 110px;
    height: 110px;
    top: 330px;
    left: calc(50% - 280px); /* 420 × 0.6 */
    right: auto;
    bottom: auto;
  }

  .shape--circle-purple {
    width: 160px;
    height: 160px;
    top: 360px; /* 640 × 0.6 */
    left: calc(50% - 270px); /* 345 × 0.6 */
    right: auto;
    bottom: auto;
  }

  /* ------------------------------------------------------------------------
     Section: Problem
     Exact desktop layout scaled to 0.6×
     ------------------------------------------------------------------------ */

  .problem {
    min-height: auto;
    padding: 35px var(--section-padding-x) 140px; /* 58 × 0.6 top */
  }

  .problem__shape {
    width: 196px; /* 327 × 0.6 */
    height: 196px;
    top: 43px; /* 72 × 0.6 */
    left: -35px; /* -58 × 0.6 */
  }

  .problem__header {
    max-width: 768px; /* 1280 × 0.6 */
    margin-bottom: 36px; /* 60 × 0.6 */
    gap: 24px; /* 40 × 0.6 */
  }

  .problem__title {
    font-size: 38px; /* 64 × 0.6 */
    max-width: 399px; /* 665 × 0.6 */
  }

  .problem__question {
    font-size: 24px; /* 40 × 0.6 */
    max-width: 302px; /* 504 × 0.6 */
    min-width: auto;
  }

  /* Cards - side by side like desktop */
  .problem__cards {
    flex-direction: row;
    align-items: center; /* Vertically center the highlight card */
    gap: 14px; /* 24 × 0.6 */
    margin-bottom: 24px; /* 40 × 0.6 */
    max-width: 768px; /* 1280 × 0.6 */
  }

  .problem__card {
    max-width: none;
    flex: 2.4; /* ratio 866/364 ≈ 2.4 */
    min-height: 120px; /* 200 × 0.6 */
    padding: 18px 24px;
  }

  .problem__card-text {
    font-size: 17px; /* 28 × 0.6 */
  }

  .problem__highlight-card {
    max-width: none;
    flex: 1;
    min-height: 99px; /* 165 × 0.6 */
    padding: 20px 24px;
  }

  .problem__highlight-text {
    font-size: 17px; /* 28 × 0.6 */
  }

  .problem__stat {
    max-width: 715px; /* 1191 × 0.6 */
    font-size: 24px; /* 40 × 0.6 */
  }

  /* ------------------------------------------------------------------------
     Section: Solution (Stop screen)
     Desktop layout scaled to 0.6×
     ------------------------------------------------------------------------ */

  .solution {
    height: 420px; /* Increased for larger content */
    min-height: auto;
    padding: 0;
  }

  /* Title */
  .solution__title {
    top: 50px;
    width: 620px;
    font-size: 42px; /* Larger */
  }

  /* Card */
  .solution__card {
    top: 175px;
    width: 720px;
    height: 100px;
    min-height: auto;
    padding: 16px 28px;
  }

  .solution__card-text {
    font-size: 21px; /* Larger */
  }

  /* Subtitle */
  .solution__subtitle {
    top: 310px;
    font-size: 28px; /* Larger */
  }

  /* Shapes - scaled to 0.6× */
  .shape--hexagon-pink-dark {
    width: 196px; /* 327 × 0.6 */
    height: 196px;
    top: 37px; /* 62 × 0.6 */
    left: calc(50% - 500px); /* 1000 × 0.6 */
    right: auto;
  }

  .shape--triangle-blue-dark {
    width: 250px; /* 416 × 0.6 */
    height: 250px;
    top: 32px; /* 54 × 0.6 */
    left: calc(50% + 300px); /* 680 × 0.6 */
    right: auto;
  }

  .shape--circle-magenta {
    width: 62px; /* 104 × 0.6 */
    height: 62px;
    top: 194px; /* 324 × 0.6 */
    left: calc(50% + 400px); /* 820 × 0.6 - closer to right border */
    right: auto;
  }

  /* ------------------------------------------------------------------------
     Section: Branding
     Desktop layout scaled (adjusted for readability)
     ------------------------------------------------------------------------ */

  .branding {
    height: 720px; /* Increased for more bottom spacing below small star */
    min-height: auto;
  }

  .branding__star {
    top: 150px;
    width: 42px;
    height: 42px;
  }

  .branding__title {
    top: 200px;
    font-size: 85px;
  }

  .branding__subtitle {
    top: 300px;
    font-size: 28px;
  }

  .branding__star-small {
    top: 360px;
    width: 24px;
    height: 24px;
  }

  /* Branding letter animation - tablet settled state */
  .branding__letter--settled {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 400;
    font-variation-settings: 'wdth' 59;
  }

  /* ------------------------------------------------------------------------
     Section: What Is It
     ------------------------------------------------------------------------ */

  /* TODO: What Is It tablet styles - handled by 768-1339px media query below */

  /* ------------------------------------------------------------------------
     Section: Details (Best Fit, What You Get, How It Works, Features)
     Desktop layout scaled to ~0.6× for tablet
     Text sizes bumped to ~0.75× for readability (per implementation guide)
     ------------------------------------------------------------------------ */

  .details {
    padding: 40px 74px 60px; /* 66/124/100 × 0.6 */
  }

  /* Decorative shapes - scaled and repositioned for visibility at 768px */
  .details__shape--polygon-green {
    width: 178px; /* 296 × 0.6 */
    height: 160px;
    top: 400px;
    left: calc(50% - 340px); /* Adjusted closer for visibility */
  }

  .details__shape--polygon-peach {
    width: 200px; /* Reduced for tablet */
    height: 200px;
    top: 174px;
    left: calc(50% + 200px); /* Adjusted for visibility */
  }

  .details__shape--ellipse-pink {
    width: 100px; /* 167 × 0.6 */
    height: 100px;
    top: 670px;
    left: calc(50% - 300px); /* Adjusted closer */
  }

  .details__shape--ellipse-blue {
    width: 81px; /* 135 × 0.6 */
    height: 81px;
    top: 558px;
    left: calc(50% + 200px); /* Adjusted for visibility */
  }

  .details__shape--triangle-blue {
    width: 180px; /* Reduced for tablet */
    height: 156px;
    top: 1050px;
    left: calc(50% + 180px); /* Adjusted for visibility */
  }

  .details__section {
    margin-bottom: 30px; /* 49 × 0.6 */
    max-width: 560px; /* Slightly larger for readability */
  }

  .details__title {
    font-size: 42px; /* Bumped from 38px for readability */
    margin-bottom: 25px; /* 42 × 0.6 */
  }

  /* Best Fit Card */
  .details__card {
    padding: 24px 32px; /* Slightly larger padding */
    min-height: 160px;
  }

  .details__card-text {
    font-size: 20px; /* Bumped from 17px for readability */
  }

  /* What You Get - 2-column grid maintained */
  .details__grid {
    gap: 16px 20px; /* Slightly larger gaps */
  }

  .details__grid-card {
    padding: 18px 16px;
    height: 100px; /* Slightly taller for larger text */
  }

  .details__grid-card .details__card-text {
    font-size: 20px; /* Bumped from 17px for readability */
  }

  /* How It Works */
  .how-it-works__progress {
    left: -12px;
    width: 32px; /* Slightly larger */
    height: 85px;
  }

  .how-it-works__progress-track {
    width: 32px;
    height: 85px;
    padding: 12px 0;
    gap: 5px;
  }

  .how-it-works__progress-indicator {
    width: 6px;
    height: 6px;
  }

  .how-it-works__progress-indicator--active {
    height: 28px;
  }

  .how-it-works__slides {
    height: 160px;
  }

  .how-it-works__card {
    height: 160px; /* Slightly taller */
    padding: 24px 32px;
  }

  .how-it-works__content {
    left: 42px;
    top: 32px;
    width: 220px;
  }

  /* Step 4 centered content for tablet */
  .how-it-works__content--centered {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    text-align: center;
  }

  .how-it-works__card--step4 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .how-it-works__step-title,
  .how-it-works__step-subtitle {
    font-size: 20px; /* Bumped from 17px for readability */
  }

  .how-it-works__mockup {
    width: 180px; /* Slightly larger */
    height: 144px;
    right: 16px;
    border-radius: 16px 16px 0 0;
  }

  .how-it-works__mockup--step2,
  .how-it-works__mockup--step3 {
    height: 160px;
  }

  .how-it-works__mockup--step3 .how-it-works__mockup-image {
    width: 180px;
    height: auto;
    max-height: none;
    left: auto;
    right: 0;
    top: -10px;
    bottom: auto;
    transform: none;
  }

  /* Hide mobile navigation on tablet */
  .how-it-works__nav--mobile {
    display: none;
  }

  /* Step 4 shapes for tablet */
  .how-it-works__shape--hexagon {
    width: 130px;
    height: 130px;
    left: 36px;
    bottom: -70px;
    transform: rotate(15deg);
  }

  .how-it-works__shape--star {
    width: 76px;
    height: 78px;
    top: 15px;
    left: auto;
    right: 30px;
  }

  .how-it-works__shape--circle {
    width: 52px;
    height: 52px;
    top: 54px;
    left: auto;
    right: 6px;
  }

  .details__note {
    font-size: 20px; /* Bumped for readability */
    margin-top: 14px;
    margin-left: 18px;
  }

  /* Features List */
  .details__features {
    padding: 24px 32px;
    min-height: 260px;
  }

  .details__features-item {
    font-size: 20px; /* Bumped for readability */
    line-height: 1.8;
  }

  /* CTA in Details */
  .details__cta {
    margin-top: 30px;
    padding: 0 0 24px 0;
    max-width: 560px;
  }

  .details__cta-buttons {
    gap: 20px;
    margin-bottom: 12px;
  }

  .details__cta .btn--primary {
    height: 38px;
    font-size: 20px; /* Bumped for readability */
    padding: 6px 28px;
  }

  .details__cta .btn--link {
    font-size: 20px; /* Bumped for readability */
  }

  .details__cta-tagline {
    font-size: 16px; /* Bumped for readability */
  }

  /* ------------------------------------------------------------------------
     Section: Q&A
     Desktop layout scaled to ~0.6× for tablet
     Text sizes bumped to ~0.75× for readability
     ------------------------------------------------------------------------ */

  .qa {
    padding: 0 74px 40px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children horizontally */
  }

  /* Decorative shapes - scaled and repositioned for visibility at 768px */
  .qa__shape--purple {
    width: 170px;
    height: 170px;
    top: 126px;
    left: calc(50% - 340px); /* Adjusted closer for visibility */
  }

  .qa__shape--pink {
    width: 170px;
    height: 170px;
    top: 66px;
    left: calc(50% + 200px); /* Adjusted for visibility */
  }

  .qa__shape--green {
    width: 170px;
    height: 170px;
    top: 288px;
    left: calc(50% - 320px); /* Adjusted closer */
  }

  .qa__shape--blue {
    width: 170px;
    height: 170px;
    top: 198px;
    left: calc(50% + 180px); /* Adjusted for visibility */
  }

  .qa__title {
    font-size: clamp(42px, 5.5vw, 64px); /* Scale to fit one line */
    margin-bottom: 28px;
    white-space: nowrap; /* Keep title on one line */
    width: 100%; /* Ensure full width for proper centering */
    text-align: center;
  }

  .qa__card {
    width: 560px;
    max-width: 100%;
    padding: 28px 32px;
  }

  .qa__question {
    gap: 12px;
    padding: 3px 0;
  }

  .qa__question-icon {
    width: 16px;
    height: 16px;
  }

  .qa__question-icon::before {
    width: 10px;
    height: 10px;
    border-width: 2px;
    top: 0;
    left: 3px;
  }

  .qa__item:not(.is-open) .qa__question-icon::before {
    width: 9px;
    height: 9px;
    border-width: 2px;
    top: 3px;
    left: 3px;
  }

  .qa__question-text {
    font-size: 20px; /* Bumped from 17px for readability */
  }

  .qa__answer {
    padding: 6px 50px 12px 28px;
  }

  .qa__answer-text {
    font-size: 20px; /* Bumped for readability */
  }

  /* ------------------------------------------------------------------------
     Section: Think About
     Desktop layout scaled to ~0.6× for tablet
     Text sizes bumped to ~0.75× for readability
     ------------------------------------------------------------------------ */

  .think-about {
    padding: 0 74px 40px;
  }

  /* Decorative shapes - adjusted for visibility at 768px */
  .think-about__shape--pink {
    width: 170px;
    height: 170px;
    top: 180px;
    left: calc(50% - 320px); /* Adjusted closer */
  }

  .think-about__shape--yellow {
    width: 170px;
    height: 170px;
    top: 60px;
    left: calc(50% + 180px); /* Adjusted for visibility */
  }

  .think-about__title {
    font-size: 64px; /* Bumped from 58px for readability */
    margin-bottom: 28px;
  }

  .think-about__card {
    max-width: 560px;
    padding: 28px 32px;
    min-height: 280px;
  }

  .think-about__item {
    font-size: 20px; /* Bumped from 17px for readability */
    margin-bottom: 12px;
  }

  /* ------------------------------------------------------------------------
     Section: Pricing
     Desktop layout scaled to ~0.6× for tablet
     Text sizes bumped to ~0.75× for readability
     ------------------------------------------------------------------------ */

  .pricing {
    padding: 0 74px 40px;
  }

  /* Decorative shapes - adjusted for visibility at 768px */
  .pricing__shape--purple {
    width: 170px;
    height: 170px;
    top: 30px;
    left: calc(50% - 300px); /* Adjusted closer */
  }

  .pricing__shape--green {
    width: 170px;
    height: 170px;
    top: -12px;
    left: calc(50% + 120px); /* Adjusted for visibility */
  }

  .pricing__shape--blue {
    width: 170px;
    height: 170px;
    top: 198px;
    left: calc(50% + 180px); /* Adjusted for visibility */
  }

  .pricing__title {
    font-size: 42px; /* Bumped from 38px for readability */
    margin-bottom: 8px;
    max-width: 560px;
  }

  .pricing__card {
    max-width: 560px;
    padding: 28px 32px;
    min-height: 220px;
  }

  .pricing__price {
    font-size: 28px; /* Bumped from 24px for readability */
    margin-bottom: 16px;
  }

  .pricing__description {
    font-size: 20px; /* Bumped from 17px for readability */
    margin-bottom: 16px;
  }

  /* ------------------------------------------------------------------------
     Section: Final CTA
     Desktop layout scaled to ~0.6× for tablet
     Text sizes bumped to ~0.75× for readability
     ------------------------------------------------------------------------ */

  .final-cta {
    padding: 35px 74px 70px;
  }

  .final-cta__title {
    font-size: 42px; /* Bumped from 38px for readability */
    max-width: 600px;
    margin: 0 auto 18px;
  }

  .final-cta__subtitle {
    font-size: 20px; /* Bumped from 17px for readability */
    max-width: 450px;
    margin: 0 auto 28px;
  }

  .final-cta__buttons {
    gap: 20px;
    margin-bottom: 12px;
  }

  .final-cta__buttons .btn--primary {
    height: 38px;
    font-size: 20px; /* Bumped for readability */
    padding: 6px 28px;
  }

  .final-cta__buttons .btn--link {
    font-size: 20px; /* Bumped for readability */
  }

  .final-cta__tagline {
    font-size: 16px; /* Bumped for readability */
  }

  /* ------------------------------------------------------------------------
     Section: Contact Form
     Desktop layout scaled to ~0.6× for tablet
     Text sizes bumped to ~0.75× for readability
     ------------------------------------------------------------------------ */

  .contact {
    padding: 20px 74px 50px;
  }

  .contact__shape {
    width: 100px; /* Slightly larger */
    height: 100px;
  }

  .contact__shape--purple {
    top: 138px;
    left: calc(50% - 320px); /* Adjusted closer */
  }

  .contact__shape--green {
    top: 300px;
    left: calc(50% + 240px); /* Adjusted for visibility */
  }

  .contact__title {
    font-size: 64px; /* Bumped from 58px */
    margin-bottom: 20px;
  }

  .contact__form {
    max-width: 640px; /* Slightly larger */
    padding: 35px 42px;
  }

  .contact__form-grid {
    grid-template-columns: 270px 255px; /* Slightly larger */
    gap: 30px;
  }

  .contact__field:first-child {
    min-height: unset; /* Reset desktop min-height: 409px */
    /* No fixed height — CSS grid stretch equalizes both columns */
  }

  .contact__input-container,
  .contact__email-container {
    height: 44px;
    padding: 0 16px;
    border-radius: 40px;
    gap: 6px;
  }

  .contact__input-container + .contact__email-container,
  .contact__email-container + .contact__input-container,
  .contact__input-container + .contact__input-container {
    margin-top: 8px;
  }

  .contact__label {
    font-size: 20px; /* Bumped for readability */
  }

  .contact__input {
    font-size: 20px; /* Bumped for readability */
  }

  .contact__platform-container {
    height: auto; /* Let content determine height; grid stretch aligns both columns */
    padding: 12px 24px;
    border-radius: 22px;
  }

  .contact__platform-label {
    font-size: 20px; /* Bumped for readability */
    margin-bottom: 10px;
  }

  .contact__radio-group {
    gap: 3px;
  }

  .contact__radio-label {
    font-size: 20px; /* Bumped for readability */
  }

  .contact__privacy {
    font-size: 14px; /* Bumped for readability */
    margin-top: 16px;
    margin-left: 16px;
  }

  .contact__error,
  .contact__success {
    font-size: 14px; /* Bumped for readability */
    margin-top: 12px;
    margin-left: 16px;
  }

  .contact__submit-btn {
    height: 38px;
    font-size: 20px; /* Bumped for readability */
    padding: 6px 28px;
  }

  /* ------------------------------------------------------------------------
     Section: About
     Desktop layout scaled to ~0.6× for tablet
     Text sizes bumped to ~0.75× for readability
     ------------------------------------------------------------------------ */

  .about {
    padding: 0 74px 80px;
  }

  .about__title {
    font-size: 64px; /* Bumped from 58px */
    margin-bottom: 32px;
  }

  .about__card {
    max-width: 560px;
    min-height: 160px;
    padding: 28px 32px;
  }

  .about__text {
    font-size: 20px; /* Bumped from 17px for readability */
  }

  /* ------------------------------------------------------------------------
     Footer
     Desktop layout scaled to ~0.6× for tablet
     Text sizes bumped to ~0.75× for readability
     ------------------------------------------------------------------------ */

  .footer {
    padding: 55px 74px 35px;
  }

  .footer__content {
    max-width: 920px;
  }

  .footer__top {
    margin-bottom: 28px;
  }

  .footer__column--left {
    min-width: 200px;
  }

  .footer__column--center {
    min-width: 160px;
    padding-top: 4px;
    gap: 18px; /* Align Icons with Contact row */
  }

  .footer__logo {
    width: 100px; /* Slightly larger */
    height: 22px;
    margin-bottom: 20px;
  }

  .footer__contact {
    font-size: 20px; /* Bumped for readability */
  }

  .footer__credits {
    font-size: 20px; /* Bumped for readability */
  }

  .footer__partners {
    gap: 16px;
    padding-top: 10px;
  }

  .footer__partner-logo {
    height: 50px; /* Slightly larger */
  }

  .footer__partner-logo--seeds {
    margin-right: 28px;
  }

  .footer__partner-logo--eu {
    width: 44px;
    height: 44px;
  }

  .footer__funding {
    gap: 14px;
  }

  .footer__funding-text {
    font-size: 14px; /* Bumped for readability */
    max-width: 140px;
  }

  .footer__disclaimer {
    font-size: 13px; /* Bumped for readability */
    padding-top: 22px;
    max-width: 800px;
  }

}

/* ==========================================================================
   PROPORTIONAL SCALING (768px - 1339px)
   Scale FULL 1728px desktop layout proportionally
   scale = 100vw / 1728px
   At 1339px: scale ≈ 0.775, At 768px: scale ≈ 0.444
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1339px) {

  /* What Is It Section - proportionally scaled full desktop */
  .what-is-it {
    min-height: calc(800px * (100vw / 1728px));
    height: auto;
    padding-bottom: calc(60px * (100vw / 1728px));
  }

  .what-is-it__header {
    padding-top: calc(175px * (100vw / 1728px));
    margin-bottom: calc(48px * (100vw / 1728px));
  }

  .what-is-it__badge {
    font-size: calc(40px * (100vw / 1728px));
  }

  .what-is-it__title {
    font-size: calc(96px * (100vw / 1728px));
  }

  .what-is-it__cards {
    gap: calc(24px * (100vw / 1728px));
  }

  .what-is-it__card {
    padding: calc(40px * (100vw / 1728px)) calc(48px * (100vw / 1728px));
    min-height: calc(203px * (100vw / 1728px));
    height: auto;
  }

  .what-is-it__card--light,
  .what-is-it__card--dark {
    /* Scale cards from desktop 560px */
    width: calc(560px * (100vw / 1728px));
  }

  .what-is-it__card-text {
    font-size: calc(28px * (100vw / 1728px));
  }

  .what-is-it__mockup {
    /* Scale position and size - moved more right and down */
    right: calc(40px * (100vw / 1728px)); /* Moved right (was 115px) */
    top: calc(280px * (100vw / 1728px)); /* Moved down (was 180px) */
    width: calc(316px * (100vw / 1728px));
    height: calc(638px * (100vw / 1728px));
    border-radius: calc(40px * (100vw / 1728px));
  }

  .what-is-it__shape {
    width: calc(167px * (100vw / 1728px));
    height: calc(167px * (100vw / 1728px));
    top: calc(230px * (100vw / 1728px)); /* Moved down with phone */
    right: calc(0px * (100vw / 1728px)); /* Moved right with phone */
  }

  /* Details Section - proportionally scaled */
  .details {
    padding: calc(66px * (100vw / 1728px)) calc(124px * (100vw / 1728px)) calc(100px * (100vw / 1728px));
  }

  .details__section {
    margin-bottom: calc(49px * (100vw / 1728px));
    max-width: calc(876px * (100vw / 1728px));
  }

  .details__title {
    font-size: calc(64px * (100vw / 1728px));
    margin-bottom: calc(42px * (100vw / 1728px));
  }

  .details__card {
    padding: calc(35px * (100vw / 1728px)) calc(48px * (100vw / 1728px));
    min-height: calc(246px * (100vw / 1728px));
  }

  .details__card-text {
    font-size: calc(28px * (100vw / 1728px));
  }

  .details__grid {
    gap: calc(24px * (100vw / 1728px)) calc(31px * (100vw / 1728px));
  }

  .details__grid-card {
    padding: calc(28px * (100vw / 1728px)) calc(24px * (100vw / 1728px));
    height: calc(155px * (100vw / 1728px));
  }

  .details__grid-card .details__card-text {
    font-size: calc(28px * (100vw / 1728px));
  }

  .how-it-works__slides {
    height: calc(246px * (100vw / 1728px));
  }

  .how-it-works__card {
    height: calc(246px * (100vw / 1728px));
    padding: calc(35px * (100vw / 1728px)) calc(48px * (100vw / 1728px));
  }

  .how-it-works__content {
    left: calc(65px * (100vw / 1728px));
    top: calc(49px * (100vw / 1728px));
    width: calc(345px * (100vw / 1728px));
  }

  /* Step 4 centered content */
  .how-it-works__content--centered {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    text-align: center;
  }

  .how-it-works__card--step4 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .how-it-works__step-title,
  .how-it-works__step-subtitle {
    font-size: calc(28px * (100vw / 1728px));
  }

  .how-it-works__mockup {
    width: calc(276px * (100vw / 1728px));
    height: calc(221px * (100vw / 1728px));
    right: calc(21px * (100vw / 1728px));
    border-radius: calc(24px * (100vw / 1728px)) calc(24px * (100vw / 1728px)) 0 0;
  }

  .how-it-works__mockup--step2 {
    height: calc(246px * (100vw / 1728px));
  }

  .how-it-works__mockup--step3 {
    height: calc(232px * (100vw / 1728px));
  }

  .how-it-works__mockup--step3 .how-it-works__mockup-image {
    width: calc(276px * (100vw / 1728px));
    height: auto;
    max-height: none;
    left: auto;
    right: 0;
    top: -10px;
    bottom: auto;
    transform: none;
  }

  .how-it-works__progress {
    left: calc(-20px * (100vw / 1728px));
    width: calc(47px * (100vw / 1728px));
    height: calc(125px * (100vw / 1728px));
  }

  .how-it-works__progress-track {
    width: calc(47px * (100vw / 1728px));
    height: calc(125px * (100vw / 1728px));
    padding: calc(16px * (100vw / 1728px)) 0;
    gap: calc(6px * (100vw / 1728px));
    border-radius: calc(65px * (100vw / 1728px));
  }

  .how-it-works__progress-indicator {
    width: calc(9px * (100vw / 1728px));
    height: calc(9px * (100vw / 1728px));
  }

  .how-it-works__progress-indicator--active {
    height: calc(42px * (100vw / 1728px));
  }

  /* Step 4 shapes for proportional scaling */
  .how-it-works__shape--hexagon {
    width: calc(202px * (100vw / 1728px));
    height: calc(202px * (100vw / 1728px));
    left: calc(56px * (100vw / 1728px));
    bottom: calc(-80px * (100vw / 1728px));
    transform: rotate(15deg);
  }

  .how-it-works__shape--star {
    width: calc(118px * (100vw / 1728px));
    height: calc(122px * (100vw / 1728px));
    top: calc(23px * (100vw / 1728px));
    left: calc(666px * (100vw / 1728px));
    right: auto;
  }

  .how-it-works__shape--circle {
    width: calc(81px * (100vw / 1728px));
    height: calc(81px * (100vw / 1728px));
    top: calc(84px * (100vw / 1728px));
    left: calc(744px * (100vw / 1728px));
    right: auto;
  }

  .details__note {
    font-size: calc(28px * (100vw / 1728px));
    margin-top: calc(21px * (100vw / 1728px));
    margin-left: calc(28px * (100vw / 1728px));
  }

  .details__features {
    padding: calc(35px * (100vw / 1728px)) calc(48px * (100vw / 1728px));
    min-height: calc(410px * (100vw / 1728px));
  }

  .details__features-item {
    font-size: calc(28px * (100vw / 1728px));
  }

  .details__cta {
    margin-top: calc(49px * (100vw / 1728px));
    max-width: calc(876px * (100vw / 1728px));
  }

  .details__cta-buttons {
    gap: calc(32px * (100vw / 1728px));
    margin-bottom: calc(16px * (100vw / 1728px));
  }

  .details__cta .btn--primary {
    height: calc(56px * (100vw / 1728px));
    font-size: calc(28px * (100vw / 1728px));
    padding: calc(8px * (100vw / 1728px)) calc(40px * (100vw / 1728px));
  }

  .details__cta .btn--link {
    font-size: calc(28px * (100vw / 1728px));
  }

  .details__cta-tagline {
    font-size: calc(26px * (100vw / 1728px)); /* Increased for readability */
  }

  /* Decorative shapes for Details - positioned relative to center */
  .details__shape--polygon-green {
    width: calc(296px * (100vw / 1728px));
    height: calc(267px * (100vw / 1728px));
    top: calc(670px * (100vw / 1728px));
    left: calc(50% - (630px * (100vw / 1728px))); /* Center - offset scaled */
  }

  .details__shape--polygon-peach {
    width: calc(410px * (100vw / 1728px));
    height: calc(410px * (100vw / 1728px));
    top: calc(290px * (100vw / 1728px));
    left: calc(50% + (270px * (100vw / 1728px))); /* Center + offset scaled */
  }

  .details__shape--ellipse-pink {
    width: calc(167px * (100vw / 1728px));
    height: calc(167px * (100vw / 1728px));
    top: calc(1134px * (100vw / 1728px));
    left: calc(50% - (530px * (100vw / 1728px))); /* Center - offset scaled */
  }

  .details__shape--ellipse-blue {
    width: calc(135px * (100vw / 1728px));
    height: calc(135px * (100vw / 1728px));
    top: calc(930px * (100vw / 1728px));
    left: calc(50% + (370px * (100vw / 1728px))); /* Center + offset scaled */
  }

  .details__shape--triangle-blue {
    width: calc(353px * (100vw / 1728px));
    height: calc(307px * (100vw / 1728px));
    top: calc(1750px * (100vw / 1728px));
    left: calc(50% + (350px * (100vw / 1728px))); /* Center + offset scaled */
  }

  /* Q&A Section - proportionally scaled */
  .qa {
    padding: 0 calc(124px * (100vw / 1728px)) calc(60px * (100vw / 1728px));
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children horizontally */
  }

  .qa__title {
    font-size: calc(96px * (100vw / 1728px));
    margin-bottom: calc(40px * (100vw / 1728px));
    white-space: nowrap; /* Keep title on one line */
    width: 100%; /* Ensure full width for proper centering */
    text-align: center;
  }

  .qa__card {
    width: calc(876px * (100vw / 1728px));
    max-width: 100%;
    padding: calc(40px * (100vw / 1728px)) calc(48px * (100vw / 1728px));
  }

  .qa__question {
    gap: calc(16px * (100vw / 1728px));
    padding: calc(4px * (100vw / 1728px)) 0;
  }

  .qa__question-icon {
    width: calc(22px * (100vw / 1728px));
    height: calc(22px * (100vw / 1728px));
  }

  .qa__question-text {
    font-size: calc(28px * (100vw / 1728px));
  }

  .qa__answer {
    padding: calc(8px * (100vw / 1728px)) calc(80px * (100vw / 1728px)) calc(16px * (100vw / 1728px)) calc(38px * (100vw / 1728px));
  }

  .qa__answer-text {
    font-size: calc(28px * (100vw / 1728px));
  }

  /* Q&A shapes - scaled */
  /* Q&A shapes - positioned relative to center */
  .qa__shape--purple,
  .qa__shape--pink,
  .qa__shape--green,
  .qa__shape--blue {
    width: calc(283px * (100vw / 1728px));
    height: calc(283px * (100vw / 1728px));
  }

  .qa__shape--purple {
    top: calc(210px * (100vw / 1728px));
    left: calc(50% - (640px * (100vw / 1728px))); /* Center-relative */
  }

  .qa__shape--pink {
    top: calc(110px * (100vw / 1728px));
    left: calc(50% + (290px * (100vw / 1728px))); /* Center-relative */
  }

  .qa__shape--green {
    top: calc(480px * (100vw / 1728px));
    left: calc(50% - (580px * (100vw / 1728px))); /* Center-relative */
  }

  .qa__shape--blue {
    top: calc(330px * (100vw / 1728px));
    left: calc(50% + (260px * (100vw / 1728px))); /* Center-relative */
  }

  /* Think About Section - proportionally scaled */
  .think-about {
    padding: 0 calc(124px * (100vw / 1728px)) calc(60px * (100vw / 1728px));
  }

  .think-about__title {
    font-size: calc(96px * (100vw / 1728px));
    margin-bottom: calc(40px * (100vw / 1728px));
  }

  .think-about__card {
    max-width: calc(876px * (100vw / 1728px));
    padding: calc(35px * (100vw / 1728px)) calc(48px * (100vw / 1728px));
    min-height: calc(435px * (100vw / 1728px));
  }

  .think-about__item {
    font-size: calc(28px * (100vw / 1728px));
    margin-bottom: calc(16px * (100vw / 1728px));
  }

  /* Think About shapes - scaled with center-relative positioning */
  .think-about__shape--pink,
  .think-about__shape--yellow {
    width: calc(283px * (100vw / 1728px));
    height: calc(283px * (100vw / 1728px));
  }

  .think-about__shape--pink {
    top: calc(300px * (100vw / 1728px));
    left: calc(50% - (570px * (100vw / 1728px))); /* Center-relative: 570px left of center */
  }

  .think-about__shape--yellow {
    top: calc(100px * (100vw / 1728px));
    left: calc(50% + (250px * (100vw / 1728px))); /* Center-relative: 250px right of center */
  }

  /* Pricing Section - proportionally scaled */
  .pricing {
    padding: 0 calc(124px * (100vw / 1728px)) calc(60px * (100vw / 1728px));
  }

  .pricing__title {
    font-size: calc(64px * (100vw / 1728px));
    margin-bottom: calc(10px * (100vw / 1728px));
    max-width: calc(876px * (100vw / 1728px));
  }

  .pricing__card {
    max-width: calc(876px * (100vw / 1728px));
    padding: calc(35px * (100vw / 1728px)) calc(48px * (100vw / 1728px));
    min-height: calc(341px * (100vw / 1728px));
  }

  .pricing__price {
    font-size: calc(40px * (100vw / 1728px));
    margin-bottom: calc(24px * (100vw / 1728px));
  }

  .pricing__description {
    font-size: calc(28px * (100vw / 1728px));
    margin-bottom: calc(24px * (100vw / 1728px));
  }

  /* Pricing shapes - scaled with center-relative positioning */
  .pricing__shape--purple,
  .pricing__shape--green,
  .pricing__shape--blue {
    width: calc(283px * (100vw / 1728px));
    height: calc(283px * (100vw / 1728px));
  }

  .pricing__shape--purple {
    top: calc(50px * (100vw / 1728px));
    left: calc(50% - (530px * (100vw / 1728px))); /* Center-relative: 530px left of center */
  }

  .pricing__shape--green {
    top: calc(-20px * (100vw / 1728px));
    left: calc(50% + (150px * (100vw / 1728px))); /* Center-relative: 150px right of center */
  }

  .pricing__shape--blue {
    top: calc(330px * (100vw / 1728px));
    left: calc(50% + (260px * (100vw / 1728px))); /* Center-relative: 260px right of center */
  }

  /* Final CTA Section - proportionally scaled */
  .final-cta {
    padding: calc(50px * (100vw / 1728px)) calc(124px * (100vw / 1728px)) calc(100px * (100vw / 1728px));
  }

  .final-cta__title {
    font-size: calc(64px * (100vw / 1728px));
    max-width: calc(950px * (100vw / 1728px));
    margin: 0 auto calc(24px * (100vw / 1728px));
  }

  .final-cta__subtitle {
    font-size: calc(28px * (100vw / 1728px));
    max-width: calc(700px * (100vw / 1728px));
    margin: 0 auto calc(40px * (100vw / 1728px));
  }

  .final-cta__buttons {
    gap: calc(32px * (100vw / 1728px));
    margin-bottom: calc(16px * (100vw / 1728px));
  }

  .final-cta__buttons .btn--primary {
    height: calc(56px * (100vw / 1728px));
    font-size: calc(28px * (100vw / 1728px));
    padding: calc(8px * (100vw / 1728px)) calc(40px * (100vw / 1728px));
  }

  .final-cta__buttons .btn--link {
    font-size: calc(28px * (100vw / 1728px));
  }

  .final-cta__tagline {
    font-size: calc(26px * (100vw / 1728px)); /* Increased for readability */
  }

  /* Contact Section - proportionally scaled */
  .contact {
    padding: 0 calc(124px * (100vw / 1728px)) calc(60px * (100vw / 1728px));
  }

  .contact__title {
    font-size: calc(96px * (100vw / 1728px));
    margin-bottom: calc(30px * (100vw / 1728px));
  }

  .contact__form {
    max-width: calc(995px * (100vw / 1728px));
    padding: calc(50px * (100vw / 1728px)) calc(65px * (100vw / 1728px));
    border-radius: calc(22px * (100vw / 1728px));
  }

  .contact__form-grid {
    grid-template-columns: calc(419px * (100vw / 1728px)) calc(393px * (100vw / 1728px));
    gap: calc(45px * (100vw / 1728px));
  }

  .contact__field:first-child {
    min-height: unset; /* Reset desktop min-height: 409px */
    /* No fixed height — grid stretch equalizes both columns */
  }

  .contact__input-container,
  .contact__email-container {
    height: calc(64px * (100vw / 1728px));
    border-radius: calc(61px * (100vw / 1728px));
    padding: 0 calc(22px * (100vw / 1728px));
  }

  .contact__input-container + .contact__email-container,
  .contact__email-container + .contact__input-container,
  .contact__input-container + .contact__input-container {
    margin-top: calc(12px * (100vw / 1728px));
  }

  .contact__label {
    font-size: calc(28px * (100vw / 1728px));
  }

  .contact__input {
    font-size: calc(28px * (100vw / 1728px));
  }

  .contact__platform-container {
    height: auto; /* Content-sized; grid stretch aligns both columns */
    border-radius: calc(32px * (100vw / 1728px));
    padding: calc(15px * (100vw / 1728px)) calc(35px * (100vw / 1728px));
  }

  .contact__platform-label {
    font-size: calc(28px * (100vw / 1728px));
    margin-bottom: calc(14px * (100vw / 1728px));
  }

  .contact__radio-group {
    gap: calc(4px * (100vw / 1728px));
  }

  .contact__radio-label {
    font-size: calc(28px * (100vw / 1728px));
  }

  .contact__privacy {
    font-size: calc(20px * (100vw / 1728px));
    margin-top: calc(24px * (100vw / 1728px));
  }

  .contact__error,
  .contact__success {
    font-size: calc(20px * (100vw / 1728px));
    margin-top: calc(16px * (100vw / 1728px));
  }

  .contact__submit-btn {
    height: calc(56px * (100vw / 1728px));
    font-size: calc(28px * (100vw / 1728px));
    padding: calc(8px * (100vw / 1728px)) calc(40px * (100vw / 1728px));
  }

  /* Contact shapes - center-relative positioning */
  .contact__shape {
    width: calc(143px * (100vw / 1728px));
    height: calc(143px * (100vw / 1728px));
  }

  .contact__shape--purple {
    top: calc(230px * (100vw / 1728px));
    left: calc(50% - (590px * (100vw / 1728px))); /* Center-relative: 590px left of center */
  }

  .contact__shape--green {
    top: calc(500px * (100vw / 1728px));
    left: calc(50% + (450px * (100vw / 1728px))); /* Center-relative: 450px right of center */
  }

  /* About Section - proportionally scaled */
  .about {
    padding: calc(60px * (100vw / 1728px)) calc(124px * (100vw / 1728px)) calc(160px * (100vw / 1728px));
  }

  .about__title {
    font-size: calc(96px * (100vw / 1728px));
    margin-bottom: calc(48px * (100vw / 1728px));
  }

  .about__card {
    max-width: calc(876px * (100vw / 1728px));
    min-height: calc(246px * (100vw / 1728px));
    padding: calc(35px * (100vw / 1728px)) calc(65px * (100vw / 1728px));
    border-radius: calc(22px * (100vw / 1728px));
  }

  .about__text {
    font-size: calc(28px * (100vw / 1728px));
    margin-bottom: calc(16px * (100vw / 1728px));
  }

  /* Footer - proportionally scaled */
  .footer {
    padding: calc(80px * (100vw / 1728px)) calc(124px * (100vw / 1728px)) calc(48px * (100vw / 1728px));
  }

  .footer__content {
    max-width: calc(1480px * (100vw / 1728px));
  }

  .footer__top {
    margin-bottom: calc(40px * (100vw / 1728px));
  }

  .footer__column {
    gap: calc(8px * (100vw / 1728px));
  }

  .footer__column--left {
    min-width: calc(420px * (100vw / 1728px)); /* Account for full email width */
  }

  .footer__column--center {
    min-width: calc(250px * (100vw / 1728px));
    padding-top: calc(5px * (100vw / 1728px));
    gap: calc(27px * (100vw / 1728px)); /* Align Icons with Contact row */
    margin-left: auto; /* Center between Contact and Partners */
    margin-right: auto;
  }

  .footer__logo {
    width: calc(148px * (100vw / 1728px));
    height: calc(32px * (100vw / 1728px));
    margin-bottom: calc(22px * (100vw / 1728px)); /* Reduced to move Contact us up */
  }

  .footer__contact {
    font-size: calc(28px * (100vw / 1728px));
  }

  .footer__credits {
    font-size: calc(28px * (100vw / 1728px));
  }

  /* Align Icons row with Contact us row */
  .footer__credits:first-child {
    margin-bottom: calc(-12px * (100vw / 1728px));
  }

  .footer__partners {
    gap: calc(24px * (100vw / 1728px));
  }

  .footer__partner-logo {
    height: calc(72px * (100vw / 1728px));
  }

  .footer__partner-logo--seeds {
    margin-right: calc(40px * (100vw / 1728px));
    max-width: calc(400px * (100vw / 1728px));
    width: auto;
  }

  .footer__partner-logo--eu {
    width: calc(64px * (100vw / 1728px));
    height: calc(63px * (100vw / 1728px));
  }

  .footer__funding {
    gap: calc(19px * (100vw / 1728px));
  }

  .footer__funding-text {
    font-size: calc(20px * (100vw / 1728px));
  }

  .footer__disclaimer {
    font-size: calc(20px * (100vw / 1728px));
    padding-top: calc(20px * (100vw / 1728px));
  }

}

/* ==========================================================================
   NARROW DESKTOP STYLES (1340px - 1649px)
   Split branding title to two lines
   ========================================================================== */

@media (min-width: 1340px) and (max-width: 1649px) {
  /* Split "Virtual Consultant • Interactive Product Finder Plugin" to 2 lines */
  .what-is-it__badge-light {
    display: block;
  }
}

/* ==========================================================================
   BADGE SPLIT FOR SMALLER SCREENS (< 1340px)
   ========================================================================== */

@media (max-width: 1339px) {
  /* Split badge to 2 lines for narrower viewports */
  .what-is-it__badge-light {
    display: block;
  }
}