/* =============================================
   ELDORIA — ABOUT PAGE
   Dark · Gold + Purple accent · Syne + DM Sans
   ============================================= */

:root {
    --clr-bg:       #08090d;
    --clr-s1:       #0e1117;
    --clr-s2:       #13161f;
    --clr-s3:       #1a1f2b;
    --clr-border:   rgba(255,255,255,.07);
    --clr-border2:  rgba(255,255,255,.12);
    --clr-text:     #e2e8f0;
    --clr-muted:    #5a6478;
    --clr-muted2:   #8492a6;

    --clr-gold:     #e9b84a;
    --clr-gold-dim: rgba(233,184,74,.1);
    --clr-gold-b:   rgba(233,184,74,.28);
    --clr-pink:     #f43f6b;
    --clr-pink-dim: rgba(244,63,107,.1);
    --clr-purple:   #a855f7;
    --clr-pur-dim:  rgba(168,85,247,.1);
    --clr-green:    #34d399;
    --clr-grn-dim:  rgba(52,211,153,.1);

    --font-d: 'Syne', sans-serif;
    --font-b: 'DM Sans', sans-serif;
    --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--clr-bg); color: var(--clr-text); font-family: var(--font-b); overflow-x: hidden; }

.ab-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ── Shared ──────────────────────────────────── */
.ab-tag {
    display: inline-block;
    font-family: var(--font-d); font-size: 0.68rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--clr-gold); background: var(--clr-gold-dim);
    border: 1px solid var(--clr-gold-b);
    padding: 5px 16px; border-radius: 100px; margin-bottom: 16px;
}

.ab-section-head { text-align: center; margin-bottom: 56px; }
.ab-section-title { font-family: var(--font-d); font-size: clamp(1.8rem,3.5vw,2.6rem); font-weight: 800; color: #fff; line-height: 1.14; margin-bottom: 12px; }
.ab-section-sub   { font-size: 0.95rem; color: var(--clr-muted); max-width: 480px; margin: 0 auto; }

/* ── Buttons ─────────────────────────────────── */
.ab-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 30px; border-radius: 100px;
    font-family: var(--font-d); font-size: 0.88rem; font-weight: 800;
    text-decoration: none; border: none; cursor: pointer;
    transition: transform .22s, box-shadow .22s; position: relative; overflow: hidden;
    white-space: nowrap;
}
.ab-btn::after { content:''; position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent);opacity:0;transition:opacity .2s; }
.ab-btn:hover  { transform: translateY(-3px); }
.ab-btn:hover::after { opacity:1; }

.ab-btn--primary { background:linear-gradient(135deg,var(--clr-gold),#d4920f); color:#0e0900; font-weight:800; box-shadow:0 8px 24px rgba(233,184,74,.3); }
.ab-btn--primary:hover { box-shadow:0 14px 36px rgba(233,184,74,.45); }

.ab-btn--ghost { background:transparent; border:1.5px solid var(--clr-border2); color:var(--clr-text); }
.ab-btn--ghost:hover { background:rgba(255,255,255,.05); }

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.ab-hero {
    position: relative; min-height: 88vh;
    display: flex; align-items: center;
    padding: 100px 0 80px; overflow: hidden; isolation: isolate;
    background: var(--clr-s1); border-bottom: 1px solid var(--clr-border);
}

.ab-hero__bg { position: absolute; inset: 0; z-index: -1; }
.ab-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);
}
.ab-hero__orb { position:absolute;border-radius:50%;filter:blur(80px); }
.ab-hero__orb--a { width:480px;height:480px;background:rgba(233,184,74,.1);  top:-20%;left:-6%; }
.ab-hero__orb--b { width:360px;height:360px;background:rgba(168,85,247,.09); top:10%; right:-4%; }
.ab-hero__orb--c { width:280px;height:280px;background:rgba(244,63,107,.07); bottom:0;left:38%; }

.ab-hero__inner { text-align:center; max-width:760px; margin:0 auto; position:relative; }

.ab-hero__title {
    font-family:var(--font-d); font-size:clamp(2.6rem,5.5vw,4.2rem);
    font-weight:800; color:#fff; line-height:1.08; margin-bottom:20px;
}
.ab-hero__title em {
    font-style:normal;
    background:linear-gradient(90deg,var(--clr-gold),var(--clr-pink));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}

.ab-hero__sub { font-size:1.05rem;color:var(--clr-muted2);line-height:1.72;max-width:580px;margin:0 auto 36px; }

/* Плавающие иконки */
.ab-hero__floats { position:absolute;inset:0;pointer-events:none; }
.ab-float {
    position:absolute;left:var(--x);top:var(--y);
    font-size:1.8rem;opacity:.55;
    filter:drop-shadow(0 0 12px rgba(255,255,255,.1));
    animation:abFloat var(--dur) ease-in-out infinite var(--del);
}
@keyframes abFloat { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-18px) rotate(5deg)} }

/* ══════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════ */
.ab-section { padding: 120px 0; background: var(--clr-bg); }
.ab-section--alt { background: var(--clr-s1); }
.ab-section::before {
    content:'';display:block;height:1px;
    background:linear-gradient(90deg,transparent,var(--clr-border2),transparent);
    margin-bottom:120px;
}

/* ── Values ──────────────────────────────────── */
.ab-values-grid {
    display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;
}

.ab-value-card {
    background:var(--clr-s2);border:1px solid var(--clr-border);
    border-radius:var(--r-xl);padding:32px 28px;
    position:relative;overflow:hidden;
    transition:transform .25s,border-color .25s,box-shadow .25s;
}
.ab-value-card::after {
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--clr-gold),var(--clr-pink));
    transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.ab-value-card:hover { transform:translateY(-6px);border-color:var(--clr-gold-b); }
.ab-value-card:hover::after { transform:scaleX(1); }

.ab-value-card__icon {
    width:52px;height:52px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;margin-bottom:20px;
}
.ab-value-card__icon--gold   { background:var(--clr-gold-dim);border:1px solid var(--clr-gold-b);color:var(--clr-gold); }
.ab-value-card__icon--pink   { background:var(--clr-pink-dim);border:1px solid rgba(244,63,107,.25);color:var(--clr-pink); }
.ab-value-card__icon--purple { background:var(--clr-pur-dim); border:1px solid rgba(168,85,247,.25);color:var(--clr-purple); }
.ab-value-card__icon--green  { background:var(--clr-grn-dim); border:1px solid rgba(52,211,153,.25); color:var(--clr-green); }

.ab-value-card h3 { font-family:var(--font-d);font-size:1rem;font-weight:800;color:#fff;margin-bottom:10px; }
.ab-value-card p  { font-size:0.85rem;color:var(--clr-muted2);line-height:1.68; }

/* ── Stats ───────────────────────────────────── */
.ab-stats-grid {
    display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;
    max-width:900px;margin:0 auto;
}

.ab-stat {
    background:var(--clr-s2);border:1px solid var(--clr-border);
    border-radius:var(--r-lg);padding:28px 20px;text-align:center;
    transition:transform .25s,border-color .25s;
}
.ab-stat:hover { transform:translateY(-4px);border-color:var(--clr-gold-b); }

.ab-stat__val {
    display:block;font-family:var(--font-d);font-size:2rem;font-weight:800;
    background:linear-gradient(135deg,var(--clr-gold),var(--clr-pink));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    line-height:1;margin-bottom:10px;
}
.ab-stat__label { font-size:0.74rem;color:var(--clr-muted);letter-spacing:.06em;text-transform:uppercase; }

/* ── Achievements ────────────────────────────── */
.ab-ach-grid {
    display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}

.ab-ach-card {
    display:flex;align-items:flex-start;gap:16px;
    background:var(--clr-s2);border:1px solid var(--clr-border);
    border-radius:var(--r-lg);padding:22px 24px;
    transition:border-color .22s,transform .22s;
}
.ab-ach-card:hover { border-color:var(--clr-gold-b);transform:translateY(-4px); }

.ab-ach-card__icon {
    width:44px;height:44px;border-radius:12px;flex-shrink:0;
    background:var(--clr-gold-dim);border:1px solid var(--clr-gold-b);
    display:flex;align-items:center;justify-content:center;
    color:var(--clr-gold);font-size:1rem;
}

.ab-ach-card__body h4 { font-family:var(--font-d);font-size:0.9rem;font-weight:800;color:var(--clr-text);margin-bottom:7px; }
.ab-ach-card__body p  { font-size:0.82rem;color:var(--clr-muted);line-height:1.6; }

/* ── CTA ─────────────────────────────────────── */
.ab-cta {
    padding:110px 0;text-align:center;
    background:var(--clr-bg);position:relative;overflow:hidden;isolation:isolate;
}
.ab-cta::before {
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--clr-border2),transparent);
}
.ab-cta__orb { position:absolute;border-radius:50%;filter:blur(100px);z-index:-1; }
.ab-cta__orb--a { width:420px;height:420px;background:rgba(233,184,74,.07);top:-30%;left:-8%; }
.ab-cta__orb--b { width:320px;height:320px;background:rgba(244,63,107,.06);bottom:-20%;right:-5%; }

.ab-cta__inner { max-width:600px;margin:0 auto; }
.ab-cta__title { font-family:var(--font-d);font-size:clamp(1.9rem,4vw,3rem);font-weight:800;color:#fff;line-height:1.12;margin-bottom:14px; }
.ab-cta__sub   { font-size:0.95rem;color:var(--clr-muted);line-height:1.7;margin-bottom:36px; }
.ab-cta__actions { display:flex;gap:14px;justify-content:center;flex-wrap:wrap; }

/* ── Responsive ──────────────────────────────── */
@media (max-width:900px) {
    .ab-hero { min-height:auto;padding:80px 0 60px; }
    .ab-hero__title { font-size:2.8rem; }
    .ab-values-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
    .ab-hero__title { font-size:2.2rem; }
    .ab-values-grid, .ab-ach-grid { grid-template-columns:1fr; }
    .ab-stats-grid { grid-template-columns:repeat(2,1fr); }
    .ab-section, .ab-cta { padding:80px 0; }
    .ab-section::before { margin-bottom:80px; }
    .ab-cta__actions { flex-direction:column;align-items:center; }
}