/* Hero photo background */
.about-hero .hero-photo-bg {
    position: absolute; inset: 0; z-index: 0;
    background: url('assets/heroes/about-hero.jpg') center 40% / cover no-repeat;
    opacity: .18;
    pointer-events: none;
    filter: saturate(.6);
}
/* about.css — IITCON About page */

/* ── ABOUT HERO ── */
.about-hero {
    min-height: 52vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(60px + 4rem) 0 4rem;
    position: relative; overflow: hidden;
    background: var(--navy);
}
.about-hero .hero-grid-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(18,107,250,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,107,250,.055) 1px, transparent 1px);
    background-size: 54px 54px;
}
.about-hero .container { position: relative; z-index: 1; max-width: 800px; }
.about-hero .hero-pre {
    font-size: .7rem; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--blue); margin-bottom: 1.25rem;
}
.about-hero h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 600; line-height: 1.08;
    letter-spacing: -.75px; margin-bottom: 1.5rem;
    word-break: break-word;
}
.about-hero h1 em { font-style: normal; color: var(--blue); }
.about-hero .hero-sub {
    font-size: clamp(.88rem, 1.4vw, 1rem);
    color: rgba(255,255,255,.5); line-height: 1.8; max-width: 560px;
}

/* ── SECTION LABELS ── */
.section-label-light {
    font-size: .68rem; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: rgba(255,255,255,.3);
    margin-bottom: 1rem; display: block;
}

/* ── STORY SECTION ── */
.story-section {
    background: var(--navy-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 5.5rem 0;
}
.story-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 4rem;
    align-items: start;
}
.story-text h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700; line-height: 1.15; letter-spacing: -.75px;
    margin-bottom: 1.75rem; word-break: break-word;
}
.story-text p {
    font-size: .9rem; color: rgba(255,255,255,.55);
    line-height: 1.82; margin-bottom: 1.1rem;
}
.story-text p:last-child { margin-bottom: 0; }

.story-aside { display: flex; flex-direction: column; gap: 1.5rem; }
.aside-stat {
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}
.aside-stat strong {
    display: block;
    font-size: 1.85rem; font-weight: 900;
    color: var(--blue); letter-spacing: -1px;
    margin-bottom: .35rem;
}
.aside-stat span {
    font-size: .78rem; color: rgba(255,255,255,.4); line-height: 1.55;
}

/* ── FOUNDER SECTION ── */
.founder-section {
    background: var(--navy);
    padding: 5.5rem 0;
}
.founder-section > .container > .section-label-light { margin-bottom: 2.5rem; }
.founder-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 4rem;
    align-items: start;
}
.founder-bio h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700; letter-spacing: -.75px; margin-bottom: .4rem;
}
.founder-role {
    font-size: .8rem; color: rgba(255,255,255,.35);
    font-weight: 500; letter-spacing: .5px; margin-bottom: 1.75rem !important;
}
.founder-bio p {
    font-size: .9rem; color: rgba(255,255,255,.55);
    line-height: 1.82; margin-bottom: 1.1rem;
}
.founder-bio p strong { color: rgba(255,255,255,.8); }
.founder-bio p:last-of-type { margin-bottom: 1.5rem; }
.founder-link {
    display: inline-flex; align-items: center;
    font-size: .84rem; font-weight: 600; color: var(--blue);
    transition: opacity .15s;
}
.founder-link:hover { opacity: .75; }

/* ── CERT BADGES ── */
.founder-certs {
    position: sticky; top: 80px;
}
.certs-label {
    font-size: .68rem; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: rgba(255,255,255,.25);
    margin-bottom: 1.25rem;
}
.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .85rem;
}
.cert-badge {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: .9rem .5rem .75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    transition: border-color .18s, background .18s;
    text-align: center;
}
.cert-badge:hover {
    border-color: rgba(18,107,250,.4);
    background: rgba(18,107,250,.06);
}
.cert-badge img {
    width: 60px; height: 60px;
    object-fit: contain;
    display: block;
}
.cert-badge span {
    font-size: .65rem; font-weight: 600; letter-spacing: .5px;
    color: rgba(255,255,255,.4); text-transform: uppercase;
}
.certs-note {
    font-size: .68rem; color: rgba(255,255,255,.2);
    margin-top: 1rem; line-height: 1.5;
}

/* ── TEAM SECTION ── */
.team-section {
    background: var(--navy-2);
    border-top: 1px solid var(--border);
    padding: 5rem 0;
}
.team-inner h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700; line-height: 1.15; letter-spacing: -.75px;
    margin-bottom: 1.75rem; word-break: break-word;
}
.team-inner p {
    font-size: .9rem; color: rgba(255,255,255,.5);
    line-height: 1.82; margin-bottom: 1rem; max-width: 680px;
}


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .story-grid { grid-template-columns: 1fr; gap: 3rem; }
    .story-aside { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
    .aside-stat { flex: 1 1 200px; }
    .founder-grid { grid-template-columns: 1fr; gap: 3rem; }
    .founder-certs { position: static; }
    .cert-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .cert-grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
    .cert-badge img { width: 48px; height: 48px; }
    .story-aside { flex-direction: column; }
}
@media (max-width: 480px) {
    .cert-grid { grid-template-columns: repeat(2, 1fr); }
    .about-hero h1 { font-size: 2rem; }
}