/* ── Brand Tokens ── */
    :root {
        --primary:        #1a2a6c;
        --primary-dark:   #0d1b4c;
        --accent:         #f5a623;
        --accent-dark:    #d48806;
        --white:          #ffffff;
        --light-bg:       #f8fafc;
        --text-muted:     rgba(255,255,255,0.65);
    }

    /* ── Hero ── */
    .about-hero {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #2a3f9c 100%);
        padding: 100px 0 80px;
        position: relative;
        overflow: hidden;
    }
    .about-hero::before {
        content: '';
        position: absolute;
        top: -60px; right: -60px;
        width: 400px; height: 400px;
        background: var(--accent);
        opacity: .06;
        border-radius: 50%;
    }
    .about-hero::after {
        content: '';
        position: absolute;
        bottom: -80px; left: -80px;
        width: 350px; height: 350px;
        background: var(--accent);
        opacity: .04;
        border-radius: 50%;
    }
    .about-hero-eyebrow {
        display: inline-block;
        background: rgba(245,166,35,.15);
        border: 1px solid rgba(245,166,35,.35);
        color: var(--accent);
        font-size: .72rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 6px 18px;
        border-radius: 50px;
        margin-bottom: 20px;
    }
    .about-hero h1 {
        font-size: clamp(2rem, 4.5vw, 3.2rem);
        font-weight: 900;
        color: #fff;
        line-height: 1.15;
        margin-bottom: 20px;
    }
    .about-hero h1 span { color: var(--accent); }
    .about-hero p {
        color: var(--text-muted);
        font-size: 1.05rem;
        max-width: 520px;
        line-height: 1.8;
    }
    .about-hero-stat-box {
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 16px;
        padding: 28px 24px;
        text-align: center;
    }
    .about-hero-stat-box .stat-num {
        font-size: 2.2rem;
        font-weight: 900;
        color: var(--accent);
        line-height: 1;
    }
    .about-hero-stat-box .stat-label {
        font-size: .78rem;
        color: rgba(255,255,255,.55);
        margin-top: 6px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* ── Section Tags ── */
    .section-tag {
        display: inline-block;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 10px;
    }
    .section-title {
        font-size: clamp(1.6rem, 3vw, 2.3rem);
        font-weight: 800;
        color: var(--primary);
        line-height: 1.25;
    }
    .section-title span { color: var(--accent); }
    .section-divider {
        width: 48px; height: 4px;
        background: var(--accent);
        border-radius: 2px;
        margin-top: 14px;
    }
    .section-divider.center { margin: 14px auto 0; }

    /* ── Story / Timeline ── */
    .story-section { background: var(--light-bg); }
    .story-card {
        background: #fff;
        border-radius: 20px;
        padding: 40px 36px;
        box-shadow: 0 4px 30px rgba(26,42,108,.06);
        height: 100%;
    }
    .story-card .year-badge {
        display: inline-block;
        background: var(--primary);
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        padding: 4px 14px;
        border-radius: 50px;
        margin-bottom: 16px;
    }
    .story-card h3 {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--primary);
        margin-bottom: 12px;
    }
    .story-card p {
        color: #64748b;
        font-size: .95rem;
        line-height: 1.75;
        margin: 0;
    }
    .story-connector {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .story-connector .line {
        width: 2px;
        height: 60px;
        background: linear-gradient(to bottom, var(--accent), transparent);
    }

    /* ── Mission / Vision ── */
    .mv-section { background: var(--primary); }
    .mv-card {
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 20px;
        padding: 40px 36px;
    }
    .mv-card .mv-icon {
        width: 60px; height: 60px;
        background: rgba(245,166,35,.15);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 22px;
        font-size: 1.5rem;
        color: var(--accent);
    }
    .mv-card h3 {
        font-size: 1.2rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 14px;
    }
    .mv-card p {
        color: rgba(255,255,255,.65);
        font-size: .95rem;
        line-height: 1.8;
        margin: 0;
    }

    /* ── Product Pillars ── */
    .pillar-card {
        background: #fff;
        border: 1px solid rgba(26,42,108,.08);
        border-radius: 16px;
        padding: 28px 24px;
        height: 100%;
        transition: transform .25s, box-shadow .25s;
    }
    .pillar-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px rgba(26,42,108,.12);
    }
    .pillar-card .pillar-icon {
        width: 52px; height: 52px;
        background: linear-gradient(135deg, var(--primary), #2a3f9c);
        border-radius: 14px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem;
        color: #fff;
        margin-bottom: 18px;
    }
    .pillar-card h5 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 10px;
    }
    .pillar-card p {
        font-size: .88rem;
        color: #64748b;
        line-height: 1.7;
        margin: 0;
    }

    /* ── Why NAXIS ── */
    .why-row {
        background: var(--light-bg);
        border-radius: 24px;
        overflow: hidden;
    }
    .why-img-col {
        background: linear-gradient(135deg, var(--primary-dark), var(--primary));
        min-height: 480px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
    }
    .why-check-item {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .why-check-item .check-dot {
        width: 26px; height: 26px;
        min-width: 26px;
        background: var(--accent);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff;
        font-size: .75rem;
        margin-top: 2px;
    }
    .why-check-item h6 {
        font-size: .95rem;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 4px;
    }
    .why-check-item p {
        font-size: .87rem;
        color: #64748b;
        line-height: 1.65;
        margin: 0;
    }

    /* ── Distributor CTA ── */
    .dist-cta {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
        border-radius: 28px;
        padding: 60px 50px;
        position: relative;
        overflow: hidden;
    }
    .dist-cta::before {
        content: '';
        position: absolute;
        top: -50%; right: -10%;
        width: 360px; height: 360px;
        background: var(--accent);
        opacity: .06;
        border-radius: 50%;
    }
    .dist-cta h2 {
        font-size: clamp(1.5rem, 3vw, 2.2rem);
        font-weight: 900;
        color: #fff;
        margin-bottom: 14px;
    }
    .dist-cta p { color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1.8; }
    .btn-accent { background: var(--accent); color: #fff; font-weight: 700; border: none; }
    .btn-accent:hover { background: var(--accent-dark); color: #fff; }
    .btn-outline-accent {
        border: 2px solid rgba(255,255,255,.4);
        color: #fff;
        font-weight: 600;
    }
    .btn-outline-accent:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

    /* ── Values ── */
    .value-item { text-align: center; padding: 20px 10px; }
    .value-num {
        font-size: 3.5rem;
        font-weight: 900;
        color: var(--accent);
        line-height: 1;
    }
    .value-num sup { font-size: 1.5rem; }
    .value-label { font-size: .8rem; text-transform: uppercase; letter-spacing: 1.5px; color: #94a3b8; margin-top: 6px; }
    .value-title { font-size: 1rem; font-weight: 700; color: var(--primary); margin-top: 8px; }

    /* ── Breadcrumb ── */
    .about-breadcrumb { background: var(--primary-dark); padding: 14px 0; }
    .about-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,.55); font-size: .85rem; text-decoration: none; }
    .about-breadcrumb .breadcrumb-item.active { color: var(--accent); font-size: .85rem; }
    .about-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.3); }