/* ==========================================================================
   Goodness Giveaway — pixel-perfect build from Figma (1361px canvas)
   Fonts:  DM Sans (headings)  /  Inter (body)
   Colors: dark #1a1a18 · gray #6b6963 · muted #8c8a83 · coral #f25d46
           yellow #ffd500 · blue #87c2d6 · teal #2f6b83 · cream #f8f5ef
           light-blue #eef6f9
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: #fff;
  font-family: 'Inter', sans-serif;
  color: #1a1a18;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
img { display: block; }

/* full-width canvas; content centers in a 1361px wrap, decor hugs the edges */
.page {
  width: 100%;
  min-width: 1361px;
  margin: 0 auto;
  position: relative;
  background: #fff;
  overflow: clip;
}

/* centered content container — all in-flow content keeps its Figma coords */
.wrap {
  position: relative;
  width: 1361px;
  height: 100%;
  margin: 0 auto;
}

/* text block helper — mirrors Figma fixed-height, vertically-centered text boxes */
.tx {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* each direct span = one exact Figma line; never re-wrap */
.tx > span { white-space: nowrap; }

/* DM Sans helpers */
.dmb { font-family: 'DM Sans', sans-serif; font-weight: 900; font-variation-settings: 'opsz' 14; }
.dm7 { font-family: 'DM Sans', sans-serif; font-weight: 700; font-variation-settings: 'opsz' 14; }
.dm8 { font-family: 'DM Sans', sans-serif; font-weight: 800; font-variation-settings: 'opsz' 14; }

.coral  { color: #f25d46; font-style: normal; }
.yellow { color: #ffd500; font-style: normal; }

/* coral pill button */
.btn-coral {
  position: absolute;
  background: #f25d46;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #fff;
  text-align: center;
  transition: background .2s ease, transform .2s ease;
}
.btn-coral:hover { background: #e04c35; transform: translateY(-1px); }

.main { position: relative; }

section { position: relative; width: 100%; }

/* Figma paint order */
.sec-problem { z-index: 1; }
.sec-how     { z-index: 2; }
.sec-cases   { z-index: 3; }
.sec-proof   { z-index: 4; }
.sec-data    { z-index: 5; }
.sec-trust   { z-index: 6; }
.sec-cta     { z-index: 7; }
.sec-hero    { z-index: 8; }
.sec-alt     { z-index: 9; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 89px;
  background: #fff;
  border-bottom: 1px solid rgba(26, 26, 24, 0.12);
  transition: box-shadow .25s ease;
}
.site-header.scrolled { box-shadow: 0 4px 18px rgba(26, 26, 24, 0.08); }

.header-logo { position: absolute; left: 114px; top: 14px; width: 187.72px; height: 60.32px; }
.header-logo img { width: 100%; height: 100%; }

.header-nav { position: absolute; left: 455.58px; top: 32.34px; height: 23.3px; width: 376.59px; }
.nav-item {
  position: absolute;
  top: 0;
  height: 23.3px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  line-height: 23.31px;
  color: #1a1a18;
  opacity: 0.78;
  transition: opacity .2s ease;
}
.nav-item:hover { opacity: 1; }
.nav-1 { left: 0; }
.nav-2 { left: 126.18px; }
.nav-3 { left: 226.13px; }
.nav-4 { left: 311.72px; }

.header-cta {
  position: absolute;
  left: 986.02px;
  top: 20.59px;
  width: 260.98px;
  height: 46.82px;
  background: #f25d46;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14.1px;
  line-height: 21.82px;
  color: #fff;
  transition: background .2s ease;
}
.header-cta:hover { background: #e04c35; }

/* ==========================================================================
   HERO  (h 745.48)
   ========================================================================== */
.sec-hero { height: 745.48px; background: #fff; }

.hero-shape-blue {
  position: absolute; left: 0; top: 0;
  width: 421.9px; height: 150px;
  background: #87c2d6;
  border-bottom-right-radius: 110px;
}
.hero-shape-yellow {
  position: absolute; left: 0.5px; top: 696.5px;
  width: 625.46px; height: 105px;
  background: #ffd500;
  border-top-right-radius: 110px;
}

.hero-h1 {
  left: 114px; top: 161px; width: 546.72px; height: 257.01px;
  font-size: 54.4px; line-height: 59.84px; letter-spacing: -0.816px;
  color: #1a1a18;
}
.hero-sub {
  left: 114px; top: 436.84px; width: 563.19px; height: 113.64px;
  font-size: 18.9px; line-height: 30.21px; color: #6b6963;
}
.hero-cta {
  left: 114px; top: 588.19px; width: 301.63px; height: 57.3px;
  font-size: 15.7px; line-height: 24.3px;
}
.hero-link {
  position: absolute; left: 440.63px; top: 604.23px;
  width: 133.52px; height: 25.2px;
  border-bottom: 1.5px solid #1a1a18;
}
.hero-link .tx {
  left: 0; top: 2px; height: 17px; width: 133.52px;
  font-weight: 600; font-size: 14px; line-height: 21.7px; color: #1a1a18;
}
.hero-link:hover .tx { color: #f25d46; }
.hero-link:hover { border-bottom-color: #f25d46; }

.hero-semi {
  position: absolute; right: 103.55px;
  width: 191px; height: 95px;
  background: #87c2d6;
  border-bottom-left-radius: 95px;
  border-bottom-right-radius: 95px;
}
.hero-semi-1 { top: 437.48px; }
.hero-semi-2 { top: 532.48px; }
.hero-semi-3 { top: 627.48px; }
.hero-semi-4 { top: 722.48px; }

.hero-img { position: absolute; right: 169.82px; top: 205.48px; width: 411.88px; height: 541.31px; overflow: hidden; }
.hero-img img { width: 100%; height: 100%; }

/* ==========================================================================
   PROBLEM  (h 1152, cream)
   ========================================================================== */
.sec-problem { height: 1152px; background: #f8f5ef; }

.problem-yellow-br {
  position: absolute; right: 0; top: 1086.52px;
  width: 306px; height: 130px;
  background: #ffd500;
  border-bottom-left-radius: 80px;
}
.problem-eyebrow {
  left: 114px; top: 123px; width: 104.67px; height: 15.5px;
  font-weight: 700; font-size: 12.8px; line-height: 19.84px;
  letter-spacing: 1.152px; text-transform: uppercase; color: #f25d46;
  white-space: nowrap;
}
.problem-mark {
  position: absolute; left: 114px; top: 157.72px;
  width: 780.41px; height: 89.15px;
  background: #ffd500;
  border-radius: 0 14px 0 14px; /* tr + bl */
}
.problem-mark-text {
  left: 11.48px; top: 2.61px; width: 756.65px; height: 83.92px;
  font-size: 32.8px; line-height: 45.92px; color: #1a1a18;
}
.problem-line2 {
  left: 244.52px; top: 206.25px; width: 564.57px; height: 38px;
  font-size: 32.8px; line-height: 45.92px; color: #1a1a18;
  white-space: nowrap;
}
.problem-line3 {
  left: 114px; top: 252.16px; width: 99.84px; height: 38px;
  font-size: 32.8px; line-height: 45.92px; color: #1a1a18;
}
.problem-h2 {
  left: 114px; top: 318.57px; width: 555.01px; height: 103.5px;
  font-size: 40px; line-height: 46px; letter-spacing: -0.6px; color: #1a1a18;
}
.problem-p1 {
  left: 114px; top: 441.07px; width: 640.08px; height: 73.08px;
  font-size: 17px; line-height: 26.29px; color: #6b6963;
}
.problem-p2 {
  left: 114px; top: 531.44px; width: 492.61px; height: 26.29px;
  font-weight: 600; font-size: 17px; line-height: 26.29px; color: #1a1a18;
  white-space: nowrap;
}
.problem-p3 {
  left: 114px; top: 579.73px; width: 319.2px; height: 26.29px;
  font-style: italic; font-size: 17px; line-height: 26.29px; color: #8c8a83;
  white-space: nowrap;
}

.problem-card {
  position: absolute; left: 114px;
  width: 781px; height: 151.33px;
  border-radius: 28px 28px 28px 6px; /* tl tr br bl */
}
.problem-card-1 { top: 662.02px;  background: #ffd500; }
.problem-card-2 { top: 831.35px;  background: #87c2d6; }
.problem-card-3 { top: 1000.68px; background: #f25d46; }
.problem-card h3 {
  left: 32px; top: 31px; height: 29.5px; width: 700px;
  font-size: 20.5px; line-height: 31.74px; letter-spacing: -0.307px; color: #1a1a18;
  white-space: nowrap;
}
.problem-card p {
  left: 32px; top: 74.23px; height: 44.3px;
  font-size: 16px; line-height: 24.8px; color: #1a1a18;
}
.problem-card-1 p { width: 678.13px; }
.problem-card-2 p { width: 711.33px; }
.problem-card-3 h3 { color: #fff; }
.problem-card-3 p { width: 711.96px; color: rgba(255, 255, 255, 0.94); }

.problem-star { position: absolute; right: 132px; top: 632.51px; width: 181.69px; height: 180.69px; }
.problem-circle-yellow {
  position: absolute; right: 78px; top: 736.4px;
  width: 61.5px; height: 60.5px; border-radius: 30.25px;
  background: #ffd500;
}
.problem-circle-coral {
  position: absolute; right: 118px; top: 604.02px;
  width: 28.5px; height: 27.5px; border-radius: 13.75px;
  background: #f25d46;
}
.problem-girl {
  position: absolute; right: 66px; top: 711.52px;
  width: 455px; height: 457px;
  transform: scaleX(-1);
  overflow: hidden;
}
.problem-girl img { width: 100.06%; height: 100%; margin-left: -0.03%; }

/* ==========================================================================
   ALTERNATIVE APPROACHES  (h 710, white)
   ========================================================================== */
.sec-alt { height: 710px; background: #fff; }

.alt-h2 {
  left: 114px; top: 94.5px; width: 681.35px; height: 99.54px;
  font-size: 38.4px; line-height: 44.54px; letter-spacing: -0.576px; color: #1a1a18;
}

.alt-col { position: absolute; top: 237.08px; width: 374px; height: 341.56px; }
.alt-col-1 { left: 114px; background: #ffd500; border-radius: 28px 0 0 28px; }
.alt-col-2 { left: 494px; background: #87c2d6; }
.alt-col-3 { left: 874px; background: #f25d46; border-radius: 0 28px 28px 0; }

.alt-col h3 {
  left: 26px; top: 30px; height: 29.76px; width: 330px;
  font-size: 19.2px; line-height: 29.76px; letter-spacing: -0.288px; color: #1a1a18;
  white-space: nowrap;
}
.alt-label {
  left: 26px; top: 75.76px; height: 19.34px; width: 200px;
  font-weight: 800; font-size: 12.5px; line-height: 19.34px;
  letter-spacing: 0.624px; text-transform: uppercase;
  color: #1a1a18; opacity: 0.75;
  white-space: nowrap;
}
.alt-col-3 h3, .alt-col-3 .alt-label { color: #fff; }

.alt-pill {
  position: absolute; height: 32.33px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
}
.alt-pill .tx {
  left: 12px; top: 5.75px; height: 20.8px;
  font-weight: 600; font-size: 13.1px; line-height: 20.34px; color: #1a1a18;
  white-space: nowrap;
}
.alt-col-1 .p-1 { left: 26px;      top: 101.1px;  width: 122.78px; }
.alt-col-1 .p-2 { left: 154.78px;  top: 101.1px;  width: 141.55px; }
.alt-col-1 .p-3 { left: 26px;      top: 141.42px; width: 140.7px;  }
.alt-col-2 .p-1 { left: 26px;      top: 101.1px;  width: 163.84px; }
.alt-col-2 .p-4 { left: 26px;      top: 141.42px; width: 154.59px; }
.alt-col-2 .p-5 { left: 186.59px;  top: 141.42px; width: 99.39px;  }
.alt-col-3 .p-6 { left: 26px;      top: 101.1px;  width: 114.73px; }
.alt-col-3 .p-7 { left: 146.73px;  top: 101.1px;  width: 145.31px; }
.alt-col-3 .p-8 { left: 26px;      top: 141.42px; width: 188.93px; }

.alt-gap {
  left: 26px; font-size: 15.2px; line-height: 23.56px; color: #1a1a18;
}
.alt-gap strong { font-weight: 700; }
.alt-col-1 .alt-gap { top: 196.25px; width: 317.03px; height: 65.13px; }
.alt-col-2 .alt-gap { top: 196.25px; width: 319.37px; height: 88.69px; }
.alt-col-3 .alt-gap { top: 196.25px; width: 321.28px; height: 112.25px; color: rgba(255, 255, 255, 0.94); }

.alt-badge {
  position: absolute; left: 206.68px; top: -14px;
  width: 143.32px; height: 31.86px;
  background: #1a1a18; border-radius: 999px;
}
.alt-badge .tx {
  left: 14px; top: 8.5px; height: 14px; width: 116.06px;
  font-weight: 700; font-size: 11.5px; line-height: 17.86px; color: #fff;
  white-space: nowrap;
}

.alt-arrow {
  position: absolute; top: 389.86px;
  width: 38px; height: 36px;
  background: #fff; border-radius: 18px;
  filter: drop-shadow(0 2px 4px rgba(26, 26, 24, 0.18));
}
.alt-arrow-1 { left: 472px; }
.alt-arrow-2 { left: 852px; }
.alt-arrow .tx {
  left: 12px; top: 8.15px; height: 19.5px; width: 14.36px;
  font-size: 14px; line-height: 21.7px; text-align: center; color: #1a1a18;
}

.alt-caption {
  left: 397.18px; top: 625.15px; width: 567.83px; height: 46.53px;
  font-style: italic; font-size: 16.8px; line-height: 26.04px;
  text-align: center; color: #8c8a83;
}

.alt-shape-blue {
  position: absolute; left: -0.5px; top: 645.5px;
  width: 306px; height: 130px;
  background: #87c2d6;
  border-bottom-right-radius: 80px;
}

/* ==========================================================================
   HOW IT WORKS  (h 852.39, light blue)
   ========================================================================== */
.sec-how { height: 852.39px; background: #eef6f9; }

.how-star { position: absolute; left: 718.5px; top: 13px; width: 170.25px; height: 170.25px; }

.how-h2 {
  left: 114px; top: 114.5px; width: 587.42px; height: 99.54px;
  font-size: 38.4px; line-height: 44.54px; letter-spacing: -0.576px; color: #1a1a18;
}

.how-card {
  position: absolute; top: 265.08px;
  width: 266px; height: 467.31px;
  background: #fff;
  border-radius: 14px 14px 14px 4px;
}
.how-card-1 { left: 114px; }
.how-card-2 { left: 403px; }
.how-card-3 { left: 692px; }
.how-card-4 { left: 981px; }

.how-num {
  position: absolute; left: 26px; top: 32px;
  width: 36px; height: 36px; border-radius: 18px;
}
.how-num.nc { background: #f25d46; }
.how-num.nt { background: #2f6b83; }
.how-num .tx {
  left: 0; top: 6.6px; height: 22.5px; width: 36px;
  font-size: 16px; line-height: 24.8px; text-align: center; color: #fff;
  align-items: center;
}

.how-card h3 {
  left: 26px; top: 88px; height: 27.28px; width: 220px;
  font-size: 17.6px; line-height: 27.28px; letter-spacing: -0.264px; color: #1a1a18;
  white-space: nowrap;
}
.how-card h3.t2 { top: 88.5px; height: 52.78px; white-space: normal; }

.how-body {
  left: 26px; top: 127.78px; height: 88.68px;
  font-size: 15.2px; line-height: 23.56px; color: #6b6963;
}
.how-card-1 .how-body { width: 200.15px; }
.how-card-3 .how-body { width: 207.61px; }
.how-body.b2 { top: 155.06px; height: 277.19px; width: 210.6px; }
.how-body.b4 { top: 127.78px; height: 253.62px; width: 208.61px; }

.how-img {
  position: absolute; left: -27.5px; top: 507.5px;
  width: 517px; height: 344.67px;
}
.how-img-photo { width: 100%; height: 100%; }
.how-img-circle { position: absolute; left: 366px; top: 274px; width: 61.5px; height: 60.5px; }
.how-img-dot { position: absolute; left: 466px; top: 274px; width: 22px; height: 23px; }

/* coral bar crossing into Use Cases (top half, rounded top-right) */
.how-bar-coral {
  position: absolute; left: -0.5px; top: 689px;
  width: 76.82px; height: 305.44px;
  background: #f25d46;
  border-top-right-radius: 44px;
}

/* ==========================================================================
   USE CASES  (h 1112, white)
   ========================================================================== */
.sec-cases { height: 1112px; background: #fff; }

.cases-semi {
  position: absolute; right: -0.5px; top: -48px;
  width: 191px; height: 95px;
  background: #87c2d6;
  border-bottom-left-radius: 95px;
  border-bottom-right-radius: 95px;
}
.cases-circle { position: absolute; right: 191px; top: -30px; width: 61.5px; height: 60.5px; }

/* coral bar (bottom half, rounded bottom-right) */
.cases-bar-coral {
  position: absolute; left: -0.5px; top: -121.5px;
  width: 76.82px; height: 242.55px;
  background: #f25d46;
  border-bottom-right-radius: 44px;
}

.cases-h2 {
  left: 113.5px; top: 111px; width: 516.53px; height: 44.54px;
  font-size: 38.4px; line-height: 44.54px; letter-spacing: -0.576px; color: #1a1a18;
  white-space: nowrap;
}
.cases-sub {
  left: 113.5px; top: 172.04px; width: 469.77px; height: 20.5px;
  font-size: 16.8px; line-height: 26.04px; color: #6b6963;
  white-space: nowrap;
}

.case-card {
  position: absolute;
  display: block;
  background: #f8f5ef;
  border-radius: 14px 14px 14px 4px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.case-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26, 26, 24, 0.08); }
.case-1 { left: 113.5px; top: 257px;    width: 558px;  height: 208.97px; }
.case-2 { left: 688.5px; top: 257px;    width: 558px;  height: 208.97px; }
.case-3 { left: 113.5px; top: 483.97px; width: 558px;  height: 180.45px; }
.case-4 { left: 688.5px; top: 483.97px; width: 558px;  height: 180.45px; }
.case-5 { left: 113.5px; top: 682.42px; width: 558px;  height: 180.45px; }
.case-6 { left: 688.5px; top: 682.42px; width: 558px;  height: 180.45px; }
.case-7 { left: 113.5px; top: 880.87px; width: 1133px; height: 180.45px; }

.case-num {
  left: 28px; top: 30.5px; height: 19px; width: 40px;
  font-size: 13.1px; line-height: 20.34px; letter-spacing: 0.525px; color: #2f6b83;
}
.case-h3 {
  left: 28px; top: 64.33px; height: 28.52px; width: 480px;
  font-size: 18.4px; line-height: 28.52px; letter-spacing: -0.276px; color: #1a1a18;
  white-space: nowrap;
}
.case-h3.two { top: 65.33px; height: 55.01px; white-space: normal; width: 330px; }
.case-p {
  left: 28px; top: 105.34px; height: 42.31px;
  font-size: 15.4px; line-height: 23.81px; color: #6b6963;
}
.case-p.low { top: 133.86px; }
.case-1 .case-p { width: 423.61px; }
.case-2 .case-p { width: 487.06px; }
.case-3 .case-p { width: 453.25px; }
.case-4 .case-p { width: 485.11px; }
.case-5 .case-p { width: 475.68px; }
.case-6 .case-p { width: 501.52px; }
.case-7 .case-p { width: 1071.09px; }

.case-arrow {
  top: 30px; right: 27.69px; height: 29.76px; width: 19.51px;
  font-size: 19.2px; line-height: 29.76px; color: #8c8a83;
  transition: color .2s ease, transform .2s ease;
}
.case-card:hover .case-arrow { color: #f25d46; transform: translateX(4px); }

/* ==========================================================================
   DATA  (h 649.41, cream)
   ========================================================================== */
.sec-data { height: 649.41px; background: #f8f5ef; }

.data-yellow-tl {
  position: absolute; left: 0; top: -55px;
  width: 170px; height: 110px;
  background: #ffd500;
  border-bottom-right-radius: 70px;
}

.data-h2 {
  left: 114px; top: 115px; width: 602.2px; height: 145.61px;
  font-size: 38.4px; line-height: 45.31px; letter-spacing: -0.576px; color: #1a1a18;
}

.data-man {
  position: absolute; right: 179px; top: -3px;
  width: 424px; height: 283px;
  object-fit: cover;
}

.stat-circle {
  position: absolute; top: 321.29px;
  width: 61px; height: 60px; border-radius: 30px;
  background: #f8f5ef;
}
.sc-1 { left: 123px; }
.sc-2 { left: 509.66px; }
.sc-3 { left: 896.33px; }
.sc-4 { left: 509.66px; top: 452.04px; }

.stat-num {
  height: 23.5px; width: 40px;
  font-size: 16.3px; line-height: 25.3px; color: #1a1a18;
  white-space: nowrap;
}
.sn-1 { left: 133.95px; top: 339.14px; }
.sn-2 { left: 520.62px; top: 339.14px; }
.sn-3 { left: 907.28px; top: 339.14px; }
.sn-4 { left: 520.62px; top: 469.89px; }

.stat-171 {
  left: 114px; top: 464.43px; height: 35.2px; width: 130.27px;
  font-size: 35.2px; line-height: 35.2px; color: #f25d46;
  white-space: nowrap;
}

.stat-text { font-size: 15px; line-height: 23.31px; color: #1a1a18; }
.st-1 { left: 210px;    top: 306.41px; width: 262.66px; height: 64.61px; }
.st-2 { left: 596.66px; top: 318.06px; width: 254.57px; height: 41.3px; }
.st-3 { left: 983.33px; top: 318.06px; width: 256.72px; height: 41.3px; }
.st-4 { left: 210px;    top: 448.81px; width: 254.51px; height: 41.3px; }
.st-5 { left: 596.66px; top: 437.16px; width: 236.71px; height: 64.61px; }

.stat-src { font-size: 12.2px; line-height: 18.85px; color: #8c8a83; white-space: nowrap; }
.ss-1 { left: 210px;    top: 381.32px; width: 131.68px; height: 15px; }
.ss-2 { left: 596.66px; top: 369.67px; width: 112.39px; height: 15px; }
.ss-3 { left: 983.33px; top: 369.67px; width: 147.1px;  height: 15px; }
.ss-4 { left: 210px;    top: 500.42px; width: 225.16px; height: 15px; }
.ss-5 { left: 596.66px; top: 512.07px; width: 113.82px; height: 15px; }

.data-star { position: absolute; right: 120.75px; top: 564px; width: 170.25px; height: 170.25px; }
.data-circle-yellow { position: absolute; right: 242.5px; top: 534px; width: 61.5px; height: 60.5px; }
.data-circle-coral  { position: absolute; right: 179px; top: 594px; width: 31px; height: 31px; }

/* ==========================================================================
   PROOF  (h 1155.8, white)  — 52px white gap follows before Trust
   ========================================================================== */
.sec-proof { height: 1155.8px; background: #fff; margin-bottom: 52px; }

.proof-h2 {
  left: 114px; top: 115px; width: 465.58px; height: 100.31px;
  font-size: 38.4px; line-height: 45.31px; letter-spacing: -0.576px; color: #1a1a18;
}

.quote-card {
  position: absolute;
  border-radius: 28px 28px 6px 28px; /* tl tr br bl */
}
.qc-blue  { left: 114px; top: 258.61px; width: 556px; height: 225.12px; background: #87c2d6; }
.qc-coral { left: 691px; top: 258.61px; width: 556px; height: 225.12px; background: #f25d46; }
.qc-yellow{ left: 360px; top: 845.73px; width: 641px; height: 146.04px; background: #ffd500; }
.qc-blue2 { left: 360px; top: 1009.77px; width: 641px; height: 146.04px; background: #87c2d6; }

.quote { left: 30px; font-size: 16.5px; line-height: 26.37px; color: #1a1a18; }
.qc-blue  .quote { top: 33px; width: 484.55px; height: 125.44px; }
.qc-coral .quote { top: 33px; width: 495.13px; height: 99.08px; color: #fff; }
.qc-yellow .quote { top: 33px; width: 556.96px; height: 46.36px; }
.qc-blue2 .quote { top: 33px; width: 569.1px; height: 46.36px; }

.quote-attr {
  left: 30px; height: 17px;
  font-weight: 700; font-size: 13.8px; line-height: 21.33px; color: #1a1a18;
  white-space: nowrap;
}
.qc-blue  .quote-attr { top: 179.8px;  width: 386.36px; }
.qc-coral .quote-attr { top: 153.44px; width: 275.06px; color: rgba(255, 255, 255, 0.9); }
.qc-yellow .quote-attr { top: 100.72px; width: 231.48px; }
.qc-blue2 .quote-attr { top: 100.71px; width: 319.5px; }

.proof-woman {
  position: absolute; left: 128px; top: 510px;
  width: 296px; height: 364px;
  overflow: hidden;
}
.proof-woman img {
  position: absolute;
  width: 350.51%; height: 114.1%;
  left: -197.49%; top: -14.1%;
  max-width: none;
}

.proof-mid {
  left: 525px; top: 632.72px; width: 494.54px; height: 79.34px;
  font-size: 17.9px; line-height: 28.67px; color: #1a1a18;
}

/* ==========================================================================
   TRUST  (h 609.48, cream)
   ========================================================================== */
.sec-trust { height: 609.48px; background: #f8f5ef; }

.trust-h2 {
  left: 114px; top: 101.5px; width: 410.97px; height: 90.61px;
  font-size: 30.4px; line-height: 47.12px; letter-spacing: -0.456px; color: #1a1a18;
}

.trust-card {
  position: absolute; top: 238.23px;
  width: 363.66px; height: 251.25px;
  border-radius: 28px 28px 28px 4px;
}
.tc-yellow { left: 114px;    background: #ffd500; }
.tc-blue   { left: 498.66px; background: #87c2d6; }
.tc-coral  { left: 883.33px; background: #f25d46; }

.trust-badge {
  position: absolute; left: 26px; top: 30px;
  width: 44px; height: 44px; border-radius: 22px;
  background: #fff;
}
.trust-badge .tx {
  left: 0; top: 8.86px; height: 25.5px; width: 44px;
  font-size: 17.6px; line-height: 27.28px; text-align: center; color: #1a1a18;
  align-items: center;
}

.trust-card h3 {
  left: 26px; top: 93px; height: 24px; width: 300px;
  font-size: 16.8px; line-height: 26.04px; letter-spacing: -0.252px; color: #1a1a18;
  white-space: nowrap;
}
.tc-coral h3 { color: #fff; }

.trust-body {
  left: 26px; top: 130.53px; height: 64.61px; width: 301.12px;
  font-size: 15px; line-height: 23.31px; color: #1a1a18;
}
.trust-body.tall { height: 87.91px; width: 303.52px; }
.tc-blue .trust-body { width: 303.52px; }
.tc-coral .trust-body { width: 299.82px; color: rgba(255, 255, 255, 0.92); }

/* ==========================================================================
   FINAL CTA  (h 738.77, dark)
   ========================================================================== */
.sec-cta { height: 738.77px; background: #1a1a18; }

.cta-shape-blue {
  position: absolute; left: 0; top: 0;
  width: 170px; height: 110px;
  background: #87c2d6;
  border-bottom-right-radius: 70px;
}
.cta-shape-coral {
  position: absolute; right: 0; bottom: 0;
  width: 200px; height: 130px;
  background: #f25d46;
  border-top-left-radius: 80px;
}

.cta-h2 {
  left: 300px; top: 130px; width: 761px; height: 222.72px;
  font-size: 48px; line-height: 55.68px; letter-spacing: -0.72px;
  text-align: center; color: #fff;
}
.cta-sub {
  left: 432.29px; top: 380.22px; width: 496.62px; height: 75.8px;
  font-size: 17.3px; line-height: 27.65px;
  text-align: center; color: rgba(255, 255, 255, 0.66);
}
.cta-btn {
  left: 529.68px; top: 501.66px; width: 301.63px; height: 57.3px;
  font-size: 15.7px; line-height: 24.3px;
}
.cta-link { position: absolute; top: 584.96px; height: 23.81px; }
.cta-link-1 { left: 512.45px; width: 111.09px; }
.cta-link-2 { left: 650.53px; width: 198.02px; }
.cta-link .tx {
  left: 0; top: 2px; height: 18px; width: 100%;
  font-weight: 500; font-size: 14.7px; line-height: 22.82px;
  text-align: center; color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
  transition: color .2s ease;
}
.cta-link:hover .tx { color: #fff; }

/* ==========================================================================
   FOOTER  (h 94.32, dark)
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 10;
  width: 100%; height: 94.32px;
  background: #1a1a18;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-mark { position: absolute; left: 114px; top: 32.66px; width: 22.92px; height: 20.91px; }
.footer-name {
  left: 144.92px; top: 32.5px; height: 19.5px; width: 153.45px;
  font-size: 13.8px; line-height: 21.33px; color: #fff;
  white-space: nowrap;
}
.footer-copy {
  left: 519.78px; top: 35px; height: 17px; width: 188.87px;
  font-size: 13.8px; line-height: 21.33px; color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
}
.footer-list { position: absolute; left: 930.02px; top: 32px; width: 316.98px; height: 21.32px; }
.footer-link { position: absolute; top: 2px; height: 17.32px; }
.fl-1 { left: 0; width: 91.32px; }
.fl-2 { left: 114.99px; width: 201.35px; }
.footer-link .tx {
  left: 0; top: 0; height: 17.32px; width: 100%;
  font-size: 13.8px; line-height: 21.33px; color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
}
a.footer-link:hover .tx { color: #fff; }

/* ==========================================================================
   FRAME-LEVEL DECOR — blue leaves on the right edge
   ========================================================================== */
.leaf {
  position: absolute;
  right: -80.92px;
  width: 160.92px; height: 160.92px;
  z-index: 20;
  pointer-events: none;
}
.leaf-1 { top: 2419.5px; }
.leaf-2 { top: 2580.5px; }
.leaf-3 { top: 2734.5px; }

/* ==========================================================================
   HOVER ENHANCEMENTS
   ========================================================================== */
.nav-item::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: #f25d46;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-item:hover::after { transform: scaleX(1); }

.header-cta:hover,
.btn-coral:hover { box-shadow: 0 8px 20px rgba(242, 93, 70, 0.35); }

.problem-card, .quote-card, .trust-card, .alt-col, .how-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.problem-card:hover, .quote-card:hover, .trust-card:hover, .how-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(26, 26, 24, 0.10);
}
.alt-col:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(26, 26, 24, 0.10); }

.how-num { transition: transform .25s ease; }
.how-card:hover .how-num { transform: scale(1.12) rotate(-8deg); }

.trust-badge { transition: transform .25s ease; }
.trust-card:hover .trust-badge { transform: rotate(10deg) scale(1.08); }

.footer-mark { transition: transform .3s ease; }
.footer-mark:hover { transform: rotate(12deg); }

/* gentle float on decorative stars */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: no-preference) {
  .problem-star, .how-star, .data-star { animation: floaty 7s ease-in-out infinite; }
  .how-star { animation-delay: 1.2s; }
  .data-star { animation-delay: 2.4s; }
}

/* ==========================================================================
   ENTRANCE ANIMATIONS  (classes are applied by js/script.js)
   .rise = fade + slide up (static content) · .fade = fade only (hoverable)
   ========================================================================== */
.rise {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease var(--d, 0s), transform .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0s);
}
.rise.in-view { opacity: 1; transform: translateY(0); }

.fade {
  opacity: 0;
  transition:
    opacity .8s ease var(--d, 0s),
    transform .25s ease,
    box-shadow .25s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}
.fade.in-view { opacity: 1; }

/* ==========================================================================
   MOBILE MENU TOGGLE (hidden on desktop)
   ========================================================================== */
.menu-toggle {
  display: none;
  position: absolute; right: 20px; top: 14px;
  width: 40px; height: 36px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0;
}
.menu-toggle span {
  display: block; width: 22px; height: 2.5px;
  background: #1a1a18; border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   MOBILE LAYOUT  (< 768px) — sections flow, decor slims down
   ========================================================================== */
@media (max-width: 767px) {
  .page { min-width: 0; }
  .wrap { width: 100%; padding: 0 20px; }

  /* geometry reset: every Figma text block becomes flowing text */
  .page .wrap .tx {
    position: static;
    display: block;
    width: auto; height: auto;
    inset: auto;
    white-space: normal;
  }
  .page .wrap .tx > span { white-space: normal; display: inline; }

  /* ---------- header ---------- */
  .site-header { height: 64px; }
  .header-logo { left: 20px; top: 9px; width: 145px; height: 46.6px; }
  .header-nav { display: none; }
  .menu-open .header-nav {
    display: block;
    position: fixed; left: 0; right: 0; top: 64px;
    width: auto; height: auto;
    background: #fff;
    padding: 8px 24px 80px;
    border-bottom: 1px solid rgba(26, 26, 24, 0.12);
    box-shadow: 0 16px 32px rgba(26, 26, 24, 0.10);
    z-index: 90;
  }
  .nav-item {
    position: static;
    display: block; height: auto;
    padding: 13px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(26, 26, 24, 0.07);
  }
  .nav-item:last-child { border-bottom: 0; }
  .nav-item::after { display: none; }
  .header-cta { display: none; }
  .menu-open .header-cta {
    display: flex;
    position: fixed; left: 24px; right: 24px; top: 268px;
    width: auto; height: 48px;
    z-index: 91;
  }
  .menu-toggle { display: flex; }

  /* ---------- hide heavy desktop decor ---------- */
  .hero-semi, .hero-shape-yellow,
  .problem-yellow-br, .problem-star, .problem-circle-yellow, .problem-circle-coral,
  .alt-arrow, .alt-shape-blue,
  .how-bar-coral, .how-img-circle, .how-img-dot,
  .cases-semi, .cases-circle, .cases-bar-coral,
  .stat-circle, .data-star, .data-circle-yellow, .data-circle-coral,
  .leaf { display: none; }

  /* ---------- hero ---------- */
  .sec-hero { height: auto; padding: 36px 0 48px; }
  .hero-shape-blue { width: 150px; height: 66px; border-bottom-right-radius: 48px; }
  .hero-h1 { font-size: 34px; line-height: 41px; letter-spacing: -0.5px; margin: 44px 0 14px; }
  .hero-sub { font-size: 16px; line-height: 26px; margin: 0 0 24px; }
  .hero-cta { position: static; display: inline-flex; width: auto; height: auto; padding: 15px 26px; font-size: 14.5px; }
  .hero-link { position: static; display: inline-block; width: auto; height: auto; margin: 0 0 0 16px; vertical-align: middle; padding-bottom: 2px; }
  .hero-img { position: static; width: min(320px, 88%); height: auto; margin: 30px auto 0; }
  .hero-img img { width: 100%; height: auto; }

  /* ---------- problem ---------- */
  .sec-problem { height: auto; padding: 44px 0 40px; }
  .problem-eyebrow { margin-bottom: 12px; }
  .problem-mark { position: static; width: auto; height: auto; padding: 10px 14px; margin: 0 0 4px; display: inline-block; }
  .problem-mark-text { font-size: 21px; line-height: 30px; }
  .problem-line2, .problem-line3 { font-size: 21px; line-height: 30px; }
  .page .wrap .problem-line2, .page .wrap .problem-line3 { display: inline; }
  .problem-h2 { font-size: 27px; line-height: 34px; margin: 20px 0 12px; }
  .problem-p1 { font-size: 15.5px; line-height: 25px; margin-bottom: 12px; }
  .problem-p2 { font-size: 15.5px; line-height: 25px; margin-bottom: 10px; }
  .problem-p3 { font-size: 15.5px; line-height: 25px; margin-bottom: 24px; }
  .problem-card { position: static; width: auto; height: auto; padding: 20px 22px 22px; margin-bottom: 14px; }
  .problem-card h3 { font-size: 18px; line-height: 25px; margin-bottom: 8px; }
  .problem-card p { font-size: 15px; line-height: 24px; }
  .problem-girl { position: static; width: 65%; max-width: 300px; height: auto; margin: 16px 0 0 auto; }
  .problem-girl img { width: 100%; height: auto; margin: 0; }

  /* ---------- alternative approaches ---------- */
  .sec-alt { height: auto; padding: 44px 0 28px; }
  .alt-h2 { font-size: 26px; line-height: 33px; margin-bottom: 22px; }
  .alt-col { position: relative; left: 0; top: 0; width: auto; height: auto; padding: 22px 24px 24px; margin-bottom: 14px; border-radius: 20px; }
  .alt-col h3 { margin-bottom: 12px; }
  .alt-label { margin-bottom: 10px; }
  .alt-col .alt-pill { position: static; display: inline-flex; align-items: center; width: auto; height: auto; padding: 7px 12px; margin: 0 8px 8px 0; }
  .page .wrap .alt-pill .tx { display: inline; }
  .alt-gap { margin-top: 12px; font-size: 15px; line-height: 24px; }
  .alt-badge { left: auto; right: 16px; top: -12px; display: flex; align-items: center; justify-content: center; }
  .alt-caption { font-size: 15px; line-height: 24px; margin: 10px 0 8px; }

  /* ---------- how it works ---------- */
  .sec-how { height: auto; padding: 44px 0 40px; }
  .how-star { left: auto; right: 16px; top: 16px; width: 84px; height: 84px; }
  .how-h2 { font-size: 26px; line-height: 33px; margin-bottom: 22px; }
  .how-card { position: static; width: auto; height: auto; padding: 22px 24px 24px; margin-bottom: 14px; }
  .how-num { position: static; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
  .how-card h3 { margin-bottom: 8px; }
  .how-body { font-size: 15px; line-height: 24px; }
  .how-img { position: static; width: min(420px, 100%); height: auto; margin: 16px auto 0; }
  .how-img-photo { width: 100%; height: auto; }

  /* ---------- use cases ---------- */
  .sec-cases { height: auto; padding: 44px 0 40px; }
  .cases-h2 { font-size: 26px; line-height: 33px; margin-bottom: 10px; }
  .cases-sub { font-size: 15.5px; line-height: 24px; margin-bottom: 24px; }
  .case-card { position: relative; left: 0; top: 0; width: auto; height: auto; padding: 20px 48px 22px 22px; margin-bottom: 12px; display: block; }
  .case-num { margin-bottom: 6px; }
  .case-h3 { font-size: 17px; line-height: 24px; margin-bottom: 8px; }
  .case-p { font-size: 15px; line-height: 24px; }
  .page .wrap .case-arrow { position: absolute; top: 20px; right: 18px; width: auto; height: auto; }

  /* ---------- data ---------- */
  .sec-data { height: auto; padding: 44px 0 40px; }
  .data-yellow-tl { width: 110px; height: 70px; top: -35px; border-bottom-right-radius: 44px; }
  .data-h2 { font-size: 26px; line-height: 33px; margin-bottom: 10px; }
  .stat-num { font-size: 22px; line-height: 28px; margin: 20px 0 2px; }
  .stat-171 { font-size: 30px; line-height: 34px; margin: 22px 0 2px; }
  .stat-text { font-size: 15px; line-height: 24px; margin-bottom: 3px; }
  .stat-src { font-size: 12px; line-height: 18px; }
  .data-man { position: static; width: min(360px, 85%); height: auto; margin: 26px auto 0; display: block; }

  /* ---------- proof ---------- */
  .sec-proof { height: auto; padding: 44px 0 40px; margin-bottom: 0; }
  .proof-h2 { font-size: 26px; line-height: 33px; margin-bottom: 22px; }
  .quote-card { position: static; width: auto; height: auto; padding: 22px 24px 24px; margin-bottom: 14px; }
  .quote-card .quote { font-size: 15.5px; line-height: 25px; margin-bottom: 12px; }
  .quote-card .quote-attr { font-size: 13.5px; line-height: 20px; }
  .proof-woman { position: static; width: 220px; height: 270px; margin: 24px auto 20px; }
  .proof-mid { font-size: 16px; line-height: 26px; margin-bottom: 22px; }

  /* ---------- trust ---------- */
  .sec-trust { height: auto; padding: 44px 0 40px; }
  .trust-h2 { font-size: 24px; line-height: 32px; margin-bottom: 22px; }
  .trust-card { position: static; left: 0; width: auto; height: auto; padding: 22px 24px 24px; margin-bottom: 14px; }
  .trust-badge { position: static; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
  .trust-card h3 { margin-bottom: 8px; }
  .trust-body { font-size: 15px; line-height: 24px; }

  /* ---------- final cta ---------- */
  .sec-cta { height: auto; padding: 60px 0 64px; }
  .cta-shape-blue { width: 110px; height: 70px; border-bottom-right-radius: 44px; }
  .cta-shape-coral { width: 130px; height: 84px; border-top-left-radius: 55px; }
  .cta-h2 { font-size: 29px; line-height: 38px; text-align: center; margin-bottom: 16px; }
  .cta-sub { font-size: 16px; line-height: 26px; text-align: center; margin-bottom: 26px; }
  .cta-btn { position: static; display: flex; width: fit-content; height: auto; padding: 16px 28px; margin: 0 auto 16px; }
  .cta-link { position: static; display: block; width: auto; height: auto; margin: 0 auto 6px; text-align: center; }

  /* ---------- footer ---------- */
  .site-footer { height: auto; padding: 26px 0 28px; text-align: center; }
  .footer-mark { position: static; margin: 0 auto 8px; }
  .footer-name { margin-bottom: 4px; }
  .footer-copy { margin-bottom: 10px; }
  .footer-list { position: static; width: auto; height: auto; display: flex; justify-content: center; gap: 18px; }
  .footer-link { position: static; width: auto; height: auto; }
}

/* respect reduced-motion for entrances */
@media (prefers-reduced-motion: reduce) {
  .rise, .fade { opacity: 1; transform: none; transition: none; }
}