/* ===== RESET & VARIABLES ===== */
    :root {
      --bg: #ededf2;
      --card: #f8f8fb;
      --white: #ffffff;
      --text: #1f2430;
      --muted: #666d78;
      --line: #e6e8ef;
      --green: #4f9a6a;
      --green-2: #76c58d;
      --green-3: #dff5e4;
      --navy: #08213a;
      --navy-2: #0d2e4e;
      --gold: #e9c64e;
      --shadow: 0 18px 34px rgba(26, 36, 52, 0.08);
      --inner: 0 2px 5px rgba(255, 255, 255, 0.65) inset;
      --radius: 20px;
      --topbar-offset: clamp(78px, 10vw, 110px);
    }

    @keyframes logo-float {
      0% { transform: translateY(0) scale(1); }
      100% { transform: translateY(-4px) scale(1.02); }
    }

    @keyframes logo-click {
      0% { transform: translate(0, 0) scale(1); }
      30% { transform: translate(-10px, 10px) rotate(-4deg) scale(1.04); }
      60% { transform: translate(12px, 12px) rotate(4deg) scale(1.04); }
      100% { transform: translate(0, 0) scale(1); }
    }

    @keyframes logo-hover-spin {
      0% { transform: translateY(0) scale(1) rotate(0deg); }
      40% { transform: translateY(-6px) scale(1.05) rotate(180deg); }
      80% { transform: translateY(0) scale(1.03) rotate(360deg); }
      100% { transform: translateY(0) scale(1.02) rotate(360deg); }
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--topbar-offset) + 12px);
    }

    [id] {
      scroll-margin-top: calc(var(--topbar-offset) + 12px);
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, p { margin: 0; }
    img { max-width: 100%; height: auto; display: block; }
    a { transition: color .2s ease; }

    /* Skip to content (accessibility) */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 16px;
      z-index: 9999;
      background: var(--green);
      color: #fff;
      padding: 12px 24px;
      border-radius: 0 0 8px 8px;
      font-weight: 700;
      font-size: 14px;
      text-decoration: none;
      transition: top .2s;
    }

    .skip-link:focus {
      top: 0;
    }

    /* Breadcrumb (hidden visually but readable by crawlers) */
    .breadcrumb-nav {
      max-width: 1400px;
      margin: 0 auto;
      padding: 8px 20px;
      font-size: 13px;
    }

    .breadcrumb-nav ol {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .breadcrumb-nav li { color: var(--muted); }
    .breadcrumb-nav a { color: var(--green); text-decoration: none; }
    .breadcrumb-nav a:hover { text-decoration: underline; }

    /* ===== STICKY TOPBAR ===== */
    .sticky-topbar {
      position: sticky;
      top: 0;
      z-index: 1200;
      height: clamp(78px, 10vw, 110px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 10px 22px rgba(6, 17, 32, .12);
      backdrop-filter: blur(3px);
      transform: translateY(0);
      transition: transform .36s ease, box-shadow .3s ease;
      will-change: transform;
      color: #111;
    }

    .sticky-topbar.topbar-hidden {
      transform: translateY(calc(-100% - 8px));
      box-shadow: 0 2px 8px rgba(6, 17, 32, .22);
    }

    .sticky-topbar .brand-wrap {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }

    .sticky-topbar .brand {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #111;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      text-decoration: none;
    }

    .sticky-topbar .brand img {
      width: clamp(170px, 16vw, 280px);
      height: auto;
      max-height: clamp(46px, 4.8vw, 74px);
      object-fit: contain;
      animation: none;
      transition: transform .25s ease, filter .25s ease;
      will-change: transform;
      pointer-events: auto;
    }

    .sticky-topbar .brand img:hover {
      animation: none;
      transform: scale(1.08);
    }

    .sticky-topbar .brand img.logo-click-anim {
      animation: none;
    }

    .sticky-topbar .brand-tagline {
      display: block;
      font-size: clamp(10px, 0.8vw, 12px);
      line-height: 1.2;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #223043;
      white-space: nowrap;
      text-align: center;
      -webkit-user-select: text;
      user-select: text;
    }

    @media (prefers-reduced-motion: reduce) {
      .sticky-topbar .brand img { animation: none; }
      .sticky-topbar .brand img.logo-click-anim { animation: none; }
      .sticky-topbar .brand img:hover { animation: none; transform: scale(1.03); }
    }

    .sticky-topbar .links {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      font-size: 15px;
      font-weight: 700;
    }

    .sticky-topbar .links a {
      color: #111;
      text-decoration: none;
      padding: 10px 14px;
      border-radius: 14px;
      position: relative;
      overflow: hidden;
      transition: color .2s ease, transform .2s ease, background .2s ease;
    }

    .sticky-topbar .links a:hover,
    .sticky-topbar .links a:focus {
      color: #0c7c42;
      background: rgba(12,124,66,.12);
      transform: translateY(-2px);
    }

    .sticky-topbar .links a[aria-current="page"] {
      color: #0c7c42;
      background: rgba(12,124,66,.16);
      box-shadow: 0 10px 18px rgba(12,124,66,.16);
    }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 8px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 12px;
      z-index: 1300;
      border-radius: 12px;
      transition: background .2s ease, transform .2s ease;
    }

    .hamburger span {
      display: block;
      width: 38px;
      height: 4px;
      background: #111;
      border-radius: 2px;
      transition: transform .3s, opacity .3s;
    }

    .hamburger:hover,
    .hamburger:focus-visible {
      background: rgba(0,0,0,.06);
      outline: none;
      transform: translateY(-1px);
    }

    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .mobile-nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1199;
      background: rgba(8, 26, 51, .95);
      backdrop-filter: blur(8px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
    }

    .mobile-nav-overlay.open { display: flex; }

    .mobile-nav-overlay a {
      color: #f4f8ff;
      text-decoration: none;
      font-size: 22px;
      font-weight: 700;
    }

    .mobile-nav-overlay a[aria-current="page"] { color: #67cb8d; }

    /* ===== PAGE CONTAINER ===== */
    .page {
      width: calc(100% - 30px);
      margin: 16px auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    /* ===== PANELS ===== */
    .panel {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      background: linear-gradient(180deg, #fbfbfd 0%, #f3f4f8 100%);
      box-shadow: var(--shadow), var(--inner);
      border: 1px solid rgba(255,255,255,.9);
    }

    /* Speed up first render by skipping below-the-fold paint work */
    .panel:not(.hero) {
      content-visibility: auto;
      contain-intrinsic-size: 900px;
    }

    .panel.light {
      background:
        radial-gradient(circle at 72% 78%, rgba(115, 204, 138, 0.23), transparent 20%),
        radial-gradient(circle at 12% 85%, rgba(130, 213, 146, 0.22), transparent 20%),
        linear-gradient(180deg, #f8f8fb 0%, #f5f6f9 100%);
    }

    .panel.dark {
      background:
        radial-gradient(circle at 70% 86%, rgba(115, 204, 138, 0.22), transparent 20%),
        radial-gradient(circle at 12% 72%, rgba(125, 214, 148, 0.18), transparent 20%),
        linear-gradient(180deg, #09243f 0%, #071b30 100%);
      color: #fff;
    }

    .content {
      position: relative;
      z-index: 2;
      padding: 22px 24px;
    }

    /* ===== UTILITY ===== */
    .green { color: var(--green); }

    .title-xl {
      font-size: clamp(24px, 4vw, 40px);
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .title-lg {
      text-align: center;
      font-size: clamp(20px, 3vw, 28px);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #1f2430;
    }

    .panel.dark .title-lg,
    .panel.dark .title-xl { color: #fff; }

    /* ===== STORE BUTTONS ===== */
    .store-row {
      display: flex;
      gap: 0px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .store-btn {
      padding: 0;
      min-width: 180px;
      width: 180px;
      height: 56px;
      border-radius: 10px;
      background: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
      text-decoration: none;
      cursor: pointer;
    }

    .store-btn:hover,
    .store-btn:focus {
      opacity: 1;
      outline: none;
      box-shadow: none;
    }

    .store-badge-img {
      display: block;
      width: auto;
      height: 44px;
      object-fit: contain;
    }

    /* Google Play official PNG includes more transparent padding than Apple SVG.
       Slightly taller render keeps both visible black badges equal in height. */
    .store-badge-apple { height: 44px !important; }
    .store-badge-play { height: 44px !important; }

    /* ===== METRIC PILLS ===== */
    .metric-pill {
      min-width: 120px;
      height: 46px;
      padding: 0 16px;
      border-radius: 12px;
      color: #f7f7f8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(180deg, #6ebb83 0%, #4a9367 100%);
      box-shadow: 0 12px 18px rgba(41, 108, 78, .28), inset 0 1px 0 rgba(255,255,255,.35);
      border: 1px solid rgba(255,255,255,.24);
      font-size: 16px;
      font-weight: 800;
    }

    /* ===== DECORATIVE ===== */
    .wave, .wave-2, .wave-3 {
      position: absolute;
      border-radius: 50%;
      filter: blur(1px);
      z-index: 1;
      pointer-events: none;
    }

    .wave { width: 980px; height: 420px; left: -120px; bottom: -170px; border: 26px solid rgba(137, 220, 154, 0.22); transform: rotate(-9deg); }
    .wave-2 { width: 940px; height: 360px; left: -100px; bottom: -180px; border: 20px solid rgba(84, 178, 114, 0.3); transform: rotate(-10deg); }
    .wave-3 { width: 860px; height: 320px; left: -40px; bottom: -160px; border: 26px solid rgba(5, 34, 54, .45); transform: rotate(-9deg); }
    .light .wave-3 { border-color: rgba(228, 239, 230, 0.9); }

    .glow {
      position: absolute;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(204,255,221,.95) 30%, rgba(165,229,191,.2) 68%, transparent 100%);
      box-shadow: 0 0 26px rgba(219, 255, 232, 0.9);
      z-index: 1;
    }

    /* ===== HERO ===== */
    .hero {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: clamp(18px, 2.1vw, 34px);
      min-height: auto;
      padding: clamp(18px, 2.2vw, 30px) clamp(12px, 1.6vw, 22px);
      background: #f4f7fb url('./assets/bg.png') center/cover no-repeat;
    }

    .hero .wave, .hero .wave-2, .hero .wave-3, .hero .glow { display: none; }

    .hero .content {
      padding: 0;
      max-width: 820px;
      width: 100%;
      justify-self: end;
      z-index: 2;
    }

    .hero .title-xl {
      max-width: 760px;
      font-size: clamp(32px, 2.4vw, 52px);
      color: #1f2430;
      letter-spacing: -0.01em;
      line-height: 1.18;
    }

    .hero .title-xl .highlight {
      color: #3f9b6f;
      text-shadow: 0 8px 18px rgba(52, 150, 99, .18);
    }

    .hero .hero-copy {
      margin-top: 20px;
      max-width: 780px;
      font-size: clamp(16px, 1.6vw, 20px);
      line-height: 1.58;
      color: #2a3445;
      font-weight: 600;
    }

    .hero-benefits-row {
      margin-top: 16px;
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      gap: clamp(18px, 2.2vw, 40px);
      flex-wrap: nowrap;
    }

    .hero .usp-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 7px;
      max-width: none;
      flex: 1 1 auto;
      min-width: 0;
    }

    .hero .usp-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: clamp(13px, 1.3vw, 15px);
      font-weight: 700;
      color: #223043;
      text-transform: uppercase;
    }

    .hero .usp-list li::before {
      content: "\2713";
      width: 18px; height: 18px;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      background: linear-gradient(180deg, #72c189 0%, #4b9a68 100%);
      color: #fff;
      font-size: 12px;
      flex: 0 0 auto;
      box-shadow: 0 6px 10px rgba(55, 124, 88, .25);
    }

    .hero .download-label {
      margin-top: 16px;
      font-size: clamp(15px, 1.5vw, 18px);
      font-weight: 800;
      color: #1f2430;
      text-transform: uppercase;
    }

    .hero .store-row {
      margin-top: 9px;
    }

    .hero-download-group {
      width: fit-content;
      flex: 0 0 auto;
      margin-left: 0;
      margin-top: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .hero-download-group .download-label {
      margin-top: 0;
      margin-left: 8px;
      text-align: left;
    }

    .hero-download-group .store-row {
      margin-top: 14px;
      margin-left: 0;
      justify-content: flex-start;
    }

    .hero .store-btn {
      width: 165px;
      min-width: 165px;
      height: 56px;
      border-radius: 12px;
      padding: 0;
    }
    .hero .badge-row { margin-top: 18px; gap: 12px; display: flex; flex-wrap: wrap; }


    .hero-visual {
      position: relative;
      right: auto;
      top: auto;
      width: min(100%, 980px);
      justify-self: start;
      align-self: start;
      height: fit-content;
      z-index: 3;
      pointer-events: auto;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(208, 219, 233, .34);
      box-shadow: 0 18px 34px rgba(8, 20, 38, .34);
      background: linear-gradient(165deg, rgba(255,255,255,.14), rgba(132, 162, 200, .06));
      transform-style: preserve-3d;
    }

    .hero-visual img {
      display: block;
      width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 24px 30px rgba(0,0,0,.34));
    }

    .hero-visual-video {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: 0;
      background: #0f1a2a;
    }

    .hero-visual::before {
      content: "";
      position: absolute;
      left: -26%;
      top: -40%;
      width: 42%;
      height: 190%;
      background: linear-gradient(112deg, rgba(255,255,255,0), rgba(255,255,255,.24), rgba(255,255,255,0));
      transform: rotate(18deg);
      animation: reviews-sheen 8s linear infinite;
      pointer-events: none;
      z-index: 2;
    }

    @media (min-width: 1600px) {
      .page { width: calc(100% - 20px); margin: 16px auto; }
      .hero { min-height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.1vw, 22px); padding: clamp(14px, 1.6vw, 24px) clamp(10px, 1.1vw, 18px); }
      .hero .content { max-width: 900px; padding: 0; }
      .hero .title-xl { font-size: clamp(38px, 2.8vw, 56px); max-width: 900px; }
      .hero .hero-copy { font-size: 20px; line-height: 1.62; max-width: 900px; }
      .hero .usp-list { gap: 12px; max-width: 580px; }
      .hero .usp-list li { font-size: 16px; }
      .hero .store-row { margin-top: 9px; }
      .hero-visual { width: min(100%, 1080px); }
    }

    @media (min-width: 2000px) {
      .hero { min-height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.2vw, 24px); padding: clamp(16px, 1.7vw, 26px) clamp(12px, 1.2vw, 20px); }
      .hero .content { max-width: 980px; padding: 0; }
      .hero .title-xl { font-size: clamp(52px, 2.6vw, 70px); max-width: 1080px; }
      .hero .hero-copy { font-size: 24px; line-height: 1.7; max-width: 1120px; }
      .hero .usp-list { gap: 16px; max-width: 720px; }
      .hero .usp-list li { font-size: 18px; }
      .hero .download-label { font-size: 22px; }
      .hero .store-badge-img { height: 44px; }
      .hero-visual { width: min(100%, 920px); }
    }

    @media (min-width: 2560px) {
      .hero {
        min-height: auto;
        width: 100%;
        max-width: 2560px;
        margin: 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: initial;
        gap: 24px;
        padding: 49px 49px;
        align-items: stretch;
      }
      .hero .content {
        max-width: 100%;
        justify-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .hero .title-xl { font-size: clamp(52px, 2.9vw, 74px); max-width: 1080px; }
      .hero .hero-copy { font-size: clamp(24px, 1.35vw, 32px); line-height: 1.58; max-width: 1080px; }
      .hero .usp-list { max-width: 700px; }
      .hero .usp-list li { font-size: 20px; color: #ffffff; }
      .hero .store-badge-img { height: 44px; }
      .hero-visual { width: min(100%, 1240px); max-width: 1240px; justify-self: start; align-self: start; }
    }

    @media (min-width: 2560px) {
      .page {
        max-width: 3200px;
        width: calc(100% - 20px);
      }

      .why {
        grid-template-columns: minmax(640px, 1.3fr) minmax(0, .95fr);
        column-gap: 38px;
        padding: 62px 88px 66px;
      }

      .why-visual {
        width: min(100%, 980px);
      }
    }

    @media (min-width: 3000px) {
      .page {
        max-width: none;
        width: calc(100% - 24px);
      }

      .why {
        grid-template-columns: minmax(760px, 1.35fr) minmax(0, 1fr);
        column-gap: clamp(36px, 2vw, 64px);
        padding: 66px clamp(56px, 4vw, 120px) 72px;
      }

      .why-visual {
        width: min(100%, 1120px);
      }
    }

    @media (min-width: 1600px) {
      .why { grid-template-columns: minmax(460px, 1.15fr) minmax(0, 1fr); column-gap: clamp(26px, 2.8vw, 48px); }
      .why-visual { width: min(100%, 760px); }
      .why-grid { gap: 20px; }
    }

    @media (min-width: 2000px) {
      .why { grid-template-columns: minmax(520px, 1.2fr) minmax(0, 1fr); column-gap: clamp(30px, 2.6vw, 58px); padding: 56px clamp(44px, 4vw, 84px) 60px; }
      .why-visual { width: min(100%, 860px); }
      .why-grid { gap: 22px; }
    }

    /* ===== WHY SECTION ===== */
    .why {
      min-height: auto;
      display: grid;
      grid-template-columns: minmax(420px, 1.1fr) minmax(0, 1fr);
      grid-template-areas:
        "head head"
        "visual cards";
      align-items: center;
      align-content: start;
      row-gap: clamp(16px, 1.8vw, 24px);
      column-gap: clamp(24px, 2.6vw, 42px);
      padding: 28px clamp(18px, 2.2vw, 34px) 30px;
      background:
        radial-gradient(520px 280px at 18% 78%, rgba(165, 226, 185, .34), transparent 64%),
        radial-gradient(620px 280px at 88% 90%, rgba(190, 236, 206, .30), transparent 68%),
        linear-gradient(180deg, #f8fafc 0%, #f3f6fa 100%);
    }

    .why .content {
      grid-area: head;
      padding: 0;
      text-align: center;
      width: min(100%, 980px);
      margin: 0 auto;
    }

    .why .why-title {
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.18;
      letter-spacing: -0.03em;
      text-transform: uppercase;
    }

    .why-brand-logo {
      display: inline-block;
      vertical-align: -0.08em;
      margin: 0 .15em;
      line-height: 0;
    }

    .why-brand-logo img {
      display: inline-block;
      width: auto;
      height: 0.9em;
    }

    .why .why-intro {
      margin: 16px auto 0;
      max-width: 960px;
      font-size: clamp(16px, 1.8vw, 22px);
      line-height: 1.45;
      color: #4f5866;
      font-weight: 500;
    }

    .why-visual {
      grid-area: visual;
      position: relative;
      left: auto;
      top: auto;
      width: min(100%, 700px);
      margin: 0 auto;
      z-index: 3;
      pointer-events: none;
    }

    .why-visual img {
      width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 20px 28px rgba(11, 26, 41, .28));
    }

    .why-grid {
      grid-area: cards;
      position: relative;
      right: auto;
      top: auto;
      width: 100%;
      display: grid;
      gap: 18px;
      z-index: 3;
    }

    .why-card {
      min-height: auto;
      background: rgba(255,255,255,.90);
      border-radius: 22px;
      padding: clamp(20px, 2vw, 30px);
      box-shadow: 0 16px 26px rgba(18,34,53,.08);
      border: 1px solid rgba(255,255,255,.80);
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .why-card > div:last-child {
      min-width: 0;
      width: 100%;
    }

    .check {
      min-width: 54px; width: 54px; height: 54px;
      border-radius: 50%;
      background: linear-gradient(180deg, #79c488 0%, #4e9e69 100%);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 28px;
      font-weight: 900;
      box-shadow: 0 10px 18px rgba(75, 156, 103, .30);
      flex-shrink: 0;
    }

    .why-card h3 {
      font-size: clamp(15px, 1.5vw, 18px);
      line-height: 1.18;
      font-weight: 800;
      text-transform: uppercase;
    }

    .why-card p {
      margin-top: 10px;
      font-size: clamp(12px, 1.2vw, 14px);
      line-height: 1.5;
      color: #5f6975;
      font-weight: 500;
      width: 100%;
      overflow-wrap: break-word;
      word-break: normal;
      text-wrap: auto;
    }

    /* ===== WORKS V2 ===== */
    .works.works-v2 {
      min-height: 500px;
      background:
        radial-gradient(circle at 84% 20%, rgba(94, 191, 125, .18), transparent 30%),
        radial-gradient(circle at 10% 86%, rgba(111, 205, 139, .16), transparent 24%),
        linear-gradient(180deg, #0b2a48 0%, #071c33 100%);
    }

    .works.works-v2::before {
      content: "";
      position: absolute;
      left: -8%; right: -8%;
      bottom: -76px; height: 230px;
      background:
        radial-gradient(90% 140px at 50% 6%, rgba(177, 234, 198, .55), transparent 72%),
        radial-gradient(90% 150px at 50% 18%, rgba(94, 184, 123, .34), transparent 74%);
      pointer-events: none;
      z-index: 1;
    }

    .works.works-v2 .wave { width: 1240px; height: 460px; left: -210px; bottom: -292px; border: 26px solid rgba(176, 234, 198, .44); transform: rotate(-7deg); }
    .works.works-v2 .wave-2 { width: 1160px; height: 420px; left: -176px; bottom: -290px; border: 18px solid rgba(95, 186, 123, .44); transform: rotate(-7deg); }
    .works.works-v2 .wave-3 { width: 1100px; height: 390px; left: -142px; bottom: -286px; border: 34px solid rgba(10, 47, 74, .78); transform: rotate(-7deg); }

    .center-wrap { position: relative; z-index: 3; padding: 12px 10px 12px; }
    .works-v2-head { text-align: center; }

    .works-v2-title {
      margin: 0;
      color: #f2f7ff;
      font-size: clamp(26px, 4vw, 44px);
      letter-spacing: -0.03em;
      font-weight: 800;
      line-height: 1.14;
      text-transform: uppercase;
    }

    .works-v2-sub {
      margin: 8px 0 0;
      color: #9eceab;
      font-size: clamp(13px, 1.4vw, 16px);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .works-v2-intro {
      margin: 16px auto 0;
      max-width: 980px;
      text-align: center;
      color: rgba(236, 245, 255, .92);
      font-size: clamp(14px, 1.4vw, 16px);
      line-height: 1.5;
      font-weight: 500;
    }

    .works-v2-track {
      margin: 18px auto 0;
      max-width: 1040px;
      height: 38px;
      position: relative;
    }

    .works-v2-track::before {
      content: "";
      position: absolute;
      left: 3%; right: 3%;
      top: 18px; height: 2px;
      background: rgba(170, 248, 191, .62);
      box-shadow: 0 0 12px rgba(170, 248, 191, .4);
    }

    .works-v2-dot {
      position: absolute;
      top: 4px;
      width: 30px; height: 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #ffffff;
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
      background: #5cab73;
      box-shadow: 0 0 10px rgba(107, 201, 133, .35);
      border: 0;
    }

    .works-v2-dot.d1 { left: 10%; }
    .works-v2-dot.d3 { left: 49%; }
    .works-v2-dot.d4 { right: 10%; }

    .works-v2-grid {
      margin: 16px auto 0;
      width: min(100%, 1160px);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      justify-content: center;
    }

    .works-v2-card {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(250,252,255,.95) 100%);
      border-radius: 16px;
      padding: 16px 10px 16px 12px;
      min-height: auto;
      box-shadow: 0 14px 24px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.84);
    }

    .works-v2-card::after {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 0;
      height: 5px;
      background: linear-gradient(90deg, #7ac78e 0%, #4f9e6b 100%);
    }

    .works-v2-card.customer::after { background: linear-gradient(90deg, #76bcd8 0%, #3e85ab 100%); }
    .works-v2-card.seller::after { background: linear-gradient(90deg, #9eb58b 0%, #6e8e54 100%); }

    .works-v2-card h4 {
      margin: 0;
      color: #1f2733;
      font-size: clamp(16px, 1.6vw, 21px);
      font-weight: 800;
      text-transform: uppercase;
    }

    .works-v2-card ul {
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 9px;
      counter-reset: wstep;
    }

    .works-v2-card li {
      position: relative;
      padding-left: 28px;
      padding-right: 2px;
      color: #546070;
      font-size: clamp(12px, 0.95vw, 14px);
      line-height: 1.5;
      font-weight: 500;
      overflow-wrap: anywhere;
      counter-increment: wstep;
    }

    .works-v2-card li::before {
      content: counter(wstep);
      position: absolute;
      left: 0; top: 1px;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: linear-gradient(180deg, #7ecf93 0%, #53a970 100%);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: grid;
      place-items: center;
    }

    /* ===== STATS V2 ===== */
    .stats.stats-v2 {
      min-height: auto;
      background:
        radial-gradient(circle at 12% 86%, rgba(154, 224, 177, 0.2), transparent 28%),
        radial-gradient(circle at 88% 84%, rgba(132, 214, 154, 0.2), transparent 30%),
        linear-gradient(180deg, #f8fafc 0%, #f2f5f9 100%);
    }

    .stats-v2 .content { padding: 20px 20px 18px; }
    .stats-v2 .experience-block { text-align: center; margin-bottom: 28px; }

    .stats-v2 .experience-title {
      margin: 0;
      font-size: clamp(22px, 3vw, 33px);
      line-height: 1.16;
      color: #252c3a;
      font-weight: 800;
      text-transform: uppercase;
      max-width: 980px;
      margin-left: auto;
      margin-right: auto;
    }

    .stats-v2 .experience-title .green { color: #4f9a6a; }

    .stats-v2 .experience-copy {
      margin: 12px auto 0;
      max-width: 840px;
      color: #606979;
      font-size: clamp(15px, 1.5vw, 18px);
      line-height: 1.45;
      font-weight: 500;
    }

    .stats-v2 .experience-image-wrap {
      margin: 16px auto 0;
      width: min(100%, 980px);
      border-radius: 18px;
      overflow: hidden;
    }

    .stats-v2 .experience-image { width: 100%; height: auto; }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-top: 16px;
      position: relative;
      z-index: 2;
    }

    .stat-box {
      background:
        radial-gradient(circle at 90% 12%, rgba(125, 205, 149, .2), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,252,255,.95) 100%);
      border-radius: 16px;
      min-height: 100%;
      padding: 18px 16px 16px;
      border: 1px solid rgba(187, 213, 198, .7);
      box-shadow: 0 12px 24px rgba(24, 38, 55, 0.08);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
      gap: 10px;
    }

    .stat-top {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      font-size: 17px;
      color: #222b38;
    }

    .stat-title {
      margin: 0;
      font-size: clamp(14px, 1.15vw, 16px);
      line-height: 1.25;
      color: #1f2a3a;
      text-transform: uppercase;
      letter-spacing: .01em;
    }

    .stat-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 15px;
      background: linear-gradient(180deg, #6fbe86 0%, #4b9a68 100%);
      box-shadow: 0 8px 12px rgba(72, 150, 101, 0.26);
      flex: 0 0 auto;
    }

    .stat-copy {
      margin: 0;
      font-size: clamp(12px, 1vw, 14px);
      line-height: 1.5;
      color: #566173;
      font-weight: 500;
      flex: 1 1 auto;
    }

    .stat-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: rgba(79, 156, 107, .12);
      color: #2c7b52;
      border: 1px solid rgba(85, 158, 112, .28);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .03em;
      text-transform: uppercase;
      padding: 6px 10px;
    }

    .stats-v2 .store-row { margin-top: 14px; justify-content: center; gap: 12px; }
    .stats-v2 .store-badge-img { height: 44px; }

    .stats-v2 .wave { width: 980px; height: 320px; left: -120px; bottom: -210px; border: 20px solid rgba(173, 232, 194, 0.42); transform: rotate(-7deg); }
    .stats-v2 .wave-2 { width: 920px; height: 280px; left: -86px; bottom: -216px; border: 14px solid rgba(109, 193, 132, 0.42); transform: rotate(-7deg); }
    .stats-v2 .wave-3 { width: 860px; height: 240px; left: -40px; bottom: -208px; border: 18px solid rgba(229, 239, 234, 0.96); transform: rotate(-7deg); }

    /* ===== ABOUT ===== */
    .about-story .content {
      padding: clamp(16px, 1.8vw, 24px);
      width: min(70%, 1400px);
      margin: 0 auto;
    }

    .about-layout {
      display: grid;
      gap: 20px;
    }

    .about-hero-panel {
      text-align: center;
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .about-hero-panel::after {
      content: none;
    }

    .about-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 8px 14px;
      background: #0f335d;
      color: #f4f8ff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .about-main-title {
      margin-top: 0;
      color: #132132;
      font-size: clamp(22px, 3vw, 40px);
      line-height: 1.14;
      font-weight: 800;
      letter-spacing: -0.03em;
      text-transform: uppercase;
    }

    .about-tagline {
      margin: 8px auto 0;
      max-width: 920px;
      color: #516172;
      font-size: clamp(14px, 1.2vw, 16px);
      line-height: 1.45;
      font-weight: 500;
    }

    .about-story-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    .about-card {
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      padding: 24px 22px;
      text-align: left;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid #dfebf6;
      box-shadow: 0 16px 34px rgba(17, 41, 67, .08);
      max-width: 1200px;
      margin: 0 auto;
    }

    .about-card::after {
      content: "";
      position: absolute;
      right: -55px;
      top: -55px;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(82, 191, 123, .24) 0%, rgba(82, 191, 123, 0) 72%);
      pointer-events: none;
    }

    .about-sub-title {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #16253a;
      font-size: clamp(21px, 2.2vw, 30px);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .about-bulb {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      color: #fff9d8;
      font-size: 13px;
      display: inline-grid;
      place-items: center;
      background: radial-gradient(circle at 35% 28%, #ffe98a 0%, #ffc93d 46%, #ff9f1a 100%);
      box-shadow:
        0 0 0 5px rgba(255, 201, 61, .18),
        0 0 16px rgba(255, 193, 31, .42),
        0 8px 14px rgba(201, 131, 11, .22);
      flex: 0 0 auto;
    }

    .about-card p {
      margin-top: 14px;
      color: #5b6776;
      font-size: clamp(14px, 1.2vw, 16px);
      line-height: 1.62;
      font-weight: 500;
    }

    .about-origin {
      border-radius: 18px;
      padding: clamp(20px, 2vw, 28px);
      background:
        radial-gradient(circle at 85% 14%, rgba(79, 154, 107, .16), transparent 34%),
        radial-gradient(circle at 12% 84%, rgba(47, 111, 179, .12), transparent 36%),
        linear-gradient(180deg, #f8fbff 0%, #f2f8f3 100%);
      border: 1px solid rgba(150, 201, 170, .35);
      box-shadow: 0 16px 32px rgba(21, 40, 64, 0.08);
      position: relative;
      overflow: hidden;
    }

    .about-origin .about-sub-title {
      text-align: center;
      margin: 0;
      position: relative;
      display: inline-flex;
      left: 50%;
      transform: translateX(-50%);
      padding: 9px 16px;
      border-radius: 999px;
      background: rgba(79, 154, 107, .12);
      border: 1px solid rgba(79, 154, 107, .28);
    }

    .about-reason-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .about-reason-card {
      background:
        radial-gradient(circle at 92% 10%, rgba(79, 154, 107, .14), transparent 38%),
        linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
      border: 1px solid rgba(188, 214, 198, .72);
      border-radius: 16px;
      padding: 20px 18px 16px;
      box-shadow: 0 12px 24px rgba(21, 40, 64, 0.07);
      text-align: left;
    }

    .about-reason-card h4 {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #1f2d40;
      font-size: clamp(17px, 1.7vw, 22px);
      line-height: 1.28;
      font-weight: 800;
    }

    .about-reason-card h4::before {
      content: "\2713";
      width: 22px;
      height: 22px;
      border-radius: 50%;
      color: #fff;
      font-size: 12px;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #52bf7b 0%, #329a5e 100%);
      box-shadow: 0 0 0 5px rgba(82, 191, 123, .16);
      flex: 0 0 auto;
    }

    .about-reason-card p {
      margin: 10px 0 0;
      max-width: 100%;
      color: #5f6f81;
      font-size: clamp(13px, 1.08vw, 14px);
      line-height: 1.6;
      font-weight: 500;
    }

    .about-solution-card {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      padding: clamp(22px, 2.4vw, 32px);
      background:
        radial-gradient(circle at 12% 12%, rgba(79, 154, 107, .24), transparent 38%),
        radial-gradient(circle at 88% 86%, rgba(47, 111, 179, .16), transparent 38%),
        linear-gradient(140deg, #ffffff 0%, #f5fbf7 56%, #eef5fb 100%);
      border: 1px solid rgba(137, 191, 162, .42);
      box-shadow: 0 18px 34px rgba(19, 44, 69, .1);
      text-align: center;
    }

    .about-solution-card p {
      margin: 14px auto 0;
      max-width: 1100px;
      color: #495a6c;
      font-size: clamp(15px, 1.25vw, 18px);
      line-height: 1.7;
      font-weight: 500;
    }

    /* ===== CATEGORIES ===== */
    .categories {
      background:
        radial-gradient(circle at 8% 12%, rgba(79, 154, 107, .18), transparent 26%),
        radial-gradient(circle at 92% 88%, rgba(47, 111, 179, .14), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
    }

    .categories .content {
      padding-top: 16px;
      padding-bottom: 18px;
    }

    .categories-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 22px;
    }

    .cat-card {
      background:
        radial-gradient(circle at 90% 10%, rgba(79, 154, 107, .16), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid rgba(189, 212, 229, .78);
      border-radius: 16px;
      padding: 18px 18px 16px;
      box-shadow: 0 14px 26px rgba(23, 40, 59, 0.07);
    }

    .cat-head {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #24303b;
      font-size: clamp(16px, 1.55vw, 19px);
      font-weight: 800;
    }

    .cat-card p {
      margin-top: 10px;
      font-size: clamp(13px, 1.1vw, 14px);
      line-height: 1.55;
      color: #5f6d7d;
      font-weight: 500;
    }

    .cat-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 18px;
      background: linear-gradient(180deg, #6dbf89 0%, #3f9b6f 100%);
      box-shadow: 0 10px 16px rgba(62, 149, 104, .24);
      flex-shrink: 0;
    }

    .cat-icon i {
      color: #fff !important;
      font-size: 17px;
      line-height: 1;
    }

    /* ===== FAQ ===== */
    .faq {
      background:
        radial-gradient(circle at 12% 14%, rgba(79, 154, 107, .14), transparent 28%),
        radial-gradient(circle at 90% 88%, rgba(47, 111, 179, .12), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #f2f6fb 100%);
    }

    .faq .content {
      padding-top: 18px;
      padding-bottom: 20px;
    }

    .faq-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .faq-item {
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid rgba(189, 212, 229, .78);
      box-shadow: 0 10px 20px rgba(23, 40, 59, .07);
      padding: 16px 16px 14px;
    }

    .faq-item h3 {
      margin: 0;
      color: #22313f;
      font-size: clamp(16px, 1.45vw, 20px);
      line-height: 1.3;
      font-weight: 800;
    }

    .faq-item p {
      margin: 10px 0 0;
      color: #5b6a7a;
      font-size: clamp(13px, 1.05vw, 15px);
      line-height: 1.55;
      font-weight: 500;
    }

    /* ===== 3D DEPTH EFFECTS ===== */
    .why-card,
    .about-card,
    .about-reason-card,
    .cat-card,
    .insight-card,
    .stat-box {
      position: relative;
      transform-style: preserve-3d;
      transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
      transition: transform .32s ease, box-shadow .32s ease;
      will-change: transform;
    }

    .why-card::before,
    .about-card::before,
    .about-reason-card::before,
    .cat-card::before,
    .insight-card::before,
    .stat-box::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 50%);
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: none;
      transform: translateZ(20px);
    }

    .why-card > *,
    .about-card > *,
    .about-reason-card > *,
    .cat-card > *,
    .insight-card > *,
    .stat-box > * {
      position: relative;
      z-index: 1;
      transform: translateZ(16px);
    }

    @media (hover: hover) and (pointer: fine) {
      .why-card:hover,
      .about-card:hover,
      .about-reason-card:hover,
      .cat-card:hover,
      .insight-card:hover,
      .stat-box:hover {
        box-shadow: 0 24px 36px rgba(15, 33, 55, .16);
      }

      .why-card:hover::before,
      .about-card:hover::before,
      .about-reason-card:hover::before,
      .cat-card:hover::before,
      .insight-card:hover::before,
      .stat-box:hover::before {
        opacity: 1;
      }
    }

    .hero-visual img,
    .start-collage-image {
      transform-style: preserve-3d;
      animation: float-3d 6.2s ease-in-out infinite;
      will-change: transform;
    }

    @keyframes float-3d {
      0%, 100% { transform: translateY(0) rotateY(0deg); }
      50% { transform: translateY(-8px) rotateY(-3deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-visual img,
      .start-collage-image {
        animation: none;
      }
    }

    /* ===== REVIEWS V2 ===== */
    .reviews.reviews-v2 {
      min-height: auto;
      background: #f7f9fc;
      color: #fff;
      position: relative;
    }

    .reviews.reviews-v2::before {
      content: none;
    }

    .reviews.reviews-v2::after { content: none; }

    .reviews-v2-inner {
      position: relative;
      z-index: 2;
      padding: clamp(18px, 2.2vw, 30px) clamp(12px, 1.6vw, 22px) 10px;
    }
    .reviews-v2-top { text-align: center; color: #2b3140; padding-bottom: 12px; }

    .reviews-v2-top h2 {
      margin: 0;
      font-size: clamp(22px, 3.5vw, 43px);
      line-height: 1.14;
      font-weight: 800;
      text-transform: uppercase;
    }

    .start-brand-logo {
      display: inline-block;
      vertical-align: -0.08em;
      margin: 0 .15em;
      line-height: 0;
    }

    .start-brand-logo img {
      display: inline-block;
      width: auto;
      height: 0.9em;
    }

    .reviews-v2-top p {
      margin: 12px auto 0;
      max-width: 640px;
      font-size: clamp(14px, 1.4vw, 17px);
      line-height: 1.45;
      color: #5d6675;
      font-weight: 500;
    }

    .start-collage {
      margin: 20px auto 0;
      width: min(100%, 580px);
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(210, 220, 231, .85);
      box-shadow: 0 18px 28px rgba(15, 29, 45, .18);
      background: #7f9f87;
      position: relative;
      aspect-ratio: 16 / 9;
    }

    .start-collage-image { width: 100%; height: 100%; object-fit: cover; }

    .reviews-v2-bottom {
      margin: 0 auto;
      width: 100%;
      max-width: none;
      text-align: center;
      color: #f2f6fd;
      position: relative;
      padding: 0 6px 10px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .reviews-v2-bottom::before {
      content: none;
    }

    .reviews-kicker {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #9ec8ff;
      font-size: clamp(12px, 1.1vw, 14px);
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .reviews-kicker::before {
      content: "";
      width: 36px;
      height: 2px;
      background: linear-gradient(90deg, rgba(142, 196, 255, .2) 0%, rgba(142, 196, 255, .92) 100%);
    }

    .reviews-v2-bottom h2 {
      margin: 0;
      font-size: clamp(20px, 3vw, 38px);
      font-weight: 800;
      text-transform: uppercase;
      color: #1f2633;
      text-shadow: none;
      position: relative;
      z-index: 1;
    }

    .review-brand-logo {
      display: inline-block;
      vertical-align: -0.08em;
      margin: 0 .15em;
      line-height: 0;
    }

    .review-brand-logo img {
      display: inline-block;
      width: auto;
      height: 0.9em;
    }

    .reviews-v2-bottom p {
      margin: 10px auto 0;
      max-width: 760px;
      font-size: clamp(13px, 1.3vw, 16px);
      line-height: 1.45;
      color: #1f2633;
      font-weight: 500;
      position: relative;
      z-index: 1;
      background: none;
      border: 0;
      border-radius: 0;
      padding: 0;
      display: block;
    }

    .reviews-v2-stage {
      margin-top: 12px;
      width: 100%;
      min-height: clamp(330px, 30vw, 500px);
      border-radius: 18px;
      background:
        repeating-linear-gradient(90deg, rgba(17, 51, 82, .22) 0 18px, transparent 18px 52px),
        linear-gradient(180deg, #0b2b4e 0%, #071f3d 100%);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding: clamp(14px, 1.6vw, 24px) clamp(8px, 1vw, 14px) clamp(14px, 1.8vw, 22px);
      box-sizing: border-box;
    }

    .reviews-v2-stage::after {
      content: none;
    }

    .reviews-v2-carousel {
      margin: 0 auto;
      padding-top: 0;
      width: 100%;
      overflow: hidden;
      perspective: 1300px;
      transform-style: preserve-3d;
      border-radius: 16px;
      cursor: grab;
    }

    .reviews-v2-carousel.dragging { cursor: grabbing; }

    .reviews-v2-track {
      display: flex;
      width: 100%;
      transform-style: preserve-3d;
      will-change: transform;
      height: clamp(240px, 24vw, 430px);
      align-items: stretch;
    }

    .review-slide {
      flex: 0 0 100%;
      display: grid;
      grid-template-columns: 1fr 1.08fr;
      gap: 14px;
      padding: 0;
      box-sizing: border-box;
      align-items: stretch;
      height: 100%;
    }

    .review-slide .testimonial-media,
    .review-slide .testimonial-quote {
      height: 100% !important;
      min-height: 100% !important;
    }

    .testimonial-media {
      position: relative;
      height: 260px;
      width: 100%;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(208, 219, 233, .34);
      box-shadow: 0 18px 34px rgba(8, 20, 38, .34);
      background: linear-gradient(165deg, rgba(255,255,255,.14), rgba(132, 162, 200, .06));
      transform-style: preserve-3d;
      transform: perspective(1200px) rotateX(3deg) translateZ(0);
    }

    .testimonial-media::before {
      content: "";
      position: absolute;
      left: -26%;
      top: -40%;
      width: 42%;
      height: 190%;
      background: linear-gradient(112deg, rgba(255,255,255,0), rgba(255,255,255,.24), rgba(255,255,255,0));
      transform: rotate(18deg);
      animation: reviews-sheen 8s linear infinite;
      pointer-events: none;
      z-index: 2;
    }


    .testimonial-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 20% 24%;
      transition: opacity .62s ease;
      background: #0f1824;
    }

    /* Portrait testimonial videos: keep full subject visible and centered */
    .testimonial-video.portrait-focus {
      object-fit: contain;
      object-position: center center;
      background: #0f1824;
    }

    .testimonial-play-btn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) !important;
      width: 68px;
      height: 68px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.78);
      background: rgba(8, 22, 38, .48);
      color: #fff;
      font-size: 28px;
      line-height: 1;
      display: grid;
      place-items: center;
      cursor: pointer;
      z-index: 20;
      transition: transform .2s ease, opacity .2s ease, background .2s ease;
      backdrop-filter: blur(2px);
    }

    .testimonial-play-btn:hover,
    .testimonial-play-btn:focus-visible {
      background: rgba(8, 22, 38, .62);
      transform: translate(-50%, -50%) scale(1.05);
      outline: none;
    }

    .testimonial-media.is-playing .testimonial-play-btn {
      opacity: 0;
      pointer-events: none;
    }

    /* Keep original video aspect ratio in fullscreen */
    .hero-visual-video:fullscreen,
    .testimonial-video:fullscreen,
    .hero-visual-video:-webkit-full-screen,
    .testimonial-video:-webkit-full-screen {
      width: 100vw !important;
      height: 100vh !important;
      object-fit: contain !important;
      background: #000 !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
    }

    .testimonial-tag {
      position: absolute;
      left: 50%; bottom: 10px;
      transform: translateX(-50%);
      border-radius: 8px;
      background: #e5c97d;
      color: #1f2834;
      padding: 7px 14px;
      font-size: clamp(12px, 1.2vw, 15px);
      font-weight: 800;
      white-space: nowrap;
      box-shadow: 0 8px 14px rgba(0,0,0,.24);
      transition: opacity .62s ease;
    }

    .testimonial-quote {
      min-height: 260px;
      height: 260px;
      border-radius: 22px;
      background: linear-gradient(165deg, rgba(255,255,255,.98) 0%, rgba(244,248,255,.94) 100%);
      border: 1px solid rgba(255,255,255,.88);
      box-shadow: 0 18px 30px rgba(2, 16, 33, .3);
      padding: 22px 24px 16px;
      display: flex;
      flex-direction: column;
      color: #1f2834;
      transform-style: preserve-3d;
      transform: perspective(1200px) rotateX(2deg) translateZ(0);
      position: relative;
      overflow: hidden;
    }

    /* Landing-page style 3D story card treatment */
    .lp-story-card {
      border: 1px solid rgba(212, 202, 235, 0.4);
      box-shadow: 0 18px 34px rgba(15, 30, 56, 0.34);
      transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
      transform-style: preserve-3d;
      perspective: 1200px;
    }

    .lp-story-card > *:not(.testimonial-play-btn) {
      position: relative;
      z-index: 1;
      transform: translateZ(14px);
    }

    .lp-story-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 46%);
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
    }

    .testimonial-quote > * {
      transform: none !important;
      position: relative;
      z-index: 2;
    }

    @media (hover: hover) and (pointer: fine) {
      .lp-story-stage:hover .lp-story-card:first-child {
        transform: perspective(1200px) rotateX(6deg) rotateY(-4deg) translateZ(10px);
      }
      .lp-story-stage:hover .lp-story-card:last-child {
        transform: perspective(1200px) rotateX(5deg) rotateY(3deg) translateZ(10px);
      }
      .lp-story-stage:hover .lp-story-card {
        border-color: rgba(180, 205, 236, 0.62);
        box-shadow: 0 24px 42px rgba(10, 22, 42, 0.42);
      }
      .lp-story-stage:hover .lp-story-card::after {
        opacity: .24;
      }
    }

    .testimonial-quote::before { content: none; }

    .testimonial-mark { font-size: 62px; line-height: .7; color: #53a071; font-weight: 800; margin-bottom: 8px; }

    .testimonial-text { margin: 0; font-size: clamp(14px, 1.35vw, 16px); line-height: 1.52; font-weight: 600; color: #1f2f45 !important; transition: opacity .62s ease; opacity: 1 !important; }
    .testimonial-text strong { color: #162537 !important; }
    .testimonial-quote blockquote { margin: 0; }
    .testimonial-quote p { color: #1f2f45 !important; opacity: 1 !important; }

    .testimonial-footer {
      margin-top: auto;
      border-top: 1px solid rgba(40, 58, 77, .16);
      padding-top: 12px;
      display: flex;
      align-items: center;
      gap: 14px;
      color: #2d3a4c;
      font-weight: 700;
      font-size: clamp(12px, 1.2vw, 14px);
      flex-wrap: wrap;
    }

    .testimonial-stars { color: #4f9a6a; font-size: 16px; }
    .testimonial-sep { opacity: .45; }

    @keyframes reviews-sheen {
      0% { transform: translateX(-120%) rotate(18deg); }
      100% { transform: translateX(320%) rotate(18deg); }
    }

    @keyframes reviews-marquee-loop {
      from { transform: translateX(calc(-1 * var(--loop-shift, 0px))); }
      to { transform: translateX(0); }
    }

    .reviews-v2-controls {
      position: relative;
      left: auto;
      bottom: auto;
      transform: none;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: clamp(10px, 1.2vw, 16px);
      flex-shrink: 0;
    }

    .reviews-nav-btn {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(22, 48, 78, .35);
      border-radius: 50%;
      background: rgba(255,255,255,.92);
      color: #17304c;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease;
    }

    .reviews-nav-btn:hover,
    .reviews-nav-btn:focus-visible {
      background: #fff;
      border-color: rgba(22, 48, 78, .55);
      outline: none;
    }

    .reviews-v2-dots { display: flex; justify-content: center; gap: 10px; }
    .reviews-v2-dots button { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.6); border: none; cursor: pointer; padding: 0; }
    .reviews-v2-dots button.active { background: #fff; }
    .reviews-v2-dots button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

    /* ===== INSIGHTS ===== */
    .insights {
      background:
        radial-gradient(circle at 84% 18%, rgba(173, 231, 196, .44), transparent 28%),
        radial-gradient(circle at 8% 84%, rgba(151, 222, 177, .35), transparent 24%),
        linear-gradient(180deg, #f4f8fb 0%, #eef4fa 100%);
    }

    .insights .content { padding-top: 16px; padding-bottom: 20px; }
    .insights-head { text-align: center; max-width: 760px; margin: 0 auto; }

    .insights-head h2 { margin: 0; color: #232a36; font-size: clamp(22px, 3.2vw, 40px); font-weight: 800; text-transform: uppercase; }
    .insights-head p { margin: 10px auto 0; color: #6a7381; font-size: clamp(14px, 1.4vw, 16px); line-height: 1.4; max-width: 580px; font-weight: 500; }

    .insights-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

    .insight-card {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid #e8ebf1;
      background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
      box-shadow: 0 10px 20px rgba(18, 31, 46, .06);
    }

    .insight-thumb { height: 138px; position: relative; border-bottom: 1px solid #e7ebf3; display: grid; place-items: center; overflow: hidden; }

    .insight-thumb.i1 { background: linear-gradient(135deg, #dff0ff 0%, #aed9ff 52%, #6cb9f9 100%); }
    .insight-thumb.i2 { background: linear-gradient(135deg, #ecf6ff 0%, #c7ecff 44%, #95dfa7 100%); }
    .insight-thumb.i3 { background: linear-gradient(135deg, #eef8ff 0%, #cfeaff 45%, #8ed992 100%); }

    .insight-badge { width: 84px; height: 84px; border-radius: 20px; background: rgba(255,255,255,.92); display: grid; place-items: center; font-size: 40px; box-shadow: 0 10px 16px rgba(26, 42, 58, .14); transform: rotate(-8deg); color: #2f7f53; z-index: 1; }

    .insight-body { padding: 14px 14px 16px; }
    .insight-body h3 { margin: 0; color: #252d3a; font-size: clamp(14px, 1.4vw, 17px); font-weight: 800; text-transform: uppercase; }
    .insight-body p { margin: 8px 0 0; color: #6b7481; font-size: 13px; line-height: 1.42; font-weight: 500; }

    .insight-link { margin-top: 6px; display: inline-block; color: #3b56ff; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
    .insight-link:hover, .insight-link:focus { color: #2740cc; }

    .newsletter-modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: clamp(10px, 2vw, 24px);
      z-index: 1200;
    }

    .newsletter-modal.is-open { display: flex; }

    .newsletter-modal__backdrop {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 15% 12%, rgba(79, 154, 106, .22), transparent 32%),
        radial-gradient(circle at 84% 78%, rgba(118, 197, 141, .2), transparent 26%),
        rgba(7, 20, 36, .72);
      backdrop-filter: blur(6px);
    }

    .newsletter-modal__dialog {
      position: relative;
      width: min(100%, 1020px);
      max-height: min(92vh, 1000px);
      overflow: auto;
      border-radius: 24px;
      background:
        linear-gradient(135deg, rgba(223, 245, 228, .52) 0%, rgba(255, 255, 255, .96) 28%, rgba(242, 248, 255, .96) 100%);
      border: 1px solid rgba(79, 154, 106, .24);
      box-shadow: 0 30px 70px rgba(5, 19, 36, .35);
    }

    .newsletter-modal__close {
      position: sticky;
      top: 12px;
      margin-left: calc(100% - 58px);
      margin-top: 12px;
      width: 42px;
      height: 42px;
      border: none;
      border-radius: 50%;
      background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
      color: #fff;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      z-index: 2;
      box-shadow: 0 8px 16px rgba(9, 30, 56, .26);
    }

    .newsletter-modal__close:hover,
    .newsletter-modal__close:focus-visible {
      background: linear-gradient(180deg, #113765 0%, #1b4a81 100%);
      outline: 2px solid rgba(79, 154, 106, .45);
      outline-offset: 2px;
    }

    .newsletter-modal__body {
      padding: 0 clamp(14px, 2.2vw, 34px) clamp(18px, 2.2vw, 32px);
    }

    .newsletter-article { color: #243246; }

    .newsletter-article__meta {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      color: #506278;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .newsletter-article__pill {
      background: linear-gradient(180deg, var(--green-3) 0%, #ecf8f0 100%);
      color: #1e6f41;
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 12px;
      letter-spacing: .01em;
      text-transform: uppercase;
      border: 1px solid rgba(79, 154, 106, .3);
    }

    .newsletter-article h2 {
      margin: 4px 0 12px;
      color: #10253f;
      font-size: clamp(24px, 3vw, 40px);
      line-height: 1.2;
    }

    .newsletter-article h3 {
      margin: 18px 0 8px;
      color: #21334a;
      font-size: clamp(18px, 2.2vw, 24px);
    }

    .newsletter-article p {
      margin: 12px 0;
      font-size: clamp(15px, 1.2vw, 17px);
      line-height: 1.66;
      color: #3f4f64;
    }

    .newsletter-article img,
    .newsletter-article video {
      width: 100%;
      border-radius: 18px;
      border: 1px solid rgba(13, 46, 78, .12);
      margin: 18px 0 12px;
      display: block;
      background: #0f1f35;
      box-shadow: 0 14px 32px rgba(10, 24, 44, .16);
    }

    .newsletter-article blockquote {
      margin: 16px 0;
      padding: 12px 16px;
      border-left: 4px solid var(--green);
      background: linear-gradient(180deg, #f3faf6 0%, #eef8f3 100%);
      color: #334a3f;
      border-radius: 10px;
    }

    .newsletter-article ul,
    .newsletter-article ol { padding-left: 20px; color: #415166; }

    .newsletter-article a { color: #2049ce; text-decoration: underline; }
    .newsletter-article figure { margin: 0; }
    .newsletter-article figcaption { color: #5b6e85; font-size: 13px; margin-top: 6px; }

    /* ===== FOOTER ===== */
    .footer-v2 {
      background:
        radial-gradient(circle at 50% 10%, rgba(77, 130, 207, .16), transparent 34%),
        linear-gradient(180deg, #121c37 0%, #0d1831 100%);
      color: #f3f7ff;
      min-height: 0;
      overflow: hidden;
    }

    .footer-v2 .content {
      width: min(100%, 1320px);
      margin: 0 auto;
      padding: 0px 44px 26px;
      box-sizing: border-box;
    }

    .footer-contact-strip {
      background: #ffffff;
      border-radius: 20px;
      min-height: 86px;
      margin: 34px auto 0;
      width: fit-content;
      max-width: 100%;
      box-sizing: border-box;
      padding-left: 40px;
      padding-right: 40px;
      box-shadow: 0 16px 30px rgba(14, 25, 42, .18);
      border: 1px solid rgba(231, 237, 245, .9);
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      justify-items: center;
      padding: 14px 20px;
      color: #1f2835;
      z-index: 3;
      position: relative;
    }

    .footer-contact-item { display: flex; align-items: center; gap: 12px; font-size: clamp(13px, 1.3vw, 15px); font-weight: 700; }

    .footer-icon {
      width: 54px; height: 54px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #43b36f 0%, #2f9f60 100%);
      color: #fff;
      font-size: 22px;
      box-shadow: 0 8px 16px rgba(53, 161, 98, .28);
      flex: 0 0 54px;
    }

    .footer-contact-divider { width: 2px; height: 70px; background: rgba(25, 37, 53, .45); margin: 0 26px; }

    .footer-main { margin-top: 38px; display: grid; grid-template-columns: 1.25fr .9fr 1.15fr; gap: 28px; align-items: start; }
    .footer-col { min-width: 0; }

    .footer-title { margin: 0; font-size: clamp(24px, 3.5vw, 42px); font-weight: 800; color: #f6f9ff; text-transform: uppercase; }
    .footer-logo-img { display: block; width: clamp(190px, 24vw, 360px); height: auto; filter: drop-shadow(0 4px 10px rgba(7, 15, 30, .24)); }

    .footer-copy { margin-top: 10px; color: rgba(226, 234, 247, .9); font-size: clamp(14px, 1.3vw, 16px); line-height: 1.52; max-width: 390px; font-weight: 500; }

    .footer-socials { margin-top: 12px; display: flex; align-items: center; gap: 12px; color: #dce8f9; font-weight: 700; font-size: 14px; flex-wrap: wrap; }
    .footer-socials a { color: #dce8f9; text-decoration: none; }
    .footer-socials a:hover { color: #67cb8d; }
    .footer-socials .dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf70; box-shadow: 0 0 8px rgba(76, 175, 112, .65); }

    .footer-col h4 { margin: 0; color: #f4f8ff; font-size: clamp(20px, 3vw, 38px); text-transform: uppercase; font-weight: 800; }

    .footer-links { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
    .footer-links li a { color: rgba(228, 236, 248, .95); font-size: clamp(14px, 1.3vw, 16px); font-weight: 500; text-decoration: none; }
    .footer-links li a:hover { color: #67cb8d; text-decoration: underline; }

    .footer-news { margin-top: 10px; color: rgba(228, 236, 248, .92); font-size: clamp(14px, 1.3vw, 16px); line-height: 1.45; font-weight: 500; max-width: 360px; }

    .footer-form {
      margin-top: 14px;
      display: grid;
      grid-template-columns: 1fr 54px;
      border-radius: 9px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.22);
      width: min(100%, 360px);
      background: rgba(255,255,255,.98);
      height: 48px;
    }

    .footer-form input { border: 0; outline: none; font-size: 14px; padding: 0 12px; color: #364251; background: transparent; width: 100%; min-width: 0; }
    .footer-form input:focus { outline: 2px solid var(--green); outline-offset: -2px; }
    .footer-form button { border: 0; cursor: pointer; background: linear-gradient(180deg, #44b673 0%, #2f9f61 100%); color: #fff; font-size: 24px; font-weight: 800; }
    .footer-form button:hover { opacity: .9; }
    .footer-form button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

    .footer-bottom { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.26); padding-top: 12px; text-align: center; color: rgba(229, 236, 248, .92); font-size: clamp(12px, 1.2vw, 15px); font-weight: 500; }
    .footer-bottom p {
      margin: 0;
      overflow-wrap: anywhere;
      line-height: 1.5;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1180px) {
      :root { --topbar-offset: clamp(68px, 8vw, 88px); }
      .sticky-topbar {
        height: clamp(68px, 8vw, 88px);
        padding: 0 16px;
      }
      .sticky-topbar .brand img {
        width: clamp(160px, 24vw, 230px);
        max-height: clamp(62px, 9vw, 92px);
      }
      .sticky-topbar .brand-tagline { font-size: 10px; }
      .sticky-topbar .links { display: none; }
      .hamburger { display: flex; }

      .hero { display: block; }
      .hero .content { max-width: 100%; padding: 42px 34px 260px; }
      .hero-visual { position: relative; right: auto; top: auto; width: min(80%, 520px); margin: -220px auto 20px; }
      .why {
        min-height: auto;
        grid-template-columns: 1fr;
        grid-template-areas:
          "head"
          "visual"
          "cards";
        padding: 36px 28px 34px;
      }
      .why .content { text-align: left; width: 100%; }
      .why-visual { width: min(100%, 440px); margin: 4px auto 0; }
      .why-grid { width: 100%; }
      .why-card { min-height: auto; padding: 24px; }
      .works-v2-grid {
        width: min(100%, 860px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .reviews-v2-carousel { width: min(100%, 760px); }
      .review-slide { grid-template-columns: 1fr; padding: 0 10px; }
      .reviews-marquee-wrap { width: 100%; }
      .testimonial-media { height: 240px; }
      .testimonial-quote { height: auto; min-height: 200px; }
      .footer-main { grid-template-columns: 1fr 1fr; }
      .footer-main .footer-col:first-child { grid-column: 1 / -1; }
    }

    @media (max-width: 960px) {
      :root { --topbar-offset: clamp(70px, 11vw, 92px); }
      .sticky-topbar {
        height: clamp(70px, 11vw, 92px);
      }
      .sticky-topbar .brand img {
        width: clamp(190px, 32vw, 270px);
        max-height: clamp(72px, 12vw, 110px);
        transition: transform .6s ease, filter .3s ease;
      }
      .sticky-topbar .brand-tagline { font-size: 10px; }
      .page { width: calc(100% - 20px); margin: 16px auto; gap: 14px; }
      .content { padding: 24px 22px; }
      .hero .content { padding: 32px 26px 200px; }
      .hero-visual { margin-top: -160px; width: min(85%, 480px); }
      .why { padding-bottom: 30px; }
      .why .content { padding: 0; text-align: center; }
      .why-visual { position: relative; left: auto; top: auto; width: min(76%, 420px); margin: 8px auto 0; }
      .why-grid { position: relative; top: auto; right: auto; width: 100%; margin-top: 0; padding: 0 0 20px; }
      .why-card { min-height: auto; padding: 20px; }
      .check { min-width: 42px; width: 42px; height: 42px; font-size: 22px; }
      .about-story-grid { grid-template-columns: 1fr; }
      .about-reason-grid { grid-template-columns: 1fr; }
      .about-story .content { width: 100%; }
      .about-main-title { font-size: clamp(24px, 6vw, 34px); }
      .about-tagline { font-size: clamp(14px, 2.4vw, 16px); }
      .about-sub-title { font-size: clamp(20px, 4.2vw, 26px); }
      .about-card p { font-size: clamp(14px, 2.2vw, 15px); }
      .about-reason-card h4 { font-size: clamp(17px, 3.2vw, 21px); }
      .about-reason-card p { font-size: clamp(12px, 1.9vw, 14px); }
      .about-solution-card p { font-size: clamp(14px, 2.2vw, 16px); }
      .categories-grid { grid-template-columns: repeat(2, 1fr); }
      .faq-grid { grid-template-columns: 1fr; }
      .insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .newsletter-modal { padding: 14px; }
      .newsletter-modal__dialog { width: min(100%, 94vw); max-height: 90vh; }
      .footer-v2 .content { padding: 0px 22px 22px; }
      .footer-contact-strip { grid-template-columns: 1fr; gap: 14px; padding: 18px 20px; }
      .footer-contact-divider { width: 100%; height: 1px; margin: 0; }
      .footer-main { grid-template-columns: 1fr; gap: 20px; }
      .footer-main .footer-col:first-child { grid-column: auto; }
      .reviews-v2-inner { padding: 22px 18px 18px; }
      .reviews-v2-bottom { margin-top: 24px; }
    }

    @media (max-width: 760px) {
      :root { --topbar-offset: clamp(64px, 14vw, 82px); }
      .sticky-topbar { height: clamp(64px, 14vw, 82px); padding: 0 14px; }
      .sticky-topbar .brand { font-size: 17px; }
      .sticky-topbar .brand img {
        width: clamp(170px, 44vw, 240px);
        max-height: clamp(66px, 15vw, 96px);
        transition: transform .6s ease, filter .3s ease;
      }
      .sticky-topbar .brand-tagline { font-size: 9px; }
      .sticky-topbar .links { display: none; }
      .hamburger { display: flex; }
      .page { width: calc(100% - 16px); margin: 12px auto; gap: 12px; }
      .content { padding: 20px 16px; }
      .hero .content { padding: 28px 20px 30px; }
      .hero-benefits-row {
        margin-top: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
      .hero .usp-list {
        flex: 1 1 auto;
      }
      .hero-visual { margin: 10px auto 16px; width: min(92%, 400px); }
      .hero .store-btn { min-width: 150px; width: 150px; height: 48px; }
      .why .content { padding: 0; text-align: left; }
      .why-visual { width: min(90%, 350px); }
      .why-grid { padding: 0 0 16px; }
      .why-card { padding: 16px; gap: 12px; }
      .check { min-width: 36px; width: 36px; height: 36px; font-size: 18px; }
      .about-story .content { padding: 16px; }
      .about-layout { gap: 16px; }
      .about-hero-panel { border-radius: 16px; padding: 18px 14px; }
      .about-chip { font-size: 10px; padding: 7px 12px; }
      .about-main-title { margin-top: 12px; line-height: 1.14; }
      .about-story-grid { gap: 14px; }
      .about-card { border-radius: 14px; padding: 18px 14px; }
      .about-origin { border-radius: 14px; padding: 14px; }
      .about-reason-grid { gap: 12px; margin-top: 14px; }
      .about-reason-card { border-radius: 12px; padding: 16px 14px; }
      .about-reason-card p { margin-top: 12px; }
      .about-solution-card { border-radius: 14px; padding: 18px 14px; }
      .about-solution-card p { margin-top: 10px; line-height: 1.58; }
      .center-wrap { padding: 14px; }
      .works-v2-grid {
        width: 100%;
        grid-template-columns: 1fr;
      }
      .works-v2-track { display: none; }
      .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .categories-grid { grid-template-columns: 1fr; }
      .insights-grid { grid-template-columns: 1fr; }
      .newsletter-modal { padding: 10px; }
      .newsletter-modal__dialog {
        width: min(100%, 96vw);
        max-height: 92vh;
        border-radius: 14px;
      }
      .newsletter-modal__body { padding: 0 14px 18px; }
      .newsletter-article p { font-size: 15px; }
      .reviews-v2-carousel { width: 100%; }
      .reviews-v2-track { height: auto; }
      .review-slide { grid-template-columns: 1fr; padding: 0 6px; height: auto; }
      .review-slide .testimonial-media,
      .review-slide .testimonial-quote { height: auto !important; min-height: auto !important; }
      .reviews-marquee-wrap { width: 100%; }
      .testimonial-media { height: 200px !important; }
      .testimonial-quote { height: auto !important; min-height: auto !important; padding: 18px 16px 14px; }
      .footer-v2 .content { padding: 0px 14px 18px; }
      .footer-contact-strip { margin-top: 20px; padding: 14px; border-radius: 14px; }
      .footer-icon { width: 44px; height: 44px; font-size: 18px; flex: 0 0 44px; }
      .footer-main { margin-top: 24px; }
      .footer-form { width: 100%; }
      .breadcrumb-nav { padding: 6px 14px; font-size: 12px; }
    }

    @media (max-width: 480px) {
      :root { --topbar-offset: clamp(60px, 17vw, 74px); }
      .sticky-topbar { height: clamp(60px, 17vw, 74px); }
      .sticky-topbar .brand img {
        width: clamp(112px, 44vw, 160px);
        max-height: clamp(46px, 15vw, 62px);
      }
      .sticky-topbar .brand-tagline {
        font-size: 8px;
        white-space: normal;
        line-height: 1.15;
      }
      .page { width: calc(100% - 12px); margin: 8px auto; gap: 10px; }
      .content { padding: 16px 12px; }
      .hero .content { padding: 22px 14px 24px; }
      .hero .store-row { flex-direction: column; align-items: center; }
      .hero .store-btn { width: 165px; min-width: 165px; justify-content: center; }
      .hero .badge-row { flex-direction: column; align-items: stretch; }
      .hero .metric-pill { width: 100%; }
      .hero-visual { width: 95%; }
      .store-row { flex-direction: column; align-items: center; }
      .store-btn { width: 180px; justify-content: center; min-width: 180px; }
      .store-badge-img { height: 44px; }
      .stats-grid { grid-template-columns: 1fr; }
      .stat-box { flex-direction: column; text-align: left; padding: 14px 16px; gap: 8px; justify-content: flex-start; }
      .insight-thumb { height: 100px; }
      .insight-badge { width: 56px; height: 56px; font-size: 26px; }
      .insight-body { padding: 12px; }
      .reviews-v2-inner { padding: 16px 10px 14px; }
      .testimonial-media { height: 180px; }
      .testimonial-quote { padding: 14px 12px 12px; min-height: auto !important; height: auto !important; }
    }

    /* Very large screens: keep WHY section balanced */
    @media (min-width: 1600px) {
      .why { grid-template-columns: minmax(460px, 1.15fr) minmax(0, 1fr); column-gap: clamp(26px, 2.8vw, 48px); }
      .why-visual { width: min(100%, 760px); }
      .why-grid { gap: 20px; }
    }

    @media (min-width: 2000px) {
      .why { grid-template-columns: minmax(520px, 1.2fr) minmax(0, 1fr); column-gap: clamp(30px, 2.6vw, 58px); padding: 56px clamp(44px, 4vw, 84px) 60px; }
      .why-visual { width: min(100%, 860px); }
      .why-grid { gap: 22px; }
    }

    @media (min-width: 2560px) {
      .page { max-width: 3200px; width: calc(100% - 40px); }
      .why { max-width: 2360px; margin: 0 auto; grid-template-columns: minmax(980px, 1.25fr) minmax(700px, .85fr); column-gap: 38px; row-gap: 22px; padding: 52px 64px; }
      .why-visual { width: 100%; max-width: 1120px; justify-self: start; }
      .why-grid { width: min(100%, 780px); align-self: start; gap: 18px; justify-self: start; }
      .why-card { height: auto; padding: 24px 26px; }
    }

    @media (min-width: 3000px) {
      .page { max-width: none; width: calc(100% - 56px); }
      .why { max-width: 2700px; grid-template-columns: minmax(1120px, 1.35fr) minmax(760px, .9fr); column-gap: clamp(36px, 2vw, 64px); padding: 58px clamp(56px, 4vw, 120px) 64px; }
      .why-visual { width: 100%; max-width: 1240px; }
      .why-grid { width: min(100%, 820px); }
    }

    /* Reviews tuning for small laptops/tablets */
    @media (max-width: 1180px) and (min-width: 901px) {
      .reviews-v2-bottom { width: 100%; padding: 14px 10px 26px; }
      .reviews-v2-stage { min-height: auto; padding: 18px 10px 18px; }
      .reviews-v2-carousel { width: 100%; }
      .reviews-v2-track { height: auto; }
      .review-slide { grid-template-columns: 1fr 1fr; gap: 14px; height: auto; }
      .review-slide .testimonial-media,
      .review-slide .testimonial-quote { height: 260px !important; min-height: 260px !important; }
      .reviews-v2-controls { bottom: auto; }
    }

    @media (max-width: 900px) {
      .reviews-v2-bottom { width: 100%; padding: 12px 8px 22px; }
      .reviews-v2-stage { min-height: auto; padding: 16px 8px 16px; }
      .reviews-v2-carousel { width: 100%; }
      .reviews-v2-track { height: auto; }
      .review-slide { grid-template-columns: 1fr; gap: 12px; height: auto; }
      .review-slide .testimonial-media { height: 220px !important; min-height: 220px !important; }
      .review-slide .testimonial-quote { height: auto !important; min-height: auto !important; }
      .reviews-v2-controls { bottom: auto; }
    }

    /* Large/very large screens: make reviews video + comment cards bigger and equal */
    @media (min-width: 1600px) {
      .reviews-v2-bottom { width: min(100%, 1180px); }
      .reviews-v2-stage { min-height: clamp(300px, 22vw, 440px); padding: 12px 10px 16px; }
      .reviews-v2-carousel { width: 100%; }
      .review-slide { grid-template-columns: 1fr 1fr; gap: 20px; }
      .testimonial-media,
      .testimonial-quote { height: 280px; min-height: 280px; }
    }

    @media (min-width: 2000px) {
      .reviews-v2-bottom { width: min(100%, 1360px); }
      .reviews-v2-stage { min-height: clamp(320px, 20vw, 460px); padding: 14px 10px 18px; }
      .reviews-v2-carousel { width: 100%; }
      .testimonial-media,
      .testimonial-quote { height: 300px; min-height: 300px; }
    }

    @media (min-width: 2560px) {
      .reviews-v2-bottom { width: min(100%, 1520px); }
      .reviews-v2-stage { min-height: clamp(340px, 21vw, 500px); padding: 14px 12px 18px; }
      .reviews-v2-carousel { width: 100%; }
      .review-slide { gap: 24px; }
      .testimonial-media,
      .testimonial-quote { height: 320px; min-height: 320px; }
    }

    @media (min-width: 3000px) {
      .reviews-v2-bottom { width: min(100%, 1700px); }
      .reviews-v2-carousel { width: 100%; }
      .testimonial-media,
      .testimonial-quote { height: 340px; min-height: 340px; }
    }