:root {
        --page: #f5f7fa;
        --surface: #ffffff;
        --surface-soft: #eef4f4;
        --ink: #111418;
        --muted: #53606c;
        --line: #d8e0e7;
        --gold: #fcb800;
        --gold-strong: #bf8700;
        --teal: #0e7c7b;
        --teal-soft: #e3f3f1;
        --blue: #2458d3;
        --coral: #d85f44;
        --shadow: 0 22px 60px rgba(17, 20, 24, 0.12);
        --radius: 8px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        max-width: 100%;
        overflow-x: hidden;
      }

      body {
        margin: 0;
        color: var(--ink);
        background: var(--page);
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        line-height: 1.55;
        letter-spacing: 0;
        overflow-x: hidden;
      }

      h1,
      h2,
      h3,
      p,
      strong,
      span,
      a {
        overflow-wrap: break-word;
      }

      h1,
      h2,
      h3 {
        overflow-wrap: anywhere;
      }

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

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

      code {
        font-family: Consolas, "Liberation Mono", "Courier New", monospace;
      }

      .container {
        width: min(1160px, calc(100% - 40px));
        margin: 0 auto;
        min-width: 0;
      }

      .site-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
        color: #ffffff;
      }

      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 22px 0;
        min-width: 0;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        font-size: 18px;
        white-space: nowrap;
      }

      .brand-mark {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--gold);
        color: #121212;
        font-weight: 900;
        box-shadow: 0 10px 26px rgba(252, 184, 0, 0.28);
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 22px;
        font-size: 14px;
        font-weight: 700;
      }

      .nav-actions {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-shrink: 0;
        min-width: 0;
      }

      .nav-links a {
        opacity: 0.9;
      }

      .nav-links a:hover {
        opacity: 1;
      }

      .nav-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 16px;
        border-radius: 6px;
        background: #ffffff;
        color: var(--ink);
      }

      .language-switcher {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 3px;
        border: 1px solid rgba(255, 255, 255, 0.34);
        border-radius: 8px;
        background: rgba(17, 20, 24, 0.28);
        backdrop-filter: blur(8px);
      }

      .lang-button {
        min-width: 38px;
        min-height: 34px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #ffffff;
        font: inherit;
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
      }

      .lang-button.is-active {
        background: var(--gold);
        color: #121212;
      }

      .lang-button:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
      }

      .hero {
        position: relative;
        min-height: 82svh;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        color: #ffffff;
        background: #0d1116;
      }

      .hero img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(9, 13, 18, 0.88) 0%, rgba(9, 13, 18, 0.64) 42%, rgba(9, 13, 18, 0.22) 100%),
          linear-gradient(0deg, rgba(9, 13, 18, 0.62) 0%, rgba(9, 13, 18, 0.08) 48%, rgba(9, 13, 18, 0.42) 100%);
        z-index: 1;
      }

      .hero-content {
        position: relative;
        z-index: 2;
        width: min(760px, 100%);
        min-width: 0;
        padding: 160px 0 74px;
      }

      .eyebrow {
        margin: 0 0 14px;
        color: #ffe2a3;
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

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

      h1 {
        max-width: 720px;
        font-size: clamp(40px, 6vw, 72px);
        line-height: 1.02;
        font-weight: 850;
        letter-spacing: 0;
      }

      .hero-copy {
        max-width: 660px;
        margin-top: 22px;
        color: rgba(255, 255, 255, 0.88);
        font-size: clamp(18px, 2.3vw, 22px);
        overflow-wrap: anywhere;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 30px;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
        transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
      }

      .button:hover {
        transform: translateY(-1px);
      }

      .button-primary {
        background: var(--gold);
        color: #141414;
        border-color: var(--gold);
      }

      .button-primary:hover {
        background: #ffd257;
      }

      .button-secondary {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.58);
      }

      .button-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
      }

      .button-outline {
        background: transparent;
        border-color: rgba(255, 255, 255, 0.5);
        color: #ffffff;
        backdrop-filter: blur(4px);
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .button-outline:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.85);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
      }

      .button-outline svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }

      .hero-points {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 26px;
      }

      .hero-points span {
        min-width: 0;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 6px;
        padding: 0 12px;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
      }

      .proof {
        background: #ffffff;
        border-bottom: 1px solid var(--line);
      }

      .proof-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1px;
        background: var(--line);
        min-width: 0;
      }

      .proof-item {
        min-width: 0;
        min-height: 112px;
        padding: 22px 24px;
        background: #ffffff;
      }

      .proof-item strong {
        display: block;
        margin-bottom: 6px;
        font-size: 18px;
        line-height: 1.25;
      }

      .proof-item span {
        display: block;
        color: var(--muted);
        font-size: 14px;
        overflow-wrap: anywhere;
      }

      .section {
        padding: 76px 0;
      }

      .section-soft {
        background: var(--surface-soft);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

      .section-head {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr);
        gap: 42px;
        align-items: end;
        margin-bottom: 34px;
        min-width: 0;
      }

      .section-kicker {
        margin-bottom: 10px;
        color: var(--gold-strong);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      h2 {
        font-size: clamp(30px, 4vw, 48px);
        line-height: 1.08;
        font-weight: 850;
      }

      .section-lede {
        color: var(--muted);
        font-size: 18px;
      }

      .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        min-width: 0;
      }

      .feature-card,
      .workflow-step,
      .requirement,
      .faq-item {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
      }

      .feature-card {
        min-height: 254px;
        padding: 22px;
      }

      .feature-tag {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 10px;
        border-radius: 6px;
        background: var(--teal-soft);
        color: var(--teal);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      h3 {
        margin-top: 18px;
        font-size: 22px;
        line-height: 1.2;
      }

      .feature-card p,
      .workflow-step p,
      .requirement p,
      .faq-item p {
        margin-top: 10px;
        color: var(--muted);
      }

      .split {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 46px;
        align-items: center;
        min-width: 0;
      }

      .mock-window {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .mock-top {
        display: flex;
        align-items: center;
        gap: 7px;
        height: 42px;
        padding: 0 16px;
        border-bottom: 1px solid var(--line);
        background: #f7f9fb;
      }

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #b8c1ca;
      }

      .dot:nth-child(1) {
        background: var(--coral);
      }

      .dot:nth-child(2) {
        background: var(--gold);
      }

      .dot:nth-child(3) {
        background: var(--teal);
      }

      .mock-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 18px;
        padding: 18px;
        min-width: 0;
      }

      .mock-search {
        height: 46px;
        border: 1px solid var(--line);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        color: var(--muted);
        font-size: 14px;
      }

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

      .mock-product {
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        background: #ffffff;
      }

      .mock-product-media {
        aspect-ratio: 1.2 / 1;
        background:
          linear-gradient(135deg, rgba(14, 124, 123, 0.16), transparent 52%),
          linear-gradient(180deg, #f6f7f8, #ffffff);
      }

      .mock-product-body {
        padding: 12px;
      }

      .line {
        height: 8px;
        border-radius: 999px;
        background: #cbd4dc;
      }

      .line.short {
        width: 58%;
        margin-top: 8px;
      }

      .stars {
        display: flex;
        gap: 4px;
        margin-top: 12px;
      }

      .stars span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold);
      }

      .mock-assistant {
        display: grid;
        align-content: start;
        gap: 12px;
        min-height: 360px;
        border-radius: 8px;
        padding: 16px;
        background: #15191f;
        color: #ffffff;
      }

      .assistant-title {
        font-size: 14px;
        font-weight: 900;
      }

      .bubble {
        border-radius: 8px;
        padding: 12px;
        background: #26313a;
        color: #cbd7df;
        font-size: 13px;
      }

      .bubble.user {
        background: rgba(252, 184, 0, 0.16);
        color: #ffe7a8;
      }

      .upload-box {
        display: grid;
        place-items: center;
        min-height: 98px;
        border: 1px dashed rgba(255, 255, 255, 0.34);
        border-radius: 8px;
        color: #b7c6cd;
        font-size: 13px;
        text-align: center;
        padding: 16px;
      }

      .workflow {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
        min-width: 0;
      }

      .workflow-step {
        padding: 22px;
      }

      .step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--ink);
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
      }

      .shortcodes {
        display: grid;
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
        gap: 34px;
        align-items: start;
        min-width: 0;
      }

      .code-stack {
        display: grid;
        gap: 14px;
      }

      .code-card {
        border: 1px solid #ccd5de;
        border-radius: 8px;
        background: #111820;
        color: #e9f0f6;
        overflow: hidden;
      }

      .code-card strong {
        display: block;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        color: #ffd36a;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .code-card code {
        display: block;
        padding: 14px;
        overflow-x: auto;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 14px;
      }

      .requirements-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        min-width: 0;
      }

      .requirement {
        padding: 22px;
      }

      .requirement strong {
        display: block;
        font-size: 17px;
      }

      .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        min-width: 0;
      }

      .pricing-card {
        position: relative;
        display: grid;
        gap: 20px;
        min-width: 0;
        padding: 26px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: 0 12px 34px rgba(17, 20, 24, 0.07);
      }

      .pricing-card.is-featured {
        border-color: rgba(252, 184, 0, 0.72);
        box-shadow: 0 20px 52px rgba(17, 20, 24, 0.12);
      }

      .pricing-badge {
        position: absolute;
        top: 18px;
        right: 18px;
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        border-radius: 6px;
        padding: 0 10px;
        background: var(--gold);
        color: #121212;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .pricing-title h3 {
        margin-top: 0;
        font-size: 26px;
      }

      .pricing-title p {
        margin-top: 6px;
        color: var(--muted);
      }

      .price-stack {
        display: grid;
        gap: 12px;
      }

      .price-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: baseline;
        min-width: 0;
        padding: 14px 0;
        border-top: 1px solid var(--line);
      }

      .price-row:first-child {
        border-top: 0;
        padding-top: 0;
      }

      .price-label {
        color: var(--muted);
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .price-values {
        display: grid;
        justify-items: end;
        gap: 2px;
        min-width: 0;
        text-align: right;
      }

      .old-price {
        color: #8a97a3;
        font-size: 14px;
        text-decoration: line-through;
      }

      .current-price {
        color: var(--ink);
        font-size: 26px;
        font-weight: 900;
        line-height: 1.1;
      }

      .pricing-card .button {
        width: 100%;
      }

      .paypal-subscription-button {
        min-height: 46px;
      }

      .paypal-lifetime-form {
        display: inline-grid;
        justify-items: center;
        align-content: start;
        gap: 0.5rem;
        width: 100%;
        margin-top: 4px;
      }

      .paypal-lifetime-form input[type="submit"],
      .pp-QJ77KL56GBQ7L {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 11.625rem;
        max-width: 100%;
        height: 2.625rem;
        padding: 0 2rem;
        border: 0;
        border-radius: 1.5rem;
        background-color: #ffd140;
        color: #000000;
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.25rem;
        text-align: center;
        cursor: pointer;
      }

      .paypal-card-icons {
        width: auto;
        height: auto;
        max-width: min(100%, 230px);
      }

      .paypal-powered {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        color: var(--muted);
        font-size: 0.75rem;
        line-height: 1;
      }

      .paypal-powered img {
        display: inline-block;
        width: auto;
        height: 0.875rem;
        max-width: 4.25rem;
        vertical-align: middle;
      }

      .faq-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        min-width: 0;
      }

      .faq-item {
        padding: 22px;
      }

      .faq-item h3 {
        margin-top: 0;
        font-size: 19px;
      }

      .contact-section {
        background: var(--surface);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

      .contact-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: clamp(20px, 4vw, 42px);
        align-items: center;
        padding: clamp(28px, 4vw, 48px);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: 0 18px 44px rgba(23, 33, 31, 0.1);
      }

      .contact-visual {
        display: grid;
        place-items: center;
        width: clamp(52px, 6vw, 68px);
        height: clamp(52px, 6vw, 68px);
        border-radius: 50%;
        background: var(--teal-soft);
        color: var(--teal);
        flex-shrink: 0;
      }

      .contact-visual svg {
        width: clamp(20px, 2.4vw, 26px);
        height: clamp(20px, 2.4vw, 26px);
      }

      .contact-body h2 {
        margin-top: 4px;
      }

      .contact-body p {
        margin-top: 10px;
        color: var(--muted);
        font-size: 1.04rem;
        max-width: 660px;
      }

      .contact-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
      }

      .button-mail {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
        padding: 13px 24px;
      }

      .button-mail svg {
        flex-shrink: 0;
      }

      .contact-response {
        color: var(--muted);
        font-size: 0.88rem;
      }

      html[dir="rtl"] .contact-visual {
        order: 1;
      }

      html[dir="rtl"] .contact-card {
        text-align: right;
      }

      html[dir="rtl"] .contact-body {
        direction: rtl;
      }

      .cta {
        color: #ffffff;
        background:
          linear-gradient(90deg, rgba(17, 20, 24, 0.9), rgba(17, 20, 24, 0.76)),
          url("../images/landing-hero.png") center / cover no-repeat;
      }

      .cta-inner {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) auto;
        gap: 32px;
        align-items: center;
        padding: 58px 0;
      }

      .cta h2 {
        max-width: 780px;
      }

      .cta p {
        max-width: 700px;
        margin-top: 14px;
        color: rgba(255, 255, 255, 0.82);
        font-size: 18px;
      }

      .site-footer {
        padding: 30px 0;
        color: var(--muted);
        background: #ffffff;
        border-top: 1px solid var(--line);
        font-size: 14px;
      }

      .footer-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 14px;
      }

      html[dir="rtl"] body {
        direction: rtl;
        font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
      }

      html[dir="rtl"] .hero::before {
        background:
          linear-gradient(270deg, rgba(9, 13, 18, 0.88) 0%, rgba(9, 13, 18, 0.64) 42%, rgba(9, 13, 18, 0.22) 100%),
          linear-gradient(0deg, rgba(9, 13, 18, 0.62) 0%, rgba(9, 13, 18, 0.08) 48%, rgba(9, 13, 18, 0.42) 100%);
      }

      html[dir="rtl"] .hero-content {
        margin-left: auto;
        margin-right: 0;
        text-align: right;
      }

      html[dir="rtl"] .nav,
      html[dir="rtl"] .brand,
      html[dir="rtl"] .nav-actions,
      html[dir="rtl"] .nav-links,
      html[dir="rtl"] .hero-actions,
      html[dir="rtl"] .hero-points,
      html[dir="rtl"] .mock-search,
      html[dir="rtl"] .footer-row {
        direction: rtl;
      }

      html[dir="rtl"] .section-head,
      html[dir="rtl"] .feature-card,
      html[dir="rtl"] .workflow-step,
      html[dir="rtl"] .requirement,
      html[dir="rtl"] .pricing-card,
      html[dir="rtl"] .faq-item,
      html[dir="rtl"] .cta-inner {
        text-align: right;
      }

      html[dir="rtl"] .pricing-badge {
        right: auto;
        left: 18px;
      }

      html[dir="rtl"] .price-values {
        justify-items: start;
        text-align: left;
      }

      html[dir="rtl"] .cta-inner {
        direction: rtl;
      }

      @media (max-width: 1020px) {
        .nav-links {
          gap: 14px;
        }

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

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

        .section-head,
        .split,
        .shortcodes,
        .cta-inner {
          grid-template-columns: 1fr;
        }

        .cta-inner {
          justify-items: start;
        }
      }

      @media (max-width: 820px) {
        .container {
          width: min(1160px, calc(100% - 40px));
        }

        .nav {
          align-items: center;
          justify-content: flex-start;
        }

        .nav-links {
          display: none;
        }

        .nav-actions {
          margin-left: 12px;
        }

        html[dir="rtl"] .nav-actions {
          margin-left: 12px;
          margin-right: 0;
        }

        html[dir="rtl"] .nav,
        html[dir="rtl"] .nav-actions {
          direction: ltr;
        }

        html[dir="rtl"] .language-switcher {
          direction: rtl;
        }

        .hero {
          min-height: 78svh;
        }

        .hero img {
          object-position: 58% center;
        }

        .hero::before {
          background:
            linear-gradient(90deg, rgba(9, 13, 18, 0.9) 0%, rgba(9, 13, 18, 0.7) 58%, rgba(9, 13, 18, 0.34) 100%),
            linear-gradient(0deg, rgba(9, 13, 18, 0.62) 0%, rgba(9, 13, 18, 0.14) 50%, rgba(9, 13, 18, 0.45) 100%);
        }

        .hero-content {
          padding: 130px 0 48px;
        }

        .proof-grid,
        .feature-grid,
        .workflow,
        .requirements-grid,
        .pricing-grid,
        .faq-grid {
          grid-template-columns: 1fr;
        }

        .section {
          padding: 58px 0;
        }

        .mock-body {
          grid-template-columns: 1fr;
        }

        .mock-assistant {
          min-height: 280px;
        }
      }

      @media (max-width: 560px) {
        .container {
          width: min(1160px, calc(100% - 28px));
        }

        .hero-actions,
        .button {
          width: 100%;
        }

        h1 {
          font-size: 28px;
          line-height: 1.08;
        }

        .hero-content {
          width: 100%;
          max-width: calc(100vw - 28px);
          padding: 96px 0 30px;
        }

        .hero-copy {
          font-size: 17px;
          max-width: calc(100vw - 56px);
        }

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

        .hero-points span {
          width: auto;
          min-height: 32px;
          padding: 0 9px;
          font-size: 12px;
        }

        .brand {
          font-size: 16px;
        }

        .brand span:not(.brand-mark) {
          display: none;
        }

        .language-switcher {
          padding: 2px;
        }

        .lang-button {
          min-width: 34px;
          min-height: 32px;
          font-size: 12px;
        }

        .proof-item,
        .feature-card,
        .workflow-step,
        .requirement,
        .pricing-card,
        .faq-item {
          padding: 18px 16px;
        }

        .proof-item span {
          max-width: calc(100vw - 60px);
        }

        .price-row {
          grid-template-columns: 1fr;
          gap: 4px;
        }

        .price-values,
        html[dir="rtl"] .price-values {
          justify-items: start;
          text-align: start;
        }

        .current-price {
          font-size: 24px;
        }

        .mock-products {
          grid-template-columns: 1fr;
        }

        .code-card code {
          font-size: 13px;
        }

        .contact-card {
          grid-template-columns: 1fr;
          text-align: center;
        }

        .contact-visual {
          justify-self: center;
        }

        .contact-actions {
          justify-content: center;
        }

        .contact-body p {
          max-width: 100%;
        }

        html[dir="rtl"] .hero-content {
          margin-left: 0;
          margin-right: 0;
          text-align: right;
        }

        html[dir="rtl"] h1 {
          font-size: 26px;
        }
      }

      @media (max-width: 380px) {
        h1 {
          font-size: 26px;
        }

        .hero-copy {
          font-size: 16px;
        }
      }