@font-face {
        font-family: "Pretendard";
        src: url("assets/fonts/Pretendard-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Pretendard";
        src: url("assets/fonts/Pretendard-Medium.woff2") format("woff2");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Pretendard";
        src: url("assets/fonts/Pretendard-SemiBold.woff2") format("woff2");
        font-weight: 600;
        font-style: normal;
        font-display: swap;
      }

      :root {
        --page-bg: #ffffff;
        --surface: #f5f5f5;
        --surface-soft: #e8e8e8;
        --surface-dark: #0f0f0f;
        --text: #0f0f0f;
        --text-secondary: #333333;
        --text-tertiary: #666666;
        --text-inverted: #ffffff;
        --border: #e0e0e0;
        --border-strong: #bbbbbb;
        --accent: #d1ff99;
        --accent-strong: #f2ff67;
        --radius-xl: 24px;
        --radius-lg: 16px;
        --radius-md: 8px;
        --shadow-soft: 0 20px 60px rgba(15, 15, 15, 0.08);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-width: 320px;
        background: var(--page-bg);
        color: var(--text);
        font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          sans-serif;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

      h1,
      h2,
      h3,
      p,
      ul {
        margin: 0;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button {
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        padding: 0;
        cursor: pointer;
      }

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

      .page {
        overflow-x: clip;
      }

      .section,
      .site-footer {
        scroll-margin-top: 24px;
      }

      .container-1440,
      .container-1400,
      .container-1012 {
        width: min(100%, calc(100vw - 48px));
        margin: 0 auto;
      }

      .container-1440 {
        max-width: 1440px;
      }

      .container-1400 {
        max-width: 1400px;
      }

      .container-1012 {
        max-width: 1012px;
      }

      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.55s ease,
          transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
      }

      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .delay-1 {
        --reveal-delay: 80ms;
      }

      .delay-2 {
        --reveal-delay: 160ms;
      }

      .delay-3 {
        --reveal-delay: 240ms;
      }

      .delay-4 {
        --reveal-delay: 320ms;
      }

      @keyframes floatPulse {
        0%,
        100% {
          transform: translateX(var(--float-x, 0px)) translateY(0);
        }

        50% {
          transform: translateX(var(--float-x, 0px)) translateY(-4px);
        }
      }

      @keyframes sponsorMarquee {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(-50%);
        }
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 40;
        height: 80px;
        border-bottom: 1px solid rgba(224, 224, 224, 0.72);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .site-header__inner {
        display: flex;
        align-items: center;
        gap: 80px;
        justify-content: space-between;
        width: min(100%, calc(100vw - 80px));
        max-width: 1400px;
        height: 100%;
        margin: 0 auto;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
      }

      .brand__composite {
        position: relative;
        display: block;
        width: 140px;
        height: 24px;
      }

      .brand__image {
        display: block;
        width: 100%;
        height: 100%;
      }

      .brand__composite--footer {
        width: 162px;
        height: 28px;
      }

      .site-nav {
        display: flex;
        align-items: center;
        gap: 20px;
        flex: 1 1 auto;
        min-width: 0;
      }

      .site-nav__link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 8px 16px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        color: var(--text);
        transition: opacity 180ms ease;
      }

      .site-nav__link:hover {
        opacity: 0.64;
      }

      .site-nav__arrow {
        display: block;
        width: auto;
        height: 9px;
        flex-shrink: 0;
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 24px;
        flex-shrink: 0;
      }

      .language-switch {
        position: relative;
      }

      .language-switch__trigger {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 40px;
        list-style: none;
        cursor: pointer;
      }

      .language-switch__trigger::-webkit-details-marker {
        display: none;
      }

      .language-switch[open] .site-nav__arrow {
        transform: rotate(180deg);
      }

      .language-switch__icon {
        width: 24px;
        height: 24px;
      }

      .language-switch__text {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
      }

      .language-switch__menu {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        display: flex;
        flex-direction: column;
        min-width: 84px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 18px 44px rgba(15, 15, 15, 0.12);
        z-index: 20;
      }

      .language-switch__option {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--text);
        transition: background-color 180ms ease, opacity 180ms ease;
      }

      .language-switch__option:hover {
        background: var(--surface);
      }

      .language-switch__option[aria-current="page"] {
        background: var(--surface);
        pointer-events: none;
      }

      .header-cta {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: var(--radius-md);
        transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease,
          color 180ms ease, box-shadow 180ms ease;
        white-space: nowrap;
      }

      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(15, 15, 15, 0.1);
      }

      .btn--small {
        min-width: 60px;
        padding: 8px 12px;
        min-height: 40px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
      }

      .btn--medium {
        min-width: 60px;
        min-height: 48px;
        padding: 8px 32px;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
      }

      .btn--dark {
        background: #000000;
        color: #ffffff;
      }

      .btn--light {
        border: 1px solid var(--border-strong);
        color: var(--text-tertiary);
        background: #ffffff;
      }

      .btn--outline {
        border: 1px solid #000000;
        color: #000000;
        background: transparent;
      }

      .landing {
        padding-top: 128px;
      }

      .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .hero__top {
        display: flex;
        flex-direction: column;
        gap: 64px;
      }

      .hero__copy {
        display: grid;
        grid-template-columns: minmax(0, 670px) minmax(0, 572px);
        justify-content: space-between;
        gap: 60px 160px;
        align-items: start;
      }

      .hero__title {
        font-size: 64px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.96px;
        color: var(--text);
      }

      .hero__aside {
        display: flex;
        flex-direction: column;
        gap: 32px;
        max-width: 572px;
        padding-top: 2px;
      }

      .hero__description {
        font-size: 20px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--text-tertiary);
      }

      .hero__actions {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }

      .hero-visual {
        position: relative;
        width: 100%;
        aspect-ratio: 18 / 7;
        min-height: 320px;
        border-radius: var(--radius-xl);
        overflow: hidden;
        background: #aecce4;
      }

      .hero-visual__bg {
        position: absolute;
        inset: 0;
      }

      .hero-visual__bg--blur {
        left: 50%;
        top: 50%;
        width: 107.5%;
        height: 184.28%;
        transform: translate(-49.3%, -26.8%);
        filter: blur(50px);
        object-fit: cover;
        opacity: 0.8;
      }

      .hero-visual__bg--overlay {
        left: 0;
        top: -53.21%;
        width: 100.28%;
        height: 206.25%;
        object-fit: cover;
        mix-blend-mode: overlay;
        opacity: 0.64;
      }

      .hero-character {
        position: absolute;
        overflow: hidden;
      }

      .hero-character img {
        position: absolute;
        inset: 0;
        height: 100%;
        max-width: none;
      }

      .hero-character--left {
        left: 23.54%;
        top: 14.27%;
        width: 21.94%;
        height: 102.45%;
      }

      .hero-character--left img {
        width: 181.56%;
        left: -35.82%;
        top: 0;
      }

      .hero-character--center {
        left: 50%;
        top: 6.79%;
        width: 26.44%;
        height: 94.6%;
        transform: translateX(-50%);
      }

      .hero-character--center img {
        width: 139.13%;
        left: -17.21%;
        top: 0;
      }

      .hero-character--right {
        right: 23.54%;
        top: 15.09%;
        width: 21.89%;
        height: 102.19%;
      }

      .hero-character--right img {
        width: 181.56%;
        left: -36.88%;
        top: 0;
      }

      .sponsor-strip {
        --sponsor-gap: 20px;
        --sponsor-duration: 36s;
        width: 100%;
        margin-top: 20px;
        padding: 40px;
        overflow: hidden;
      }

      .sponsor-strip__marquee {
        display: flex;
        align-items: center;
        width: max-content;
        min-width: 100%;
        min-height: 40px;
        will-change: transform;
        animation: sponsorMarquee var(--sponsor-duration) linear infinite;
      }

      .sponsor-strip__track {
        display: flex;
        align-items: center;
        gap: var(--sponsor-gap);
        flex-shrink: 0;
        padding-inline-end: var(--sponsor-gap);
      }

      .sponsor-logo {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: auto;
        height: auto;
        overflow: visible;
      }

      .sponsor-logo--square {
        width: auto;
      }

      .sponsor-logo img {
        display: block;
        width: auto;
        height: auto;
        max-width: none;
        max-height: 40px;
      }

      @media (prefers-reduced-motion: reduce) {
        .sponsor-strip {
          overflow-x: auto;
          overflow-y: hidden;
        }

        .sponsor-strip__marquee {
          width: max-content;
          min-width: 100%;
          animation: none;
        }

        .sponsor-strip__track {
          padding-inline-end: var(--sponsor-gap);
        }

        .sponsor-strip__track--alt {
          display: none;
        }
      }

      .hero-ratings {
        display: flex;
        align-items: center;
        gap: 60px;
        margin-top: 21px;
        padding: 20px;
      }

      .rating-card {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
      }

      .rating-card__stars {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .rating-card__stars img {
        width: 18px;
        height: 18px;
      }

      .rating-card__meta {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .rating-card__meta img {
        width: 24px;
        height: 24px;
      }

      .rating-card__score {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 16px;
        line-height: 1.5;
      }

      .rating-card__score strong {
        font-weight: 600;
      }

      .section {
        margin-top: 160px;
      }

      .feature-pairs {
        display: flex;
        flex-direction: column;
        gap: 80px;
      }

      .feature-row {
        display: grid;
        grid-template-columns: minmax(320px, 550px) minmax(420px, 720px);
        justify-content: space-between;
        align-items: center;
        gap: 64px 130px;
      }

      .feature-row--reverse {
        grid-template-columns: minmax(420px, 720px) minmax(320px, 550px);
      }

      .feature-copy {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .feature-copy h2 {
        font-size: 40px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.6px;
      }

      .feature-list {
        display: flex;
        flex-direction: column;
      }

      .feature-item {
        border-bottom: 1px solid var(--border);
        padding: 24px 0;
      }

      .feature-item__head {
        display: flex;
        align-items: center;
        gap: 20px;
        width: 100%;
        text-align: left;
      }

      .feature-item__head h3 {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: -0.3px;
      }

      .feature-item__icon {
        position: relative;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .feature-item__icon::before,
      .feature-item__icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 1.5px;
        background: #000000;
        border-radius: 999px;
        transform: translate(-50%, -50%);
      }

      .feature-item__icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
      }

      .feature-item[data-open="true"] .feature-item__icon {
        transform: rotate(45deg);
      }

      .feature-item__panel {
        overflow: hidden;
        margin-top: 20px;
        opacity: 1;
        transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity 220ms ease,
          margin-top 280ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .feature-item[data-open="false"] .feature-item__panel {
        margin-top: 0;
        opacity: 0;
      }

      .feature-item__panel[hidden] {
        display: block;
      }

      .feature-item__body {
        overflow: hidden;
        font-size: 16px;
        line-height: 1.5;
        color: var(--text-secondary);
      }

      .panel {
        position: relative;
        width: min(100%, 720px);
        aspect-ratio: 18 / 13;
        min-height: 320px;
        border-radius: var(--radius-xl);
        overflow: hidden;
        background: #ffffff;
      }

      .panel--flat {
        display: block;
      }

      .panel__flat-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .panel__backdrop {
        position: absolute;
        inset: 0;
      }

      .panel__backdrop img {
        position: absolute;
        inset: 0;
        max-width: none;
      }

      .panel__glass {
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.78);
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(20px);
        border-radius: var(--radius-xl);
      }

      .panel__glass--large {
        left: 9.44%;
        top: 10.77%;
        width: 72.36%;
        height: 71.15%;
        background: rgba(188, 208, 228, 0.4);
      }

      .panel__glass--medium {
        left: 12.92%;
        top: 14.62%;
        width: 74.17%;
        height: 70.38%;
      }

      .mini-card {
        position: absolute;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 16px;
        border: 1px solid rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.86);
        border-radius: var(--radius-md);
        box-shadow: 0 12px 28px rgba(15, 15, 15, 0.06);
      }

      .mini-card--small {
        padding: 12px;
      }

      .mini-avatar {
        width: 31px;
        height: 31px;
        border-radius: 999px;
        object-fit: cover;
        flex-shrink: 0;
      }

      .mini-card__text {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .mini-card__title {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.15;
      }

      .mini-card__flag {
        width: 17px;
        height: 12px;
        object-fit: contain;
      }

      .mini-card__subtitle {
        width: 88px;
        font-size: 10px;
        line-height: 1.15;
        color: #000000;
      }

      .mini-card__subtitle--wide {
        width: auto;
        white-space: nowrap;
      }

      .glow-pill {
        position: absolute;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 8px 16px 8px 8px;
        border-radius: 999px;
        background: var(--accent);
        font-size: 10px;
        font-weight: 500;
        line-height: 1.15;
        --float-x: 0px;
        animation: floatPulse 3s ease-in-out infinite;
      }

      .glow-pill--compact {
        gap: 6px;
        padding: 16px;
        border-radius: var(--radius-md);
      }

      .glow-pill__icon {
        width: 14px;
        height: 14px;
      }

      .glow-pill__icon--large {
        width: 30px;
        height: 30px;
      }

      .network-panel .panel__backdrop--primary img {
        width: 131.67%;
        height: 101.15%;
        left: -18.13%;
        top: -0.58%;
        object-fit: cover;
      }

      .network-panel .panel__backdrop--secondary img {
        width: 198.06%;
        height: 182.88%;
        left: -49.03%;
        top: -41.54%;
        transform: scaleY(-1) rotate(180deg);
        object-fit: cover;
        opacity: 0.95;
      }

      .network-panel .mini-card--a {
        left: 15.97%;
        top: 20.96%;
      }

      .network-panel .mini-card--b {
        left: 36.11%;
        top: 20.96%;
      }

      .network-panel .mini-card--c {
        left: 62.08%;
        top: 21.35%;
      }

      .network-panel .mini-card--d {
        left: 28.75%;
        top: 36.54%;
      }

      .network-panel .mini-card--e {
        left: 55.83%;
        top: 36.54%;
      }

      .network-panel .mini-card--f {
        left: 16%;
        top: 66.54%;
      }

      .network-panel .mini-card--g {
        left: 50.56%;
        top: 66.54%;
      }

      .network-panel .glow-pill {
        left: 44.58%;
        top: 52.31%;
        --float-x: -50%;
      }

      .network-panel .status-dot {
        position: absolute;
        width: 22px;
        height: 22px;
        padding: 2px;
        border-radius: 999px;
        background: transparent;
      }

      .network-panel .status-dot--left {
        left: calc(50% - 14px);
        top: 64.42%;
      }

      .network-panel .status-dot--right {
        left: calc(50% + 160px);
        top: 64.42%;
      }

      .network-panel .network-line {
        position: absolute;
        border: 1px dashed rgba(255, 255, 255, 0.9);
        opacity: 0.92;
      }

      .network-panel .network-line--top-left {
        left: 32.78%;
        top: 46.92%;
        width: 16.25%;
        height: 14.81%;
        border-right: 0;
        border-bottom: 0;
        border-radius: 24px 0 0 0;
      }

      .network-panel .network-line--top-right {
        left: 49.03%;
        top: 46.92%;
        width: 17.08%;
        height: 14.81%;
        border-left: 0;
        border-bottom: 0;
        border-radius: 0 24px 0 0;
      }

      .network-panel .network-line--bottom-left {
        left: 32.78%;
        top: 54.23%;
        width: 16.25%;
        height: 14.81%;
        border-right: 0;
        border-top: 0;
        border-radius: 0 0 0 24px;
      }

      .network-panel .network-line--bottom-right {
        left: 49.03%;
        top: 54.23%;
        width: 17.08%;
        height: 14.81%;
        border-left: 0;
        border-top: 0;
        border-radius: 0 0 24px 0;
      }

      .translation-panel .panel__backdrop--primary img {
        width: 100.01%;
        height: 207.69%;
        left: -0.14%;
        top: 0;
        transform: scaleY(-1) rotate(180deg);
        object-fit: cover;
      }

      .translation-panel .network-line-stroke {
        position: absolute;
        object-fit: contain;
      }

      .translation-panel .network-line-stroke--top-mid {
        left: 59.31%;
        top: 48.85%;
        width: 0.3%;
        height: 5.38%;
        transform: rotate(90deg);
      }

      .translation-panel .network-line-stroke--top-right {
        left: 54.31%;
        top: 37.5%;
        width: 7.64%;
        height: 6.15%;
        transform: rotate(90deg);
      }

      .translation-panel .network-line-stroke--bottom-right {
        left: 54.31%;
        top: 53.65%;
        width: 7.64%;
        height: 6.15%;
        transform: rotate(-90deg) scaleY(-1);
      }

      .translation-panel .network-line-stroke--top-left {
        left: 39.72%;
        top: 37.5%;
        width: 7.64%;
        height: 6.15%;
        transform: rotate(90deg) scaleY(-1);
      }

      .translation-panel .network-line-stroke--bottom-left {
        left: 39.72%;
        top: 53.65%;
        width: 7.64%;
        height: 6.15%;
        transform: rotate(-90deg);
      }

      .translation-panel .network-line-stroke--mid-left {
        left: 36.11%;
        top: 48.85%;
        width: 0.3%;
        height: 5.38%;
        transform: rotate(90deg);
      }

      .translation-panel .mini-card--korea {
        left: 16.81%;
        top: 43.08%;
      }

      .translation-panel .mini-card--usa {
        left: 28.89%;
        top: 26.92%;
      }

      .translation-panel .mini-card--canada {
        left: 51.81%;
        top: 26.92%;
      }

      .translation-panel .mini-card--china {
        left: 28.89%;
        top: 59.42%;
      }

      .translation-panel .mini-card--spain {
        left: 51.81%;
        top: 59.42%;
      }

      .translation-panel .mini-card--japan {
        left: 62.36%;
        top: 43.08%;
      }

      .translation-panel .glow-pill {
        left: 40.28%;
        top: 43.08%;
        gap: 6px;
        padding: 12px 16px;
        border-radius: var(--radius-md);
      }

      .translation-panel .glow-pill__text {
        display: flex;
        flex-direction: column;
      }

      .translation-panel .glow-pill__text span {
        display: block;
      }

      .control-section {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }

      .control-section__title {
        text-align: center;
        font-size: 40px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.6px;
      }

      .control-shell {
        display: grid;
        grid-template-columns: minmax(340px, 524px) minmax(420px, 720px);
        justify-content: space-between;
        gap: 40px 80px;
        padding: 33px 33px 33px 49px;
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--surface);
      }

      .control-copy {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 519px;
      }

      .control-copy__lead {
        max-width: 524px;
        padding-top: 20px;
        font-size: 28px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: -0.42px;
      }

      .control-list {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }

      .control-list__item {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .control-list__item h3 {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: -0.3px;
      }

      .control-list__item p {
        font-size: 16px;
        line-height: 1.5;
        color: var(--text-tertiary);
      }

      .control-visual {
        position: relative;
        width: min(100%, 720px);
        aspect-ratio: 18 / 13;
        border-radius: var(--radius-xl);
        overflow: hidden;
        background: var(--surface-soft);
      }

      .control-visual__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .control-visual__ring {
        position: absolute;
        inset: 0;
      }

      .control-visual__ring--outer {
        left: 22.78%;
        top: 14.62%;
        width: 54.44%;
        height: 75.38%;
      }

      .control-visual__ring--middle {
        left: 35.97%;
        top: 32.88%;
        width: 28.06%;
        height: 38.85%;
      }

      .control-visual__ring--inner {
        left: 29.58%;
        top: 23.85%;
        width: 40%;
        height: 56.92%;
      }

      .control-visual__ring img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .control-visual__arc {
        position: absolute;
        width: 16.11%;
        height: 39.32%;
      }

      .control-visual__arc--right {
        left: 50.14%;
        top: 25.96%;
      }

      .control-visual__arc--left {
        left: 34.03%;
        top: 25.96%;
        transform: scaleY(-1) rotate(180deg);
      }

      .control-visual__center {
        position: absolute;
        left: 41.67%;
        top: 40.77%;
        width: 16.67%;
        height: 23.08%;
        border-radius: 999px;
        background: #000000;
      }

      .control-visual__symbol {
        position: absolute;
        left: 45.56%;
        top: 47.5%;
        width: 9.03%;
        height: 9.42%;
      }

      .control-visual__label {
        position: absolute;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 5px 10px 5px 5px;
        border-radius: 999px;
        background: var(--accent);
        font-size: 14px;
        line-height: 1.5;
      }

      .control-visual__label--top {
        left: 38.19%;
        top: 21.73%;
      }

      .control-visual__label--left {
        left: 21.25%;
        top: 61.15%;
      }

      .control-visual__label--right {
        left: 64.03%;
        top: 61.15%;
      }

      .control-visual__label--bottom {
        left: 43.61%;
        top: 85.96%;
        padding: 10px 24px;
        background: var(--accent-strong);
      }

      .control-visual__label img {
        width: 18px;
        height: 18px;
      }

      .control-visual__title {
        position: absolute;
        left: 50%;
        top: 5.77%;
        transform: translateX(-50%);
        font-size: 18px;
        font-weight: 600;
        line-height: 1.5;
      }

      .control-visual__polygon {
        position: absolute;
        width: 16px;
        height: 16px;
      }

      .control-visual__polygon--right {
        left: 68.22%;
        top: 41.96%;
        transform: rotate(165deg);
      }

      .control-visual__polygon--bottom {
        left: 49.69%;
        top: 79.23%;
        transform: rotate(-90deg);
      }

      .control-visual__polygon--left {
        left: 28.61%;
        top: 44.62%;
        transform: rotate(15deg);
      }

      .control-updates {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px;
      }

      .control-update {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        min-height: 151px;
      }

      .control-update__icon {
        display: block;
        align-self: flex-start;
        width: auto;
        height: 32px;
        flex: 0 0 auto;
      }

      .control-update h3 {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: -0.3px;
      }

      .control-update p {
        font-size: 16px;
        line-height: 1.5;
        color: var(--text-secondary);
      }

      .reviews {
        padding: 40px;
        border-radius: var(--radius-xl);
        background: #000000;
        color: #ffffff;
      }

      .reviews__title {
        text-align: center;
        font-size: 40px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.6px;
      }

      .reviews__tabs {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
        margin-top: 60px;
      }

      .reviews__tab {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
        opacity: 0.5;
      }

      .reviews__tab::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: #ffffff;
      }

      .reviews__tab--active {
        opacity: 1;
      }

      .reviews__tab img {
        display: block;
        width: auto;
        height: auto;
        max-height: 24px;
        max-width: 100%;
        object-fit: contain;
      }

      .reviews__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 24px;
        margin-top: 24px;
      }

      .reviews__quote {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 32px;
        border-radius: var(--radius-lg);
        background: #ffffff;
        color: #000000;
      }

      .reviews__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        padding: 8px 16px;
        border-radius: var(--radius-md);
        background: #000000;
        color: #ffffff;
        font-size: 13px;
        line-height: 1.5;
      }

      .reviews__quote-text {
        font-size: 24px;
        font-weight: 400;
        line-height: 1.15;
        letter-spacing: -0.36px;
      }

      .reviews__person {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .reviews__person strong {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
      }

      .reviews__person span {
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-tertiary);
      }

      .reviews__image {
        min-height: 309px;
        border-radius: var(--radius-lg);
        overflow: hidden;
      }

      .reviews__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .stats__title,
      .compliance__title {
        text-align: center;
        font-size: 40px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.6px;
      }

      .stats__grid {
        display: grid;
        grid-template-columns: 376px 496px 496px;
        gap: 16px;
        margin-top: 40px;
      }

      .stats__column {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .stats-card {
        border-radius: 16px;
        background: var(--surface);
        overflow: hidden;
      }

      .stats-card--metric {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-height: 184px;
        padding: 24px;
      }

      .stats-card__value {
        font-size: 52px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: -0.78px;
      }

      .stats-card__label {
        font-size: 20px;
        line-height: 1.5;
        color: var(--text-tertiary);
      }

      .stats-card--flags {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 406px;
        padding: 24px;
      }

      .flag-grid {
        display: grid;
        grid-template-columns: repeat(5, 67px);
        gap: 8px 12px;
      }

      .flag-grid img {
        width: 67px;
        height: 48px;
        object-fit: contain;
      }

      .stats-card--security {
        display: flex;
        flex-direction: column;
        gap: 40px;
        height: 606px;
        padding: 24px;
      }

      .stats-card--security h3,
      .stats-card--crm h3 {
        font-size: 32px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.48px;
      }

      .stats-card__photo {
        flex: 1 1 auto;
        min-height: 0;
        border-radius: var(--radius-md);
        overflow: hidden;
      }

      .stats-card__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .stats-card--pair {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .stats-card--crm {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 406px;
        padding: 24px;
      }

      .stats-card--crm p {
        font-size: 20px;
        line-height: 1.5;
        color: var(--text-tertiary);
      }

      .crm-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
      }

      .crm-item {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .crm-item__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 70px;
        border-radius: var(--radius-md);
        background: #ffffff;
        overflow: hidden;
        flex-shrink: 0;
      }

      .crm-item__logo img {
        width: auto;
        max-width: 80px;
        max-height: 40px;
      }

      .crm-item__logo--wordmark {
        font-size: 18px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.2px;
        color: #1f1f1f;
        text-transform: lowercase;
      }

      .crm-item__copy {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .crm-item__copy strong {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
      }

      .crm-item__copy span {
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-tertiary);
      }

      .compliance__badges {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
        margin-top: 40px;
        flex-wrap: wrap;
      }

      .compliance-badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 11px;
      }

      .compliance-badge__disc {
        width: 100px;
        height: 100px;
      }

      .compliance-badge__disc img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .compliance-badge__stack {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: #ffffff;
        overflow: hidden;
      }

      .compliance-badge__window {
        position: absolute;
        overflow: hidden;
      }

      .compliance-badge__window--gdpr {
        left: 17px;
        top: 17px;
        width: 66px;
        height: 66px;
      }

      .compliance-badge__window--truste {
        left: 18.75px;
        top: 18.75px;
        width: 62.5px;
        height: 62.5px;
        border-radius: 999px;
      }

      .compliance-badge__logo {
        display: block;
      }

      .compliance-badge__logo--gdpr {
        width: 100%;
        height: 100%;
      }

      .compliance-badge__logo--truste {
        position: absolute;
        left: -14.36px;
        top: 9.86px;
        width: 91.21px;
        height: 47.77px;
        max-width: none;
      }

      .compliance-badge__stack img {
        image-rendering: auto;
      }

      .compliance-badge span {
        font-size: 14px;
        line-height: 1.5;
      }

      .faq {
        display: grid;
        grid-template-columns: 474px minmax(0, 926px);
        justify-content: space-between;
        gap: 48px;
      }

      .faq h2 {
        font-size: 32px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.48px;
      }

      .faq-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .faq-item {
        border-bottom: 1px solid var(--border);
        padding-bottom: 25px;
      }

      .faq-item__head {
        display: flex;
        align-items: center;
        gap: 20px;
        width: 100%;
        text-align: left;
      }

      .faq-item__head h3 {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 24px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: -0.36px;
      }

      .faq-item__icon {
        position: relative;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .faq-item__icon::before,
      .faq-item__icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 1.5px;
        background: #000000;
        border-radius: 999px;
        transform: translate(-50%, -50%);
      }

      .faq-item__icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
      }

      .faq-item[data-open="true"] .faq-item__icon {
        transform: rotate(45deg);
      }

      .faq-item__panel {
        overflow: hidden;
        margin-top: 20px;
        opacity: 1;
        transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity 220ms ease,
          margin-top 280ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .faq-item[data-open="false"] .faq-item__panel {
        margin-top: 0;
        opacity: 0;
      }

      .faq-item__panel[hidden] {
        display: block;
      }

      .faq-item__body {
        overflow: hidden;
        font-size: 16px;
        line-height: 1.5;
        color: var(--text-secondary);
      }

      .cta-banner {
        position: relative;
        padding: 0 60px;
        min-height: 350px;
        border-radius: var(--radius-xl);
        overflow: hidden;
      }

      .cta-banner__bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
        opacity: 0.8;
      }

      .cta-banner__bg img {
        position: absolute;
        left: 0;
        top: -122.78%;
        width: 100%;
        height: 266.7%;
        object-fit: cover;
      }

      .cta-banner__inner {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 310px auto;
        align-items: center;
        justify-content: space-between;
        min-height: 350px;
        gap: 32px;
      }

      .cta-banner__copy {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .cta-banner__eyebrow {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
      }

      .cta-banner__headline {
        font-size: 32px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.48px;
      }

      .cta-banner__visual {
        position: relative;
        width: 310px;
        height: 310px;
        padding: 110px 7px 118px 3px;
      }

      .cta-banner__visual > img:first-child {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .cta-banner__details {
        position: relative;
        width: 300px;
        height: 87px;
      }

      .cta-banner__actions {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }

      .site-footer {
        margin-top: 160px;
        padding: 78px 100px;
        background: var(--surface);
      }

      .site-footer__inner {
        display: flex;
        flex-direction: column;
        gap: 60px;
      }

      .site-footer__top {
        display: flex;
        justify-content: space-between;
        gap: 48px;
        align-items: flex-start;
      }

      .footer-columns {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        flex-wrap: wrap;
      }

      .footer-column {
        width: 140px;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .footer-column h3 {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        opacity: 0.8;
      }

      .footer-column__list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .footer-column a {
        font-size: 14px;
        line-height: 1.5;
        transition: opacity 180ms ease;
      }

      .footer-column a:hover {
        opacity: 0.64;
      }

      .site-footer__bottom {
        padding-top: 21px;
        padding-bottom: 20px;
        border-top: 1px solid var(--border);
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-tertiary);
      }

      @media (max-width: 1399px) {
        .site-header__inner {
          gap: 40px;
          width: min(100%, calc(100vw - 48px));
        }

        .site-nav {
          gap: 0;
        }

        .hero__copy {
          gap: 40px;
        }

        .feature-row,
        .feature-row--reverse,
        .control-shell {
          gap: 40px;
        }

        .feature-row {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

        .feature-row--reverse {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

        .control-shell {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

        .stats__grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .stats__grid > :nth-child(3) {
          grid-column: 1 / -1;
        }

        .stats__column {
          width: 100%;
        }
      }

      @media (max-width: 1199px) {
        .landing {
          padding-top: 72px;
        }

        .site-header {
          position: sticky;
          top: 0;
          z-index: 40;
          height: auto;
          padding: 24px 0;
          background: rgba(255, 255, 255, 0.92);
        }

        .site-header__inner,
        .hero__copy,
        .feature-row,
        .feature-row--reverse,
        .control-shell,
        .faq,
        .cta-banner__inner,
        .site-footer__top {
          grid-template-columns: 1fr;
          display: grid;
        }

        .site-header__inner {
          gap: 20px;
        }

        .site-nav {
          flex-wrap: wrap;
        }

        .header-actions {
          justify-content: flex-start;
          flex-wrap: wrap;
        }

        .section,
        .site-footer {
          margin-top: 120px;
        }

        .hero__title {
          font-size: 52px;
        }

        .hero-ratings {
          justify-content: center;
          flex-wrap: wrap;
        }

        .control-copy {
          min-height: auto;
          gap: 48px;
        }

        .control-updates {
          grid-template-columns: 1fr;
        }

        .reviews__tabs,
        .reviews__body,
        .stats-card--pair,
        .crm-grid {
          grid-template-columns: 1fr;
        }

        .faq {
          gap: 24px;
        }

        .cta-banner {
          padding: 48px 32px;
        }

        .cta-banner__visual {
          margin: 0 auto;
        }

        .site-footer {
          padding: 64px 24px;
        }

        .footer-columns {
          gap: 32px;
        }
      }

      @media (max-width: 1023px) {
        .landing {
          padding-top: 72px;
        }

        .site-header {
          position: sticky;
          top: 0;
          z-index: 40;
          height: auto;
          padding: 24px 0;
          background: rgba(255, 255, 255, 0.92);
        }

        .site-header__inner,
        .hero__copy,
        .feature-row,
        .feature-row--reverse,
        .control-shell,
        .faq,
        .cta-banner__inner,
        .site-footer__top {
          grid-template-columns: 1fr;
          display: grid;
        }

        .site-header__inner {
          gap: 20px;
        }

        .site-nav {
          flex-wrap: wrap;
        }

        .header-actions {
          justify-content: flex-start;
          flex-wrap: wrap;
        }

        .section,
        .site-footer {
          margin-top: 120px;
        }

        .hero__title {
          font-size: 52px;
        }

        .hero-ratings {
          justify-content: center;
          flex-wrap: wrap;
        }

        .control-copy {
          min-height: auto;
          gap: 48px;
        }

        .control-updates {
          grid-template-columns: 1fr;
        }

        .reviews__tabs,
        .reviews__body,
        .stats-card--pair,
        .crm-grid,
        .stats__grid {
          grid-template-columns: 1fr;
        }

        .stats__grid > :nth-child(3) {
          grid-column: auto;
        }

        .faq {
          gap: 24px;
        }

        .cta-banner {
          padding: 48px 32px;
        }

        .cta-banner__visual {
          margin: 0 auto;
        }

        .site-footer {
          padding: 64px 24px;
        }

        .footer-columns {
          gap: 32px;
        }
      }

      @media (max-width: 767px) {
        .container-1440,
        .container-1400,
        .container-1012 {
          width: min(100%, calc(100vw - 32px));
        }

        .site-header__inner {
          width: min(100%, calc(100vw - 32px));
        }

        .site-nav {
          display: none;
        }

        .hero__title,
        .stats__title,
        .compliance__title,
        .control-section__title,
        .reviews__title {
          font-size: 40px;
        }

        .hero__description,
        .stats-card__label,
        .stats-card--crm p {
          font-size: 18px;
        }

        .hero__actions,
        .cta-banner__actions,
        .header-cta {
          width: 100%;
        }

        .btn--medium {
          width: 100%;
        }

        .cta-banner__actions .btn--medium {
          width: auto;
        }

        .sponsor-strip {
          padding-inline: 0;
        }

        .flag-grid {
          grid-template-columns: repeat(3, minmax(0, 67px));
        }

        .cta-banner {
          padding: 40px 24px;
        }

        .cta-banner__headline,
        .faq-item__head h3,
        .reviews__quote-text {
          font-size: 28px;
        }

        .footer-columns {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }