/* Операторска платформа Arkite — page styles (colours from the Arkite roll-up) */
.arkite { --ark-blue: #3358b0; --ark-yellow: #fbd505; --ark-light: #e7f0fa; --ark-text: #222; }
.arkite *, .arkite *::before, .arkite *::after { box-sizing: border-box; }
.content .arkite p, .content .arkite li, .content .arkite h3, .content .arkite h4 { overflow-wrap: break-word; }
.arkite p { line-height: 1.5; }
.products.arkite img { float: none; border: 0; margin: 0; }

/* hero */
.arkite .ark-hero { display: flex; background: var(--ark-blue); color: #fff; border-radius: 10px; overflow: hidden; margin: 10px 0 15px; }
.arkite .ark-hero-text { flex: 1 1 55%; padding: 22px 20px 20px 24px; }
.arkite .ark-hero-photo { flex: 1 1 45%; min-height: 100%; }
.arkite .ark-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-top-left-radius: 40px; }
.arkite img.ark-logo { display: block; width: 110px; height: auto; margin-bottom: 16px; }
.arkite .ark-headline { font: bold 27px/1.12 Tahoma, Arial, sans-serif; text-transform: uppercase; margin: 0 0 14px; }
.arkite .ark-headline span, .arkite .ark-levels-title span, .arkite .ark-partner span { color: var(--ark-yellow); }
.arkite .ark-sub { font-size: 14px; margin: 0 0 8px; }
.arkite .ark-dots li { position: relative; padding-left: 16px; font-weight: bold; font-size: 14px; line-height: 1.6; }
.arkite .ark-dots li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--ark-yellow); }

/* key figures */
.arkite .ark-stats { display: flex; margin: 18px 0 6px; }
.arkite .ark-stats li { flex: 1 1 25%; text-align: center; font-weight: bold; font-size: 13px; line-height: 1.3; padding: 0 6px; border-left: 1px solid #c9d3ea; }
.arkite .ark-stats li:first-child { border-left: 0; }
.arkite .ark-stats b { display: block; color: var(--ark-blue); font-size: 34px; line-height: 1.15; margin-bottom: 4px; }

/* section headings */
.arkite .ark-section { color: var(--ark-blue); font-size: 18px; line-height: 1.3; margin: 26px 0 8px; padding-top: 16px; border-top: 3px solid var(--ark-yellow); }
.arkite .ark-section span, .arkite .ark-about h3 span { color: var(--ark-yellow); }
.arkite .ark-section strong { color: var(--ark-blue); }
.arkite .ark-center { text-align: center; }
.arkite .ark-lead { font-size: 13px; margin: 0 0 12px; }

/* about */
.arkite .ark-about { display: flex; gap: 14px; margin: 4px 0 12px; }
.arkite .ark-about > div { flex: 1 1 50%; background: var(--ark-light); border-radius: 10px; padding: 12px 14px; }
.arkite .ark-about h3 { color: var(--ark-blue); font-size: 14px; margin: 0 0 4px; }
.arkite .ark-about p { margin: 0; font-size: 12px; }

/* platform features */
.arkite .ark-features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.arkite .ark-features > div { border: 1px solid #c9d3ea; border-left: 4px solid var(--ark-blue); border-radius: 6px; padding: 10px 12px; }
.arkite .ark-features .ark-wide { grid-column: 1 / -1; }
.arkite .ark-features h4 { color: var(--ark-blue); font-size: 13px; margin: 0 0 4px; }
.arkite .ark-features p { margin: 0; font-size: 12px; }

/* how it works */
.arkite .ark-benefit { display: flex; align-items: flex-start; margin-bottom: 14px; }
.arkite .ark-benefit img { flex: 0 0 auto; width: 56px; height: auto; margin: 2px 16px 0 0; }
.arkite .ark-benefit h4 { color: var(--ark-blue); font-size: 14px; margin: 0 0 4px; }
.arkite .ark-benefit li { position: relative; padding-left: 14px; margin-bottom: 3px; font-size: 12px; line-height: 1.45; }
.arkite .ark-benefit li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--ark-yellow); }

/* three levels */
.arkite .ark-level { display: flex; gap: 16px; align-items: flex-start; border: 1px solid #c9d3ea; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.arkite .ark-level-img { flex: 0 0 120px; text-align: center; }
.arkite .ark-level-img img { display: block; width: auto; height: 220px; max-width: 100%; margin: 0 auto; object-fit: contain; }
.arkite .ark-level-body { flex: 1 1 auto; min-width: 0; }
.arkite .ark-level h4 { font: bold 26px/1.1 Tahoma, Arial, sans-serif; margin: 0; }
.arkite .ark-level-sub { font-weight: bold; color: var(--ark-blue); margin: 2px 0 6px; font-size: 13px; }
.arkite .ark-level-body p { font-size: 12px; margin: 0 0 8px; }
.arkite .ark-level-body p.ark-level-sub { font-size: 13px; }
.arkite .ark-plus { display: inline-block; background: #fff; color: var(--ark-blue); font-weight: bold; border-radius: 12px; padding: 1px 10px; border: 1px solid #c9d3ea; }
.arkite .ark-plus span { color: #e0b800; }
.arkite .ark-level li { position: relative; padding-left: 18px; margin-bottom: 4px; font-size: 12px; line-height: 1.4; }
.arkite .ark-level li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ark-blue); font-weight: bold; }
.arkite .ark-validate { background: var(--ark-light); }
.arkite .ark-vision { background: var(--ark-blue); border-color: var(--ark-blue); color: #fff; }
.arkite .ark-vision .ark-level-sub { color: var(--ark-yellow); }
.arkite .ark-vision li::before { color: var(--ark-yellow); }
.arkite .ark-vision .ark-plus { border-color: #fff; }

/* package comparison */
.arkite .ark-table-wrap { overflow-x: auto; }
.content .arkite table.ark-table { display: table; width: 100%; border-collapse: collapse; font-size: 12px; }
.arkite .ark-table th, .arkite .ark-table td { padding: 6px 6px; border-bottom: 1px solid #dde3f0; text-align: center; vertical-align: middle; }
.arkite .ark-table thead th { color: #fff; background: var(--ark-blue); font-weight: bold; }
.arkite .ark-table thead th:first-child { text-align: left; border-top-left-radius: 6px; }
.arkite .ark-table thead th:last-child { border-top-right-radius: 6px; }
.arkite .ark-table tbody th { text-align: left; font-weight: normal; }
.arkite .ark-table tbody tr:nth-child(even) { background: #f4f7fc; }
.arkite .ark-table td { width: 17%; white-space: nowrap; }
.arkite .ark-table .ok { color: var(--ark-blue); font-weight: bold; font-size: 15px; }
.arkite .ark-table .no { color: #a9a9a9; font-size: 13px; }

/* applications */
.arkite .ark-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.arkite .ark-chips li { background: var(--ark-light); color: var(--ark-blue); font-weight: bold; font-size: 12px; border-radius: 14px; padding: 4px 12px; }

/* world */
.arkite .ark-world { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.arkite .ark-world li { background: var(--ark-blue); color: #fff; border-radius: 8px; padding: 10px 8px; text-align: center; font-size: 12px; line-height: 1.3; }
.arkite .ark-world b { display: block; color: var(--ark-yellow); font-size: 22px; line-height: 1.2; margin-bottom: 3px; }

.arkite img.ark-detail { display: block; width: 100%; height: auto; border-radius: 10px; margin: 16px 0; }

/* download / contact */
.arkite .ark-download { background: var(--ark-light); border-radius: 10px; padding: 16px 18px; text-align: center; margin-bottom: 15px; }
.arkite .ark-partner { color: var(--ark-blue); font-size: 15px; margin-bottom: 6px; }
.arkite .ark-btn { display: inline-block; background: var(--ark-blue); color: #fff; font-weight: bold; font-size: 14px; text-decoration: none; padding: 10px 18px 10px 40px; border-radius: 6px; margin: 8px 0 10px; position: relative; }
.arkite .ark-btn::before { content: "\2193"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; }
.arkite .ark-btn:hover { background: #26468f; color: #fff; }
.arkite .ark-contact { margin: 0 0 4px; }
.arkite .ark-more { margin: 0; font-size: 12px; }
.arkite .ark-more a { color: var(--ark-blue); }
.arkite .ark-contact a { color: var(--ark-blue); white-space: nowrap; }

/* Viber: QR code on desktop, tap-to-chat button on phones */
.arkite .ark-viber { display: inline-flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #c9d3ea; border-radius: 10px; padding: 10px 16px 10px 10px; margin: 6px 0 10px; text-align: left; }
.products.arkite .ark-viber-qr img { display: block; width: 110px; height: 110px; }
.arkite .ark-viber-text { margin: 0; font-size: 12px; max-width: 220px; }
.arkite .ark-viber-text strong { color: #7360f2; font-size: 13px; }
.arkite .ark-viber-btn { display: none; }

/* phones */
@media screen and (max-width: 600px) {
    .arkite .ark-hero { flex-direction: column; }
    .arkite .ark-hero-photo img { height: 220px; border-top-left-radius: 0; }
    .arkite .ark-headline { font-size: 24px; }
    .arkite .ark-stats { flex-wrap: wrap; }
    .arkite .ark-stats li { flex: 1 1 50%; margin-bottom: 12px; }
    .arkite .ark-stats li:nth-child(3) { border-left: 0; }
    .arkite .ark-stats b { font-size: 30px; }
    .arkite .ark-about { flex-direction: column; gap: 8px; }
    .arkite .ark-features { grid-template-columns: 1fr; }
    .arkite .ark-level { flex-direction: column; align-items: stretch; padding: 12px; }
    .arkite .ark-level-img { flex: 0 0 auto; }
    .arkite .ark-level-img img { height: 180px; }
    .arkite .ark-level h4, .arkite .ark-level-sub { text-align: center; }
    .arkite .ark-level-body > .ark-plus { display: table; margin: 0 auto 8px; }
    .arkite .ark-table { font-size: 11px; }
    .arkite .ark-table th, .arkite .ark-table td { padding: 5px 3px; }
    .arkite .ark-table thead th { font-size: 10px; }
    .arkite .ark-world { grid-template-columns: 1fr; }
    .arkite .ark-btn { font-size: 13px; }
}

/* phones and tablets (same breakpoint as the site's mobile layout): Viber button instead of the QR code */
@media screen and (max-width: 959px) {
    .arkite .ark-viber { display: block; background: none; border: 0; padding: 0; margin: 4px 0 10px; }
    .arkite .ark-viber-qr, .arkite .ark-viber-text { display: none; }
    .arkite a.ark-viber-btn { display: block; background: #7360f2; color: #fff; font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; padding: 12px 14px; border-radius: 6px; }
}