/* ============================================================
    BOTRON DYNAMICS — LEADERSHIP PAGE
    All rules scoped to .bdl-page to prevent bleed-in/out.
============================================================ */

.bdl-page {
    --bdl-accent:       #6846c6;
    --bdl-accent-dark:  #4f34a3;
    --bdl-accent-light: #ede8fb;
    --bdl-ink:          #0e0e12;
    --bdl-ink-2:        #2c2c38;
    --bdl-ink-3:        #6b6b7d;
    --bdl-surface:      #f7f7fa;
    --bdl-border:       rgba(0,0,0,.08);
    --bdl-white:        #ffffff;
    --bdl-max-w:        1160px;
    --bdl-gutter:       clamp(24px, 5vw, 64px);
    --bdl-ease:         cubic-bezier(.22,1,.36,1);

    font-family: 'Inter', sans-serif;
    color: var(--bdl-ink);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.bdl-page a { text-decoration: none;}
.bdl-page img { display: block; max-width: 100%; }

/* ── SHARED ── */
.bdl-section { padding: 96px var(--bdl-gutter); }
.bdl-container { max-width: var(--bdl-max-w); margin: 0 auto; }

.bdl-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bdl-accent);
    margin-bottom: 14px;
}

.bdl-section-title {
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    color: var(--bdl-ink);
    line-height: 1.15;
}

/* ── INTRO ── */
.bdl-intro-section { background: #fff; }

.bdl-intro-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 80px;
    align-items: center;
}

.bdl-intro-text .bdl-section-title { margin-top: 10px; margin-bottom: 20px; }

.bdl-intro-para {
    font-size: .97rem;
    color: var(--bdl-ink-3);
    line-height: 1.82;
    margin-bottom: 14px;
}

.bdl-intro-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--bdl-border);
    border-radius: 16px;
    overflow: hidden;
}

.bdl-intro-stat {
    padding: 36px 32px;
    background: #fff;
    border-right: 1px solid var(--bdl-border);
    border-bottom: 1px solid var(--bdl-border);
    transition: background .25s var(--bdl-ease);
    position: relative;
}

.bdl-intro-stat:hover { background: var(--bdl-accent-light); }
.bdl-intro-stat:nth-child(2n) { border-right: none; }
.bdl-intro-stat:nth-child(n+3) { border-bottom: none; }

.bdl-intro-stat:hover { background: rgba(104,70,198,.18); }

.bdl-intro-stat-num {
    font-size: 2.8rem;
    color: var(--bdl-ink);
    line-height: 1;
    margin-bottom: 8px;
}

.bdl-intro-stat-num span { color: var(--bdl-accent); }

.bdl-intro-stat-label {
    font-size: .82rem;
    color: var(--bdl-ink-3);
    font-weight: 500;
    line-height: 1.5;
}

/* ── HOW WE WORK ── */
.bdl-how-section { background: var(--bdl-surface); }

.bdl-how-header { margin-bottom: 52px; }
.bdl-how-header .bdl-section-title { margin-top: 10px; }

.bdl-how-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.bdl-how-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--bdl-border);
    padding: 36px 32px;
    transition: box-shadow .3s var(--bdl-ease), transform .3s var(--bdl-ease);
}

.bdl-how-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(14,14,18,.07);
}

.bdl-how-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--bdl-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.bdl-how-icon .material-icons-round { color: var(--bdl-accent); font-size: 21px; }

.bdl-how-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bdl-ink);
    margin-bottom: 10px;
}

.bdl-how-card-body {
    font-size: .88rem;
    color: var(--bdl-ink-3);
    line-height: 1.78;
}

/* ── CULTURE STRIP ── */
.bdl-culture-section {
    background: var(--bdl-ink);
    padding: 96px var(--bdl-gutter);
    position: relative;
    overflow: hidden;
}

.bdl-culture-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
    radial-gradient(ellipse 55% 110% at 90% 30%, rgba(104,70,198,.3) 0%, transparent 58%),
    radial-gradient(ellipse 35% 60% at 5% 70%, rgba(37,99,235,.13) 0%, transparent 55%);
    pointer-events: none;
}

.bdl-culture-inner {
    max-width: var(--bdl-max-w);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.bdl-culture-inner .bdl-eyebrow { color: rgba(255,255,255,.4); }

.bdl-culture-title {
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    color: #fff;
    line-height: 1.15;
    margin-top: 10px;
    margin-bottom: 48px;
    max-width: 560px;
}

.bdl-culture-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    overflow: hidden;
}

.bdl-pillar {
    padding: 40px 36px;
    background: rgba(255,255,255,.03);
    border-right: 1px solid rgba(255,255,255,.06);
    transition: background .3s;
}

.bdl-pillar:last-child { border-right: none; }
.bdl-pillar:hover { background: rgba(255,255,255,.065); }

.bdl-pillar-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: rgba(104,70,198,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.bdl-pillar-icon .material-icons-round { color: rgba(255,255,255,.8); font-size: 20px; }
.bdl-pillar-title { font-size: .95rem; font-weight: 600; color: #fff; margin-bottom: 10px; }
.bdl-pillar-body { font-size: .86rem; color: rgba(255,255,255,.45); line-height: 1.72; }

/* ── WHAT WE LOOK FOR ── */
.bdl-hiring-section { background: #fff; }

.bdl-hiring-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.bdl-hiring-text .bdl-section-title { margin-top: 10px; margin-bottom: 20px; }

.bdl-hiring-text p {
    font-size: .97rem;
    color: var(--bdl-ink-3);
    line-height: 1.82;
    margin-bottom: 14px;
}

.bdl-trait-list { list-style: none; margin-top: 8px; }

.bdl-trait-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--bdl-border);
    font-size: .9rem;
    color: var(--bdl-ink-2);
    line-height: 1.65;
}

.bdl-trait-list li:last-child { border-bottom: none; }

.bdl-trait-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bdl-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.bdl-trait-check .material-icons-round { font-size: 13px; color: var(--bdl-accent); }
.bdl-trait-label { font-weight: 600; color: var(--bdl-ink); display: block; margin-bottom: 3px; }

/* ── VALUES ── */
.bdl-values-section {
    background: var(--bdl-surface);
    padding: 96px var(--bdl-gutter);
}

.bdl-values-header { margin-bottom: 52px; }
.bdl-values-header .bdl-section-title { margin-top: 10px; }

.bdl-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    border: 1px solid var(--bdl-border);
    border-radius: 14px;
    overflow: hidden;
}

.bdl-value-item {
    padding: 40px 36px;
    background: #fff;
    border-right: 1px solid var(--bdl-border);
    border-bottom: 1px solid var(--bdl-border);
    transition: background .25s;
}

.bdl-value-item:hover { background: var(--bdl-accent-light); }
.bdl-value-item:nth-child(3n) { border-right: none; }
.bdl-value-item:nth-child(n+4) { border-bottom: none; }

.bdl-value-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--bdl-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.bdl-value-icon .material-icons-round { color: var(--bdl-accent); font-size: 20px; }
.bdl-value-title { font-size: .95rem; font-weight: 600; color: var(--bdl-ink); margin-bottom: 8px; }
.bdl-value-body { font-size: .86rem; color: var(--bdl-ink-3); line-height: 1.7; }

/* ── JOIN ── */
.bdl-join-section { padding: 96px var(--bdl-gutter); background: #fff; }

.bdl-join-inner {
    max-width: var(--bdl-max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.bdl-join-text .bdl-section-title { margin-top: 10px; margin-bottom: 16px; }

.bdl-join-text p {
    font-size: .97rem;
    color: var(--bdl-ink-3);
    line-height: 1.82;
    margin-bottom: 28px;
}

.bdl-join-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.bdl-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    background: var(--bdl-accent);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    border-radius: 7px;
    transition: background .2s, transform .2s, box-shadow .2s;
}

.bdl-btn-primary:hover {
    background: var(--bdl-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(104,70,198,.28);
}

.bdl-btn-primary .material-icons-round { font-size: 16px; }

.bdl-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border: 1.5px solid var(--bdl-border);
    color: var(--bdl-ink-2);
    font-size: .88rem;
    font-weight: 600;
    border-radius: 7px;
    transition: border-color .2s, background .2s, color .2s;
}

.bdl-btn-outline:hover {
    border-color: var(--bdl-accent);
    color: var(--bdl-accent);
    background: var(--bdl-accent-light);
}

.bdl-join-quote {
    padding: 40px 44px;
    background: var(--bdl-surface);
    border-radius: 18px;
    border-left: 4px solid var(--bdl-accent);
    position: relative;
}

.bdl-join-quote::before {
    content: '\201C';
    font-size: 5rem;
    color: var(--bdl-accent);
    opacity: .2;
    position: absolute;
    top: 8px; left: 28px;
    line-height: 1;
}

.bdl-join-quote blockquote {
    font-size: 1.2rem;
    color: var(--bdl-ink);
    line-height: 1.55;
    margin-bottom: 20px;
    font-style: italic;
}

.bdl-join-quote cite {
    font-style: normal;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bdl-ink-3);
    display: block;
}

.bdl-join-quote cite span {
    color: var(--bdl-accent);
    display: block;
    font-size: .76rem;
    font-weight: 500;
    margin-top: 2px;
}

/* ── REVEAL ── */
.bdl-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--bdl-ease), transform .6s var(--bdl-ease);
}

.bdl-reveal.bdl-visible { opacity: 1; transform: none; }
.bdl-reveal[data-d="1"] { transition-delay: .08s; }
.bdl-reveal[data-d="2"] { transition-delay: .16s; }
.bdl-reveal[data-d="3"] { transition-delay: .24s; }
.bdl-reveal[data-d="4"] { transition-delay: .32s; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .bdl-intro-grid    { grid-template-columns: 1fr; gap: 48px; }
    .bdl-how-grid      { grid-template-columns: 1fr; }
    .bdl-culture-pillars { grid-template-columns: 1fr; }
    .bdl-pillar        { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
    .bdl-pillar:last-child { border-bottom: none; }
    .bdl-hiring-grid   { grid-template-columns: 1fr; gap: 48px; }
    .bdl-values-grid   { grid-template-columns: 1fr 1fr; }
    .bdl-value-item:nth-child(3n) { border-right: 1px solid var(--bdl-border); }
    .bdl-value-item:nth-child(2n) { border-right: none; }
    .bdl-join-inner    { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
    .bdl-section       { padding: 72px var(--bdl-gutter); }
    .bdl-values-grid   { grid-template-columns: 1fr; }
    .bdl-value-item    { border-right: none; }
    .bdl-join-actions  { flex-direction: column; }
    .bdl-btn-primary,
    .bdl-btn-outline   { width: 100%; justify-content: center; }
    .bdl-intro-stats   { grid-template-columns: 1fr; }
    .bdl-intro-stat    { border-right: none !important; }
    .bdl-intro-stat:not(:last-child) { border-bottom: 1px solid var(--bdl-border) !important; }
}