/* Static company site: spacing / type / radius tokens mirror static/css/tokens.css.
   Colours follow the round lion emblem (logo.png): charcoal ground, cyan-blue and gold
   accents. The app itself still uses its own default theme until it is rebranded. */
:root {
    --fs-title: 1.75rem; --fs-section: 1.375rem; --fs-subtitle: 1.125rem;
    --fs-body: 1rem; --fs-label: 0.875rem; --fs-caption: 0.8125rem;
    --fs-hero: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
    --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
    --radius-sm: 10px; --radius-lg: 18px; --radius-pill: 999px;
    --dur-fast: 150ms; --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --accent-1: #39b3dd; --accent-2: #cbb175;
    --accent-gold-light: #e8d08c; --accent-gold-deep: #a88e5c;
    --accent-gradient: linear-gradient(135deg, #e8d08c 0%, #cbb175 55%, #a88e5c 100%);
    --band-gradient: linear-gradient(135deg, #10324b 0%, #1d6894 100%);
    --on-accent: #141619;
    --bg-body: #0d0f12; --bg-card: #15181c; --bg-card-2: #1a2027;
    --border-col: rgba(255, 255, 255, 0.08);
    --text-main: #e7e9ec; --text-muted: #9aa4ae;
    --link: #5cc6ea;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
* { box-sizing: border-box; }
body {
    margin: 0; color: var(--text-main); background: var(--bg-body);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-body); line-height: 1.6;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--sp-5); }
a { color: var(--link); }
h1 { font-size: var(--fs-hero); line-height: 1.15; margin: var(--sp-4) 0; }
h2 { font-size: var(--fs-section); margin: var(--sp-7) 0 var(--sp-4); }
h3 { font-size: var(--fs-subtitle); margin: 0 0 var(--sp-2); }

.top { border-bottom: 1px solid var(--border-col); background: rgba(20, 22, 25, 0.97); }
.top-row { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-main); text-decoration: none; font-weight: 700; font-size: var(--fs-subtitle); }

.btn {
    display: inline-block; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm);
    font-weight: 600; text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent-gradient); color: var(--on-accent); }
.btn-ghost { border: 1px solid var(--border-col); background: var(--bg-card); color: var(--text-main); padding: var(--sp-2) var(--sp-4); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--accent-1); outline-offset: 2px; }

.hero { padding: var(--sp-7) 0; background:
    radial-gradient(60rem 24rem at 20% 0%, rgba(57, 179, 221, 0.16), transparent 70%),
    radial-gradient(40rem 20rem at 85% 10%, rgba(203, 177, 117, 0.10), transparent 70%); }
.lead { font-size: var(--fs-subtitle); color: var(--text-muted); max-width: 40rem; margin: 0 0 var(--sp-5); }
.pill {
    display: inline-block; margin: 0; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill);
    background: var(--bg-card); border: 1px solid rgba(203, 177, 117, 0.35); color: var(--accent-gold-light); font-size: var(--fs-label); font-weight: 600;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.card { background: var(--bg-card); border: 1px solid var(--border-col); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow); }
.card p { margin: 0; color: var(--text-muted); }

.who { color: var(--text-muted); max-width: 46rem; }

.band { margin-top: var(--sp-7); padding: var(--sp-6); border-radius: var(--radius-lg); background: var(--band-gradient); border-top: 3px solid var(--accent-2); color: #fff; }
.band h2 { margin-top: 0; }
.band p { margin: 0; max-width: 42rem; }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }
.shot { margin: 0; background: var(--bg-card); border: 1px solid var(--border-col); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 692; object-fit: cover; object-position: top; border-bottom: 1px solid var(--border-col); }
.shot figcaption { padding: var(--sp-3) var(--sp-4); color: var(--text-muted); font-size: var(--fs-label); }
.founder { max-width: 46rem; }
.founder p + p { margin-top: var(--sp-3); }
.note { margin: var(--sp-4) 0 0; max-width: 46rem; color: var(--text-muted); font-size: var(--fs-caption); }

.doc { max-width: 46rem; padding-bottom: var(--sp-6); }
.doc h1 { font-size: var(--fs-title); margin-top: var(--sp-6); }
.doc h2 { margin-top: var(--sp-6); }
.doc p { color: var(--text-main); }

.foot { margin-top: var(--sp-7); border-top: 1px solid var(--border-col); background: var(--bg-card); padding: var(--sp-5) 0; font-size: var(--fs-label); color: var(--text-muted); }
.foot p { margin: var(--sp-1) 0; }
.foot strong { color: var(--text-main); }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }
@media print {
    body { background: #fff; color: var(--bg-card); }
    .btn { transition: none; }
    .card, .foot, .top { background: none; box-shadow: none; }
    .band { background: none; color: var(--bg-card); border: 1px solid #ccc; }
}