:root {
      --bg: #17121C;
      --surface: #201826;
      --surface-2: #291F31;
      --line: #3A2E42;
      --text: #EDE6EA;
      --muted: #9A8A96;
      --rose: #E8739A;
      --rose-soft: #F4A9C1;
      --gold: #D4A574;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    .wrap {
      max-width: 760px;
      margin: 0 auto;
      padding: 0 24px
    }

    /* atmosphere */
    .glow {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0
    }

    .glow::before {
      content: "";
      position: absolute;
      top: -15%;
      left: 50%;
      transform: translateX(-50%);
      width: 680px;
      height: 680px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 115, 154, .16), transparent 62%);
      filter: blur(20px)
    }

    .glow::after {
      content: "";
      position: absolute;
      bottom: -10%;
      right: -8%;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(212, 165, 116, .10), transparent 65%)
    }

    main {
      position: relative;
      z-index: 1
    }

    .eyebrow {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--rose-soft);
    }

    /* hero */
    header.hero {
      padding: 76px 0 46px;
      text-align: center
    }

    .badge18 {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid var(--line);
      border-radius: 100px;
      padding: 5px 13px;
      margin-bottom: 26px;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 11px;
      letter-spacing: .14em;
      color: var(--muted);
      text-transform: uppercase;
    }

    .badge18 b {
      color: var(--rose);
      font-weight: 600
    }

    h1 {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: clamp(2.4rem, 7vw, 4.1rem);
      line-height: 1.04;
      letter-spacing: -.015em;
      margin: 18px 0 20px;
    }

    h1 em {
      font-style: italic;
      color: var(--rose-soft)
    }

    .lede {
      font-size: clamp(1.05rem, 2.4vw, 1.22rem);
      color: var(--muted);
      max-width: 560px;
      margin: 0 auto;
    }

    .alt-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 22px;
      padding: 9px 18px;
      border: 1px solid var(--line);
      border-radius: 100px;
      background: var(--surface);
      font-size: .92rem;
      color: var(--rose-soft);
      text-decoration: none;
      transition: border-color .18s ease, color .18s ease, transform .18s ease;
    }

    .alt-link:hover {
      border-color: var(--rose);
      color: var(--rose);
      transform: translateY(-1px)
    }

    .alt-link .a-arrow {
      transition: transform .18s ease
    }

    .alt-link:hover .a-arrow {
      transform: translateX(3px)
    }

    .hero-banner {
      margin: 34px auto 0;
      max-width: 640px;
    }

    .cmp-banner {
      margin: 0 0 26px
    }

    .cmp-banner img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 14px;
      border: 1px solid var(--line);
      box-shadow: 0 20px 50px -28px rgba(0, 0, 0, .7)
    }

    .hero-banner img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 16px;
      border: 1px solid var(--line);
      box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7);
    }

    /* verdict card — signature */
    .verdict {
      background: linear-gradient(160deg, var(--surface-2), var(--surface));
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 34px 30px;
      margin: 44px 0;
      box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7);
    }

    .verdict-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      padding-bottom: 22px;
      margin-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }

    .score {
      display: flex;
      align-items: baseline;
      gap: 6px;
      font-family: 'Fraunces', serif
    }

    .score .n {
      font-size: 3.2rem;
      font-weight: 600;
      color: var(--gold);
      line-height: 1
    }

    .score .d {
      font-size: 1.2rem;
      color: var(--muted)
    }

    .score-label {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 4px;
    }

    .stars {
      color: var(--gold);
      font-size: 1.15rem;
      letter-spacing: 2px
    }

    .verdict-line {
      font-family: 'Fraunces', serif;
      font-size: 1.4rem;
      line-height: 1.35;
      font-weight: 400;
      margin-bottom: 6px;
    }

    .verdict-sub {
      color: var(--muted);
      font-size: .98rem
    }

    .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      margin-top: 26px;
      background: var(--rose);
      color: #1a0f16;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 1.05rem;
      padding: 17px 28px;
      border-radius: 12px;
      text-decoration: none;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      box-shadow: 0 12px 30px -12px rgba(232, 115, 154, .6);
    }

    .cta:hover {
      transform: translateY(-2px);
      background: var(--rose-soft);
      box-shadow: 0 18px 40px -14px rgba(232, 115, 154, .7)
    }

    .cta:focus-visible {
      outline: 3px solid var(--rose-soft);
      outline-offset: 3px
    }

    .cta .arrow {
      transition: transform .18s ease
    }

    .cta:hover .arrow {
      transform: translateX(4px)
    }

    .cta-note {
      text-align: center;
      font-size: .82rem;
      color: var(--muted);
      margin-top: 12px
    }

    /* sections */
    section {
      padding: 30px 0
    }

    .sec-label {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 12px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--rose-soft);
      margin-bottom: 22px;
    }

    h2 {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: clamp(1.6rem, 4vw, 2.2rem);
      line-height: 1.12;
      letter-spacing: -.01em;
      margin-bottom: 26px;
    }

    .prose p {
      color: var(--muted);
      font-size: 1.05rem;
      margin-bottom: 18px
    }

    .prose p:last-child {
      margin-bottom: 0
    }

    .prose strong {
      color: var(--text);
      font-weight: 600
    }

    .feat {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 18px;
      padding: 22px 0;
      border-top: 1px solid var(--line);
    }

    .feat:first-of-type {
      border-top: none;
      padding-top: 0
    }

    .feat-num {
      font-family: 'Spline Sans Mono', monospace;
      font-size: .85rem;
      font-weight: 600;
      color: var(--gold);
      padding-top: 3px;
    }

    .feat h3 {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: 1.25rem;
      margin-bottom: 6px
    }

    .feat p {
      color: var(--muted);
      font-size: 1rem
    }

    /* comparison table */
    .compare {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      font-size: .98rem;
    }

    .compare th,
    .compare td {
      text-align: left;
      padding: 15px 18px;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
    }

    .compare thead th {
      font-family: 'Spline Sans Mono', monospace;
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--rose-soft);
      background: var(--surface);
    }

    .compare td:first-child {
      color: var(--text);
      font-weight: 500
    }

    .compare td {
      color: var(--muted)
    }

    .compare tr:last-child td {
      border-bottom: none
    }

    .compare .yes {
      color: var(--gold)
    }

    /* steps */
    .step {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 18px;
      padding: 20px 0;
      border-top: 1px solid var(--line);
    }

    .step:first-of-type {
      border-top: none;
      padding-top: 0
    }

    .step-num {
      font-family: 'Fraunces', serif;
      font-size: 1.5rem;
      color: var(--gold);
      line-height: 1;
      padding-top: 2px;
    }

    .step h3 {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: 1.15rem;
      margin-bottom: 5px
    }

    .step p {
      color: var(--muted);
      font-size: 1rem
    }

    .callout {
      background: var(--surface);
      border: 1px solid var(--line);
      border-left: 3px solid var(--rose);
      border-radius: 12px;
      padding: 24px 26px;
    }

    .callout p {
      color: var(--muted)
    }

    .callout strong {
      color: var(--text);
      font-weight: 600
    }

    /* faq */
    .faq details {
      border-top: 1px solid var(--line);
      padding: 18px 0;
    }

    .faq details:first-of-type {
      border-top: none
    }

    .faq summary {
      font-family: 'Fraunces', serif;
      font-size: 1.12rem;
      color: var(--text);
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

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

    .faq summary::after {
      content: "+";
      color: var(--gold);
      font-size: 1.3rem;
      transition: transform .2s ease
    }

    .faq details[open] summary::after {
      transform: rotate(45deg)
    }

    .faq details p {
      color: var(--muted);
      font-size: 1rem;
      margin-top: 12px
    }

    /* closing cta */
    .close-cta {
      text-align: center;
      padding: 44px 0 30px
    }

    .close-cta h2 {
      margin-bottom: 12px
    }

    .close-cta p {
      color: var(--muted);
      max-width: 440px;
      margin: 0 auto 8px
    }

    .close-cta .cta {
      max-width: 340px;
      margin-left: auto;
      margin-right: auto
    }

    footer {
      border-top: 1px solid var(--line);
      margin-top: 40px;
      padding: 32px 0 56px;
      color: var(--muted);
      font-size: .82rem;
      text-align: center;
      line-height: 1.7;
    }

    footer .disc {
      max-width: 560px;
      margin: 0 auto
    }

    footer a {
      color: var(--rose-soft);
      text-decoration: none
    }

    /* pros & cons */
    .pc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px
    }

    .pc-card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 24px 24px 8px;
    }

    .pc-card.cons {
      border-left: 3px solid var(--rose)
    }

    .pc-card.pros {
      border-left: 3px solid var(--gold)
    }

    .pc-head {
      font-family: 'Spline Sans Mono', monospace;
      font-size: .74rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .pc-card.pros .pc-head {
      color: var(--gold)
    }

    .pc-card.cons .pc-head {
      color: var(--rose-soft)
    }

    .pc-card ul {
      list-style: none
    }

    .pc-card li {
      color: var(--muted);
      font-size: .98rem;
      padding: 0 0 16px 26px;
      position: relative;
      line-height: 1.5;
    }

    .pc-card li::before {
      position: absolute;
      left: 0;
      top: 0;
      font-weight: 600
    }

    .pc-card.pros li::before {
      content: "+";
      color: var(--gold)
    }

    .pc-card.cons li::before {
      content: "–";
      color: var(--rose)
    }

    .pc-card strong {
      color: var(--text);
      font-weight: 600
    }

    /* competitor comparison */
    .vs-note {
      color: var(--muted);
      font-size: .86rem;
      margin-top: 14px;
      font-style: italic
    }

    .compare .highlight {
      background: rgba(212, 165, 116, .07)
    }

    .compare .highlight td:first-child {
      color: var(--gold)
    }

    /* rival breakdown cards */
    .rival {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 24px 26px;
      margin-top: 18px;
    }

    .rival-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 4px
    }

    .rival h3 {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: 1.3rem
    }

    .rival .tag {
      font-family: 'Spline Sans Mono', monospace;
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid var(--line);
      border-radius: 100px;
      padding: 4px 11px;
      white-space: nowrap;
    }

    .rival .price {
      font-family: 'Spline Sans Mono', monospace;
      font-size: .8rem;
      color: var(--rose-soft);
      margin-bottom: 14px
    }

    .rival p {
      color: var(--muted);
      font-size: 1rem;
      margin-bottom: 12px
    }

    .rival p:last-child {
      margin-bottom: 0
    }

    .rival .verdict-tag {
      color: var(--text);
      font-weight: 600
    }

    .rival strong {
      color: var(--text);
      font-weight: 600
    }

    @media (max-width:560px) {
      .verdict {
        padding: 26px 20px
      }

      .feat,
      .step {
        grid-template-columns: 1fr;
        gap: 6px
      }

      .feat-num,
      .step-num {
        padding-top: 0
      }

      .compare th,
      .compare td {
        padding: 12px 12px
      }

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

    @media (prefers-reduced-motion:reduce) {
      * {
        transition: none !important;
        scroll-behavior: auto
      }
    }

     /* 404 specific */
     .error-code{
      font-family:'Spline Sans Mono',monospace;
      font-size:clamp(4rem,12vw,7rem);
      font-weight:600;
      color:var(--rose);
      line-height:1;
      margin-bottom:0.2rem;
      opacity:0.5;
      letter-spacing:-0.03em;
    }
    .error-icon{
      font-size:clamp(3rem,8vw,5rem);
      line-height:1;
      margin-bottom:0.5rem;
    }
    .four-oh-four{
      margin: 60px 0 40px;
      text-align:center;
    }
    .four-oh-four .lede{
      max-width:480px;
    }
    .home-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:18px;
      color:var(--gold);
      text-decoration:none;
      font-weight:500;
      border-bottom:1px solid transparent;
      transition:border-color .2s ease, color .2s ease;
    }
    .home-link:hover{
      border-bottom-color:var(--gold);
      color:var(--rose-soft);
    }
/***************************/
.compare {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  font-size: .98rem;
}
.compare th,
.compare td {
  text-align: left;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare thead th {
  font-family: 'Spline Sans Mono', monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose-soft);
  background: var(--surface);
}
.compare td:first-child {
  color: var(--text);
  font-weight: 500;
}
.compare td {
  color: var(--muted);
}
.compare tr:last-child td {
  border-bottom: none;
}
.compare .yes {
  color: var(--gold);
}
.compare .highlight {
  background: rgba(212, 165, 116, .07);
}
.compare .highlight td:first-child {
  color: var(--gold);
}

/* ===== Адаптив для мобильных ===== */
@media (max-width: 760px) {
  .compare,
  .compare thead,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
  }

  .compare thead {
    display: none;
  }

  .compare tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--surface);
  }
  .compare tr:last-child {
    margin-bottom: 0;
  }
  .compare tr.highlight {
    background: rgba(212, 165, 116, .08);
    border-color: var(--gold);
  }

  /* Каждая ячейка — отдельная строка */
  .compare td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .compare td:last-child {
    border-bottom: none;
  }

  /* Название характеристики */
  .compare td:first-child {
    font-weight: 600;
    color: var(--text);
    flex: 0 0 100%;
    padding-bottom: 2px;
    font-size: 1.05rem;
  }

  /* Каждое значение с подписью */
  .compare td:not(:first-child) {
    flex: 1 1 calc(50% - 10px);
    min-width: 120px;
    color: var(--muted);
    padding: 4px 0 4px 8px;
    border-bottom: none;
    border-left: 2px solid var(--line);
  }

  /* Подпись к значению */
  .compare td:not(:first-child)::before {
    display: block;
    content: attr(data-label);
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rose-soft);
    opacity: 0.7;
    margin-bottom: 2px;
  }

  /* highlight */
  .compare tr.highlight td:first-child {
    color: var(--gold);
  }
  .compare .yes {
    color: var(--gold);
    font-weight: 500;
  }

  /* Цветные бейджи для сервисов */
  .compare td[data-label="Candy AI"] {
    border-left-color: var(--gold);
  }
  .compare td[data-label="Kupid AI"] {
    border-left-color: #7BA3C9;
  }
  .compare td[data-label="DreamGF"] {
    border-left-color: #C97BA3;
  }
  .compare td[data-label="Character AI"] {
    border-left-color: #7BC9A3;
  }
}

/* ===== Для очень маленьких экранов ===== */
@media (max-width: 480px) {
  .compare tr {
    padding: 12px 12px;
  }
  .compare td:not(:first-child) {
    flex: 1 1 100%;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-top: 8px;
    margin-top: 4px;
  }
  .compare td:not(:first-child)::before {
    display: inline;
    content: attr(data-label) ': ';
    font-size: .7rem;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.6;
    font-weight: 400;
  }
  .compare td[data-label="Candy AI"],
  .compare td[data-label="Kupid AI"],
  .compare td[data-label="DreamGF"],
  .compare td[data-label="Character AI"] {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}