/* ===================================================================
   test-iq.ru — общий дизайн-система сайта (v2)
   Подключается на всех страницах. Содержит:
     - CSS-переменные (цвета, шрифты)
     - базовый reset
     - шапку (.nav), подвал (.site-footer), модалку старта теста
     - секции главной страницы (hero, sections, method, faq и т.д.)
   Стили для testing.html / result.html / certificate.html / verify.html
   и упрощённого хедера/футера юридических страниц (.top/.foot) будут
   добавлены сюда отдельными блоками на следующих этапах.
   =================================================================== */

:root {
        --ink: #1b1533;
        --plum: #241a52;
        --plum-deep: #150e33;
        --accent: #3f6098;
        --accent-soft: #a6bad9;
        --accent-ink: #2c4770;
        --gold-tint: rgba(63, 96, 152, 0.12);
        --gold-line: rgba(63, 96, 152, 0.26);
        --ivory: #f2f3f6;
        --paper: #fdfdff;
        --paper-2: #eaecf1;
        --line: rgba(27, 21, 51, 0.13);
        --line-2: rgba(27, 21, 51, 0.22);
        --muted: #6b6678;
        --muted-2: #8b8797;
        --serif: "Spectral", Georgia, serif;
        --sans: "IBM Plex Sans", system-ui, sans-serif;
        --mono: "IBM Plex Mono", ui-monospace, monospace;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        background: var(--ivory);
      }
      body {
        font-family: var(--sans);
        color: var(--ink);
        line-height: 1.5;
        overflow-x: hidden;
      }
      a {
        color: var(--accent-ink);
        text-decoration: none;
      }
      a:hover {
        color: var(--ink);
      }
      ::selection {
        background: var(--plum);
        color: #fff;
      }
      img {
        max-width: 100%;
        display: block;
      }
      .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
      }
      .overline {
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--accent-ink);
      }
      .sec-title {
        font-family: var(--serif);
        font-weight: 500;
        font-size: 42px;
        letter-spacing: -0.01em;
        color: var(--ink);
      }
      .sec-head {
        text-align: center;
        margin-bottom: 52px;
      }
      .sec-head .overline {
        margin-bottom: 14px;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        font-family: var(--sans);
        font-weight: 600;
        font-size: 16px;
        padding: 17px 32px;
        border-radius: 11px;
        border: 1px solid transparent;
        cursor: pointer;
        transition: background 0.2s;
      }
      .btn svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .btn-primary {
        background: var(--plum);
        color: #fff;
        border-color: var(--plum);
      }
      .btn-primary:hover {
        background: var(--plum-deep);
        color: #fff;
      }
      .btn-primary svg {
        stroke: var(--accent-soft);
      }
      .btn-gold {
        background: var(--accent);
        color: var(--plum-deep);
        border-color: var(--accent);
      }
      .btn-gold:hover {
        background: var(--accent-soft);
        color: var(--plum-deep);
      }
      .btn-gold svg {
        stroke: currentColor;
      }

      /* NAV */
      .nav {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--plum-deep);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      .nav .seal {
        background: rgba(255, 255, 255, 0.06);
      }
      .nav-in {
        height: 74px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 13px;
      }
      .seal {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--plum);
        border: 1.5px solid var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 0 0 3px rgba(63, 96, 152, 0.2);
        flex-shrink: 0;
      }
      .seal span {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 18px;
        color: var(--accent-soft);
      }
      .brand-name {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 20px;
        color: #fff;
        line-height: 1.05;
      }
      .brand-name b {
        color: var(--accent-soft);
        font-weight: 600;
      }
      .brand-sub {
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 34px;
      }
      .nav-links a.lnk {
        font-size: 14.5px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.72);
      }
      .nav-links a.lnk:hover {
        color: #fff;
      }
      .nav-cta {
        background: var(--plum);
        color: #fff;
        font-weight: 600;
        font-size: 14.5px;
        padding: 11px 22px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: none;
        cursor: pointer;
      }
      .nav-cta:hover {
        background: #2f2560;
      }
      .nav-cta svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: var(--accent-soft);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .burger {
        display: none;
      }

      /* HERO */
      .hero {
        padding-top: 76px;
        padding-bottom: 64px;
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 64px;
        align-items: center;
      }
      .hero-copy {
        grid-column: 1;
        grid-row: 1;
      }
      .hero-sample {
        grid-column: 2;
        grid-row: 1 / span 2;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 7px 16px 7px 12px;
        border: 1px solid var(--line-2);
        border-radius: 100px;
        background: var(--paper);
        margin-bottom: 30px;
      }
      .badge .b1 {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--accent-ink);
        font-weight: 500;
      }
      .badge .b1 svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: var(--accent-ink);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .badge .sep {
        width: 1px;
        height: 13px;
        background: var(--line-2);
      }
      .badge .b2 {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--muted);
      }
      .hero h1 {
        font-family: var(--serif);
        font-weight: 500;
        font-size: 58px;
        line-height: 1.06;
        letter-spacing: -0.015em;
        color: var(--ink);
        margin-bottom: 24px;
      }
      .hero h1 em {
        font-style: italic;
        color: var(--accent-ink);
      }
      .hero-lead {
        font-size: 18px;
        line-height: 1.65;
        color: var(--muted);
        max-width: 480px;
        margin-bottom: 34px;
      }
      .hero-actions {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        margin-bottom: 28px;
      }
      .price-note {
        grid-column: 1;
        grid-row: 2;
        margin-top: 14px;
        font-size: 11px;
        color: var(--muted-2);
        font-weight: 400;
      }
      .price-note b {
        color: var(--muted-2);
        font-weight: 400;
      }
      /* Hero trust row */
      .hero-trust-row {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
      }
      .hero-trust-item {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted-2);
      }
      .hero-trust-item svg {
        width: 13px;
        height: 13px;
        stroke: var(--accent-ink);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
      }
      /* Hero mini stats — заполняет пустое место перед кнопкой на мобильных,
         на десктопе не нужен (там есть hero-sample) */
      .hero-mini-stats {
        display: none;
      }
      /* Hero info panel (right side) */
      .hero-sample {
        position: relative;
      }
      .hero-info-panel {
        background: var(--plum-deep);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 32px 64px -32px rgba(21, 14, 51, 0.5);
      }
      /* Panel header — gauge + title */
      .hip-header {
        padding: 28px 28px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        gap: 22px;
      }
      .hip-gauge {
        position: relative;
        flex-shrink: 0;
        width: 80px;
        height: 80px;
      }
      .hip-gauge svg {
        width: 80px;
        height: 80px;
      }
      .hip-gauge-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .hip-gauge-center .gn {
        font-family: var(--serif);
        font-size: 24px;
        font-weight: 600;
        color: #fff;
        line-height: 1;
      }
      .hip-gauge-center .gl {
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--accent-soft);
      }
      .hip-header-text .ht {
        font-family: var(--serif);
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 5px;
      }
      .hip-header-text .hs {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
      }
      /* Bell curve mini */
      .hip-curve {
        padding: 0 28px 20px;
      }
      .hip-curve-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 10px;
      }
      /* Stats grid 2×2 */
      .hip-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
      }
      .hip-stat {
        padding: 18px 22px;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      .hip-stat .sn {
        font-family: var(--serif);
        font-size: 28px;
        font-weight: 600;
        color: #fff;
        line-height: 1;
        margin-bottom: 3px;
      }
      .hip-stat .sc {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
      }
      /* Trust checklist */
      .hip-checks {
        padding: 18px 28px 22px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }
      .hip-check {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13.5px;
        color: rgba(255, 255, 255, 0.78);
      }
      .hip-check-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(63, 96, 152, 0.28);
        border: 1px solid rgba(63, 96, 152, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .hip-check-icon svg {
        width: 11px;
        height: 11px;
        stroke: var(--accent-soft);
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      /* keep old sample classes for other pages (not used on main anymore) */
      .sample-seal {
        position: absolute;
        top: -18px;
        right: -18px;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        background: var(--plum);
        border: 1.5px solid var(--accent);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow:
          inset 0 0 0 4px rgba(63, 96, 152, 0.18),
          0 12px 30px rgba(21, 14, 51, 0.22);
        z-index: 2;
      }
      .sample-seal .t {
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 1px;
        color: var(--accent-soft);
        text-transform: uppercase;
        white-space: nowrap;
      }
      .sample-seal .n {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 26px;
        color: #fff;
        line-height: 1;
        margin: 1px 0;
      }
      .sample-card {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 30px;
        box-shadow: 0 30px 60px -30px rgba(21, 14, 51, 0.28);
      }
      .sample-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
      }
      .sample-top .l {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--accent-ink);
      }
      .sample-top .r {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted-2);
      }
      .sample-q {
        font-family: var(--serif);
        font-size: 18px;
        color: var(--ink);
        margin-bottom: 18px;
      }
      .matrix {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 22px;
      }
      .mcell {
        aspect-ratio: 1;
        background: var(--paper-2);
        border: 1px solid var(--line);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
      }
      .mcell svg {
        stroke: var(--plum);
        fill: none;
        stroke-width: 2;
      }
      .mcell.q {
        background: var(--gold-tint);
        border: 1.5px dashed var(--accent-ink);
      }
      .mcell.q span {
        font-family: var(--serif);
        font-size: 26px;
        color: var(--accent-ink);
        font-weight: 600;
      }
      .opts {
        display: flex;
        gap: 8px;
      }
      .opt {
        flex: 1;
        aspect-ratio: 1.35;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .opt svg {
        stroke: var(--muted);
        fill: none;
        stroke-width: 2;
      }
      .opt.sel {
        background: var(--plum);
        border: 1.5px solid var(--accent);
      }
      .opt.sel svg {
        stroke: var(--accent-soft);
      }

      /* TRUST STRIP */
      .trust {
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: var(--paper);
      }
      .trust-in {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .trust-item {
        padding: 26px 24px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        border-right: 1px solid var(--line);
      }
      .trust-item:last-child {
        border-right: none;
      }
      .trust-num {
        font-family: var(--serif);
        font-size: 30px;
        font-weight: 600;
        color: var(--ink);
      }
      .trust-num b {
        color: var(--accent-ink);
        font-weight: 600;
      }
      .trust-cap {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--muted-2);
      }

      /* SECTION SPACING */
      .section {
        padding-top: 92px;
        padding-bottom: 20px;
      }
      /* INFO GRID */
      .info-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
      .card {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 30px;
      }
      .chip {
        width: 52px;
        height: 52px;
        border-radius: 13px;
        background: var(--gold-tint);
        border: 1px solid var(--gold-line);
        color: var(--accent-ink);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
      }
      .chip svg {
        width: 24px;
        height: 24px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .card h3 {
        font-family: var(--serif);
        font-size: 22px;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 9px;
      }
      .card p {
        font-size: 15px;
        line-height: 1.6;
        color: var(--muted);
      }
      .card-dark {
        background: var(--plum);
        border-color: var(--plum);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .card-dark .kicker {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--accent-soft);
      }
      .card-dark h3 {
        color: #fff;
        margin-top: 18px;
      }
      .card-dark p {
        color: rgba(255, 255, 255, 0.72);
      }

      /* SEO INTRO */
      .seo {
        max-width: 820px;
        margin: 0 auto;
        padding: 64px 40px 20px;
        text-align: center;
      }
      .seo p {
        font-family: var(--serif);
        font-size: 24px;
        line-height: 1.55;
        color: var(--ink);
      }
      .seo strong {
        font-weight: 600;
      }

      /* WHY */
      .why-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border: 1px solid var(--line);
        border-radius: 18px;
        overflow: hidden;
        background: var(--paper);
      }
      .why-item {
        padding: 40px;
        display: flex;
        gap: 22px;
        border-bottom: 1px solid var(--line);
      }
      .why-item:nth-child(odd) {
        border-right: 1px solid var(--line);
      }
      .why-item:nth-child(3),
      .why-item:nth-child(4) {
        border-bottom: none;
      }
      .why-ico {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--gold-tint);
        color: var(--accent-ink);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--gold-line);
      }
      .why-ico svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .why-item h3 {
        font-family: var(--serif);
        font-size: 23px;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 10px;
      }
      .why-item p {
        font-size: 15.5px;
        line-height: 1.65;
        color: var(--muted);
      }

      /* METHOD */
      .method {
        background: var(--plum-deep);
        margin-top: 92px;
        color: #fff;
      }
      .method-in {
        padding-top: 92px;
        padding-bottom: 92px;
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 68px;
        align-items: center;
      }
      .method .overline {
        color: var(--accent-soft);
        margin-bottom: 16px;
        display: block;
      }
      .method h2 {
        font-family: var(--serif);
        font-weight: 500;
        font-size: 44px;
        line-height: 1.1;
        letter-spacing: -0.01em;
        color: #fff;
        margin-bottom: 22px;
      }
      .method p {
        font-size: 16.5px;
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.72);
        margin-bottom: 20px;
      }
      .method p b {
        color: #fff;
        font-weight: 600;
      }
      .method-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        margin-top: 14px;
      }
      .method-stats .s {
        padding: 20px 0;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
      }
      .method-stats .s:last-child {
        border-right: none;
        padding-left: 22px;
      }
      .method-stats .s:nth-child(2) {
        padding-left: 22px;
      }
      .method-stats .sn {
        font-family: var(--serif);
        font-size: 30px;
        font-weight: 600;
        color: var(--accent-soft);
      }
      .method-stats .sc {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        margin-top: 4px;
      }
      .bell-card {
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;
        padding: 36px 34px 26px;
      }
      .bell-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 24px;
        gap: 12px;
      }
      .bell-head .h {
        font-family: var(--serif);
        font-size: 20px;
        color: #fff;
      }
      .bell-head .m {
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
      }
      .bell-foot {
        display: flex;
        justify-content: space-between;
        margin-top: 14px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }
      .bell-foot span {
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
      }
      .bell-foot .mid {
        color: var(--accent-soft);
      }

      /* DEVICES */
      .devices-sec {
        padding-top: 92px;
        padding-bottom: 20px;
        text-align: center;
      }
      .devices-sec .overline {
        margin-bottom: 14px;
        display: block;
      }
      .devices-sec h2 {
        margin-bottom: 12px;
      }
      .devices-lead {
        font-size: 17px;
        color: var(--muted);
        max-width: 560px;
        margin: 0 auto 56px;
      }
      .devices {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 40px;
      }
      .dev-label {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--muted-2);
        margin-top: 22px;
      }
      .screen {
        background: var(--paper);
        border-radius: 6px;
        padding: 14px;
        text-align: left;
      }
      .screen-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }
      .screen-row .q {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 1px;
        color: var(--accent-ink);
      }
      .screen-row .t {
        font-family: var(--mono);
        font-size: 9px;
        color: var(--muted-2);
      }
      .pbar {
        height: 3px;
        background: var(--paper-2);
        border-radius: 3px;
        margin-bottom: 14px;
        overflow: hidden;
      }
      .pbar i {
        display: block;
        width: 35%;
        height: 100%;
        background: var(--accent);
      }
      .mini {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        max-width: 150px;
      }
      .mini span {
        aspect-ratio: 1;
        background: var(--paper-2);
        border-radius: 4px;
      }
      .mini span.q {
        background: rgba(63, 96, 152, 0.2);
        border: 1px dashed var(--accent-ink);
      }
      .laptop {
        width: 460px;
      }
      .laptop .frame {
        background: #17102f;
        border: 2px solid #2a2350;
        border-radius: 14px 14px 0 0;
        padding: 12px;
        box-shadow: 0 30px 50px -24px rgba(21, 14, 51, 0.4);
      }
      .laptop .base {
        height: 12px;
        background: #221b45;
        border-radius: 0 0 10px 10px;
        margin: 0 -14px;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
      }
      .tablet {
        width: 220px;
      }
      .tablet .frame {
        background: #17102f;
        border: 2px solid #2a2350;
        border-radius: 18px;
        padding: 14px 12px;
        box-shadow: 0 24px 44px -22px rgba(21, 14, 51, 0.4);
      }
      .phone {
        width: 128px;
      }
      .phone .frame {
        background: #17102f;
        border: 2px solid #2a2350;
        border-radius: 20px;
        padding: 10px 8px;
        box-shadow: 0 20px 40px -20px rgba(21, 14, 51, 0.4);
      }
      .phone .notch {
        width: 34px;
        height: 4px;
        background: #2a2350;
        border-radius: 3px;
        margin: 0 auto 8px;
      }

      /* BANNER */
      .banner-sec {
        max-width: 1200px;
        margin: 92px auto 0;
        padding: 0 40px;
      }
      .banner {
        position: relative;
        overflow: hidden;
        background: var(--plum);
        border-radius: 22px;
        padding: 64px 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
      }
      .banner .ring {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .banner .r1 {
        top: -60px;
        right: 40px;
        width: 260px;
        height: 260px;
      }
      .banner .r2 {
        top: -20px;
        right: 80px;
        width: 180px;
        height: 180px;
        border-color: rgba(255, 255, 255, 0.06);
      }
      .banner .in {
        position: relative;
      }
      .banner .overline {
        color: var(--accent-soft);
        margin-bottom: 16px;
        display: block;
      }
      .banner h2 {
        font-family: var(--serif);
        font-weight: 500;
        font-size: 40px;
        line-height: 1.12;
        color: #fff;
        margin-bottom: 12px;
      }
      .banner p {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.7);
        max-width: 440px;
      }
      .banner .btn {
        position: relative;
        flex-shrink: 0;
      }

      /* FAQ */
      .faq {
        max-width: 900px;
        margin: 0 auto;
        padding: 92px 40px 40px;
      }
      .faq-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .faq-item {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 28px 34px 30px 70px;
        position: relative;
      }
      .faq-item .num {
        position: absolute;
        left: 34px;
        top: 30px;
        font-family: var(--serif);
        font-size: 18px;
        font-weight: 600;
        color: var(--accent-ink);
      }
      .faq-item h3 {
        font-family: var(--serif);
        font-size: 21px;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 10px;
      }
      .faq-item p {
        font-size: 15.5px;
        line-height: 1.65;
        color: var(--muted);
      }

      /* CORPORATE */
      .corp-grid {
        display: grid;
        grid-template-columns: 0.82fr 1.18fr;
        gap: 24px;
        align-items: stretch;
      }
      .corp-intro {
        background: var(--plum-deep);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;
        padding: 40px 38px;
        display: flex;
        flex-direction: column;
        color: #fff;
        box-shadow: 0 32px 64px -34px rgba(21, 14, 51, 0.5);
      }
      .corp-intro .overline {
        color: var(--accent-soft);
        margin-bottom: 16px;
        display: block;
      }
      .corp-intro h3 {
        font-family: var(--serif);
        font-weight: 500;
        font-size: 30px;
        line-height: 1.16;
        letter-spacing: -0.01em;
        color: #fff;
        margin-bottom: 14px;
      }
      .corp-intro p {
        font-size: 15.5px;
        line-height: 1.66;
        color: rgba(255, 255, 255, 0.72);
        margin-bottom: 26px;
      }
      .corp-stat {
        display: flex;
        align-items: baseline;
        gap: 13px;
        padding: 18px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        margin-bottom: 28px;
      }
      .corp-stat .n {
        font-family: var(--serif);
        font-size: 40px;
        font-weight: 600;
        color: var(--accent-soft);
        line-height: 1;
      }
      .corp-stat .c {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.45;
      }
      .corp-cta {
        margin-top: auto;
      }
      .corp-intro .btn {
        width: 100%;
      }
      .corp-mail {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.3px;
        color: rgba(255, 255, 255, 0.55);
      }
      .corp-mail a {
        color: var(--accent-soft);
      }
      .corp-mail a:hover {
        color: #fff;
      }
      .corp-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }
      .corp-card {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 28px;
      }
      .corp-card .chip {
        margin-bottom: 18px;
      }
      .corp-card h4 {
        font-family: var(--serif);
        font-size: 19px;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 8px;
      }
      .corp-card p {
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--muted);
      }
      @media (max-width: 980px) {
        .corp-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 560px) {
        .corp-cards {
          grid-template-columns: 1fr;
        }
        .corp-intro {
          padding: 32px 26px;
        }
      }

      /* FOOTER */
      .site-footer {
        background: var(--plum-deep);
        color: #fff;
        margin-top: 40px;
      }
      .footer-in {
        padding-top: 68px;
        padding-bottom: 34px;
      }
      .footer-cols {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 40px;
        padding-bottom: 44px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      }
      .footer-brand .row {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 18px;
      }
      .footer-brand .seal {
        background: rgba(255, 255, 255, 0.06);
      }
      .footer-brand .nm {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 21px;
        color: #fff;
      }
      .footer-brand .nm b {
        color: var(--accent-soft);
        font-weight: 600;
      }
      .footer-brand p {
        font-size: 14.5px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.55);
        max-width: 280px;
      }
      .footer-col .h {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--accent-soft);
        margin-bottom: 18px;
      }
      .footer-col .links {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .footer-col a {
        font-size: 14.5px;
        color: rgba(255, 255, 255, 0.7);
      }
      .footer-col a:hover {
        color: #fff;
      }
      .footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-top: 26px;
      }
      .footer-bottom span {
        font-family: var(--mono);
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
      }

      /* MODAL */
      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(21, 14, 51, 0.6);
        backdrop-filter: blur(4px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
      }
      .modal-overlay.open {
        display: flex;
      }
      .modal {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 18px;
        max-width: 560px;
        width: 100%;
        padding: 44px 44px 40px;
        box-shadow: 0 40px 90px -30px rgba(21, 14, 51, 0.6);
        position: relative;
      }
      .modal-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--line-2);
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
      }
      .modal-close:hover {
        background: var(--paper-2);
        color: var(--ink);
      }
      .modal-close svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
      }
      .modal .overline {
        display: block;
        text-align: center;
        margin-bottom: 12px;
      }
      .modal h2 {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 28px;
        color: var(--ink);
        text-align: center;
        margin-bottom: 24px;
      }
      .modal ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 28px;
      }
      .modal li {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 16px;
        color: var(--ink);
      }
      .modal li .n {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--gold-tint);
        border: 1px solid var(--gold-line);
        color: var(--accent-ink);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 500;
      }
      .modal .btn {
        width: 100%;
        justify-content: center;
      }

      /* RESPONSIVE */
      @media (max-width: 980px) {
        .hero {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .method-in {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .info-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .footer-cols {
          grid-template-columns: 1fr 1fr;
          gap: 32px;
        }
      }
      @media (max-width: 768px) {
        .wrap {
          padding: 0 22px;
        }
        .nav-links {
          display: none;
        }
        .burger {
          display: inline-flex;
        }
        .hero {
          display: block;
          padding-top: 28px;
          padding-bottom: 0;
        }
        .hero-copy {
          display: flex;
          flex-direction: column;
          min-height: calc(100vh - 74px - 28px);
          min-height: calc(100svh - 74px - 28px);
        }
        .badge {
          flex-wrap: wrap;
          row-gap: 8px;
        }
        .hero-sample {
          display: none;
        } /* ← прячем инфо-панель на мобильных */
        .hero-mini-stats {
          display: flex;
          align-items: stretch;
          background: var(--paper);
          border: 1px solid var(--line-2);
          border-radius: 14px;
          padding: 16px 10px;
          margin: 22px 0 0;
        }
        .hms-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 4px;
        }
        .hms-n {
          font-family: var(--serif);
          font-weight: 600;
          font-size: 21px;
          color: var(--ink);
        }
        .hms-c {
          font-family: var(--mono);
          font-size: 9.5px;
          letter-spacing: 1px;
          text-transform: uppercase;
          color: var(--muted-2);
        }
        .hms-div {
          width: 1px;
          align-self: stretch;
          background: var(--line-2);
        }
        .hero-actions {
          margin-top: auto;
          padding-top: 22px;
        }
        .hero-trust-row {
          margin-top: 20px;
          margin-bottom: 4px;
          gap: 14px;
        }
        .price-note {
          margin-top: 0;
          padding-bottom: 28px;
        }
        .hero h1 {
          font-size: 40px;
        }
        .hero-lead {
          font-size: 16px;
        }
        .sec-title {
          font-size: 30px;
        }
        .trust-in {
          grid-template-columns: repeat(2, 1fr);
        }
        .trust-item:nth-child(2) {
          border-right: none;
        }
        .section {
          padding-top: 64px;
          padding-bottom: 10px;
        }
        .info-grid {
          grid-template-columns: 1fr;
        }
        .seo {
          padding: 44px 22px 10px;
        }
        .seo p {
          font-size: 20px;
        }
        .why-grid {
          grid-template-columns: 1fr;
        }
        .why-item {
          border-right: none !important;
          padding: 32px 26px;
        }
        .why-item:nth-child(3) {
          border-bottom: 1px solid var(--line);
        }
        .method {
          margin-top: 64px;
        }
        .method-in {
          padding-top: 64px;
          padding-bottom: 64px;
        }
        .method h2 {
          font-size: 34px;
        }
        .devices {
          gap: 24px;
          flex-wrap: wrap;
        }
        .laptop {
          width: 100%;
        }
        .tablet {
          display: none;
        }
        .banner {
          flex-direction: column;
          align-items: flex-start;
          padding: 44px 30px;
        }
        .banner h2 {
          font-size: 30px;
        }
        .banner .btn {
          width: 100%;
          justify-content: center;
        }
        .footer-cols {
          grid-template-columns: 1fr;
          gap: 28px;
        }
        .footer-bottom {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
        }
        .modal {
          padding: 40px 26px 32px;
        }
      }
      @media (max-width: 420px) {
        .trust-in {
          grid-template-columns: 1fr;
        }
        .trust-item {
          border-right: none;
        }
      }