/* AI For All — Design System
   2026-04-28 v1
   Clean modern with deco accents.
   Palette: navy #0B1D3A + accent blue #2563EB + brass #B8860B
   Font: Inter (300-900), display + body. Poiret One replaced with Inter 700 caps tracked.
*/

/* ================================================
   CSS Custom Properties
   ================================================ */
:root {
    /* Brand */
    --aifa-ink:         #0B1D3A;
    --aifa-ink-soft:    #1E2E4E;
    --aifa-accent:      #2563EB;
    --aifa-accent-deep: #1D4ED8;
    --aifa-brass:       #B8860B;
    --aifa-brass-soft:  #D4A948;
    --aifa-brass-dark:  #7A5808;
    --aifa-warm:        #FAF6EB;
    --aifa-paper:       #FAFBFC;

    /* Surfaces */
    --bg-primary:    #FFFFFF;
    --bg-secondary:  #FAFBFC;
    --bg-card:       #FFFFFF;

    /* Text */
    --text-primary:   #0B1D3A;
    --text-secondary: #475569;
    --text-tertiary:  #94A3B8;
    --text-muted:     #64748B;

    /* Borders */
    --border-light:   #E2E8F0;
    --border-medium:  #CBD5E1;

    /* Fonts */
    --font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}


/* ================================================
   Base
   ================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body) !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
    line-height: 1.6;
    margin: 0;
}

/* Inline text links only — utility classes (text-white etc.) on buttons must win.
   Scope the hover colour to plain anchors that haven't opted out via a text-* class. */
a { text-decoration: none; }


/* ================================================
   Display utilities — type system carried from mockup
   ================================================ */
.display {
    font-family: var(--font-display) !important;
    letter-spacing: -0.025em;
}
.display-hero { letter-spacing: -0.04em; }
.display-sub  { font-weight: 700; letter-spacing: -0.02em; }


/* ================================================
   Deco labels — small caps tracked-out (replaces Poiret One)
   ================================================ */
.deco-label {
    font-family: var(--font-display);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--aifa-brass-dark);
}


/* ================================================
   Brass rule — flanking lines around small caps labels
   ================================================ */
.brass-rule {
    display: inline-block;
    width: 3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--aifa-brass), var(--aifa-brass-soft));
    vertical-align: middle;
    margin: 0 0.75rem;
}


/* ================================================
   Hero gradients (cool / warm)
   ================================================ */
.hero-grad {
    background:
        radial-gradient(1000px 600px at 85% -10%, rgba(37,99,235,0.10), transparent 60%),
        radial-gradient(700px 400px at 10% 110%, rgba(184,134,11,0.08), transparent 60%),
        #ffffff;
}
.hero-grad-warm {
    background:
        radial-gradient(1000px 600px at 85% -10%, rgba(184,134,11,0.18), transparent 60%),
        radial-gradient(700px 400px at 10% 110%, rgba(37,99,235,0.10), transparent 60%),
        #ffffff;
}


/* ================================================
   Sunburst conic gradient
   ================================================ */
.sunburst {
    background: conic-gradient(from 90deg,
        transparent 0deg 10deg, rgba(184,134,11,0.12) 10deg 12deg,
        transparent 12deg 20deg, rgba(184,134,11,0.12) 20deg 22deg,
        transparent 22deg 30deg, rgba(184,134,11,0.12) 30deg 32deg,
        transparent 32deg 180deg, rgba(184,134,11,0.12) 180deg 182deg,
        transparent 182deg 190deg, rgba(184,134,11,0.12) 190deg 192deg,
        transparent 192deg 200deg, rgba(184,134,11,0.12) 200deg 202deg,
        transparent 202deg 360deg);
}
.sunburst-warm {
    background: conic-gradient(from 90deg,
        transparent 0deg 10deg, rgba(184,134,11,0.20) 10deg 12deg,
        transparent 12deg 20deg, rgba(184,134,11,0.20) 20deg 22deg,
        transparent 22deg 30deg, rgba(184,134,11,0.20) 30deg 32deg,
        transparent 32deg 180deg, rgba(184,134,11,0.20) 180deg 182deg,
        transparent 182deg 190deg, rgba(184,134,11,0.20) 190deg 192deg,
        transparent 192deg 200deg, rgba(184,134,11,0.20) 200deg 202deg,
        transparent 202deg 360deg);
}


/* ================================================
   Card hover
   ================================================ */
.card-hover {
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -20px rgba(11,29,58,0.20);
}


/* ================================================
   Divider (centred small caps with brass rules)
   ================================================ */
.divider-deco {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--aifa-brass-dark);
}
.divider-deco::before,
.divider-deco::after {
    content: "";
    height: 1px;
    flex: 1;
    max-width: 120px;
    background: linear-gradient(90deg, transparent, var(--aifa-brass), transparent);
}


/* ================================================
   Stat numbers
   ================================================ */
.stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
}


/* ================================================
   Chip
   ================================================ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: rgba(37,99,235,0.08);
    color: var(--aifa-accent-deep);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* ================================================
   Ribbon (corner tag)
   ================================================ */
.ribbon {
    position: absolute;
    top: 1rem;
    right: -0.4rem;
    background: var(--aifa-brass);
    color: white;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    padding: 0.3rem 0.6rem;
    text-transform: uppercase;
    font-weight: 600;
}


/* ================================================
   Skyline silhouette
   ================================================ */
.skyline {
    height: 40px;
    background-image: linear-gradient(to top, var(--aifa-ink) 2px, transparent 2px),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><g fill='%230B1D3A' opacity='0.12'><rect x='0' y='20' width='40' height='20'/><rect x='50' y='12' width='30' height='28'/><rect x='85' y='24' width='20' height='16'/><rect x='115' y='6' width='30' height='34'/><rect x='150' y='18' width='40' height='22'/><rect x='195' y='24' width='25' height='16'/><rect x='225' y='10' width='35' height='30'/><rect x='265' y='16' width='20' height='24'/><rect x='290' y='22' width='30' height='18'/><rect x='325' y='4' width='28' height='36'/><rect x='358' y='18' width='40' height='22'/><rect x='403' y='22' width='20' height='18'/><rect x='428' y='12' width='32' height='28'/><rect x='465' y='0' width='22' height='40'/><rect x='492' y='16' width='38' height='24'/><rect x='535' y='20' width='28' height='20'/><rect x='568' y='8' width='30' height='32'/><rect x='603' y='24' width='25' height='16'/><rect x='633' y='14' width='35' height='26'/><rect x='673' y='2' width='25' height='38'/><rect x='703' y='20' width='30' height='20'/><rect x='738' y='24' width='22' height='16'/><rect x='765' y='10' width='34' height='30'/><rect x='804' y='18' width='28' height='22'/><rect x='837' y='22' width='25' height='18'/><rect x='867' y='6' width='30' height='34'/><rect x='902' y='20' width='38' height='20'/><rect x='945' y='24' width='20' height='16'/><rect x='970' y='12' width='32' height='28'/><rect x='1007' y='16' width='25' height='24'/><rect x='1037' y='22' width='28' height='18'/><rect x='1070' y='8' width='30' height='32'/><rect x='1105' y='18' width='38' height='22'/><rect x='1148' y='24' width='52' height='16'/></g></svg>");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
}


/* ================================================
   Time pill (for founder day arc)
   ================================================ */
.time-pill {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--aifa-brass-dark);
    color: var(--aifa-brass-dark);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
}


/* ================================================
   Step rail (vertical timeline)
   ================================================ */
.step-rail {
    background: linear-gradient(to bottom, var(--aifa-brass) 0%, var(--aifa-brass-soft) 100%);
    width: 3px;
}


/* ================================================
   Page wrap (content max-width)
   ================================================ */
.page-wrap {
    max-width: 80rem;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}