/* ============================================================
   APLS.ai — Chapter/section styles
   ============================================================ */

/* ---------- HERO (Chapter 00) ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: flex-end; background: var(--ink); color: var(--paper);
  padding-top: 120px; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.92; }
.hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.hero-grad { position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(66% 58% at 12% 90%, rgba(21,23,28,0.92) 16%, transparent 64%),
    radial-gradient(120% 95% at 82% 2%, transparent 46%, rgba(21,23,28,0.5) 92%),
    linear-gradient(180deg, rgba(21,23,28,0.55) 0%, transparent 22%, transparent 72%, rgba(21,23,28,0.82) 100%); }
.hero-inner { position: relative; z-index: 2; padding-bottom: clamp(48px, 7vh, 96px); }

.hero-eyebrow { display: flex; align-items: center; gap: 14px; color: var(--mist); margin-bottom: var(--s6); }
.hero-eyebrow .tick { width: 7px; height: 7px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 0 0 var(--amber); }

.hero-head {
  font-family: var(--font-display); font-weight: 800; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase; line-height: 0.84; letter-spacing: -0.045em;
  font-size: clamp(54px, 10.4vw, 158px);
}
.hero-head .ln { display: block; overflow: hidden; }
.hero-head .ln > span { display: block; }
.hero-head .accent { color: var(--amber); }

.hero-foot { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s7); align-items: end; margin-top: clamp(28px, 4vw, 56px); }
.hero-support { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--paper); max-width: 46ch; }
.hero-support b { color: var(--amber); font-weight: 600; }
.hero-ctas { display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: flex-start; }

/* Scroll cue */
.hero-cue { position: absolute; right: var(--gutter); bottom: clamp(48px,7vh,96px); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--mist); }
.hero-cue .ln { width: 1px; height: 48px; background: linear-gradient(var(--amber), transparent); }
.hero-cue span { writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; }

/* ---------- Credibility strip ---------- */
.creds { background: var(--ink); border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); padding-block: var(--s5); overflow: hidden; }
.creds-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--mist-dim); text-transform: uppercase; margin-bottom: var(--s4); }
.creds-track { display: flex; gap: clamp(28px, 5vw, 72px); align-items: center; }
.creds-track span { font-family: var(--font-display); font-stretch: 110%; font-variation-settings:"wdth" 110; font-weight: 700; text-transform: uppercase; font-size: clamp(15px, 1.6vw, 20px); color: var(--mist); letter-spacing: 0.02em; white-space: nowrap; }
.creds-track .sep { color: var(--ink-line); font-family: var(--font-mono); font-weight: 400; }

/* ---------- N°001 PROBLEM (manifesto) ---------- */
.manifesto { font-family: var(--font-display); font-stretch: 110%; font-variation-settings:"wdth" 110; font-weight: 600;
  text-transform: none; line-height: 1.16; letter-spacing: -0.01em;
  font-size: clamp(26px, 3.6vw, 52px); max-width: 20ch; }
.manifesto p { margin-bottom: 0.7em; }
.manifesto .w { display: inline; }
.manifesto .lead { color: var(--ink); }
.manifesto .dim { color: color-mix(in srgb, var(--ink) 42%, var(--paper)); }
.manifesto .hot { color: var(--amber-deep); }
.problem-grid { display: grid; grid-template-columns: 1fr; gap: var(--s8); }
.problem-copy { display: grid; gap: var(--s8); }
.problem-media { position: relative; overflow: hidden; border: 1px solid rgba(21,23,28,0.14); background: var(--ink); align-self: stretch; min-height: 320px; }
.problem-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) contrast(1.04) brightness(0.92) sepia(0.16) hue-rotate(105deg) saturate(1.2); }
@media (min-width: 900px) { .problem-grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
.problem-aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); border-top: 1px solid rgba(21,23,28,0.14); padding-top: var(--s6); }
.pa-item .pa-k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--amber-deep); }
.pa-item .pa-v { font-size: 15px; color: var(--graphite); margin-top: 8px; max-width: 30ch; }

/* ---------- N°002 STACK DIAGRAM ---------- */
.stack { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.stack-card {
  grid-column: span 6; position: relative; background: var(--ink-raise);
  border: 1px solid var(--ink-line); padding: clamp(28px,3vw,48px);
  display: flex; flex-direction: column; gap: var(--s5); min-height: 280px;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
  overflow: hidden;
}
.stack-card:nth-child(1) { transform: translateY(0); }
.stack-card:hover { border-color: var(--amber); transform: translateY(-6px); background: #20242D; }
.stack-card .sc-top { display: flex; align-items: baseline; justify-content: space-between; }
.stack-card .sc-idx { font-family: var(--font-mono); font-size: 13px; color: var(--amber); letter-spacing: 0.08em; }
.stack-card .sc-fn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; color: var(--mist); text-transform: uppercase; }
.stack-card .sc-name { font-family: var(--font-display); font-stretch: 118%; font-variation-settings:"wdth" 118; font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 2.4vw, 36px); line-height: 0.98; letter-spacing: -0.01em; }
.stack-card .sc-out { color: var(--mist); font-size: 16px; max-width: 34ch; margin-top: auto; }
.stack-card .sc-link { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--paper); display: inline-flex; gap: 10px; align-items: center; }
.stack-card .sc-link .arr { color: var(--amber); transition: transform 0.4s var(--ease); }
.stack-card:hover .sc-link .arr { transform: translateX(6px); }
.stack-card .sc-watermark { position: absolute; right: -10px; bottom: -40px; font-family: var(--font-display); font-stretch:125%; font-variation-settings:"wdth" 125; font-weight: 800; font-size: 200px; line-height: 1; color: rgba(255,255,255,0.025); pointer-events: none; }

/* ---------- N°003 STEPPER (methodology) ---------- */
.stepper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
.stepper-list { display: flex; flex-direction: column; }
.step {
  border-top: 1px solid rgba(21,23,28,0.14); padding: var(--s6) 0; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: start;
  transition: opacity 0.4s var(--ease);
}
.step:last-child { border-bottom: 1px solid rgba(21,23,28,0.14); }
.step .st-idx { font-family: var(--font-mono); font-size: 13px; color: var(--graphite); letter-spacing: 0.08em; padding-top: 6px; }
.step .st-name { font-family: var(--font-display); font-stretch: 120%; font-variation-settings:"wdth" 120; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4vw, 58px); line-height: 0.92; letter-spacing: -0.02em; color: color-mix(in srgb, var(--ink) 35%, var(--paper)); transition: color 0.4s var(--ease); }
.step .st-body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.6s var(--ease), opacity 0.4s ease, margin 0.4s var(--ease); }
.step .st-body p { color: var(--graphite); font-size: 16px; max-width: 40ch; margin-top: 12px; }
.step .st-deliver { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--amber-deep); margin-top: 14px; display: inline-flex; gap: 8px; }
.step.is-active .st-name { color: var(--ink); }
.step.is-active .st-body { max-height: 220px; opacity: 1; }
.step.is-active .st-idx { color: var(--amber-deep); }

.stepper-visual { position: sticky; top: 12vh; aspect-ratio: 4/5; background: var(--ink); border: 1px solid var(--ink-line); overflow: hidden; }
.sv-stage { position: absolute; inset: 0; }
.sv-panel { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s var(--ease); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px,3vw,44px); color: var(--paper); }
.sv-panel.is-active { opacity: 1; }
.sv-panel .sv-num { font-family: var(--font-display); font-stretch:125%; font-variation-settings:"wdth" 125; font-weight: 800; font-size: clamp(120px, 20vw, 280px); line-height: 0.8; color: var(--ink-raise); -webkit-text-stroke: 1px var(--ink-line); }
.sv-panel .sv-cap { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--amber); text-transform: uppercase; }
.sv-panel .sv-deliver { font-family: var(--font-display); font-stretch:118%; font-variation-settings:"wdth" 118; font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 34px); line-height: 1; margin-top: 10px; }
.sv-diagram { position: absolute; inset: 0; opacity: 0.5; }
.sv-diagram svg { width: 100%; height: 100%; }

/* ---------- N°004 PROOF ---------- */
.proof { position: relative; }
.proof-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink-line); background: var(--ink-raise); overflow: hidden; }
.proof-left { padding: clamp(32px,4vw,72px); display: flex; flex-direction: column; gap: var(--s6); }
.proof-tags { display: flex; gap: var(--s4); flex-wrap: wrap; }
.proof-tags span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); border: 1px solid var(--ink-line); padding: 6px 10px; border-radius: 2px; }
.proof-statement { font-family: var(--font-display); font-stretch: 112%; font-variation-settings:"wdth" 112; font-weight: 600; text-transform: none; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -0.01em; }
.proof-metric { margin-top: auto; }
.proof-metric .pm-num { font-family: var(--font-mono); font-weight: 600; font-size: clamp(56px, 9vw, 132px); line-height: 0.9; color: var(--amber); letter-spacing: -0.02em; }
.proof-metric .pm-lab { font-size: 16px; color: var(--mist); margin-top: 10px; max-width: 32ch; }
.proof-metric .pm-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mist-dim); margin-top: 12px; }
.proof-right { position: relative; background: var(--ink); min-height: 420px; overflow: hidden; border-left: 1px solid var(--ink-line); }
.proof-right .pr-diagram { position: absolute; inset: 0; opacity: 0.6; }
.proof-right .pr-corner { position: absolute; top: 20px; right: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--mist); text-transform: uppercase; }

/* Proof diagram — animated agent topology (subtle) */
.pr-diagram .pd-core { animation: pdCorePulse 3.4s ease-in-out infinite; transform-origin: 250px 222px; transform-box: fill-box; }
.pr-diagram .pd-hub { animation: pdHubGlow 3.4s ease-in-out infinite; }
.pr-diagram .pd-pulse { filter: drop-shadow(0 0 2px rgba(22,199,148,0.7)); opacity: 0.85; }
@keyframes pdCorePulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.25); opacity: 0.5; } }
@keyframes pdHubGlow { 0%, 100% { stroke: #2C3039; opacity: 0.8; } 50% { stroke: #16C794; opacity: 1; } }

/* ---------- N°005 GOVERNANCE ---------- */
.gov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(21,23,28,0.12); border: 1px solid rgba(21,23,28,0.12); }
.gov-item { background: var(--paper); padding: clamp(24px,2.6vw,40px); display: flex; flex-direction: column; gap: var(--s4); min-height: 220px; transition: background 0.4s var(--ease); }
.gov-item:hover { background: var(--paper-raise); }
.gov-item .gi-idx { font-family: var(--font-mono); font-size: 12px; color: var(--amber-deep); letter-spacing: 0.08em; }
.gov-item .gi-name { font-family: var(--font-display); font-stretch:115%; font-variation-settings:"wdth" 115; font-weight: 700; text-transform: uppercase; font-size: clamp(19px, 1.8vw, 24px); line-height: 1; }
.gov-item .gi-desc { color: var(--graphite); font-size: 15px; margin-top: auto; max-width: 32ch; }
.gov-lead { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: end; margin-bottom: var(--s7); }
.gov-lead p { font-size: clamp(17px,1.6vw,21px); color: var(--graphite); max-width: 44ch; }

/* ---------- N°006 CONTACT + insights ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,96px); align-items: start; }
.contact-lead .cl-title { font-family: var(--font-display); font-stretch: 125%; font-variation-settings:"wdth" 125; font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 6vw, 96px); line-height: 0.9; letter-spacing: -0.02em; }
.contact-lead p { color: var(--mist); font-size: 17px; margin-top: var(--s5); max-width: 38ch; }
.contact-direct { margin-top: var(--s8); display: flex; flex-direction: column; gap: var(--s4); }
.contact-direct a, .contact-direct span { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; color: var(--paper); display: inline-flex; gap: 12px; }
.contact-direct .cd-k { color: var(--mist-dim); min-width: 80px; text-transform: uppercase; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); }
.field input, .field select, .field textarea {
  background: var(--ink-raise); border: 1px solid var(--ink-line); color: var(--paper);
  padding: 14px 16px; font-family: var(--font-body); font-size: 16px; border-radius: 2px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amber); background: #1F232B; }
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316C794'516' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.form-foot { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s2); }
.form-foot .fp { font-family: var(--font-mono); font-size: 12px; color: var(--mist-dim); max-width: 30ch; }
.form-thanks { display: none; border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); padding: var(--s7); border-radius: 2px; }
.form-thanks.is-on { display: block; }
.form-thanks h4 { font-family: var(--font-display); font-stretch:120%; font-variation-settings:"wdth" 120; text-transform: uppercase; font-size: 28px; margin-bottom: 12px; }
.form-thanks p { color: var(--mist); }
.form.is-sent { display: none; }
.form-error { grid-column: 1/-1; display: none; font-family: var(--font-mono); font-size: 13px; color: #E5484D; margin-top: -8px; }
.form-error.is-on { display: block; }
.form-foot button.is-loading { opacity: 0.6; pointer-events: none; }

/* Insights teaser */
.insights { margin-top: var(--s10); border-top: 1px solid var(--ink-line); padding-top: var(--s7); }
.insights-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s6); gap: var(--s5); }
.insights-head .ih-t { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); }
.insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); }
.insight { background: var(--ink); padding: clamp(24px,3vw,40px); display: flex; flex-direction: column; gap: var(--s4); transition: background 0.4s var(--ease); min-height: 200px; }
.insight:hover { background: var(--ink-raise); }
.insight .in-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.insight .in-title { font-family: var(--font-display); font-stretch:110%; font-variation-settings:"wdth" 110; font-weight: 600; text-transform: none; font-size: clamp(20px,2vw,28px); line-height: 1.06; letter-spacing: -0.01em; margin-top: auto; }
.insight .in-read { font-family: var(--font-mono); font-size: 12px; color: var(--mist); display: inline-flex; gap: 8px; }
.insight:hover .in-read { color: var(--amber); }

/* ============================================================
   Scroll-reveal base states (only applied when JS active + motion allowed)
   ============================================================ */
.js-anim .reveal { opacity: 0; transform: translateY(28px); }
.js-anim .reveal-line > * { transform: translateY(110%); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .hero-foot { grid-template-columns: 1fr; gap: var(--s5); }
  .stepper { grid-template-columns: 1fr; }
  .stepper-visual { display: none; }
  .proof-card { grid-template-columns: 1fr; }
  .proof-right { min-height: 280px; border-left: none; border-top: 1px solid var(--ink-line); }
  .contact-grid { grid-template-columns: 1fr; }
  .gov-grid { grid-template-columns: repeat(2, 1fr); }
  .gov-lead { grid-template-columns: 1fr; gap: var(--s5); }
  .mega { grid-template-columns: 1fr; gap: var(--s6); }
  .mega-aside { border-right: none; border-bottom: 1px solid var(--ink-line); padding-right: 0; padding-bottom: var(--s5); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  /* Tablet & below: collapse the desktop nav into the burger menu */
  .nav-links { display: none; }
  a.nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .stack-card { grid-column: span 12; min-height: 220px; }
  .gov-grid { grid-template-columns: 1fr; }
  .stack { gap: 10px; }
  .insights-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .problem-aside { grid-template-columns: 1fr; gap: var(--s5); }
  .footer-top { grid-template-columns: 1fr; }
  .contact-lead .cl-title { font-size: clamp(40px,13vw,72px); }
  .hero-foot { gap: var(--s4); }
  .hero-ctas { width: 100%; }
  .btn { width: 100%; justify-content: center; }
}