:root {
      --bg: #eef1f6;
      --surface: #fff;
      --surface-2: #f3f6fa;
      --border: #e3e7ee;
      --text: #15202e;
      --muted: #6b7688;
      --faint: #8a93a3;
      --accent: #38bdf8;
      --accent-ink: #0c93bd;
      --green: #46d39a;
      --green-ink: #16a877;
      --nav: #15202e;
      --nav-text: #fff;
      --shadow: 0 14px 36px -22px rgba(21, 32, 46, .2)
    }

    [data-theme="dark"] {
      --bg: #0d1525;
      --surface: #16223a;
      --surface-2: #172234;
      --border: rgba(148, 163, 184, .15);
      --text: #eef3fb;
      --muted: #8b9bb4;
      --faint: #8b9bb4;
      --accent-ink: #38bdf8;
      --green-ink: #46d39a;
      --nav: #38bdf8;
      --nav-text: #06243a;
      --shadow: 0 14px 36px -22px rgba(3, 6, 12, .6)
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Manrope, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      transition: .25s background, .25s color
    }

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

    button {
      font: inherit
    }

    .shell {
      max-width: 1200px;
      margin: auto
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 40px;
      border-bottom: 1px solid var(--border)
    }

    .brand,
    .nav-links,
    .badges,
    .actions {
      display: flex;
      align-items: center
    }

    .brand {
      gap: 11px;
      font-size: 17px;
      font-weight: 800
    }

    .brand-mark {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      background: var(--accent);
      color: #06243a
    }

    .nav-links {
      gap: 26px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700
    }

    .nav-links a:hover {
      color: var(--accent-ink)
    }

    .theme {
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface);
      padding: 6px 13px;
      cursor: pointer;
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 800
    }

    .nav-cta,
    .primary {
      border-radius: 13px;
      background: var(--nav);
      color: var(--nav-text);
      font-size: 14px;
      font-weight: 800;
      padding: 10px 20px
    }

    .is-disabled {
      opacity: .55;
      cursor: not-allowed;
      pointer-events: none;
      user-select: none
    }

    .hero {
      display: flex;
      align-items: center;
      gap: 56px;
      padding: 64px 40px 72px
    }

    .hero-copy {
      flex: 1
    }

    .badges {
      gap: 8px;
      flex-wrap: wrap
    }

    .badge {
      padding: 6px 13px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      color: var(--accent-ink);
      font-size: 12px;
      font-weight: 800
    }

    .badge.green {
      background: color-mix(in srgb, var(--green) 15%, transparent);
      color: var(--green-ink)
    }

    h1 {
      margin: 22px 0;
      font-size: 52px;
      line-height: 1.08;
      letter-spacing: -.025em;
      font-weight: 800
    }

    p {
      margin: 0
    }

    .lead {
      max-width: 520px;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.55
    }

    .actions {
      gap: 12px;
      margin-top: 22px;
      flex-wrap: wrap
    }

    .primary {
      border: 0;
      background: var(--accent);
      color: #06243a;
      padding: 15px 28px;
      font-size: 16px
    }

    .secondary {
      padding: 14px 22px;
      border: 1px solid var(--border);
      border-radius: 15px;
      background: var(--surface);
      font-size: 15px;
      font-weight: 700
    }

    .fine {
      display: block;
      margin-top: 14px;
      color: var(--faint);
      font-size: 13px;
      font-weight: 600
    }

    .phone {
      width: 344px;
      flex: none;
      padding: 11px;
      border-radius: 42px;
      background: #070b13;
      box-shadow: 0 34px 64px -22px rgba(8, 12, 22, .5)
    }

    .phone img {
      display: block;
      width: 100%;
      border: 1px solid rgba(148, 163, 184, .1);
      border-radius: 32px
    }

    .phone .screen-light {
      display: none
    }

    [data-theme="dark"] .phone .screen-dark {
      display: none
    }

    [data-theme="dark"] .phone .screen-light {
      display: block
    }

    .section {
      padding: 0 40px 64px
    }

    .eyebrow {
      margin-bottom: 8px;
      color: var(--accent-ink);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase
    }

    .eyebrow.green {
      color: var(--green-ink)
    }

    h2 {
      margin: 0 0 28px;
      font-size: 33px;
      line-height: 1.15;
      letter-spacing: -.02em
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px
    }

    .card {
      padding: 22px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: var(--shadow)
    }

    .icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 14px;
      border-radius: 13px;
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      color: var(--accent-ink);
      font-size: 21px
    }

    .icon.green {
      background: color-mix(in srgb, var(--green) 15%, transparent);
      color: var(--green-ink)
    }

    h3 {
      margin: 0 0 8px;
      font-size: 17px;
      line-height: 1.3
    }

    .card p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55
    }

    .sharing {
      display: flex;
      align-items: center;
      gap: 48px;
      padding: 40px;
      border-radius: 20px
    }

    .sharing-copy {
      flex: 1
    }

    .sharing h2 {
      margin-bottom: 12px;
      font-size: 28px
    }

    .sharing p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.6
    }

    .share-preview {
      width: 360px;
      flex: none;
      padding: 18px;
      border-radius: 16px;
      background: var(--surface-2)
    }

    .person {
      display: flex;
      gap: 11px;
      align-items: center;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border)
    }

    .avatar {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--accent) 16%, transparent);
      color: var(--accent-ink);
      font-size: 13px;
      font-weight: 800
    }

    .person strong {
      display: block;
      font-size: 14px
    }

    .person span {
      color: var(--muted);
      font-size: 12px
    }

    .access {
      margin-left: auto;
      color: var(--green-ink);
      font-size: 11px;
      font-weight: 800
    }

    .comment {
      margin-top: 16px;
      padding: 13px;
      border-radius: 12px;
      background: var(--surface);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5
    }

    .pricing .card {
      padding: 26px
    }

    .pricing .premium {
      border: 2px solid var(--accent)
    }

    .pricing .medicine {
      border: 2px solid var(--green)
    }

    .price-title {
      font-size: 19px
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin: 14px 0 4px;
      color: var(--text)
    }

    .price strong {
      font-size: 26px;
      line-height: 1;
      letter-spacing: -.02em
    }

    .price span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700
    }

    .price-year {
      color: var(--faint);
      font-size: 12.5px;
      font-weight: 700
    }

    .premium .price-title {
      color: var(--accent-ink)
    }

    .medicine .price-title {
      color: var(--green-ink)
    }

    .pricing .desc {
      min-height: 65px
    }

    .pricing ul {
      padding: 0;
      margin: 18px 0 0;
      list-style: none;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6
    }

    .pricing li {
      position: relative;
      padding-left: 22px;
      margin: 7px 0
    }

    .pricing li:before {
      position: absolute;
      left: 0;
      content: '✓';
      color: var(--accent-ink);
      font-weight: 800
    }

    .medicine li:before {
      color: var(--green-ink)
    }

    .pricing-note {
      text-align: center;
      color: var(--faint);
      font-size: 13px;
      font-weight: 600;
      margin-top: 18px
    }

    .faq {
      max-width: 860px;
      margin: auto;
      padding-bottom: 64px
    }

    .faq h2 {
      text-align: center
    }

    .faq details {
      margin: 10px 0;
      padding: 18px 22px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface)
    }

    summary {
      position: relative;
      cursor: pointer;
      padding-right: 34px;
      font-size: 16px;
      font-weight: 700;
      list-style: none
    }

    summary::after {
      position: absolute;
      top: 50%;
      right: 0;
      content: '+';
      color: var(--accent-ink);
      font-size: 24px;
      font-weight: 500;
      line-height: 1;
      transform: translateY(-52%)
    }

    details[open] summary::after {
      content: '−'
    }

    summary::-webkit-details-marker {
      display: none
    }

    .faq p {
      padding-top: 10px;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.6
    }

    .footer {
      padding: 48px 40px;
      text-align: center;
      border-top: 1px solid var(--border)
    }

    .footer h2 {
      margin-bottom: 22px;
      font-size: 34px
    }

    .footer .fine {
      margin-top: 17px
    }

    .footer-quick-links {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 16px;
      line-height: 1.45
    }

    .footer-quick-links a {
      color: var(--muted);
      text-decoration: none
    }

    .footer-quick-links a:hover {
      color: var(--accent-ink)
    }

    @media(max-width:820px) {
      .nav {
        padding: 14px 20px;
        gap: 12px;
        flex-wrap: wrap
      }

      .nav-links {
        display: none
      }

      .hero {
        flex-direction: column;
        padding: 40px 20px 48px;
        gap: 36px
      }

      .section {
        padding: 0 20px 48px
      }

      h1 {
        font-size: 38px
      }

      .phone {
        max-width: 344px;
        width: 100%
      }

      .grid {
        grid-template-columns: 1fr
      }

      .sharing {
        flex-direction: column;
        align-items: stretch;
        padding: 28px 22px;
        gap: 24px
      }

      .share-preview {
        width: 100%
      }

      .footer {
        padding: 42px 20px
      }

      .footer h2 {
        font-size: 30px
      }
    }

    @media(max-width:410px) {
      .nav-cta {
        font-size: 12px;
        padding: 9px 12px
      }

      .brand {
        font-size: 15px
      }
    }

    .phone img {
      aspect-ratio: 591/1280;
      object-fit: cover;
      object-position: center
    }

    .legal-links {
      display: flex;
      justify-content: center;
      gap: 8px 18px;
      flex-wrap: wrap;
      margin-top: 18px
    }

    .legal-link {
      padding: 0;
      border: 0;
      background: none;
      color: var(--accent-ink);
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer
    }

    .legal-link:hover {
      text-decoration: underline
    }

    .legal-link:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
      outline-offset: 3px
    }

    .mobile-menu {
      display: none;
      position: relative
    }

    .mobile-menu summary {
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      color: var(--muted);
      font-size: 13px;
      font-weight: 800
    }

    .mobile-menu summary::after {
      display: none
    }

    .mobile-menu-links {
      position: absolute;
      z-index: 30;
      top: calc(100% + 8px);
      right: 0;
      display: grid;
      min-width: 230px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      box-shadow: var(--shadow)
    }

    .mobile-menu-links a {
      padding: 10px 12px;
      border-radius: 9px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700
    }

    .mobile-menu-links a:hover {
      background: var(--surface-2);
      color: var(--accent-ink)
    }

    .tool-card {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 25px 28px
    }

    .tool-card:hover {
      border-color: var(--accent);
      transform: translateY(-1px)
    }

    .tool-icon {
      display: grid;
      flex: none;
      place-items: center;
      width: 50px;
      height: 50px;
      border-radius: 15px;
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      color: var(--accent-ink);
      font-size: 25px
    }

    .tool-copy {
      flex: 1
    }

    .tool-copy h3 {
      margin-bottom: 5px;
      font-size: 19px
    }

    .tool-copy p {
      margin: 0
    }

    .tool-arrow {
      color: var(--accent-ink);
      font-size: 27px
    }

    .footer-map {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
      max-width: 760px;
      margin: 30px auto 0;
      padding-top: 28px;
      border-top: 1px solid var(--border);
      text-align: left
    }

    .footer-column {
      display: grid;
      align-content: start;
      gap: 9px
    }

    .footer-column strong {
      margin-bottom: 2px;
      color: var(--faint);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase
    }

    .footer-column a {
      color: var(--muted);
      font-size: 13px;
      font-weight: 600
    }

    .footer-column a:hover {
      color: var(--accent-ink)
    }

    @media(max-width:820px) {
      .mobile-menu {
        display: block
      }

      .tool-card {
        align-items: flex-start;
        padding: 22px
      }

      .footer-map {
        grid-template-columns: 1fr;
        text-align: center
      }
    }

    @media(max-width:460px) {
      .tool-arrow {
        display: none
      }

      .footer-quick-links {
        flex-direction: column;
        gap: 10px
      }
    }

    .brand-mark img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    body {
      font-family: Arial, sans-serif
    }

    .phone {
      border: 0;
      cursor: pointer;
      position: relative;
      text-align: inherit
    }

    .phone:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 4px
    }

    .phone-hint {
      position: absolute;
      right: 22px;
      bottom: 20px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(7, 11, 19, .78);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      opacity: 0;
      transform: translateY(5px);
      transition: .2s opacity, .2s transform
    }

    .phone:hover .phone-hint,
    .phone:focus-visible .phone-hint {
      opacity: 1;
      transform: none
    }

    .gallery-modal[hidden] {
      display: none
    }

    .gallery-modal {
      position: fixed;
      inset: 0;
      z-index: 1100;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(4, 10, 20, .84);
      backdrop-filter: blur(6px)
    }

    .gallery-panel {
      display: flex;
      flex-direction: column;
      width: min(930px, 100%);
      max-height: calc(100vh - 48px);
      padding: 22px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 22px;
      background: #111b2d;
      color: #f7fbff;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .45)
    }

    .gallery-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 16px
    }

    .gallery-header h2 {
      margin: 0;
      font-size: 25px
    }

    .gallery-header p,
    .gallery-description {
      margin: 4px 0 0;
      color: #aebdd1;
      font-size: 14px
    }

    .gallery-close,
    .gallery-nav {
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 12px;
      background: rgba(9, 16, 29, .58);
      color: #fff;
      cursor: pointer
    }

    .gallery-close {
      width: 40px;
      height: 40px;
      flex: none;
      font-size: 25px
    }

    .gallery-stage {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 0;
      overflow: hidden;
      border-radius: 16px;
      background: #070b13
    }

    .gallery-stage img {
      display: block;
      max-width: 100%;
      max-height: min(66vh, 780px);
      object-fit: contain
    }

    .gallery-counter {
      position: absolute;
      top: 13px;
      right: 13px;
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(4, 10, 20, .72);
      font-size: 12px;
      font-weight: 800
    }

    .gallery-caption {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 38px 18px 16px;
      background: linear-gradient(transparent, rgba(4, 10, 20, .9));
      font-size: 16px;
      font-weight: 700
    }

    .gallery-nav {
      position: absolute;
      top: 50%;
      z-index: 2;
      width: 46px;
      height: 46px;
      font-size: 35px;
      line-height: 1;
      transform: translateY(-50%)
    }

    .gallery-prev {
      left: 14px
    }

    .gallery-next {
      right: 14px
    }

    .gallery-description {
      margin: 16px 2px 14px
    }

    .gallery-thumbs {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      padding-bottom: 2px
    }

    .gallery-thumb {
      width: 62px;
      height: 76px;
      flex: none;
      border: 2px solid transparent;
      border-radius: 9px;
      background-color: #24314a;
      background-position: center;
      background-size: cover;
      cursor: pointer
    }

    .gallery-thumb.is-active {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(56, 189, 248, .25)
    }

    body.gallery-open {
      overflow: hidden
    }

.locale-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 7px 18px -15px rgba(15, 23, 42, .7);
}

.locale-switch a {
  display: grid;
  min-width: 36px;
  height: 28px;
  padding: 0 9px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.locale-switch a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.locale-switch a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

.locale-switch a[aria-current="page"] {
  background: var(--accent);
  color: #06243a;
  box-shadow: 0 5px 12px -8px color-mix(in srgb, var(--accent) 75%, #000);
}

.footer-locale {
  width: fit-content;
  margin-top: 14px;
}

.footer-locale a {
  min-width: auto;
  padding-inline: 12px;
  letter-spacing: 0;
}

@media(max-width:820px) {
  body {
    overflow-x: hidden;
  }

  .nav {
    flex-wrap: nowrap;
  }

  .nav > .locale-switch {
    display: none;
  }

  .mobile-menu {
    margin-left: auto;
  }

  .hero-copy {
    min-width: 0;
    width: 100%;
  }

  h1 {
    overflow-wrap: anywhere;
  }
}

@media(max-width:600px) {
      .gallery-modal {
        padding: 10px
      }

      .gallery-panel {
        max-height: calc(100vh - 20px);
        padding: 16px;
        border-radius: 17px
      }

      .gallery-header h2 {
        font-size: 21px
      }

      .gallery-stage img {
        max-height: 67vh
      }

      .gallery-nav {
        width: 40px;
        height: 40px;
        font-size: 31px
      }

      .gallery-prev {
        left: 8px
      }

      .gallery-next {
        right: 8px
      }

      .gallery-caption {
        font-size: 14px
      }

      .phone-hint {
        opacity: 1;
        transform: none
      }
    }