/* ================================================================
   Apollo Scheduler — About page
   Standalone, theme-aware. Carries its own copy of the design tokens
   (so it never fights the app's full-viewport layout rules).

   Direction: a stack of shop-floor CONTROL PANELS. Every section sits
   on its own raised, edged surface; the textured background shows only
   as gutters. Recessed readout cells, hairline rules, mono micro-labels,
   one hot-steel accent. Text never floats on bare gray.
   ================================================================ */

:root {
    color-scheme: light;

    --bg: #ccd6df;
    --bg-deep: #bcc7d2;
    --panel: #eef2f6;
    --panel-raised: #fbfdfe;
    --panel-edge: #b4c0cc;
    --cell: #e3e9f0;
    --cell-edge: #c7d1dc;

    --ink: #283847;
    --ink-dim: #5a6c7d;
    --ink-faint: #8d9caa;
    --ink-strong: #16222e;

    --hot: #e05407;
    --hot-glow: rgba(224, 84, 7, 0.22);
    --hot-soft: rgba(224, 84, 7, 0.07);

    /* the brand slate, used for the inverted "outcomes" band in both themes */
    --slate-1: #2c3e50;
    --slate-2: #1f2d3a;
    --slate-ink: #e7edf2;
    --slate-ink-dim: #9fb0c0;

    --ghost: rgba(24, 36, 47, 0.05);   /* oversized section index numerals */
    --grid-line: rgba(24, 36, 47, 0.06);
    --scanline: rgba(24, 36, 47, 0.020);
    --glow: rgba(224, 84, 7, 0.05);
    --hover: rgba(24, 36, 47, 0.035);

    --shadow-pane: 0 6px 22px rgba(24, 36, 47, 0.13);
    --shadow-lift: 0 16px 40px rgba(24, 36, 47, 0.20);
    --inset: inset 0 1px 0 rgba(255, 255, 255, 0.55);

    --font-display: "Barlow Condensed", sans-serif;
    --font-body: "Barlow", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0e151d;
    --bg-deep: #090e14;
    --panel: #1a2430;
    --panel-raised: #243140;
    --panel-edge: #31435a;
    --cell: #141d28;
    --cell-edge: #2a3a4d;

    --ink: #d5dbe2;
    --ink-dim: #8c98a7;
    --ink-faint: #5c6979;
    --ink-strong: #f4f6f8;

    --hot: #ff6a1a;
    --hot-glow: rgba(255, 106, 26, 0.35);
    --hot-soft: rgba(255, 106, 26, 0.08);

    --slate-1: #243648;
    --slate-2: #15202b;
    --slate-ink: #eef3f7;
    --slate-ink-dim: #9fb0c0;

    --ghost: rgba(255, 255, 255, 0.035);
    --grid-line: rgba(255, 255, 255, 0.04);
    --scanline: rgba(255, 255, 255, 0.013);
    --glow: rgba(255, 106, 26, 0.06);
    --hover: rgba(255, 255, 255, 0.04);

    --shadow-pane: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 18px 46px rgba(0, 0, 0, 0.55);
    --inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    background:
        radial-gradient(900px 460px at 82% -6%, var(--glow), transparent 62%),
        repeating-linear-gradient(0deg, transparent 0 23px, var(--scanline) 23px 24px),
        var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.wrap { width: min(1140px, 92vw); margin: 0 auto; }

/* ---------------- top bar ---------------- */

.about-top {
    position: sticky; top: 0; z-index: 30;
    backdrop-filter: blur(10px);
    /* raised panel (near-white in light, lifted slate in dark) so the logo + buttons
       stand off the page background; a touch of translucency keeps the blur-on-scroll cue */
    background: color-mix(in srgb, var(--panel-raised) 92%, transparent);
    border-bottom: 1px solid var(--panel-edge);
    box-shadow: 0 2px 12px -8px rgba(16, 34, 46, .3);
}
.about-top .wrap { display: flex; align-items: center; gap: 14px; height: 60px; }
.brand-mark {
    width: 30px; height: 30px; flex: 0 0 auto;
    background: var(--ink-strong);
    -webkit-mask: url(../helmet-mask.png) center / contain no-repeat;
    mask: url(../helmet-mask.png) center / contain no-repeat;
}
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 2.5px; color: var(--ink-strong); }
.about-top .spacer { margin-left: auto; }
.top-link, .theme-btn {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-dim); text-decoration: none;
    border: 1px solid var(--panel-edge); border-radius: 7px; padding: 7px 11px;
    background: transparent; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.top-link:hover, .theme-btn:hover { color: var(--ink-strong); border-color: var(--ink-faint); background: var(--hover); }

/* ---------------- panel scaffold (the core of the redesign) ---------------- */

main { padding: 26px 0 12px; }
.stack { display: flex; flex-direction: column; gap: 22px; }

.panel {
    position: relative;
    background: linear-gradient(180deg, var(--panel-raised), var(--panel));
    border: 1px solid var(--panel-edge);
    border-radius: 18px;
    box-shadow: var(--shadow-pane), var(--inset);
    padding: clamp(26px, 4vw, 48px);
    overflow: hidden;
}
/* a hairline hot tab on the top-left corner of each panel — a quiet control-room cue */
.panel::after {
    content: ""; position: absolute; top: 0; left: 28px; width: 46px; height: 3px;
    background: var(--hot); border-radius: 0 0 3px 3px; opacity: .9;
}
.panel.no-tab::after { display: none; }

/* oversized ghost index numeral, set into the panel corner */
.ghost-idx {
    position: absolute; top: clamp(-6px, 0vw, 6px); right: 18px;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(96px, 16vw, 190px); line-height: 1;
    color: var(--ghost); letter-spacing: -2px; pointer-events: none; user-select: none;
}

/* ---------------- section head ---------------- */

.section-head { position: relative; max-width: 60ch; margin-bottom: 34px; }
.kicker {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--hot); display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--hot); box-shadow: 0 0 10px var(--hot-glow); }
.section-head h2 {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(28px, 4.2vw, 46px); letter-spacing: .5px; line-height: 1.04; margin: 0; color: var(--ink-strong);
}
.section-head p { color: var(--ink-dim); margin: 14px 0 0; font-size: 17.5px; }

/* ---------------- hero panel ---------------- */

.hero-panel { padding: clamp(30px, 4.4vw, 60px); }
.hero-panel::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask: radial-gradient(130% 110% at 18% 0%, #000 30%, transparent 72%);
    mask: radial-gradient(130% 110% at 18% 0%, #000 30%, transparent 72%);
    pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }

.eyebrow {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--hot); margin: 0 0 18px; display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--hot); box-shadow: 0 0 10px var(--hot-glow); }
.hero-copy h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(46px, 6.6vw, 88px); line-height: 0.92; letter-spacing: 1px; text-transform: uppercase;
    margin: 0; color: var(--ink-strong);
}
.hero-copy h1 .accent { color: var(--hot); }
.lede { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.5; color: var(--ink); margin: 22px 0 0; font-weight: 500; max-width: 42ch; }
.sub { font-size: 16.5px; color: var(--ink-dim); margin: 18px 0 0; max-width: 52ch; }
.hero-cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
    text-decoration: none; border-radius: 8px; padding: 11px 16px; transition: transform .15s, background .15s, border-color .15s;
}
.btn-primary { background: var(--hot); color: #fff; box-shadow: 0 6px 18px var(--hot-glow); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--panel-edge); color: var(--ink-dim); }
.btn-ghost:hover { color: var(--ink-strong); border-color: var(--ink-faint); }

/* hero schedule motif — a muted, authentic abstraction of the mill board (decorative) */
.viz {
    position: relative; background: var(--cell); border: 1px solid var(--cell-edge);
    border-radius: 12px; padding: 16px 16px 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.viz-head {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint);
    margin-bottom: 14px;
}
.viz-head .live { display: inline-flex; align-items: center; gap: 6px; color: var(--hot); }
.viz-head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 8px var(--hot-glow); }
.viz-lanes { position: relative; display: flex; flex-direction: column; gap: 9px; }
.viz-lane { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; }
.viz-lane .lab { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: var(--ink-faint); }
.viz-track { position: relative; height: 18px; border-radius: 5px; background: color-mix(in srgb, var(--ink-strong) 6%, transparent); overflow: hidden; }
.viz-bar { position: absolute; top: 3px; height: 12px; border-radius: 3px; opacity: .92; }
/* the now-line spanning the lanes */
.viz-now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--hot); box-shadow: 0 0 8px var(--hot-glow); }
.viz-now::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--hot); }

/* hero stats strip, set as recessed readouts inside the hero panel */
.stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    margin-top: 30px; background: var(--cell-edge); border: 1px solid var(--cell-edge); border-radius: 12px; overflow: hidden; }
.stat { background: var(--cell); padding: 16px 18px; }
.stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: .5px; color: var(--ink-strong); line-height: 1.05; }
.stat span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }

/* ---------------- value pillars (recessed readout cells) ---------------- */

.pillars { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pillar {
    position: relative; background: var(--cell); border: 1px solid var(--cell-edge);
    border-radius: 12px; padding: 26px 26px 28px; overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pillar::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--hot); transform: scaleY(0); transform-origin: top; transition: transform .28s ease; }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--hot) 38%, var(--cell-edge)); }
.pillar:hover::before { transform: scaleY(1); }
.pillar .p-idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; color: var(--hot); margin-bottom: 14px; }
.pillar h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-strong); margin: 0 0 10px; }
.pillar p { margin: 0; color: var(--ink-dim); font-size: 16px; }

/* ---------------- capability grid (hairline cells) ---------------- */

.caps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cell-edge); border: 1px solid var(--cell-edge); border-radius: 12px; overflow: hidden; }
.cap { background: var(--panel); padding: 22px 22px 24px; transition: background .18s; }
.cap:hover { background: var(--panel-raised); }
.cap .c-no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--ink-faint); }
.cap h4 { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: .5px; color: var(--ink-strong); margin: 8px 0 6px; }
.cap p { margin: 0; font-size: 14.5px; color: var(--ink-dim); line-height: 1.5; }

/* ---------------- power list (hairline rows) ---------------- */

.power-grid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
.power-item { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--panel-edge); }
.power-item .tick { width: 12px; height: 12px; margin-top: 7px; border: 2px solid var(--hot); border-radius: 3px; transform: rotate(45deg); box-shadow: 0 0 10px var(--hot-glow); }
.power-item h4 { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: .3px; color: var(--ink-strong); margin: 0 0 5px; }
.power-item p { margin: 0; color: var(--ink-dim); font-size: 15.5px; }

/* ---------------- outcomes band (inverted slate panel) ---------------- */

.band {
    background: linear-gradient(135deg, var(--slate-1), var(--slate-2));
    border-color: color-mix(in srgb, var(--slate-1) 70%, #000);
    color: var(--slate-ink);
}
.band::after { background: var(--hot); }
.band .ghost-idx { color: rgba(255, 255, 255, 0.05); }
.band .kicker { color: var(--hot); }
.band .section-head h2 { color: #fff; }
.outcomes { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
.outcome { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.outcome .o-mark { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--hot); line-height: 1.3; }
.outcome b { color: #fff; font-weight: 600; font-size: 18px; display: block; font-family: var(--font-display); letter-spacing: .3px; }
.outcome span { color: var(--slate-ink-dim); font-size: 15px; }

/* ---------------- closing panel ---------------- */

.closing-panel { text-align: center; padding: clamp(40px, 6vw, 72px); }
.closing-panel .mark { width: 50px; height: 50px; margin: 0 auto 20px; background: var(--hot);
    -webkit-mask: url(../helmet-mask.png) center / contain no-repeat; mask: url(../helmet-mask.png) center / contain no-repeat; }
.closing-panel h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4.6vw, 50px); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-strong); margin: 0; line-height: 1.02; }
.closing-panel p { color: var(--ink-dim); margin: 14px auto 0; max-width: 52ch; }

/* ---------------- footer ---------------- */

footer { padding: 10px 0 44px; }
footer .wrap {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    background: linear-gradient(180deg, var(--panel-raised), var(--panel));
    border: 1px solid var(--panel-edge); border-radius: 18px;
    box-shadow: var(--shadow-pane), var(--inset);
    padding: 22px clamp(20px, 3vw, 34px);
}
footer .f-name { font-family: var(--font-display); letter-spacing: 1.5px; color: var(--ink-dim); font-size: 14px; }
footer .f-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--ink-faint); margin-left: auto; }

/* ---------------- product showcase (fanned screenshots) ---------------- */

.showcase-panel { overflow: visible; } /* let the rotated cards breathe past the panel edge */
.showcase-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.showcase-copy .kicker { margin-bottom: 0; }
.showcase-copy h2 { margin: 14px 0 0; }
.showcase-copy > p { color: var(--ink-dim); font-size: 17px; margin: 16px 0 0; max-width: 42ch; }
.showcase-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.showcase-points li { position: relative; padding-left: 24px; color: var(--ink-dim); font-size: 15.5px; }
.showcase-points li::before {
    content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px;
    border: 2px solid var(--hot); border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 8px var(--hot-glow);
}
.shots { position: relative; height: 400px; }
.shot {
    position: absolute; margin: 0;
    border-radius: 11px; overflow: hidden;
    border: 1px solid var(--panel-edge); background: var(--panel-raised);
    box-shadow: 0 30px 56px -22px rgba(16, 34, 46, .5), 0 8px 20px -12px rgba(16, 34, 46, .35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.shot img { display: block; width: 100%; height: auto; }
/* back-left: timeline (short card) */
.shot-a { width: 56%; left: 0; top: 16px; transform: rotate(-8deg); z-index: 1; }
/* back-right: operator */
.shot-b { width: 50%; right: 0; top: 0; transform: rotate(7deg); z-index: 2; }
/* mid: the board, peeking behind the readiness card */
.shot-c { width: 56%; left: 50%; top: 52px; transform: translateX(-54%) rotate(2.5deg); z-index: 3; }
/* front-center: coil readiness, the hero card */
.shot-d { width: 84%; left: 50%; bottom: 0; transform: translateX(-50%) rotate(-1.5deg); z-index: 4; }
/* a gentle spread on hover — the stack opens up */
.shots:hover .shot-a { transform: rotate(-11deg) translate(-5%, -4%); }
.shots:hover .shot-b { transform: rotate(9.5deg) translate(5%, -4%); }
.shots:hover .shot-c { transform: translateX(-64%) rotate(4deg) translateY(-3%); }
.shots:hover .shot-d { transform: translateX(-50%) rotate(0deg) translateY(3%); }

@media (max-width: 900px) {
    .showcase-grid { grid-template-columns: 1fr; gap: 8px; }
    .shots { height: auto; display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
    .shot { position: static; width: 100% !important; transform: none !important; }
    .shot-d { order: -1; } /* lead with the readiness card on mobile */
}

/* ---------------- entrance motion (JS-gated, reduced-motion safe) ---------------- */

.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.js .hero-panel .reveal { opacity: 0; transform: translateY(16px); animation: rise .7s ease forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal, .js .reveal.in, .js .hero-panel .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .viz { order: 2; }
    .pillars, .power-grid, .outcomes { grid-template-columns: 1fr; }
    .caps { grid-template-columns: repeat(2, 1fr); }
    .ghost-idx { font-size: 120px; }
}
@media (max-width: 560px) {
    body { font-size: 16px; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .caps { grid-template-columns: 1fr; }
    .ghost-idx { display: none; }
}