/* Start:/local/css/kontur/ep.css?177789336343965*/
/* ======================================================
   ep.css — Электронная подпись для ЭДО
   Префикс: ep_
   ====================================================== */

.ep_hero, .ep_types, .ep_certs, .ep_where,
.ep_how, .ep_compare, .ep_errors, .ep_choose,
.ep_security, .ep_changes, .ep_prices,
.ep_extra, .ep_why, .ep_faq {
    --accent:         #00bea2;
    --accent-hover:   #00a88e;
    --accent-light:   rgba(0, 190, 162, 0.1);
    --bg-dark:        #013f54;
    --bg-light:       #f8f9fa;
    --text-main:      #1a1a2e;
    --text-secondary: #64748b;
    --white:          #ffffff;
    --border:         #e8ecf0;
    --danger:         #ef4444;
    --warning:        #f59e0b;
}

.ep_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.ep_section-title {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 14px;
}

.ep_section-title span { color: var(--accent); }

.ep_section-sub {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 700px;
    margin-bottom: 48px;
}

/* === КНОПКИ === */
.ep_btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--accent);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.ep_btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,190,162,0.3);
}

.ep_btn-primary svg { width: 18px; height: 18px; transition: transform 0.3s; }
.ep_btn-primary:hover svg { transform: translateX(4px); }

.ep_btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ep_btn-outline:hover {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.08);
}

/* ======================== */
/* === HERO ===             */
/* ======================== */
.ep_hero {
    position: relative;
    padding: 100px 0 120px;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ep_hero-bg { position: absolute; inset: 0; z-index: 0; }

.ep_hero-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--bg-dark) 0%, #025270 50%, #013f54 100%);
}

.ep_hero-glow {
    position: absolute; border-radius: 50%;
    filter: blur(80px); pointer-events: none;
}

.ep_hero-glow--1 { top: -20%; right: 8%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(0,190,162,0.18) 0%, transparent 70%); }
.ep_hero-glow--2 { bottom: -25%; left: -5%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(0,80,120,0.25) 0%, transparent 70%); }

.ep_hero-wrapper {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 60px;
    align-items: center;
}

.ep_hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: rgba(0,190,162,0.15);
    border: 1px solid rgba(0,190,162,0.35);
    border-radius: 100px;
    color: #7eeee0; font-size: 13px; font-weight: 600;
    margin-bottom: 24px;
}

.ep_hero-badge-dot {
    width: 8px; height: 8px; background: var(--accent);
    border-radius: 50%; animation: ep_pulse 2s ease-in-out infinite;
}

@keyframes ep_pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}

.ep_hero-title {
    font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 800; color: var(--white);
    line-height: 1.1; letter-spacing: -2px; margin-bottom: 20px;
}

.ep_hero-title-accent { color: var(--accent); }

.ep_hero-desc {
    font-size: 17px; color: rgba(255,255,255,0.7);
    line-height: 1.7; margin-bottom: 32px; max-width: 520px;
}

.ep_hero-perks {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; margin-bottom: 36px;
}

.ep_hero-perk {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; color: rgba(255,255,255,0.8);
}

.ep_hero-perk svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.ep_hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero анимация — токен + ключ + щит */
.ep_hero-anim {
    position: relative; height: 360px;
    animation: ep_fadeLeft 0.7s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}

@keyframes ep_fadeLeft {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.ep_anim-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 110px; height: 110px; border-radius: 24px;
    background: rgba(0,190,162,0.12);
    border: 2px solid rgba(0,190,162,0.5);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 6px; z-index: 5;
    backdrop-filter: blur(8px);
}

.ep_anim-center svg { width: 40px; height: 40px; color: var(--accent); }
.ep_anim-center-label { font-size: 9px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }

.ep_anim-ring {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%; border: 1px solid rgba(0,190,162,0.15);
    animation: ep_ring 3s ease-out infinite;
}

.ep_anim-ring--1 { width: 160px; height: 160px; transform: translate(-50%,-50%); animation-delay: 0s; }
.ep_anim-ring--2 { width: 240px; height: 240px; transform: translate(-50%,-50%); animation-delay: 1s; }
.ep_anim-ring--3 { width: 320px; height: 320px; transform: translate(-50%,-50%); animation-delay: 2s; }

@keyframes ep_ring {
    0%   { opacity: 0.6; transform: translate(-50%,-50%) scale(0.6); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15); }
}

.ep_anim-node {
    position: absolute; width: 72px; height: 66px; border-radius: 14px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(6px); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    color: rgba(255,255,255,0.65); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px; z-index: 4;
}

.ep_anim-node svg { width: 20px; height: 20px; }
.ep_anim-node--1 { top: 16px;  left: 16px;  animation: ep_nodeGlow 4s ease-in-out 0s infinite; }
.ep_anim-node--2 { top: 16px;  right: 16px; animation: ep_nodeGlow 4s ease-in-out 1s infinite; }
.ep_anim-node--3 { bottom: 16px; left: 16px; animation: ep_nodeGlow 4s ease-in-out 2s infinite; }
.ep_anim-node--4 { bottom: 16px; right: 16px; animation: ep_nodeGlow 4s ease-in-out 3s infinite; }

@keyframes ep_nodeGlow {
    0%, 100% { border-color: rgba(255,255,255,0.1); }
    50%       { border-color: rgba(0,190,162,0.4); box-shadow: 0 4px 20px rgba(0,190,162,0.15); }
}

.ep_hero-stat-row {
    position: absolute; bottom: -30px; left: 0; right: 0;
    display: flex; gap: 10px; justify-content: center;
}

.ep_stat-pill {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 13px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px; backdrop-filter: blur(8px);
    font-size: 12px; color: rgba(255,255,255,0.65); font-weight: 600; white-space: nowrap;
}

.ep_stat-pill span { font-size: 14px; font-weight: 800; color: var(--accent); }

/* ======================== */
/* === ВИДЫ ПОДПИСЕЙ ===    */
/* ======================== */
.ep_types { padding: 80px 0; background: var(--bg-light); }

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

.ep_type-card {
    background: var(--white); border-radius: 20px; padding: 32px 28px;
    border: 2px solid var(--border); position: relative;
    overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column;
}

.ep_type-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    opacity: 0; transition: opacity 0.3s;
}

.ep_type-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.08); border-color: var(--accent); }
.ep_type-card:hover::before { opacity: 1; }
.ep_type-card--top { border-color: var(--accent); box-shadow: 0 8px 32px rgba(0,190,162,0.1); }
.ep_type-card--top::before { opacity: 1; }

.ep_type-level {
    display: inline-block; padding: 4px 12px; border-radius: 100px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.ep_type-level--low  { background: rgba(100,116,139,0.1); color: #64748b; border: 1px solid rgba(100,116,139,0.2); }
.ep_type-level--mid  { background: rgba(245,158,11,0.1); color: #d97706; border: 1px solid rgba(245,158,11,0.2); }
.ep_type-level--top  { background: var(--accent-light); color: var(--accent); border: 1px solid rgba(0,190,162,0.25); }

.ep_type-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}

.ep_type-icon--pep  { background: rgba(100,116,139,0.1); color: #64748b; }
.ep_type-icon--nep  { background: rgba(245,158,11,0.1); color: #d97706; }
.ep_type-icon--kep  { background: var(--accent-light); color: var(--accent); }
.ep_type-icon svg { width: 24px; height: 24px; }

.ep_type-card h3 { font-size: 19px; font-weight: 700; color: var(--text-main); margin-bottom: 10px; line-height: 1.25; }

.ep_type-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin: 0 0 16px; flex: 1; }

.ep_type-usages {
    list-style: none; padding: 0; margin: 0 0 20px;
    display: flex; flex-direction: column; gap: 7px;
    border-top: 1px solid var(--border); padding-top: 16px;
}

.ep_type-usages li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}

.ep_type-usages li svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.ep_type-force {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: var(--bg-light);
    border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-main);
    margin-top: auto;
}

.ep_type-force svg { width: 16px; height: 16px; color: var(--accent); }

/* ======================== */
/* === ТАБЛИЦА СРАВНЕНИЯ == */
/* ======================== */
.ep_compare { padding: 80px 0; background: var(--white); }

.ep_table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); }

.ep_table {
    width: 100%; border-collapse: collapse;
    font-size: 14px;
}

.ep_table th {
    padding: 16px 20px; background: var(--bg-dark);
    color: var(--white); font-weight: 700; text-align: left;
    font-size: 13px; white-space: nowrap;
}

.ep_table th:first-child { border-radius: 16px 0 0 0; }
.ep_table th:last-child  { border-radius: 0 16px 0 0; }

.ep_table td {
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    color: var(--text-main); vertical-align: top; line-height: 1.5;
}

.ep_table tr:last-child td { border-bottom: none; }
.ep_table tr:nth-child(even) td { background: var(--bg-light); }
.ep_table tr:hover td { background: rgba(0,190,162,0.04); }

.ep_table td:first-child { font-weight: 700; white-space: nowrap; }

.ep_badge-yes { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; }
.ep_badge-no  { display: inline-flex; align-items: center; gap: 5px; color: #ef4444; font-weight: 600; }
.ep_badge-part { display: inline-flex; align-items: center; gap: 5px; color: #d97706; font-weight: 600; }

.ep_badge-yes svg, .ep_badge-no svg, .ep_badge-part svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ======================== */
/* === ТИПЫ СЕРТИФИКАТОВ == */
/* ======================== */
.ep_certs { padding: 80px 0; background: var(--bg-light); }

.ep_certs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.ep_cert-card {
    background: var(--white); border-radius: 18px; padding: 28px;
    border: 1px solid var(--border); transition: all 0.3s ease;
    display: flex; gap: 20px; align-items: flex-start;
}

.ep_cert-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,190,162,0.09); }

.ep_cert-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--accent-light); display: flex; align-items: center;
    justify-content: center; color: var(--accent); flex-shrink: 0;
}

.ep_cert-icon svg { width: 24px; height: 24px; }

.ep_cert-card h3 { font-size: 17px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; line-height: 1.3; }
.ep_cert-card p  { font-size: 14px; color: var(--text-secondary); line-height: 1.65; margin: 0 0 12px; }

.ep_cert-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.ep_cert-tag {
    padding: 3px 10px; background: var(--bg-light);
    border: 1px solid var(--border); border-radius: 100px;
    font-size: 12px; color: var(--text-secondary); font-weight: 500;
}

/* ======================== */
/* === ГДЕ ИСПОЛЬЗУЕТСЯ === */
/* ======================== */
.ep_where { padding: 80px 0; background: var(--white); }

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

.ep_where-card {
    background: var(--bg-light); border-radius: 16px; padding: 24px;
    border: 1px solid var(--border); transition: all 0.3s ease;
}

.ep_where-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,190,162,0.1); background: var(--white); }

.ep_where-icon {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--accent-light); display: flex;
    align-items: center; justify-content: center;
    color: var(--accent); margin-bottom: 14px;
}

.ep_where-icon svg { width: 22px; height: 22px; }
.ep_where-card h3 { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.ep_where-card p  { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin: 0; }

/* ======================== */
/* === ИЗМЕНЕНИЯ 2026 ===   */
/* ======================== */
.ep_changes { padding: 80px 0; background: var(--bg-dark); position: relative; overflow: hidden; }

.ep_changes::before {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,190,162,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.ep_changes .ep_section-title { color: var(--white); }
.ep_changes .ep_section-sub   { color: rgba(255,255,255,0.6); }

.ep_changes-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; position: relative; z-index: 1;
}

.ep_change-card {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px; padding: 24px; backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.ep_change-card:hover { background: rgba(0,190,162,0.1); border-color: rgba(0,190,162,0.3); transform: translateY(-3px); }

.ep_change-tag {
    display: inline-block; padding: 3px 10px; border-radius: 100px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 12px; background: rgba(0,190,162,0.2);
    color: var(--accent); border: 1px solid rgba(0,190,162,0.35);
}

.ep_change-card h3 { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 10px; line-height: 1.3; }
.ep_change-card p  { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.65; margin: 0; }

.ep_changes-alert {
    margin-top: 24px; padding: 22px 28px;
    background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3);
    border-radius: 14px; display: flex; align-items: flex-start; gap: 16px;
    position: relative; z-index: 1;
}

.ep_changes-alert svg { width: 22px; height: 22px; color: #f59e0b; flex-shrink: 0; margin-top: 2px; }
.ep_changes-alert p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.65; margin: 0; }
.ep_changes-alert strong { color: #fcd34d; }

/* ======================== */
/* === КАК ПОЛУЧИТЬ ===     */
/* ======================== */
.ep_how { padding: 80px 0; background: var(--bg-light); }

.ep_how-wrapper { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: start; }

.ep_steps { display: flex; flex-direction: column; gap: 0; }

.ep_step { display: flex; gap: 20px; align-items: flex-start; position: relative; padding-bottom: 32px; }
.ep_step:last-child { padding-bottom: 0; }

.ep_step:not(:last-child)::before {
    content: ''; position: absolute;
    left: 23px; top: 48px; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(0,190,162,0.15) 100%);
}

.ep_step-num {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--accent); color: var(--white);
    font-size: 18px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 4px 16px rgba(0,190,162,0.35);
    position: relative; z-index: 1;
}

.ep_step h3 { font-size: 17px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; margin-top: 10px; }
.ep_step p  { font-size: 14px; color: var(--text-secondary); line-height: 1.65; margin: 0; }

.ep_step-docs {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}

.ep_step-doc {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px; background: var(--white);
    border: 1px solid var(--border); border-radius: 100px;
    font-size: 12px; color: var(--text-secondary);
}

.ep_step-doc svg { width: 13px; height: 13px; color: var(--accent); }

/* Боковая карточка */
.ep_how-card {
    background: var(--bg-dark); border-radius: 20px; padding: 32px;
    position: relative; overflow: hidden;
}

.ep_how-card::before {
    content: ''; position: absolute; top: -40px; right: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,190,162,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.ep_how-card h3 { font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 20px; position: relative; z-index: 1; }

.ep_how-card-items { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }

.ep_how-card-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
}

.ep_how-card-item-icon {
    width: 34px; height: 34px; border-radius: 9px;
    background: rgba(0,190,162,0.15); border: 1px solid rgba(0,190,162,0.25);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); flex-shrink: 0;
}

.ep_how-card-item-icon svg { width: 16px; height: 16px; }
.ep_how-card-item-title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.ep_how-card-item-sub   { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; }

/* ======================== */
/* === ВЫБОР ПОДПИСИ ===    */
/* ======================== */
.ep_choose { padding: 80px 0; background: var(--white); }

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

.ep_choose-card {
    background: var(--bg-light); border-radius: 18px; padding: 28px;
    border: 1px solid var(--border); transition: all 0.3s ease;
}

.ep_choose-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,190,162,0.09); background: var(--white); }

.ep_choose-if {
    display: inline-block; padding: 4px 12px; border-radius: 100px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 14px; background: var(--accent-light);
    color: var(--accent); border: 1px solid rgba(0,190,162,0.25);
}

.ep_choose-card h3 { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 10px; line-height: 1.3; }
.ep_choose-card p  { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 16px; }

.ep_choose-answer {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; background: var(--accent-light);
    border: 1px solid rgba(0,190,162,0.2); border-radius: 10px;
    font-size: 14px; font-weight: 700; color: var(--text-main);
}

.ep_choose-answer svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* ======================== */
/* === ОШИБКИ === */
/* ======================== */
.ep_errors { padding: 80px 0; background: var(--bg-light); }

.ep_errors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.ep_error-card {
    background: var(--white); border-radius: 14px; padding: 22px;
    border: 1px solid var(--border); border-left: 4px solid var(--danger);
    display: flex; gap: 16px; align-items: flex-start; transition: all 0.3s ease;
}

.ep_error-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(239,68,68,0.08); }

.ep_error-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.15);
    display: flex; align-items: center; justify-content: center;
    color: var(--danger); flex-shrink: 0;
}

.ep_error-icon svg { width: 18px; height: 18px; }
.ep_error-card h3 { font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; line-height: 1.3; }
.ep_error-card p  { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ======================== */
/* === БЕЗОПАСНОСТЬ ===     */
/* ======================== */
.ep_security { padding: 80px 0; background: var(--white); }

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

.ep_security-card {
    background: var(--bg-light); border-radius: 16px; padding: 24px;
    border: 1px solid var(--border); transition: all 0.3s ease;
}

.ep_security-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,190,162,0.1); }

.ep_security-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--accent-light); display: flex;
    align-items: center; justify-content: center;
    color: var(--accent); margin-bottom: 14px;
}

.ep_security-icon svg { width: 22px; height: 22px; }
.ep_security-card h3 { font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.ep_security-card p  { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin: 0; }

/* ======================== */
/* === КУПИТЬ ПОДПИСЬ ===   */
/* ======================== */
.ep_buy { padding: 0; }

/* --- Ряд 1: Универсальная — на всю ширину, тёмный фон --- */
.ep_buy-hero {
    /* Hero — карточка в сетке */
    position: relative;
    overflow: hidden;
    border-radius: 18px;   /* как остальные карточки */
}

.ep_buy-hero-inner {
    background: var(--bg-dark);
    border-radius: 18px;
    padding: 52px 60px;
    display: grid;
    grid-template-columns: 1fr 420px;  /* на всю ширину — больше места */
    align-items: center;
    min-height: 360px;
    position: relative;
    overflow: hidden;
}

.ep_buy-hero::before {
    content: '';
    position: absolute; top: -80px; left: -80px;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,190,162,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.ep_buy-hero-content {
    padding: 60px 0;
    position: relative; z-index: 1;
}

.ep_buy-label {
    display: inline-block;
    width: fit-content;         /* только по тексту */
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    margin-bottom: 16px;
    white-space: nowrap;
}

.ep_buy-label--universal {
    background: rgba(0,190,162,0.2);
    color: var(--accent);
    border: 1px solid rgba(0,190,162,0.4);
}

.ep_buy-label--base {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.2);
}

.ep_buy-label--light {
    background: rgba(1,63,84,0.12);
    color: var(--bg-dark);
    border: 1px solid rgba(1,63,84,0.2);
}

.ep_buy-hero-content h2 {
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 800; color: var(--white);
    line-height: 1.15; letter-spacing: -1px;
    margin-bottom: 10px;
}

.ep_buy-hero-content p {
    font-size: 15px; color: rgba(255,255,255,0.6);
    line-height: 1.65; margin: 0 0 28px;
}

.ep_buy-hero-price {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 28px;
}

.ep_buy-hero-price-val {
    font-size: 52px; font-weight: 800;
    color: var(--accent); line-height: 1;
}

.ep_buy-hero-price-period {
    font-size: 16px; color: rgba(255,255,255,0.5); font-weight: 500;
}

.ep_buy-hero-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px;
    background: var(--accent); color: var(--white);
    border: none; border-radius: 100px;
    font-size: 15px; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: all 0.3s ease;
}

.ep_buy-hero-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,190,162,0.4);
}

.ep_buy-hero-btn svg { width: 18px; height: 18px; transition: transform 0.3s; }
.ep_buy-hero-btn:hover svg { transform: translateX(4px); }

/* Анимация в правой части hero */
.ep_buy-hero-anim {
    position: relative; height: 380px;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
}

.ep_buy-anim-lock {
    position: relative; width: 160px; height: 160px;
    display: flex; align-items: center; justify-content: center;
}

.ep_buy-anim-lock-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(0,190,162,0.2);
    animation: ep_buy_ring 3s ease-out infinite;
}

.ep_buy-anim-lock-ring--1 { width: 120px; height: 120px; animation-delay: 0s; }
.ep_buy-anim-lock-ring--2 { width: 180px; height: 180px; animation-delay: 0.9s; }
.ep_buy-anim-lock-ring--3 { width: 240px; height: 240px; animation-delay: 1.8s; }
.ep_buy-anim-lock-ring--4 { width: 320px; height: 320px; animation-delay: 2.7s; }

@keyframes ep_buy_ring {
    0%   { opacity: 0.7; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(1.1); }
}

.ep_buy-anim-lock-center {
    width: 90px; height: 90px; border-radius: 22px;
    background: rgba(0,190,162,0.12);
    border: 2px solid rgba(0,190,162,0.5);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); position: relative; z-index: 2;
    animation: ep_buy_lockopen 4s ease-in-out infinite;
}

.ep_buy-anim-lock-center svg { width: 44px; height: 44px; }

@keyframes ep_buy_lockopen {
    0%, 40%, 100% { transform: scale(1); }
    50%           { transform: scale(1.06); box-shadow: 0 0 40px rgba(0,190,162,0.3); border-color: rgba(0,190,162,0.8); }
}

/* Летящие документы к замку */
.ep_buy-anim-doc {
    position: absolute;
    width: 32px; height: 38px;
    background: rgba(255,255,255,0.9);
    border-radius: 4px 10px 4px 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    opacity: 0;
}

.ep_buy-anim-doc::before {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 10px; height: 10px;
    background: #e2e8f0;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.ep_buy-anim-doc-lines {
    position: absolute; bottom: 7px; left: 5px;
    display: flex; flex-direction: column; gap: 3px; width: 20px;
}

.ep_buy-anim-doc-line { height: 2px; border-radius: 1px; background: #cbd5e1; }
.ep_buy-anim-doc-line:nth-child(2) { width: 75%; }
.ep_buy-anim-doc-line:nth-child(3) { width: 55%; }

.ep_buy-anim-doc--1 { animation: ep_buy_doc1 3s ease-in-out 0s infinite; }
.ep_buy-anim-doc--2 { animation: ep_buy_doc2 3s ease-in-out 0.75s infinite; }
.ep_buy-anim-doc--3 { animation: ep_buy_doc3 3s ease-in-out 1.5s infinite; }
.ep_buy-anim-doc--4 { animation: ep_buy_doc4 3s ease-in-out 2.25s infinite; }

@keyframes ep_buy_doc1 {
    0%   { top: 30px; left: 30px; opacity: 0; transform: scale(0.7) rotate(-8deg); }
    20%  { opacity: 1; transform: scale(1) rotate(-4deg); }
    80%  { opacity: 1; }
    100% { top: calc(50% - 16px); left: calc(50% - 19px); opacity: 0; transform: scale(0.5) rotate(0deg); }
}
@keyframes ep_buy_doc2 {
    0%   { top: 30px; right: 30px; left: auto; opacity: 0; transform: scale(0.7) rotate(8deg); }
    20%  { opacity: 1; transform: scale(1) rotate(4deg); }
    80%  { opacity: 1; }
    100% { top: calc(50% - 16px); right: calc(50% - 19px); left: auto; opacity: 0; transform: scale(0.5) rotate(0deg); }
}
@keyframes ep_buy_doc3 {
    0%   { bottom: 30px; left: 30px; top: auto; opacity: 0; transform: scale(0.7) rotate(8deg); }
    20%  { opacity: 1; transform: scale(1) rotate(4deg); }
    80%  { opacity: 1; }
    100% { bottom: calc(50% - 16px); top: auto; left: calc(50% - 19px); opacity: 0; transform: scale(0.5) rotate(0deg); }
}
@keyframes ep_buy_doc4 {
    0%   { bottom: 30px; right: 30px; top: auto; left: auto; opacity: 0; transform: scale(0.7) rotate(-8deg); }
    20%  { opacity: 1; transform: scale(1) rotate(-4deg); }
    80%  { opacity: 1; }
    100% { bottom: calc(50% - 16px); top: auto; right: calc(50% - 19px); left: auto; opacity: 0; transform: scale(0.5) rotate(0deg); }
}

/* Статусы рядом с замком */
.ep_buy-anim-status {
    position: absolute;
    padding: 7px 13px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(0,190,162,0.25);
    border-radius: 100px;
    font-size: 11px; font-weight: 700;
    color: var(--accent); white-space: nowrap;
    backdrop-filter: blur(6px);
}

.ep_buy-anim-status--1 { top: 60px; left: 20px; animation: ep_buy_status 4s ease-in-out 0s infinite; }
.ep_buy-anim-status--2 { top: 60px; right: 20px; animation: ep_buy_status 4s ease-in-out 1.3s infinite; }
.ep_buy-anim-status--3 { bottom: 60px; left: 50%; transform: translateX(-50%); animation: ep_buy_status 4s ease-in-out 2.6s infinite; }

@keyframes ep_buy_status {
    0%, 60%, 100% { opacity: 0.4; }
    30%           { opacity: 1; }
}

/* --- Ряды 2 и 3: карточки --- */
/* строки теперь inline grid — стили убраны, фон на карточках */

/* ep_buy-row-inner и ep_buy-cards не используются — сетка теперь inline */

/* Карточка на сером фоне */
.ep_buy-card {
    border-radius: 18px; padding: 28px;
    display: flex; flex-direction: column;
    justify-content: space-between;    /* price и кнопка всегда внизу */
    position: relative; overflow: hidden;
    transition: all 0.3s ease;
}

.ep_buy-card--gray {
    background: var(--bg-light);
    border: 2px solid var(--border);
}

.ep_buy-card--gray:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,190,162,0.12);
}

/* Карточка на зелёном фоне */
.ep_buy-card--green {
    background: var(--accent);
    border: 2px solid var(--accent-hover);
}

.ep_buy-card--green:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,190,162,0.35);
}

.ep_buy-card-name {
    font-size: 17px; font-weight: 700; margin-bottom: 6px; line-height: 1.3;
}

.ep_buy-card--gray  .ep_buy-card-name { color: var(--text-main); }
.ep_buy-card--green .ep_buy-card-name { color: var(--white); }

.ep_buy-card-desc {
    font-size: 13px; line-height: 1.6; margin: 0 0 24px; flex: 1;
}

.ep_buy-card--gray  .ep_buy-card-desc { color: var(--text-secondary); }
.ep_buy-card--green .ep_buy-card-desc { color: rgba(255,255,255,0.7); }

.ep_buy-card-price {
    margin-bottom: 20px;
}

.ep_buy-card-price-val {
    font-size: 40px; font-weight: 800; line-height: 1; display: block;
}

.ep_buy-card--gray  .ep_buy-card-price-val { color: var(--text-main); }
.ep_buy-card--green .ep_buy-card-price-val { color: var(--white); }

.ep_buy-card-price-period {
    font-size: 13px; margin-top: 4px; display: block;
}

.ep_buy-card--gray  .ep_buy-card-price-period { color: var(--text-secondary); }
.ep_buy-card--green .ep_buy-card-price-period { color: rgba(255,255,255,0.6); }

/* Кнопки карточек */
.ep_buy-card-btn {
    width: 100%; padding: 12px 20px; border-radius: 100px;
    font-size: 14px; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: none;
}

.ep_buy-card-btn svg { width: 16px; height: 16px; transition: transform 0.3s; }
.ep_buy-card-btn:hover svg { transform: translateX(3px); }

.ep_buy-card--gray .ep_buy-card-btn {
    background: var(--accent); color: var(--white);
}

.ep_buy-card--gray .ep_buy-card-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 6px 20px rgba(0,190,162,0.3);
}

.ep_buy-card--green .ep_buy-card-btn {
    background: var(--white); color: var(--accent);
}

.ep_buy-card--green .ep_buy-card-btn:hover {
    background: rgba(255,255,255,0.9);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Блок "Купить подпись онлайн" — шапка */
.ep_buy-header {
    max-width: 1200px; margin: 0 auto; padding: 80px 24px 0;
    background: var(--bg-dark);
}

.ep_buy-header-top {
    display: flex; align-items: center; gap: 16px; margin-bottom: 4px;
}

.ep_buy-header span {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--accent);
}

.ep_buy-header h2 {
    font-size: clamp(28px, 3.5vw, 44px); font-weight: 700;
    color: var(--white); letter-spacing: -1px; line-height: 1.2;
}

/* Responsive */
@media (max-width: 900px) {
    .ep_buy-hero-inner { grid-template-columns: 1fr; padding: 36px 32px; }
    .ep_buy-hero-anim  { display: none; }
}

@media (max-width: 640px) {
    /* ep_buy rows — одна колонка */
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .ep_extra-card {
        flex-wrap: wrap;
    }
    .ep_extra-card h4 { flex: 1 1 100%; }
    .ep_extra-card p  { flex: 1 1 100%; }
    .ep_extra-price   { margin-left: 0; }
    .ep_buy-hero-price-val {font-size: 30px; font-weight: 600;}
    .ep_buy-hero-content {padding: 30px 0;}
}

/* Доп. товары */
.ep_extra { padding: 60px 0 80px; background: var(--bg-light); }

.ep_extra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.ep_extra-card {
    background: var(--white); border-radius: 14px; padding: 20px 24px;
    border: 1px solid var(--border); display: flex;
    align-items: center; gap: 16px; transition: all 0.3s ease;
}

.ep_extra-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,190,162,0.08); }

.ep_extra-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-light); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.ep_extra-icon svg { width: 20px; height: 20px; }
.ep_extra-card h4  { font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 3px; }
.ep_extra-card p   { font-size: 13px; color: var(--text-secondary); margin: 0; }
.ep_extra-price    { font-size: 18px; font-weight: 800; color: var(--accent); margin-left: auto; white-space: nowrap; }

/* Доп. услуги */
.ep_extra-services { margin-top: 20px; }

.ep_extra-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }

.ep_extra-service {
    background: var(--white); border-radius: 14px; padding: 22px;
    border: 1px solid var(--border); transition: all 0.3s ease;
    display: flex; flex-direction: column; gap: 10px;
}

.ep_extra-service:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,190,162,0.08); }
.ep_extra-service h4 { font-size: 15px; font-weight: 700; color: var(--text-main); margin: 0; }
.ep_extra-service p  { font-size: 13px; color: var(--text-secondary); margin: 0; flex: 1; }
.ep_extra-service-price { font-size: 20px; font-weight: 800; color: var(--text-main); }

.ep_extra-service-btn, .ep_price-btn {
    padding: 8px 18px; background: var(--accent-light); color: var(--accent);
    border: 1px solid rgba(0,190,162,0.3); border-radius: 100px;
    font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: all 0.3s ease;
}

.ep_extra-service-btn:hover { background: var(--accent); color: var(--white); }

.ep_extra-note {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.6; padding: 14px 18px;
    background: var(--bg-light); border-radius: 10px;
    border: 1px solid var(--border);
}

/* ======================== */
/* === ПОЧЕМУ МЫ ===        */
/* ======================== */
.ep_why { padding: 80px 0; background: var(--bg-dark); position: relative; overflow: hidden; }

.ep_why::before {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,190,162,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.ep_why .ep_section-title { color: var(--white); }
.ep_why .ep_section-sub   { color: rgba(255,255,255,0.6); }

.ep_why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; z-index: 1; }

.ep_why-card {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px; padding: 24px; backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.ep_why-card:hover { background: rgba(0,190,162,0.1); border-color: rgba(0,190,162,0.3); transform: translateY(-3px); }

.ep_why-num { font-size: 36px; font-weight: 800; color: rgba(0,190,162,0.3); line-height: 1; margin-bottom: 12px; }
.ep_why-card h3 { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.ep_why-card p  { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.65; margin: 0; }

/* ======================== */
/* === FAQ ===              */
/* ======================== */
.ep_faq { padding: 80px 0; background: var(--bg-light); }

.ep_faq-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; width: 100%;}

.ep_faq-item {
    background: var(--white); border-radius: 14px;
    border: 1px solid var(--border); overflow: hidden;
    transition: border-color 0.2s;
    width: calc(50% - 5px);

}

.ep_faq-item.open { border-color: var(--accent); }

.ep_faq-q {
    width: 100%; padding: 20px 24px; background: transparent; border: none;
    text-align: left; font-size: 16px; font-weight: 600; color: var(--text-main);
    font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    transition: color 0.2s;
}

.ep_faq-q:hover { color: var(--accent); }
.ep_faq-item.open .ep_faq-q { color: var(--accent); }

.ep_faq-q-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-light); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; }
.ep_faq-q-icon svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.ep_faq-item.open .ep_faq-q-icon { background: var(--accent); border-color: var(--accent); color: var(--white); }
.ep_faq-item.open .ep_faq-q-icon svg { transform: rotate(180deg); }

.ep_faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1); }
.ep_faq-a-inner { padding: 0 24px 20px; font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.ep_faq-a-inner strong { color: var(--text-main); }

/* ======================== */
/* === RESPONSIVE ===       */
/* ======================== */
@media (max-width: 1100px) {
    .ep_changes-grid { grid-template-columns: repeat(2, 1fr); }
    .ep_prices-grid  { grid-template-columns: 1fr; }
    .ep_types-grid   { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    .ep_hero-wrapper { grid-template-columns: 1fr; }
    .ep_hero-anim    { display: none; }
    .ep_how-wrapper  { grid-template-columns: 1fr; }
    .ep_certs-grid   { grid-template-columns: 1fr; }
    .ep_where-grid   { grid-template-columns: repeat(2, 1fr); }
    .ep_choose-grid  { grid-template-columns: 1fr; }
    .ep_security-grid { grid-template-columns: repeat(2, 1fr); }
    .ep_why-grid     { grid-template-columns: 1fr; }
    .ep_extra-service-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .ep_types-grid   { grid-template-columns: 1fr; }
    .ep_where-grid   { grid-template-columns: 1fr; }
    .ep_errors-grid  { grid-template-columns: 1fr; }
    .ep_security-grid { grid-template-columns: 1fr; }
    .ep_extra-grid   { grid-template-columns: 1fr; }
    .ep_hero-perks   { grid-template-columns: 1fr; }
    .ep_faq-item {width: 100%;}
}

/* Карточка тёмная (#013f54) — используется в hero */
.ep_buy-card--dark {
    background: var(--bg-dark);
    border: 2px solid rgba(0,190,162,0.3);
}

.ep_buy-card--dark:hover {
    border-color: rgba(0,190,162,0.6);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.ep_buy-card--dark .ep_buy-card-name    { color: var(--white); }
.ep_buy-card--dark .ep_buy-card-desc    { color: rgba(255,255,255,0.6); }
.ep_buy-card--dark .ep_buy-card-price-val    { color: var(--accent); }
.ep_buy-card--dark .ep_buy-card-price-period { color: rgba(255,255,255,0.5); }
.ep_buy-card--dark .ep_buy-card-btn {
    background: var(--accent); color: var(--white);
}
.ep_buy-card--dark .ep_buy-card-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 6px 20px rgba(0,190,162,0.3);
}
/* End */
/* /local/css/kontur/ep.css?177789336343965 */