/* ══════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════ */

/* ── Shared sections ── */
.ab-section { padding: 72px 0; }
.ab-section-light { background: #fff; }
.ab-section-gray  { background: #f1f5f9; }
.ab-inner { max-width: 1200px; margin: 0 auto; }
.ab-section-head { text-align: center; margin-bottom: 52px; }
.ab-section-head h2 { font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 900; color: #0f172a; letter-spacing: -1px; margin: 14px 0 10px; }
.ab-section-head p  { font-size: 1.0625rem; color: #64748b; }

/* ── HERO ── */
.ab-hero {
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 40%, #f0f9ff 100%);
    padding: 90px 0 80px;
    text-align: center;
    position: relative; overflow: hidden;
}
.ab-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.ab-hero-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(20,184,166,.12);
}
.ab-ring-1 { width: 600px; height: 600px; top: -200px; right: -150px; }
.ab-ring-2 { width: 400px; height: 400px; top: -100px; right: -50px; border-color: rgba(8,145,178,.08); }
.ab-ring-3 { width: 800px; height: 800px; bottom: -400px; left: -200px; border-color: rgba(20,184,166,.06); }

.ab-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.ab-hero-inner h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 900; color: #0f172a;
    letter-spacing: -2px; line-height: 1.1;
    margin: 16px 0 20px;
}
.ab-hero-accent {
    background: linear-gradient(135deg, #14b8a6, #0891b2);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ab-hero-inner p { font-size: 1.125rem; color: #64748b; line-height: 1.7; margin-bottom: 30px; }
.ab-hero-pills { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.ab-hero-pills span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px;
    background: rgba(20,184,166,.08); border: 1px solid rgba(20,184,166,.2);
    border-radius: 100px; font-size: .8125rem; font-weight: 600; color: #0d9488;
}
.ab-hero-pills i { font-size: 11px; }

/* ── STATS STRIP ── */
.ab-stats-strip { background: linear-gradient(90deg, #0f766e, #0891b2, #0369a1); padding: 36px 0; }
.ab-stats-grid { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.ab-stat { text-align: center; padding: 0 48px; }
.ab-stat-num { font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -1px; margin-bottom: 6px; }
.ab-stat-lbl { font-size: .8125rem; color: rgba(255,255,255,.75); font-weight: 600; }
.ab-stat-sep { width: 1px; height: 48px; background: rgba(255,255,255,.2); flex-shrink: 0; }
@media(max-width:768px) { .ab-stat { padding: 16px 24px; } .ab-stat-sep { width: 100%; height: 1px; } }

/* ── MISSION ── */
.ab-mission { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; }
@media(max-width:1000px) { .ab-mission { grid-template-columns: 1fr; gap: 40px; } }
.ab-mission-text h2 { font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 900; color: #0f172a; letter-spacing: -1px; margin: 14px 0 18px; }
.ab-lead { font-size: 1.0625rem; color: #374151; line-height: 1.75; margin-bottom: 14px; font-weight: 500; }
.ab-mission-text p { font-size: .9375rem; color: #64748b; line-height: 1.75; }
.ab-mission-highlights { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.ab-mh-item { display: flex; align-items: flex-start; gap: 14px; }
.ab-mh-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    background: linear-gradient(135deg, #14b8a6, #0891b2);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px;
}
.ab-mh-item strong { display: block; font-size: .9375rem; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.ab-mh-item span  { font-size: .8125rem; color: #64748b; }

/* Mission visual */
.ab-mission-visual { position: relative; height: 360px; }
.ab-vis-card {
    position: absolute;
    background: #fff; border: 1.5px solid #e5e7eb;
    border-radius: 16px; padding: 18px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,.08);
    display: flex; align-items: center; gap: 12px;
}
.ab-vis-main {
    left: 50%; top: 50%; transform: translate(-50%,-50%);
    flex-direction: column; text-align: center; gap: 8px;
    padding: 28px 32px; border-color: #14b8a6;
    box-shadow: 0 12px 40px rgba(20,184,166,.15);
    z-index: 2;
}
.ab-vis-icon { width: 52px; height: 52px; background: linear-gradient(135deg, #14b8a6, #0891b2); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; }
.ab-vis-label { font-size: 1rem; font-weight: 800; color: #0f172a; }
.ab-vis-sub   { font-size: .8125rem; color: #64748b; }
.ab-vis-badge { font-size: .75rem; font-weight: 700; color: #059669; display: flex; align-items: center; gap: 4px; }
.ab-vis-badge i { font-size: 7px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.ab-vis-resp { border-radius: 12px; padding: 12px 16px; z-index: 1; }
.ab-vis-r1 { top: 8%;  left: -20px; }
.ab-vis-r2 { top: 42%; left: -35px; }
.ab-vis-r3 { top: 76%; left: -20px; }
.ab-vi-sm  { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.ab-vis-label-sm { font-size: .8125rem; font-weight: 700; color: #0f172a; flex: 1; }
.ab-vis-check { width: 22px; height: 22px; background: rgba(20,184,166,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #14b8a6; font-size: 10px; }

.ab-vis-arrow {
    position: absolute; left: 160px; width: 60px; height: 2px;
    background: linear-gradient(90deg, #e5e7eb, #14b8a6);
    transform-origin: left center;
}
.ab-va-1 { top: calc(8%  + 22px); transform: rotate(-25deg); }
.ab-va-2 { top: calc(42% + 22px); transform: rotate(0deg); }
.ab-va-3 { top: calc(76% + 22px); transform: rotate(25deg); }

/* ── HOW IT WORKS ── */
.ab-steps { display: flex; align-items: flex-start; gap: 8px; }
@media(max-width:900px) { .ab-steps { flex-direction: column; gap: 0; } .ab-step-connector { transform: rotate(90deg); align-self: center; } }
.ab-step {
    flex: 1; background: #fff; border: 1.5px solid #e5e7eb;
    border-radius: 20px; padding: 28px 24px; text-align: center;
    position: relative; transition: box-shadow .2s, border-color .2s;
}
.ab-step:hover { box-shadow: 0 8px 32px rgba(20,184,166,.12); border-color: #99f6e4; }
.ab-step-num {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #14b8a6, #0891b2);
    color: #fff; font-size: .75rem; font-weight: 900;
    letter-spacing: .08em; padding: 4px 12px; border-radius: 100px;
}
.ab-step-icon {
    width: 56px; height: 56px; margin: 12px auto 16px;
    background: linear-gradient(135deg, rgba(20,184,166,.1), rgba(8,145,178,.1));
    border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #0d9488;
}
.ab-step h3 { font-size: 1.0625rem; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.ab-step p  { font-size: .875rem; color: #64748b; line-height: 1.6; }
.ab-step-connector { flex-shrink: 0; width: 36px; text-align: center; padding-top: 52px; color: #cbd5e1; font-size: 1.125rem; }

/* ── VALUES ── */
.ab-values { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media(max-width:900px) { .ab-values { grid-template-columns: repeat(2,1fr); } }
@media(max-width:500px) { .ab-values { grid-template-columns: 1fr; } }
.ab-value-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 20px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.ab-value-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(20,184,166,.12); }
.ab-vc-top { padding: 28px; display: flex; align-items: center; justify-content: center; }
.ab-vct-1 { background: linear-gradient(135deg, #14b8a6, #0891b2); }
.ab-vct-2 { background: linear-gradient(135deg, #0891b2, #0369a1); }
.ab-vct-3 { background: linear-gradient(135deg, #059669, #10b981); }
.ab-vct-4 { background: linear-gradient(135deg, #7c3aed, #6366f1); }
.ab-vc-icon { width: 52px; height: 52px; background: rgba(255,255,255,.2); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; }
.ab-vc-body { padding: 20px; }
.ab-vc-body h3 { font-size: 1.0625rem; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.ab-vc-body p  { font-size: .875rem; color: #64748b; line-height: 1.65; }

/* ── ROADMAP ── */
.ab-roadmap { display: flex; flex-direction: column; gap: 0; position: relative; }
.ab-roadmap::before { content:''; position:absolute; left:31px; top:32px; bottom:32px; width:2px; background:linear-gradient(180deg,#14b8a6,#e5e7eb); }
.ab-rm-item { display: flex; gap: 24px; padding: 0 0 36px; position: relative; }
.ab-rm-item:last-child { padding-bottom: 0; }
.ab-rm-dot {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 18px; z-index: 1; border: 3px solid #fff;
    box-shadow: 0 0 0 2px #e5e7eb;
}
.ab-rm-done   .ab-rm-dot { background: linear-gradient(135deg,#14b8a6,#0891b2); color:#fff; box-shadow:0 0 0 2px rgba(20,184,166,.3); }
.ab-rm-active .ab-rm-dot { background: linear-gradient(135deg,#f59e0b,#d97706); color:#fff; box-shadow:0 0 0 2px rgba(245,158,11,.3); }
.ab-rm-planned .ab-rm-dot { background: #f1f5f9; color: #94a3b8; }

.ab-rm-content { flex: 1; padding-top: 10px; }
.ab-rm-period { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.ab-rm-done   .ab-rm-period { color: #0d9488; }
.ab-rm-active .ab-rm-period { color: #d97706; }
.ab-rm-planned .ab-rm-period { color: #94a3b8; }

.ab-rm-content h3 { font-size: 1.25rem; font-weight: 900; color: #0f172a; margin-bottom: 8px; }
.ab-rm-content p  { font-size: .9375rem; color: #64748b; line-height: 1.65; margin-bottom: 14px; }
.ab-rm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-rm-tags span { font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 100px; }
.ab-rm-done .ab-rm-tags span   { background: rgba(20,184,166,.1); color: #0d9488; }
.ab-tag-wip  { background: rgba(245,158,11,.1) !important; color: #d97706 !important; }
.ab-tag-plan { background: #f1f5f9 !important; color: #94a3b8 !important; }

/* ── COMPANY ── */
.ab-company { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media(max-width:900px) { .ab-company { grid-template-columns: 1fr; gap: 36px; } }
.ab-company-text h2 { font-size: clamp(1.75rem,3vw,2.25rem); font-weight: 900; color: #0f172a; letter-spacing: -1px; margin: 14px 0 14px; }
.ab-company-text p  { font-size: .9375rem; color: #64748b; line-height: 1.75; margin-bottom: 28px; }
.ab-contacts { display: flex; flex-direction: column; gap: 10px; }
.ab-contact-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 12px; text-decoration: none; transition: border-color .2s, background .2s; }
.ab-contact-item:hover { background: rgba(20,184,166,.05); border-color: #99f6e4; }
.ab-ci-icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
.ab-ci-green { background: linear-gradient(135deg,#059669,#10b981); }
.ab-ci-teal  { background: linear-gradient(135deg,#14b8a6,#0d9488); }
.ab-ci-blue  { background: linear-gradient(135deg,#0891b2,#0369a1); }
.ab-contact-item span  { display: block; font-size: .6875rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ab-contact-item strong { font-size: .9rem; color: #0f172a; font-weight: 700; }

.ab-requisites { background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 20px; padding: 28px 28px 20px; }
.ab-req-head { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 800; color: #0d9488; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
.ab-req-grid { display: flex; flex-direction: column; gap: 0; }
.ab-req-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.ab-req-row:last-child { border-bottom: none; }
.ab-req-row span   { font-size: .6875rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ab-req-row strong { font-size: .9rem; color: #0f172a; font-weight: 700; line-height: 1.5; }

/* ── CTA ── */
.ab-cta {
    background: linear-gradient(135deg, #0f766e 0%, #0891b2 55%, #0369a1 100%);
    padding: 88px 0; text-align: center; position: relative; overflow: hidden;
}
.ab-cta-rings { position: absolute; inset: 0; pointer-events: none; }
.ab-cta-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.ab-cr-1 { width: 600px; height: 600px; top: -200px; right: -100px; }
.ab-cr-2 { width: 400px; height: 400px; bottom: -200px; left: -100px; }
.ab-cta-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.ab-cta-badge { background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.3) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; margin-bottom: 20px; }
.ab-cta-inner h2 { font-size: clamp(2rem,4vw,3rem); font-weight: 900; color: #fff; letter-spacing: -1.5px; margin-bottom: 14px; }
.ab-cta-inner p  { font-size: 1.0625rem; color: rgba(255,255,255,.8); margin-bottom: 36px; line-height: 1.65; }
.ab-cta-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.ab-cta-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px; background: #fff; color: #0d9488;
    font-size: 1rem; font-weight: 800; border-radius: 100px;
    text-decoration: none; transition: all .2s;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
}
.ab-cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.2); color: #0d9488; }
.ab-cta-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.35); color: #fff;
    font-size: 1rem; font-weight: 700; border-radius: 100px;
    text-decoration: none; transition: all .2s;
}
.ab-cta-btn-secondary:hover { background: rgba(255,255,255,.2); color: #fff; }