/* ─── CSS Reset & Variables ─── */
    :root {
      --color-white: #F9F9FA;
      --color-black: #17171C;
      --color-dark-gray: #5E6172;
      --color-dark-gray-muted: #747684;
      --color-gray: #D1D2D6;
      --color-light-gray: #F9F9FA;
      --color-pink-50: #FFF0F2;
      --color-pink-100: #FFE2E8;
      --color-pink-200: #FFCAD6;
      --color-pink-300: #FF9FB4;
      --color-pink-400: #FF698D;
      --color-pink-500: #FF1E5A;
      --color-pink-600: #ED1156;
      --color-pink-700: #C80849;
      --color-pink-800: #A80944;
      --color-pink-900: #8F0C40;
      --inner-padding: 24px;
      --header-height: 72px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; height: 100%; }
    body {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      line-height: 1;
      color: var(--color-dark-gray);
      background: var(--color-white);
      min-height: 100%;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--color-black); text-decoration: underline; outline: none; }
    a:hover { text-decoration: none; }
    strong { font-weight: 500; color: var(--color-black); }
    ul { list-style: none; }

    /* ─── Typography ─── */
    .title {
      font-family: 'Archivo', sans-serif;
      line-height: 110%;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--color-black);
    }
    .title_h1 { font-size: 92px; word-spacing: -6px; }
    .title_h5 { font-size: 48px; letter-spacing: -0.03em; }
    .title_h6 { font-size: 30px; }
    .title_h7 { font-size: 24px; line-height: 140%; letter-spacing: -0.01em; word-spacing: -3px; }

    .title-section {
      font-size: 16px;
      line-height: 120%;
      color: var(--color-dark-gray);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .title-section::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      background: var(--color-pink-500);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .body-text_xxl { font-family: 'Archivo'; font-size: 32px; line-height: 130%; letter-spacing: -0.03em; color: var(--color-black); }
    .body-text_xl  { font-size: 20px; line-height: 130%; letter-spacing: -0.01em; }
    .body-text_l   { font-size: 16px; line-height: 120%; }
    .body-text_m   { font-size: 14px; line-height: 120%; letter-spacing: -0.011em; }

    /* ─── Layout ─── */
    .inner {
      min-width: 280px;
      max-width: 1280px;
      margin: 0 auto;
      padding-left: var(--inner-padding);
      padding-right: var(--inner-padding);
    }

    /* ─── Button ─── */
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      color: var(--color-white);
      background: var(--color-pink-500);
      border: none;
      border-radius: 2px;
      padding: 16px 28px;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, transform 0.15s;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }
    .button:hover {
      background: var(--color-pink-700);
      text-decoration: none;
      color: var(--color-white);
    }
    .button:active { transform: translateY(1px); }

    .button-outline {
      background: transparent;
      color: var(--color-black);
      border: 1px solid var(--color-black);
    }
    .button-outline:hover {
      background: var(--color-black);
      color: var(--color-white);
    }

    /* ─── HEADER ─── */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: rgba(249, 249, 250, 0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--color-gray);
      transition: box-shadow 0.3s;
    }
    .site-header.scrolled { box-shadow: 0 2px 24px rgba(23,23,28,0.08); }
    .site-header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--header-height);
    }
    .site-header__logo img { height: 32px; width: auto; }
    .site-header__nav { display: flex; align-items: center; gap: 32px; }
    .site-header__nav a {
      font-size: 14px;
      color: var(--color-dark-gray);
      text-decoration: none;
      transition: color 0.2s;
    }
    .site-header__nav a:hover { color: var(--color-pink-500); }
    .site-header__cta { flex-shrink: 0; }
    .site-header__cta .button { padding: 11px 20px; font-size: 14px; }

    /* ─── HERO SECTION ─── */
    .section-hero {
      padding: 160px 0 100px;
      position: relative;
      overflow: hidden;
      background: var(--color-white);
    }
    .section-hero::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(ellipse 70% 60% at 80% 20%, var(--color-pink-50) 0%, transparent 70%);
      pointer-events: none;
    }
    .section-hero__inner { position: relative; z-index: 1; }
    .section-hero__overline { margin-bottom: 28px; }
    .section-hero__headline {
      font-family: 'Archivo', sans-serif;
      font-size: 72px;
      font-weight: 500;
      line-height: 105%;
      letter-spacing: -0.03em;
      word-spacing: -4px;
      color: var(--color-black);
      max-width: 900px;
      margin-bottom: 20px;
    }
    .section-hero__subtitle {
      font-size: 18px;
      font-weight: 500;
      color: var(--color-pink-500);
      margin-bottom: 28px;
      letter-spacing: -0.01em;
    }
    .section-hero__description {
      font-size: 18px;
      line-height: 155%;
      color: var(--color-dark-gray);
      max-width: 760px;
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }
    .section-hero__subdescription {
      font-size: 14px;
      line-height: 145%;
      color: var(--color-dark-gray-muted);
      max-width: 700px;
      margin-bottom: 48px;
    }

    /* ─── METRICS SECTION ─── */
    .section-metrics {
      padding: 96px 0;
      background: var(--color-black);
      color: var(--color-white);
    }
    .section-metrics__header { margin-bottom: 16px; }
    .section-metrics__header .title-section { color: var(--color-gray); }
    .section-metrics__header .title-section::before { background: var(--color-pink-500); }
    .section-metrics__title {
      font-family: 'Archivo', sans-serif;
      font-size: 42px;
      font-weight: 500;
      line-height: 110%;
      letter-spacing: -0.02em;
      color: var(--color-white);
      margin: 16px 0 12px;
    }
    .section-metrics__subtitle {
      font-size: 16px;
      line-height: 150%;
      color: var(--color-gray);
      margin-bottom: 56px;
      max-width: 560px;
    }
    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 32px;
    }
    .metric-card {
      background: var(--color-black);
      padding: 40px 36px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: background 0.2s;
    }
    .metric-card:hover { background: #21212a; }
    .metric-card__value {
      font-family: 'Archivo', sans-serif;
      font-size: 64px;
      font-weight: 500;
      line-height: 100%;
      letter-spacing: -0.03em;
      color: var(--color-pink-500);
    }
    .metric-card__label {
      font-size: 16px;
      line-height: 145%;
      color: var(--color-gray);
    }
    .bottom-line {
      background: var(--color-pink-500);
      border-radius: 4px;
      padding: 32px 40px;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .bottom-line__icon {
      font-size: 28px;
      flex-shrink: 0;
    }
    .bottom-line__title {
      font-family: 'Archivo', sans-serif;
      font-size: 22px;
      font-weight: 500;
      color: var(--color-white);
      margin-bottom: 6px;
      letter-spacing: -0.01em;
    }
    .bottom-line__text {
      font-size: 15px;
      line-height: 150%;
      color: rgba(255,255,255,0.85);
    }

    /* ─── HOW IT WORKS ─── */
    .section-how {
      padding: 96px 0;
      background: var(--color-white);
    }
    .section-how__header { margin-bottom: 64px; }
    .section-how__title {
      font-family: 'Archivo', sans-serif;
      font-size: 48px;
      font-weight: 500;
      letter-spacing: -0.03em;
      color: var(--color-black);
      margin-top: 16px;
    }
    .how-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
    .how-card {
      border: 1px solid var(--color-gray);
      border-radius: 4px;
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .how-card:hover {
      border-color: var(--color-pink-300);
      box-shadow: 0 4px 24px rgba(255,30,90,0.07);
    }
    .how-card__screenshot {
      background: var(--color-light-gray);
      border-bottom: 1px solid var(--color-gray);
      height: 240px;
      overflow: hidden;
      position: relative;
      display: block;
    }
    .how-card__screenshot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top left;
      display: block;
      transition: transform 0.4s ease;
    }
    .how-card:hover .how-card__screenshot img {
      transform: scale(1.03);
    }
    .how-card__body { padding: 32px 32px 36px; }
    .how-card__index {
      font-family: 'Archivo', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-pink-500);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .how-card__title {
      font-family: 'Archivo', sans-serif;
      font-size: 22px;
      font-weight: 500;
      color: var(--color-black);
      line-height: 130%;
      letter-spacing: -0.01em;
      margin-bottom: 14px;
    }
    .how-card__desc {
      font-size: 15px;
      line-height: 160%;
      color: var(--color-dark-gray);
    }

    /* ─── APPROACH SECTIONS ─── */
    .section-approach {
      padding: 96px 0;
    }
    .section-approach--light { background: var(--color-white); }
    .section-approach--gray  { background: #F2F2F4; }

    .section-approach__layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .section-approach__label { margin-bottom: 16px; }
    .section-approach__title {
      font-family: 'Archivo', sans-serif;
      font-size: 40px;
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--color-black);
      line-height: 110%;
      margin-bottom: 24px;
    }
    .section-approach__intro {
      font-size: 16px;
      line-height: 160%;
      color: var(--color-dark-gray);
      margin-bottom: 40px;
    }
    .approach-list { display: flex; flex-direction: column; gap: 16px; }
    .approach-list__item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .approach-list__bullet {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--color-pink-100);
      border: 1.5px solid var(--color-pink-300);
      flex-shrink: 0;
      margin-top: 2px;
      position: relative;
    }
    .approach-list__bullet::after {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: var(--color-pink-500);
    }
    .approach-list__text { font-size: 15px; line-height: 155%; color: var(--color-dark-gray); }

    /* Tables */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      border: 1px solid var(--color-gray);
      border-radius: 4px;
      overflow: hidden;
    }
    .data-table thead tr {
      background: var(--color-black);
      color: var(--color-white);
    }
    .data-table thead th {
      padding: 14px 18px;
      text-align: left;
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .data-table tbody tr:nth-child(even) { background: #F5F5F7; }
    .data-table tbody tr:hover { background: var(--color-pink-50); }
    .data-table td {
      padding: 14px 18px;
      border-bottom: 1px solid var(--color-gray);
      color: var(--color-dark-gray);
      line-height: 145%;
      vertical-align: top;
    }
    .data-table tbody tr:last-child td { border-bottom: none; }
    .data-table td strong { color: var(--color-black); }
    .tag {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 2px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: var(--color-pink-100);
      color: var(--color-pink-700);
    }
    .tag--gray { background: #EBEBED; color: var(--color-dark-gray); }
    .table-title {
      font-family: 'Archivo', sans-serif;
      font-size: 18px;
      font-weight: 500;
      color: var(--color-black);
      margin-bottom: 16px;
      margin-top: 40px;
    }
    .table-title:first-child { margin-top: 0; }

    /* ─── ROADMAP ─── */
    .section-roadmap {
      padding: 96px 0;
      background: var(--color-black);
      color: var(--color-white);
    }
    .section-roadmap .title-section { color: var(--color-gray); }
    .section-roadmap .title-section::before { background: var(--color-pink-500); }
    .section-roadmap__title {
      font-family: 'Archivo', sans-serif;
      font-size: 48px;
      font-weight: 500;
      letter-spacing: -0.03em;
      color: var(--color-white);
      margin: 16px 0 48px;
    }
    .roadmap-steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 32px;
    }
    .roadmap-step {
      background: var(--color-black);
      padding: 36px 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: background 0.2s;
      position: relative;
    }
    .roadmap-step:hover { background: #1e1e26; }
    .roadmap-step__num {
      font-family: 'Archivo', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-pink-500);
      letter-spacing: 0.06em;
    }
    .roadmap-step__title {
      font-family: 'Archivo', sans-serif;
      font-size: 18px;
      font-weight: 500;
      color: var(--color-white);
      line-height: 130%;
    }
    .roadmap-step__desc {
      font-size: 13px;
      line-height: 155%;
      color: var(--color-gray);
    }
    .roadmap-highlight {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--color-pink-500);
      color: var(--color-white);
      border-radius: 4px;
      padding: 16px 28px;
      font-family: 'Archivo', sans-serif;
      font-size: 18px;
      font-weight: 500;
    }
    .roadmap-highlight__icon { font-size: 22px; }

    /* ─── CTA SECTION ─── */
    .section-cta {
      padding: 96px 0;
      background: var(--color-white);
    }
    .section-cta__layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .section-cta__title {
      font-family: 'Archivo', sans-serif;
      font-size: 48px;
      font-weight: 500;
      letter-spacing: -0.03em;
      color: var(--color-black);
      line-height: 110%;
      margin-bottom: 32px;
    }
    .cta-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
    .cta-list__item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 16px;
      line-height: 150%;
      color: var(--color-dark-gray);
    }
    .cta-list__check {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-pink-500);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .cta-list__check svg { width: 12px; height: 12px; fill: none; stroke: white; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .cta-contact { border-top: 1px solid var(--color-gray); padding-top: 32px; margin-top: 8px; }
    .cta-contact__label { font-size: 13px; color: var(--color-dark-gray-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
    .cta-contact__email { font-family: 'Archivo', sans-serif; font-size: 22px; font-weight: 500; color: var(--color-black); text-decoration: none; display: block; margin-bottom: 6px; }
    .cta-contact__email:hover { color: var(--color-pink-500); }
    .cta-contact__website { font-size: 14px; color: var(--color-dark-gray-muted); text-decoration: none; }
    .cta-contact__website:hover { color: var(--color-pink-500); }

    .cta-visual {
      background: var(--color-black);
      border-radius: 4px;
      padding: 52px 44px;
      color: var(--color-white);
    }
    .cta-visual__overline {
      font-size: 13px;
      color: var(--color-pink-400);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 20px;
    }
    .cta-visual__heading {
      font-family: 'Archivo', sans-serif;
      font-size: 28px;
      font-weight: 500;
      color: var(--color-white);
      line-height: 130%;
      letter-spacing: -0.02em;
      margin-bottom: 28px;
    }
    .cta-visual__items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
    .cta-visual__item {
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 15px;
      color: var(--color-gray);
    }
    .cta-visual__item::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-pink-500);
      flex-shrink: 0;
    }

    /* ─── FOOTER ─── */
    .site-footer {
      background: var(--color-black);
      padding: 40px 0;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .site-footer__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .site-footer__logo img { height: 26px; filter: brightness(10); }
    .site-footer__copy { font-size: 13px; color: #555669; }
    .site-footer__link { font-size: 13px; color: #555669; text-decoration: none; }
    .site-footer__link:hover { color: var(--color-gray); }

    /* ─── DIVIDER ─── */
    .section-divider {
      height: 1px;
      background: var(--color-gray);
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 1024px) {
      .section-hero__headline { font-size: 56px; }
      .metrics-grid { grid-template-columns: repeat(2, 1fr); }
      .metric-card__value { font-size: 52px; }
      .how-grid { grid-template-columns: 1fr; }
      .section-approach__layout { grid-template-columns: 1fr; gap: 48px; }
      .roadmap-steps { grid-template-columns: repeat(3, 1fr); }
      .section-cta__layout { grid-template-columns: 1fr; gap: 48px; }
    }

    @media (max-width: 767px) {
      :root { --header-height: 60px; }
      .section-hero { padding: 100px 0 64px; }
      .section-hero__headline { font-size: 38px; }
      .section-hero__description { font-size: 16px; }
      .section-metrics { padding: 64px 0; }
      .section-metrics__title { font-size: 30px; }
      .metrics-grid { grid-template-columns: 1fr 1fr; }
      .metric-card { padding: 28px 20px; }
      .metric-card__value { font-size: 40px; }
      .section-how { padding: 64px 0; }
      .section-how__title { font-size: 34px; }
      .section-approach { padding: 64px 0; }
      .section-approach__title { font-size: 28px; }
      .section-roadmap { padding: 64px 0; }
      .section-roadmap__title { font-size: 34px; }
      .roadmap-steps { grid-template-columns: 1fr 1fr; }
      .section-cta { padding: 64px 0; }
      .section-cta__title { font-size: 34px; }
      .cta-visual { padding: 32px 24px; }
      .cta-visual__heading { font-size: 22px; }
      .site-header__nav { display: none; }
      .bottom-line { flex-direction: column; gap: 12px; }
      .how-card__screenshot { height: 180px; }
    }

    @media (max-width: 480px) {
      .metrics-grid { grid-template-columns: 1fr; }
      .roadmap-steps { grid-template-columns: 1fr; }
      .section-hero__headline { font-size: 32px; }
    }

    /* ─── Animations ─── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-up {
      animation: fadeUp 0.6s ease both;
    }
    .animate-fade-up--delay-1 { animation-delay: 0.1s; }
    .animate-fade-up--delay-2 { animation-delay: 0.22s; }
    .animate-fade-up--delay-3 { animation-delay: 0.34s; }
    .animate-fade-up--delay-4 { animation-delay: 0.46s; }

    /* ─── Scrollbar thin ─── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--color-gray); border-radius: 4px; }