*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --black:   #0A0A0A;
    --white:   #FFFFFF;
    --bg:      #F5F4F0;
    --border:  #E6E5DF;
    --text:    #111110;
    --mid:     #5A5855;
    --muted:   #9B9890;
    --hero-bg: #0C1A35;
    --accent:  #C9A84C;
}

html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}


/* ── HERO ────────────────────────────── */
.about-hero {
    background: linear-gradient(145deg, #0C1A35 0%, #142548 45%, #0E1E3A 100%);
    padding: 120px 64px 72px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.about-hero-inner {
    max-width: 760px; margin: 0 auto;
}
.about-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.35); margin-bottom: 24px;
}
.about-eyebrow span { width: 28px; height: 1px; background: rgba(255,255,255,.2); display: block; }
.about-title {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 900; line-height: 1; letter-spacing: -.04em;
    color: var(--white); margin-bottom: 16px;
}
.about-sub {
    font-size: 17px; color: rgba(255,255,255,.5); font-weight: 300; max-width: 560px;
}

/* ── CONTENT ─────────────────────────── */
.about-content {
    max-width: 760px; margin: 0 auto;
    padding: 72px 64px 96px;
}

.about-section { margin-bottom: 56px; }
.about-section:last-child { margin-bottom: 0; }

.about-section-label {
    font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 14px;
}

.about-section h2 {
    font-size: 22px; font-weight: 700; letter-spacing: -.02em;
    color: var(--text); margin-bottom: 14px;
}

.about-section p {
    font-size: 15px; line-height: 1.75; color: var(--mid);
}
.about-section p + p { margin-top: 14px; }

.about-divider {
    height: 1px; background: var(--border); margin: 56px 0;
}

.about-tag-list {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;
}
.about-tag {
    font-size: 12px; font-weight: 500; color: var(--mid);
    border: 1px solid var(--border); border-radius: 100px;
    padding: 5px 14px; background: var(--white);
}


@media (max-width: 768px) {
    .about-hero { padding: 100px 24px 48px; }
    .about-content { padding: 48px 24px 72px; }
}