:root {
      color-scheme: light dark;
      --primary: #4f46e5;
      --primary-dark: #4338ca;
      --text: #0f172a;
      --muted: #64748b;
      --background: #f8fafc;
      --surface: #fff;
      --border: #e2e8f0;
      --brand-icon: url("./tivariz-icon.png");
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--background);
      color: var(--text);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    body::before {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 50%;
      width: min(1100px, 100%);
      height: 720px;
      content: "";
      transform: translateX(-50%);
      background:
        radial-gradient(circle at 76% 22%, rgba(79, 70, 229, .14), transparent 30%),
        radial-gradient(circle at 18% 38%, rgba(56, 189, 248, .09), transparent 27%);
      pointer-events: none;
    }

    a { color: inherit; }

    a:focus-visible {
      outline: 3px solid rgba(79, 70, 229, .38);
      outline-offset: 4px;
    }

    .skip-link {
      position: fixed;
      z-index: 100;
      top: 12px;
      inset-inline-start: 12px;
      padding: 10px 16px;
      border-radius: 12px;
      background: var(--text);
      color: var(--surface);
      transform: translateY(-160%);
    }

    .skip-link:focus { transform: translateY(0); }

    .container {
      width: min(1180px, calc(100% - 48px));
      margin-inline: auto;
    }

    header {
      border-bottom: 1px solid rgba(226, 232, 240, .78);
      background: rgba(248, 250, 252, .86);
      backdrop-filter: blur(18px);
    }

    .header-inner {
      display: flex;
      min-height: 76px;
      align-items: center;
    }

    .language-toggle {
      margin-inline-start: auto;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      color: var(--text);
      font: inherit;
      font-size: 14px;
      font-weight: 750;
      cursor: pointer;
    }

    .language-toggle:focus-visible {
      outline: 3px solid rgba(79, 70, 229, .38);
      outline-offset: 3px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--text);
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.03em;
      text-decoration: none;
    }

    .brand-mark,
    .app-avatar {
      flex: 0 0 auto;
      background-image: var(--brand-icon);
      background-position: center;
      background-size: cover;
    }

    .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      box-shadow: 0 8px 18px rgba(79, 70, 229, .24);
    }

    .hero {
      display: grid;
      min-height: calc(100svh - 76px);
      align-items: center;
      grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
      gap: clamp(48px, 7vw, 100px);
      padding-block: 54px;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 20px;
      color: var(--primary-dark);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 24px;
      height: 2px;
      border-radius: 2px;
      background: var(--primary);
      content: "";
    }

    h1 {
      max-width: 670px;
      margin: 0;
      font-size: clamp(48px, 5.5vw, 76px);
      font-weight: 850;
      letter-spacing: -.065em;
      line-height: .99;
    }

    html[dir="rtl"] h1 { letter-spacing: -.035em; }

    .highlight {
      color: var(--primary);
      white-space: nowrap;
    }

    .hero-lead {
      max-width: 600px;
      margin: 28px 0 0;
      color: var(--muted);
      font-size: clamp(18px, 2vw, 21px);
      line-height: 1.65;
    }

    .store-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 34px;
    }

    .store-badge {
      display: flex;
      width: 184px;
      height: 58px;
      align-items: center;
      gap: 11px;
      padding: 8px 13px;
      border: 1px solid #a6a6a6;
      border-radius: 10px;
      background: #050505;
      color: #fff;
      box-shadow: 0 8px 20px rgba(15, 23, 42, .15);
    }

    .store-badge svg {
      width: 29px;
      max-height: 34px;
      flex: 0 0 auto;
    }

    .store-badge-text {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }

    .store-badge small {
      margin-bottom: 5px;
      font-size: 9px;
      font-weight: 650;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    .store-badge strong {
      font-size: 19px;
      font-weight: 600;
      letter-spacing: -.025em;
      white-space: nowrap;
    }

    .hero-visual {
      position: relative;
      display: grid;
      min-height: 680px;
      place-items: center;
      isolation: isolate;
    }

    .hero-visual::before {
      position: absolute;
      z-index: -2;
      width: min(510px, 100%);
      aspect-ratio: 1;
      border: 1px solid rgba(79, 70, 229, .13);
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(79, 70, 229, .16) 0 2px, transparent 3px) 0 0 / 27px 27px,
        rgba(224, 231, 255, .34);
      content: "";
    }

    .hero-visual::after {
      position: absolute;
      z-index: -1;
      width: 330px;
      height: 80%;
      border-radius: 999px;
      background: var(--primary);
      content: "";
      transform: rotate(8deg);
      box-shadow: 0 28px 70px rgba(79, 70, 229, .25);
    }

    .phone {
      position: relative;
      width: 342px;
      height: 674px;
      overflow: hidden;
      border: 10px solid #111827;
      border-radius: 46px;
      background: #f8fafc;
      color: #0f172a;
      color-scheme: light;
      box-shadow: 0 35px 75px rgba(15, 23, 42, .3);
      transform: rotate(2.5deg);
      transition: transform .35s ease;
    }

    .phone:hover { transform: rotate(0); }

    .phone::before {
      position: absolute;
      z-index: 5;
      top: 8px;
      left: 50%;
      width: 92px;
      height: 24px;
      border-radius: 999px;
      background: #111827;
      content: "";
      transform: translateX(-50%);
    }

    .phone-screen {
      height: 100%;
      overflow: hidden;
      padding: 48px 18px 24px;
    }

    .app-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 2px 25px;
    }

    .app-wordmark {
      color: #0f172a;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .15em;
      line-height: 1.05;
    }

    .app-wordmark strong {
      display: block;
      color: #4f46e5;
      font-size: 22px;
      letter-spacing: -.02em;
    }

    .app-avatar {
      width: 39px;
      height: 39px;
      border-radius: 12px;
      box-shadow: 0 3px 10px rgba(15, 23, 42, .1);
    }

    .screen-title {
      margin: 0 0 16px;
      font-size: 28px;
      font-weight: 850;
      letter-spacing: -.04em;
      line-height: 1.15;
    }

    .search-box {
      display: flex;
      height: 48px;
      align-items: center;
      gap: 9px;
      padding: 0 14px;
      border: 1px solid #e2e8f0;
      border-radius: 15px;
      background: #fff;
      color: #64748b;
      font-size: 12px;
      font-weight: 650;
      box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
    }

    .magnifier {
      width: 14px;
      height: 14px;
      border: 2px solid #4f46e5;
      border-radius: 50%;
    }

    .magnifier::after {
      display: block;
      width: 6px;
      height: 2px;
      margin: 11px 0 0 10px;
      border-radius: 2px;
      background: #4f46e5;
      content: "";
      transform: rotate(45deg);
      transform-origin: left center;
    }

    .mini-label {
      margin: 22px 0 10px;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .category-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .category {
      padding: 8px 11px;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      background: #fff;
      color: #475569;
      font-size: 10px;
      font-weight: 750;
    }

    .category.active {
      border-color: #4f46e5;
      background: #4f46e5;
      color: #fff;
    }

    .pro-card {
      margin-top: 17px;
      padding: 16px;
      border: 1px solid #e2e8f0;
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    }

    .pro-card-top {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .pro-card-top > span:nth-child(2) { min-width: 0; }

    .pro-photo {
      display: grid;
      width: 43px;
      height: 43px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 14px;
      background: #e0e7ff;
      color: #4338ca;
      font-size: 18px;
      font-weight: 900;
    }

    .pro-title {
      display: block;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.25;
    }

    .pro-meta {
      display: block;
      margin-top: 3px;
      color: #64748b;
      font-size: 9px;
      font-weight: 650;
    }

    .availability {
      margin-inline-start: auto;
      color: #16a34a;
      font-size: 9px;
      font-weight: 850;
    }

    .distance {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 14px 0;
      color: #64748b;
      font-size: 10px;
      font-weight: 700;
    }

    .pin {
      display: inline-block;
      width: 11px;
      height: 11px;
      border: 2px solid #4f46e5;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
    }

    .card-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .app-button {
      display: grid;
      min-height: 39px;
      place-items: center;
      border-radius: 11px;
      background: #4f46e5;
      color: #fff;
      font-size: 11px;
      font-weight: 850;
    }

    .app-button.alt {
      background: #f1f5f9;
      color: #0f172a;
    }

    .bottom-nav {
      display: grid;
      margin-top: 17px;
      padding: 12px 5px;
      border: 1px solid #e2e8f0;
      border-radius: 17px;
      background: #fff;
      color: #94a3b8;
      font-size: 8px;
      font-weight: 800;
      grid-template-columns: repeat(3, 1fr);
      text-align: center;
    }

    .bottom-nav span:first-child { color: #4f46e5; }

    .float-card {
      position: absolute;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 12px 15px;
      border: 1px solid rgba(226, 232, 240, .9);
      border-radius: 16px;
      background: rgba(255, 255, 255, .94);
      color: #0f172a;
      box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
      backdrop-filter: blur(12px);
    }

    .float-card strong {
      display: block;
      font-size: 12px;
      line-height: 1.2;
    }

    .float-card small {
      display: block;
      color: #64748b;
      font-size: 10px;
    }

    .float-icon {
      display: grid;
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 10px;
      background: #e0e7ff;
      color: #4338ca;
      font-weight: 900;
    }

    .float-one { top: 106px; right: -12px; }
    .float-two { bottom: 96px; left: -32px; }

    html[dir="rtl"] .float-one { right: auto; left: -12px; }
    html[dir="rtl"] .float-two { right: -32px; left: auto; }

    @media (max-width: 960px) {
      .hero {
        min-height: auto;
        grid-template-columns: 1fr;
        padding-block: 72px;
        text-align: center;
      }

      .hero-copy { display: grid; justify-items: center; }
      .store-badges { justify-content: center; }
    }

    @media (max-width: 640px) {
      .container { width: min(100% - 32px, 1180px); }
      .header-inner { min-height: 68px; }
      .brand-mark { width: 42px; height: 42px; border-radius: 13px; }
      .hero { gap: 34px; padding-block: 48px 62px; }
      h1 { font-size: clamp(43px, 13vw, 58px); }
      .highlight { white-space: normal; }
      .hero-lead { margin-top: 22px; font-size: 17px; }
      .store-badges { width: 100%; margin-top: 28px; }
      .store-badge { width: 172px; height: 56px; }
      .store-badge strong { font-size: 17px; }
      .hero-visual { min-height: 620px; }
      .hero-visual::before { width: calc(100% + 24px); }
      .hero-visual::after { width: 270px; height: 88%; }
      .phone { width: min(316px, calc(100vw - 44px)); height: 620px; border-width: 8px; border-radius: 40px; }
      .phone-screen { padding: 44px 15px 20px; }
      .screen-title { font-size: 25px; }
      .float-card { display: none; }
    }

    @media (max-width: 380px) {
      .store-badge { width: min(184px, 100%); }
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --text: #f8fafc;
        --muted: #a8b3c5;
        --background: #0f172a;
        --surface: #1e293b;
        --border: #334155;
      }

      body::before {
        background:
          radial-gradient(circle at 76% 22%, rgba(79, 70, 229, .22), transparent 30%),
          radial-gradient(circle at 18% 38%, rgba(56, 189, 248, .08), transparent 27%);
      }

      header {
        border-color: rgba(51, 65, 85, .82);
        background: rgba(15, 23, 42, .86);
      }

      .hero-visual::before {
        border-color: rgba(129, 140, 248, .16);
        background:
          radial-gradient(circle, rgba(129, 140, 248, .22) 0 2px, transparent 3px) 0 0 / 27px 27px,
          rgba(30, 41, 59, .32);
      }

      .eyebrow { color: #a5b4fc; }
      .highlight { color: #818cf8; }
    }


    .site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; }
    .site-footer .footer-inner { display: flex; gap: 18px; flex-wrap: wrap; padding: 20px 0; }
    .site-footer a { color: var(--muted); text-decoration: none; }
    .site-footer a:hover { color: var(--text); }

    .marketplace-section {
      padding-block: 88px;
      border-top: 1px solid var(--border);
    }

    .section-heading {
      max-width: 760px;
      margin: 0;
      font-size: clamp(32px, 4vw, 48px);
      letter-spacing: -.04em;
      line-height: 1.1;
    }

    .section-lead {
      max-width: 680px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 18px;
    }

    .service-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 32px 0 0;
      padding: 0;
      list-style: none;
    }

    .service-list li {
      padding: 11px 17px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface);
      font-weight: 750;
    }

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

    .step {
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--surface);
    }

    .step-number {
      display: grid;
      width: 38px;
      height: 38px;
      margin-bottom: 18px;
      place-items: center;
      border-radius: 12px;
      background: var(--primary);
      color: #fff;
      font-weight: 850;
    }

    .step h3 { margin: 0 0 8px; font-size: 18px; }
    .step p { margin: 0; color: var(--muted); }

    .pro-invitation {
      display: grid;
      margin-bottom: 88px;
      padding: clamp(32px, 6vw, 64px);
      border-radius: 28px;
      background: var(--primary);
      color: #fff;
      grid-template-columns: 1.2fr .8fr;
      align-items: center;
      gap: 30px;
    }

    .pro-invitation h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.04em; }
    .pro-invitation p { margin: 16px 0 0; color: #e0e7ff; font-size: 18px; }
    .pro-label { justify-self: end; padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--primary-dark); font-weight: 800; text-align: center; }

    .email-practices {
      margin-bottom: 22px;
      border: 1px solid var(--border);
      border-radius: 14px;
      color: var(--muted);
      font-size: .9rem;
    }

    .email-practices summary { padding: 14px 16px; color: var(--text); font-weight: 750; cursor: pointer; }
    .email-practices div { padding: 0 16px 16px; }
    .email-practices p { margin: 8px 0 0; }
    .email-practices a { color: var(--primary); font-weight: 700; }

    @media (max-width: 760px) {
      .marketplace-section { padding-block: 62px; }
      .steps, .pro-invitation { grid-template-columns: 1fr; }
      .pro-invitation { margin-bottom: 62px; border-radius: 22px; }
      .pro-label { justify-self: start; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: .01ms !important;
      }
    }