/*
 * CRP56 — Carrera / Jaune (Primordial Yellow) Theme
 * Art direction: Chaotic nuclear delinquent energy from Tensura's Yellow Primordial
 * Palette: deep void black + radioactive gold-yellow + icy blue (Carrera's eyes) + bone white
 * Typography: VCR-JP / SAIBA-45 display → mono body (matching portfolio system)
 * Density: dramatic — sparse breathing room with explosive accent moments
 * Motif: skull pins, aura flare, static glitch, nuclear bloom
 */

/* ============================================================
   Custom Font — VCR-JP
   Paths assume: public/css/crp56.css and public/fonts/vcr-jp/*
   ============================================================ */
/* VCR-JP custom font */
@font-face {
    font-family: 'VCR-JP';
    src: url('fonts/vcr-jp/vcr-jp.woff2') format('woff2'),
    url('fonts/vcr-jp/vcr-jp.otf')   format('opentype'),
    url('fonts/vcr-jp/vcr-jp.ttf')   format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    size-adjust: 79%;
}

/* ============================================================
   ROOT TOKENS — Carrera Primordial Palette
   ============================================================ */
:root {
    --c-void: #08070b;
    --c-deep: #0e0c13;
    --c-panel: #14111c;
    --c-panel-lift: #1a1726;
    --c-panel-high: #211e30;
    --c-border: #2b2740;
    --c-border-soft: rgba(43, 39, 64, 0.45);

    --c-jaune: #d4b84a;
    --c-jaune-bright: #f0d46e;
    --c-jaune-dim: #8a7228;
    --c-jaune-ghost: rgba(212, 184, 74, 0.10);
    --c-jaune-glow: rgba(240, 212, 110, 0.22);

    --c-iris: #7ab8d6;
    --c-iris-bright: #a8d4ea;
    --c-iris-deep: #2c6a8a;
    --c-iris-ghost: rgba(122, 184, 214, 0.10);

    --c-bone: #e8e4d8;
    --c-bone-dim: #9e9a90;
    --c-bone-faint: #4a4840;

    --c-text: #e8e4d8;
    --c-text-muted: #9e9a90;
    --c-text-faint: #5a5750;

    /* VCR-JP as main font */
    --font-display: 'VCR-JP', 'SAIBA-45', 'Courier New', monospace;
    --font-body:    'VCR-JP', 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
    --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
    --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
    --text-hero: clamp(2.8rem, 0.5rem + 6.5vw, 7rem);

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    --r-sm: 0.25rem;
    --r-md: 0.5rem;
    --r-lg: 0.875rem;
    --r-xl: 1.25rem;

    --t-fast: 140ms cubic-bezier(0.16, 1, 0.3, 1);
    --t-mid:  260ms cubic-bezier(0.16, 1, 0.3, 1);
    --t-slow: 440ms cubic-bezier(0.16, 1, 0.3, 1);

    --shadow-card:       0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-lift:       0 8px 24px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-glow-jaune: 0 0 28px rgba(212, 184, 74, 0.35), 0 0 6px rgba(212, 184, 74, 0.5);
    --shadow-glow-iris:  0 0 20px rgba(122, 184, 214, 0.3);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    scroll-padding-top: var(--sp-16);
}
body {
    min-height: 100dvh;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--c-text);
    background-color: var(--c-void);
    line-height: 1.6;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; }
p, li { text-wrap: pretty; max-width: 68ch; }
button { cursor: pointer; background: none; border: none; }
::selection { background: rgba(212, 184, 74, 0.3); color: var(--c-text); }
:focus-visible { outline: 2px solid var(--c-jaune); outline-offset: 3px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@keyframes aura-pulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.015)} }
@keyframes nuclear-flicker { 0%,93%,100%{opacity:1} 94%{opacity:.7} 96%{opacity:.9} 98%{opacity:.6} }
@keyframes scanlines-drift { 0%{background-position:0 0} 100%{background-position:0 80px} }
@keyframes glitch-x { 0%,85%,100%{transform:translateX(0) skewX(0deg);clip-path:none} 87%{transform:translateX(-4px) skewX(-2deg)} 89%{transform:translateX(3px) skewX(1deg)} 91%{transform:translateX(-2px) skewX(.5deg)} }
@keyframes skull-rotate { 0%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(18deg) scale(1.15)} 100%{transform:rotate(0deg) scale(1)} }
@keyframes shimmer-sweep { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes aura-drift { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(3%,2%) scale(1.02)} 66%{transform:translate(-2%,1%) scale(.99)} 100%{transform:translate(0,0) scale(1)} }
@keyframes status-blink { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes fade-rise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.crp56-page { position: relative; isolation: isolate;  overflow-x: hidden; }
.crp56-content { position:relative; z-index:1; max-width:1180px; margin-inline:auto; padding-inline: clamp(var(--sp-4), 5vw, var(--sp-12)); }

.crp56-hero { position:relative; padding-block: clamp(var(--sp-12), 8vw, var(--sp-24)); overflow:hidden; }
.crp56-hero::before { content:""; position:absolute; top:-20%; left:-10%; width:70%; height:120%; background: radial-gradient(ellipse at 30% 40%, rgba(212,184,74,.12) 0%, rgba(212,184,74,.04) 40%, transparent 70%); animation:aura-drift 12s ease-in-out infinite; pointer-events:none; }
.crp56-hero::after { content:""; position:absolute; bottom:-30%; right:-5%; width:50%; height:100%; background: radial-gradient(ellipse at 70% 60%, rgba(122,184,214,.08) 0%, transparent 60%); pointer-events:none; }
.crp56-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns: 1fr auto; gap:var(--sp-8); align-items:start; }
.crp56-primordial-badge { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-4); border:1px solid rgba(212,184,74,.4); border-radius:var(--r-sm); background:rgba(212,184,74,.06); color:var(--c-jaune); font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:.22em; text-transform:uppercase; margin-bottom:var(--sp-6); animation: fade-rise .7s var(--t-mid) both; }
.crp56-primordial-badge::before { content:"✦"; color:var(--c-jaune-bright); font-size:.65em; animation:aura-pulse 2.4s ease-in-out infinite; }
.crp56-title { font-family:var(--font-display); font-size:var(--text-hero); font-weight:700; letter-spacing:-.01em; text-transform:uppercase; line-height:.95; color:var(--c-text); animation: fade-rise .7s .1s var(--t-mid) both, nuclear-flicker 8s 3s ease infinite; margin-bottom:var(--sp-4); }
.crp56-title .jaune-mark { color:var(--c-jaune); text-shadow:var(--shadow-glow-jaune); display:inline-block; animation:nuclear-flicker 6s 1s ease infinite; }
.crp56-subtitle { font-family:var(--font-display); font-size:var(--text-lg); color:var(--c-iris); letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--sp-6); animation: fade-rise .7s .2s var(--t-mid) both; }
.crp56-description { font-family:var(--font-body); font-size:var(--text-base); color:var(--c-text-muted); line-height:1.75; max-width:58ch; margin-bottom:var(--sp-8); animation: fade-rise .7s .3s var(--t-mid) both; }
.crp56-meta { display:flex; flex-wrap:wrap; gap:var(--sp-3); animation: fade-rise .7s .4s var(--t-mid) both; }
.crp56-meta-pill { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4); background:var(--c-panel); border:1px solid var(--c-border); border-radius:var(--r-sm); font-size:var(--text-xs); color:var(--c-text-muted); font-family:var(--font-body); letter-spacing:.05em; transition:border-color var(--t-fast), color var(--t-fast); }
.crp56-meta-pill:hover { border-color: rgba(212,184,74,.45); color:var(--c-jaune); }
.crp56-meta-pill .pill-icon { color:var(--c-jaune-dim); font-size:.75em; }
.crp56-hero-glyph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-3); animation: fade-rise .9s .35s var(--t-mid) both; }
.crp56-primordial-mark { position:relative; width:clamp(90px, 12vw, 140px); height:clamp(90px, 12vw, 140px); }
.crp56-primordial-mark svg { width:100%; height:100%; animation:aura-pulse 3.2s ease-in-out infinite; filter:drop-shadow(0 0 10px rgba(212,184,74,.5)); }
.crp56-primordial-label { font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:.25em; text-transform:uppercase; color:var(--c-jaune-dim); text-align:center; }

.crp56-section { padding-block: clamp(var(--sp-10), 5vw, var(--sp-20)); border-top:1px solid var(--c-border-soft); }
.crp56-section-header { display:flex; align-items:center; gap:var(--sp-4); margin-bottom: clamp(var(--sp-6), 3vw, var(--sp-12)); }
.crp56-section-title { font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--c-text); }
.crp56-section-line { flex:1; height:1px; background: linear-gradient(to right, rgba(212,184,74,.4), rgba(212,184,74,.08), transparent); }
.crp56-skull { font-size:1.1em; color:var(--c-jaune); transition:transform var(--t-fast); cursor:default; }
.crp56-skull:hover { animation: skull-rotate .5s ease-in-out; }

.crp56-arch-grid, .crp56-feature-grid, .crp56-flows, .crp56-two-col { display:grid; gap:var(--sp-4); }
.crp56-arch-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px,100%),1fr)); }
.crp56-feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr)); }
.crp56-flows { grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr)); }
.crp56-two-col { grid-template-columns: repeat(auto-fit, minmax(min(340px,100%),1fr)); }

.crp56-card { position:relative; padding:var(--sp-6); background:var(--c-panel); border:1px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; transition:border-color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid); }
.crp56-card::before { content:""; position:absolute; inset:0; background: linear-gradient(130deg, rgba(212,184,74,.07) 0%, transparent 50%, rgba(122,184,214,.04) 100%); background-size:200% 100%; background-position:-200% 0; opacity:0; transition:opacity var(--t-slow), background-position var(--t-slow); }
.crp56-card::after { content:""; position:absolute; top:0; left:var(--sp-4); right:var(--sp-4); height:1px; background: linear-gradient(to right, transparent, rgba(212,184,74,.5), transparent); opacity:0; transition:opacity var(--t-mid); }
.crp56-card:hover { border-color: rgba(212,184,74,.35); box-shadow:var(--shadow-lift), var(--shadow-glow-jaune); transform:translateY(-2px); }
.crp56-card:hover::before { opacity:1; background-position:200% 0; animation:shimmer-sweep 1.2s ease-out both; }
.crp56-card:hover::after { opacity:1; }
.crp56-card-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--c-jaune-ghost); border:1px solid rgba(212,184,74,.25); border-radius:var(--r-md); color:var(--c-jaune); font-size:.95rem; margin-bottom:var(--sp-4); transition:background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.crp56-card:hover .crp56-card-icon { background: rgba(212,184,74,.16); border-color: rgba(212,184,74,.5); box-shadow:0 0 10px rgba(212,184,74,.3); }
.crp56-card-title { font-family:var(--font-display); font-size:var(--text-sm); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text); margin-bottom:var(--sp-3); transition:color var(--t-fast); }
.crp56-card:hover .crp56-card-title { color:var(--c-jaune-bright); }
.crp56-card-body { font-size:var(--text-sm); color:var(--c-text-muted); line-height:1.7; }
.crp56-card--wide { grid-column:span 2; }

.crp56-flow { background:var(--c-panel); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--shadow-card); }
.crp56-flow-title { font-family:var(--font-display); font-size:var(--text-sm); letter-spacing:.14em; text-transform:uppercase; color:var(--c-jaune); margin-bottom:var(--sp-5); display:flex; align-items:center; gap:var(--sp-3); }
.crp56-flow-title::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--c-jaune); box-shadow:0 0 6px var(--c-jaune); animation:status-blink 2s ease-in-out infinite; }
.crp56-flow-steps { display:flex; flex-direction:column; gap:0; }
.crp56-flow-step { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1px solid transparent; border-radius:var(--r-md); transition:background var(--t-fast), border-color var(--t-fast); position:relative; }
.crp56-flow-step:hover { background:var(--c-jaune-ghost); border-color: rgba(212,184,74,.18); }
.crp56-flow-step-label { font-family:var(--font-body); font-size:var(--text-sm); color:var(--c-text-muted); transition:color var(--t-fast); }
.crp56-flow-step:hover .crp56-flow-step-label { color:var(--c-text); }
.crp56-flow-connector { display:flex; justify-content:center; padding-block:var(--sp-1); color: rgba(212,184,74,.35); font-size:.75rem; font-family:var(--font-body); user-select:none; }
.crp56-flow-index { display:flex; align-items:center; justify-content:center; width:20px; height:20px; flex-shrink:0; border-radius:var(--r-sm); background:var(--c-panel-high); border:1px solid var(--c-border); font-size:var(--text-xs); color:var(--c-jaune-dim); font-family:var(--font-body); }

.crp56-code { position:relative; background:#08070b; border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-5); font-family:var(--font-body); font-size:var(--text-sm); line-height:1.7; color:var(--c-jaune-bright); overflow-x:auto; box-shadow:var(--shadow-card); }
.crp56-code::before { content:"●  ●  ●"; display:block; letter-spacing:.4em; font-size:.55rem; color:var(--c-border); margin-bottom:var(--sp-4); }
.crp56-code-label { position:absolute; top:var(--sp-3); right:var(--sp-4); font-size:var(--text-xs); letter-spacing:.1em; color:var(--c-jaune-dim); font-family:var(--font-body); }
.crp56-code .dim { color:var(--c-text-faint); } .crp56-code .key { color:var(--c-iris); } .crp56-code .str { color:var(--c-bone); }

.crp56-status-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.crp56-status-list li { display:flex; align-items:flex-start; gap:var(--sp-3); font-size:var(--text-sm); color:var(--c-text-muted); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); transition:background var(--t-fast), color var(--t-fast); }
.crp56-status-list li:hover { background:var(--c-jaune-ghost); color:var(--c-text); }
.crp56-status-list li::before { content:"✦"; flex-shrink:0; color:var(--c-jaune); font-size:.65em; margin-top:.35em; text-shadow:0 0 6px rgba(212,184,74,.6); }

.crp56-timeline { position:relative; padding-left:var(--sp-8); }
.crp56-timeline::before { content:""; position:absolute; left:calc(var(--sp-3) - 1px); top:var(--sp-3); bottom:var(--sp-3); width:1px; background: linear-gradient(to bottom, var(--c-jaune), rgba(212,184,74,.15), transparent); }
.crp56-timeline-item { position:relative; margin-bottom:var(--sp-5); }
.crp56-timeline-item::before { content:""; position:absolute; left:calc(-1 * var(--sp-8) + var(--sp-3) - 5px); top:.45em; width:10px; height:10px; border-radius:50%; background:var(--c-panel-high); border:1.5px solid var(--c-jaune); transition:background var(--t-fast), box-shadow var(--t-fast); }
.crp56-timeline-item:hover::before { background:var(--c-jaune); box-shadow:0 0 8px rgba(212,184,74,.65); }
.crp56-timeline-step { font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--c-jaune-dim); margin-bottom:var(--sp-1); }
.crp56-timeline-desc { font-size:var(--text-sm); color:var(--c-text-muted); line-height:1.55; }
.crp56-timeline-item:hover .crp56-timeline-desc { color:var(--c-text); }

.crp56-link-btn { display:inline-flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-6); background:var(--c-panel-lift); border:1px solid rgba(212,184,74,.35); border-radius:var(--r-md); color:var(--c-jaune); font-family:var(--font-display); font-size:var(--text-sm); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; transition:background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); }
.crp56-link-btn:hover { background: rgba(212,184,74,.1); border-color: rgba(212,184,74,.65); box-shadow:var(--shadow-glow-jaune); color:var(--c-jaune-bright); }
.crp56-link-btn .btn-icon { font-size:.9em; transition:transform var(--t-fast); }
.crp56-link-btn:hover .btn-icon { transform:translateX(3px); }

.crp56-chip { display:inline-flex; align-items:center; gap:var(--sp-2); padding:2px var(--sp-3); border-radius:var(--r-sm); font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; font-weight:500; }
.crp56-chip--yellow { background: rgba(212,184,74,.12); border:1px solid rgba(212,184,74,.3); color:var(--c-jaune); }
.crp56-chip--blue { background: rgba(122,184,214,.1); border:1px solid rgba(122,184,214,.25); color:var(--c-iris); }
.crp56-chip--bone { background: rgba(232,228,216,.05); border:1px solid rgba(232,228,216,.15); color:var(--c-bone-dim); }
.crp56-glitch { position:relative; display:inline-block; }
.crp56-glitch:hover { animation: glitch-x .35s ease-in-out; }
.crp56-divider { height:1px; background: linear-gradient(to right, transparent, rgba(212,184,74,.3) 20%, rgba(212,184,74,.3) 80%, transparent); margin-block:var(--sp-4); }

/* interactive visualiser */
.crp56-interactive-shell { display:block; }
.crp56-interactive-intro { margin-bottom: var(--sp-6); }
.crp56-visualiser { display:block; }
.crp56-vis-controls { display:grid; gap:var(--sp-4); margin-bottom:var(--sp-5); }
.crp56-vis-input { width:100%; padding:var(--sp-4) var(--sp-4); background:var(--c-panel); border:1px solid var(--c-border); border-radius:var(--r-md); color:var(--c-bone); font-family:var(--font-body); font-size:var(--text-sm); outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.crp56-vis-input:focus { border-color:rgba(212,184,74,.5); box-shadow:0 0 0 3px rgba(212,184,74,.12); }
.crp56-vis-btnrow { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.crp56-speed-wrap { display:flex; align-items:center; gap:var(--sp-2); color:var(--c-text-muted); font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; font-family:var(--font-display); }
.crp56-speed-slider { width:120px; accent-color: var(--c-jaune); }
.crp56-btn-strong { background: rgba(212,184,74,.12); border-color: rgba(212,184,74,.45); color: var(--c-jaune-bright); }
.crp56-btn-strong:hover { background: rgba(212,184,74,.18); }
.crp56-vis-board { background: var(--c-panel); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--shadow-card); }
.crp56-vis-topbar { display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--sp-5); }
.crp56-status { color:var(--c-text-muted); font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; }
.crp56-status.running { color:var(--c-jaune); text-shadow:0 0 8px rgba(212,184,74,.5); }
.crp56-status.done { color:var(--c-iris); text-shadow:0 0 8px rgba(122,184,214,.35); }
.crp56-mutation-counter { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4); border-radius:999px; background:rgba(212,184,74,.08); border:1px solid rgba(212,184,74,.2); color:var(--c-jaune-dim); font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; }
.crp56-mutation-counter span { color:var(--c-jaune); }
.crp56-pipeline { display:flex; gap:0; align-items:stretch; overflow-x:auto; padding-bottom:var(--sp-2); margin-bottom:var(--sp-5); scrollbar-width:thin; scrollbar-color: var(--c-jaune-dim) transparent; }
.crp56-pipeline::-webkit-scrollbar { height: 4px; }
.crp56-pipeline::-webkit-scrollbar-thumb { background: var(--c-jaune-dim); border-radius: 999px; }
.crp56-stage-node { flex:1; min-width:130px; display:flex; flex-direction:column; align-items:center; position:relative; padding:0 var(--sp-2); }
.crp56-stage-node:not(:last-child)::after { content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid rgba(212,184,74,.2); z-index:2; transition:border-left-color var(--t-fast); }
.crp56-stage-node.active:not(:last-child)::after, .crp56-stage-node.done:not(:last-child)::after { border-left-color: var(--c-jaune); filter:drop-shadow(0 0 4px var(--c-jaune)); }
.crp56-stage-box { width:100%; background:rgba(10,10,20,.8); border:1.5px solid rgba(212,184,74,.15); border-radius:var(--r-md); padding:.9rem .6rem; text-align:center; transition:all .4s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden; }
.crp56-stage-box::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 0%, rgba(212,184,74,.12), transparent 65%); opacity:0; transition:opacity .4s; }
.crp56-stage-node.active .crp56-stage-box, .crp56-stage-node.done .crp56-stage-box { border-color:var(--c-jaune); box-shadow:0 0 20px rgba(212,184,74,.35), inset 0 0 15px rgba(212,184,74,.06); }
.crp56-stage-node.active .crp56-stage-box::before, .crp56-stage-node.done .crp56-stage-box::before { opacity:1; }
.crp56-stage-icon { font-size:1.4rem; color:rgba(212,184,74,.3); margin-bottom:.4rem; transition:color .4s, text-shadow .4s; }
.crp56-stage-node.active .crp56-stage-icon, .crp56-stage-node.done .crp56-stage-icon { color:var(--c-jaune); text-shadow:0 0 14px var(--c-jaune); }
.crp56-stage-label { font-family:var(--font-display); font-size:.6rem; text-transform:uppercase; letter-spacing:1.5px; color:rgba(212,184,74,.4); transition:color .4s; line-height:1.3; }
.crp56-stage-node.active .crp56-stage-label, .crp56-stage-node.done .crp56-stage-label { color:var(--c-jaune-bright); }
.crp56-stage-tick { font-size:.7rem; color:var(--c-jaune); margin-top:.25rem; min-height:1em; text-shadow:0 0 8px rgba(212,184,74,.6); }
.crp56-data-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); margin-bottom:var(--sp-5); }
.crp56-data-pane { background:rgba(5,5,12,.9); border:1px solid rgba(212,184,74,.15); border-radius:var(--r-md); padding:var(--sp-4); min-height:110px; position:relative; transition:border-color .4s, box-shadow .4s; }
.crp56-data-pane.active { border-color: rgba(212,184,74,.5); box-shadow:0 0 16px rgba(212,184,74,.2); }
.crp56-data-pane-label { font-family:var(--font-display); font-size:.6rem; text-transform:uppercase; letter-spacing:2px; color:var(--c-jaune-dim); margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; }
.crp56-data-pane-label::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c-jaune-dim); box-shadow:0 0 4px var(--c-jaune-dim); }
.crp56-data-pane.active .crp56-data-pane-label::before { background:var(--c-jaune); box-shadow:0 0 8px var(--c-jaune); animation:status-blink .8s ease-in-out infinite; }
.crp56-data-display { font-family:var(--font-body); font-size:.78rem; color:var(--c-text); word-break:break-all; line-height:1.5; min-height:60px; overflow:hidden; max-height:80px; }
.crp56-data-display .char-span { display:inline-block; transition:color .2s, text-shadow .2s; }
.crp56-data-display .char-span.lit { color:var(--c-jaune-bright); text-shadow:0 0 8px var(--c-jaune); }
.crp56-data-display .char-span.hex-lit { color:var(--c-iris); text-shadow:0 0 6px var(--c-iris); }
.crp56-data-display .char-span.encoded { color:var(--c-jaune-bright); text-shadow:0 0 6px var(--c-jaune); }
.crp56-output-zone { background:rgba(5,5,12,.9); border:2px solid rgba(212,184,74,.2); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-4); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; transition:border-color .4s, box-shadow .4s; }
.crp56-output-zone.done { border-color:var(--c-jaune); box-shadow:0 0 30px rgba(212,184,74,.25); }
.crp56-output-label { font-family:var(--font-display); font-size:.65rem; text-transform:uppercase; letter-spacing:2px; color:var(--c-jaune-dim); white-space:nowrap; }
.crp56-output-value { flex:1; font-family:var(--font-body); font-size:.82rem; color:var(--c-jaune-bright); word-break:break-all; text-shadow:0 0 6px rgba(240,212,110,.25); min-height:1.2em; }
.crp56-copy-btn { background:none; border:1px solid rgba(212,184,74,.3); color:var(--c-jaune-dim); font-family:var(--font-display); font-size:.65rem; padding:.4rem .8rem; border-radius:var(--r-sm); cursor:pointer; text-transform:uppercase; letter-spacing:1px; transition:all .3s; white-space:nowrap; }
.crp56-copy-btn:hover { border-color:var(--c-jaune); color:var(--c-jaune); box-shadow:0 0 10px rgba(212,184,74,.3); }
.crp56-detail-panel { margin-top:var(--sp-5); background:rgba(10,10,20,.85); border:1px solid rgba(212,184,74,.2); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); min-height:70px; transition:all .4s; }
.crp56-detail-title { font-family:var(--font-display); font-size:.75rem; text-transform:uppercase; letter-spacing:2px; color:var(--c-jaune); margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem; }
.crp56-detail-text { font-size:.88rem; color:var(--c-text-muted); line-height:1.65; }
.crp56-detail-text .crp56-highlight { color:var(--c-jaune-bright); }
.crp56-detail-text .code-word { font-family:var(--font-body); background:rgba(212,184,74,.08); border:1px solid rgba(212,184,74,.2); border-radius:4px; padding:0 .35em; color:var(--c-iris); font-size:.85em; }
.crp56-mutation-counter .count-val, #mutation-count { color:var(--c-jaune); }

@media (max-width: 680px) {
    .crp56-pipeline { flex-direction:column; }
    .crp56-stage-node { flex-direction:row; min-width:unset; width:100%; }
    .crp56-stage-node::after { display:none; }
    .crp56-stage-box { flex:1; text-align:left; display:flex; align-items:center; gap:.8rem; }
    .crp56-stage-icon { margin-bottom:0; }
    .crp56-data-row { grid-template-columns:1fr; }
    .crp56-vis-btnrow { flex-direction:column; align-items:stretch; }
    .crp56-speed-wrap { justify-content:space-between; }
}
@media (max-width: 768px) {
    .crp56-hero-inner { grid-template-columns:1fr; }
    .crp56-hero-glyph { display:none; }
    .crp56-arch-grid, .crp56-flows, .crp56-feature-grid { grid-template-columns:1fr; }
    .crp56-card--wide { grid-column:span 1; }
}
@media (max-width: 480px) {
    .crp56-title { font-size: clamp(2.2rem, 10vw, 3.5rem); }
    .crp56-meta { flex-direction:column; align-items:flex-start; }
}

.crp56-reveal { opacity:0; transform:translateY(14px); transition:opacity var(--t-slow), transform var(--t-slow); }
.crp56-reveal.visible { opacity:1; transform:translateY(0); }


/* ============================================================
   INTERACTIVE VISUALISER
   ============================================================ */
.crp56-interactive-shell { display:block; }
.crp56-interactive-intro { margin-bottom: var(--sp-6); }
.crp56-visualiser { display:block; }
.crp56-vis-controls { display:grid; gap:var(--sp-4); margin-bottom:var(--sp-5); }
.crp56-vis-input { width:100%; padding:var(--sp-4) var(--sp-4); background:var(--c-panel); border:1px solid var(--c-border); border-radius:var(--r-md); color:var(--c-bone); font-family:var(--font-body); font-size:var(--text-sm); outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.crp56-vis-input:focus { border-color:rgba(212,184,74,.5); box-shadow:0 0 0 3px rgba(212,184,74,.12); }
.crp56-vis-btnrow { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.crp56-speed-wrap { display:flex; align-items:center; gap:var(--sp-2); color:var(--c-text-muted); font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; font-family:var(--font-display); }
.crp56-speed-slider { width:120px; accent-color: var(--c-jaune); }
.crp56-btn-strong { background: rgba(212,184,74,.12); border-color: rgba(212,184,74,.45); color: var(--c-jaune-bright); }
.crp56-btn-strong:hover { background: rgba(212,184,74,.18); }
.crp56-vis-board { background: var(--c-panel); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--shadow-card); }
.crp56-vis-topbar { display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--sp-5); }
.crp56-status { color:var(--c-text-muted); font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; }
.crp56-status.running { color:var(--c-jaune); text-shadow:0 0 8px rgba(212,184,74,.5); }
.crp56-status.done { color:var(--c-iris); text-shadow:0 0 8px rgba(122,184,214,.35); }
.crp56-mutation-counter { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4); border-radius:999px; background:rgba(212,184,74,.08); border:1px solid rgba(212,184,74,.2); color:var(--c-jaune-dim); font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; }
.crp56-mutation-counter span { color:var(--c-jaune); }
.crp56-pipeline { display:flex; gap:0; align-items:stretch; overflow-x:auto; padding-bottom:var(--sp-2); margin-bottom:var(--sp-5); scrollbar-width:thin; scrollbar-color: var(--c-jaune-dim) transparent; }
.crp56-pipeline::-webkit-scrollbar { height: 4px; }
.crp56-pipeline::-webkit-scrollbar-thumb { background: var(--c-jaune-dim); border-radius: 999px; }
.crp56-stage-node { flex:1; min-width:130px; display:flex; flex-direction:column; align-items:center; position:relative; padding:0 var(--sp-2); }
.crp56-stage-node:not(:last-child)::after { content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid rgba(212,184,74,.2); z-index:2; transition:border-left-color var(--t-fast); }
.crp56-stage-node.active:not(:last-child)::after, .crp56-stage-node.done:not(:last-child)::after { border-left-color: var(--c-jaune); filter:drop-shadow(0 0 4px var(--c-jaune)); }
.crp56-stage-box { width:100%; background:rgba(10,10,20,.8); border:1.5px solid rgba(212,184,74,.15); border-radius:var(--r-md); padding:.9rem .6rem; text-align:center; transition:all .4s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden; }
.crp56-stage-box::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 0%, rgba(212,184,74,.12), transparent 65%); opacity:0; transition:opacity .4s; }
.crp56-stage-node.active .crp56-stage-box, .crp56-stage-node.done .crp56-stage-box { border-color:var(--c-jaune); box-shadow:0 0 20px rgba(212,184,74,.35), inset 0 0 15px rgba(212,184,74,.06); }
.crp56-stage-node.active .crp56-stage-box::before, .crp56-stage-node.done .crp56-stage-box::before { opacity:1; }
.crp56-stage-icon { font-size:1.4rem; color:rgba(212,184,74,.3); margin-bottom:.4rem; transition:color .4s, text-shadow .4s; }
.crp56-stage-node.active .crp56-stage-icon, .crp56-stage-node.done .crp56-stage-icon { color:var(--c-jaune); text-shadow:0 0 14px var(--c-jaune); }
.crp56-stage-label { font-family:var(--font-display); font-size:.6rem; text-transform:uppercase; letter-spacing:1.5px; color:rgba(212,184,74,.4); transition:color .4s; line-height:1.3; }
.crp56-stage-node.active .crp56-stage-label, .crp56-stage-node.done .crp56-stage-label { color:var(--c-jaune-bright); }
.crp56-stage-tick { font-size:.7rem; color:var(--c-jaune); margin-top:.25rem; min-height:1em; text-shadow:0 0 8px rgba(212,184,74,.6); }
.crp56-data-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); margin-bottom:var(--sp-5); }
.crp56-data-pane { background:rgba(5,5,12,.9); border:1px solid rgba(212,184,74,.15); border-radius:var(--r-md); padding:var(--sp-4); min-height:110px; position:relative; transition:border-color .4s, box-shadow .4s; }
.crp56-data-pane.active { border-color: rgba(212,184,74,.5); box-shadow:0 0 16px rgba(212,184,74,.2); }
.crp56-data-pane-label { font-family:var(--font-display); font-size:.6rem; text-transform:uppercase; letter-spacing:2px; color:var(--c-jaune-dim); margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; }
.crp56-data-pane-label::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c-jaune-dim); box-shadow:0 0 4px var(--c-jaune-dim); }
.crp56-data-pane.active .crp56-data-pane-label::before { background:var(--c-jaune); box-shadow:0 0 8px var(--c-jaune); animation:status-blink .8s ease-in-out infinite; }
.crp56-data-display { font-family:var(--font-body); font-size:.78rem; color:var(--c-text); word-break:break-all; line-height:1.5; min-height:60px; overflow:hidden; max-height:80px; }
.crp56-data-display .char-span { display:inline-block; transition:color .2s, text-shadow .2s; }
.crp56-data-display .char-span.lit { color:var(--c-jaune-bright); text-shadow:0 0 8px var(--c-jaune); }
.crp56-data-display .char-span.hex-lit { color:var(--c-iris); text-shadow:0 0 6px var(--c-iris); }
.crp56-data-display .char-span.encoded { color:var(--c-jaune-bright); text-shadow:0 0 6px var(--c-jaune); }
.crp56-output-zone { background:rgba(5,5,12,.9); border:2px solid rgba(212,184,74,.2); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-4); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; transition:border-color .4s, box-shadow .4s; }
.crp56-output-zone.done { border-color:var(--c-jaune); box-shadow:0 0 30px rgba(212,184,74,.25); }
.crp56-output-label { font-family:var(--font-display); font-size:.65rem; text-transform:uppercase; letter-spacing:2px; color:var(--c-jaune-dim); white-space:nowrap; }
.crp56-output-value { flex:1; font-family:var(--font-body); font-size:.82rem; color:var(--c-jaune-bright); word-break:break-all; text-shadow:0 0 6px rgba(240,212,110,.25); min-height:1.2em; }
.crp56-copy-btn { background:none; border:1px solid rgba(212,184,74,.3); color:var(--c-jaune-dim); font-family:var(--font-display); font-size:.65rem; padding:.4rem .8rem; border-radius:var(--r-sm); cursor:pointer; text-transform:uppercase; letter-spacing:1px; transition:all .3s; white-space:nowrap; }
.crp56-copy-btn:hover { border-color:var(--c-jaune); color:var(--c-jaune); box-shadow:0 0 10px rgba(212,184,74,.3); }
.crp56-detail-panel { margin-top:var(--sp-5); background:rgba(10,10,20,.85); border:1px solid rgba(212,184,74,.2); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); min-height:70px; transition:all .4s; }
.crp56-detail-title { font-family:var(--font-display); font-size:.75rem; text-transform:uppercase; letter-spacing:2px; color:var(--c-jaune); margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem; }
.crp56-detail-text { font-size:.88rem; color:var(--c-text-muted); line-height:1.65; }
.crp56-detail-text .crp56-highlight { color:var(--c-jaune-bright); }
.crp56-detail-text .code-word { font-family:var(--font-body); background:rgba(212,184,74,.08); border:1px solid rgba(212,184,74,.2); border-radius:4px; padding:0 .35em; color:var(--c-iris); font-size:.85em; }

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    scroll-padding-top: var(--sp-16);
}

body {
    min-height: 100dvh;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--c-text);
    background-color: var(--c-void);
    line-height: 1.6;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; }
p, li { text-wrap: pretty; max-width: 68ch; }
button { cursor: pointer; background: none; border: none; }

::selection {
    background: oklch(from var(--c-jaune) l c h / 0.3);
    color: var(--c-text);
}

:focus-visible {
    outline: 2px solid var(--c-jaune);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */

/* Primordial aura pulse on borders / glows */
@keyframes aura-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.015); }
}

/* Nuclear flicker — subtle random brightness on display type */
@keyframes nuclear-flicker {
    0%, 93%, 100% { opacity: 1; }
    94%            { opacity: 0.7; }
    96%            { opacity: 0.9; }
    98%            { opacity: 0.6; }
}

/* Scanline crawl */
@keyframes scanlines-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 0 80px; }
}

/* Glitch slice — used on hover & hero title */
@keyframes glitch-x {
    0%, 85%, 100% { transform: translateX(0)   skewX(0deg); clip-path: none; }
    87%            { transform: translateX(-4px) skewX(-2deg); }
    89%            { transform: translateX(3px)  skewX(1deg); }
    91%            { transform: translateX(-2px) skewX(0.5deg); }
}

/* Skull pin spin on hover */
@keyframes skull-rotate {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(18deg) scale(1.15); }
    100% { transform: rotate(0deg) scale(1); }
}

/* Grid shimmer — card hover background sweep */
@keyframes shimmer-sweep {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Floating aura bg drift */
@keyframes aura-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(3%, 2%) scale(1.02); }
    66%  { transform: translate(-2%, 1%) scale(0.99); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Status indicator pulse */
@keyframes status-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* Fade + rise in on load */
@keyframes fade-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LAYOUT — CRP56 PAGE WRAPPER
   ============================================================ */
.crp56-page {
    position: relative;
    isolation: isolate;
    background: var(--c-void);
    overflow-x: hidden;
}

/* Void grid underlay — very subtle */
.crp56-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: linear-gradient(oklch(from #d4b84a l c h / 0.04) 1px, transparent 1px), linear-gradient(90deg, oklch(from #d4b84a l c h / 0.04) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
    z-index: 0;
}

/* Scanline overlay */
.crp56-page::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, oklch(0 0 0 / 0.07) 2px, oklch(0 0 0 / 0.07) 4px);
    animation: scanlines-drift 6s linear infinite;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
}

/* Content above overlays */
.crp56-content {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(var(--sp-4), 5vw, var(--sp-12));
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.crp56-hero
{
    position: relative;
    padding-block: clamp(var(--sp-12), 8vw, var(--sp-24));
    overflow: hidden;
}

/* Nuclear bloom radial glow */
.crp56-hero::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70%;
    height: 120%;
    background: radial-gradient(
            ellipse at 30% 40%,
            oklch(from #d4b84a l c h / 0.12) 0%,
            oklch(from #d4b84a l c h / 0.04) 40%,
            transparent 70%);
    animation: aura-drift 12s ease-in-out infinite;
    pointer-events: none;
}

/* Ice blue counter-glow (Carrera's eyes) */
.crp56-hero::after {
    content: "";
    position: absolute;
    bottom: -30%;
    right: -5%;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at 70% 60%, oklch(from #7ab8d6 l c h / 0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* ── CRP56 Hero banner — drifting background, jaune/primordial theme ── */
.crp56-hero-banner {
    width: 100%;
    height: 46vh;
    min-height: 340px;
    background-size: 130%;
    background-position: center 20%;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    border: 1px solid rgba(212, 184, 74, 0.28);
    margin-bottom: var(--sp-8);
    animation: crp56HeroDrift 25s ease-in-out infinite;
}

@keyframes crp56HeroDrift {
    0%   { background-position: center 15%; }
    50%  { background-position: center 30%; }
    100% { background-position: center 15%; }
}

.crp56-hero-overlay {
    position: absolute;
    inset: 0;
    background:
            linear-gradient(to bottom, rgba(8, 7, 11, 0.15) 0%, rgba(8, 7, 11, 0.92) 100%),
            linear-gradient(to right, rgba(212, 184, 74, 0.10), transparent 40%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--sp-8);
    gap: var(--sp-3);
    z-index: 2;
}

.crp56-hero-glyph {
    position: absolute;
    top: var(--sp-6);
    right: var(--sp-6);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    opacity: 0.85;
}

.crp56-primordial-mark {
    width: 84px;
    height: 84px;
    filter: drop-shadow(0 0 10px rgba(212, 184, 74, 0.35));
}

.crp56-primordial-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240, 212, 110, 0.75);
}

/* Responsive: shrink banner + hide glyph on small screens */
@media (max-width: 720px) {
    .crp56-hero-banner {
        height: 52vh;
        min-height: 300px;
    }
    .crp56-hero-glyph {
        display: none;
    }
    .crp56-hero-overlay {
        padding: var(--sp-5);
    }
}

/* Primordial badge top-left */
.crp56-primordial-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-4);
    border: 1px solid oklch(from #d4b84a l c h / 0.4);
    border-radius: var(--r-sm);
    background: oklch(from #d4b84a l c h / 0.06);
    color: var(--c-jaune);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: var(--sp-6);
    animation: fade-rise 0.7s var(--t-mid) both;
}

.crp56-primordial-badge::before {
    content: "✦";
    color: var(--c-jaune-bright);
    font-size: 0.65em;
    animation: aura-pulse 2.4s ease-in-out infinite;
}

/* Main title */
.crp56-title {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 0.95;
    color: var(--c-text);
    animation: fade-rise 0.7s 0.1s var(--t-mid) both, nuclear-flicker 8s 3s ease infinite;
    margin-bottom: var(--sp-4);
}

/* Yellow highlight on part of the title */
.crp56-title .jaune-mark {
    color: var(--c-jaune);
    text-shadow: var(--shadow-glow-jaune);
    display: inline-block;
    animation: nuclear-flicker 6s 1s ease infinite;
}

/* Subtitle */
.crp56-subtitle {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--c-iris);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--sp-6);
    animation: fade-rise 0.7s 0.2s var(--t-mid) both;
}

/* Description */
.crp56-description {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--c-text-muted);
    line-height: 1.75;
    max-width: 58ch;
    margin-bottom: var(--sp-8);
    animation: fade-rise 0.7s 0.3s var(--t-mid) both;
}

/* Meta pills */
.crp56-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    animation: fade-rise 0.7s 0.4s var(--t-mid) both;
}

.crp56-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    font-family: var(--font-body);
    letter-spacing: 0.05em;
    transition: border-color var(--t-fast), color var(--t-fast);
}

.crp56-meta-pill:hover {
    border-color: oklch(from #d4b84a l c h / 0.45);
    color: var(--c-jaune);
}

.crp56-meta-pill .pill-icon {
    color: var(--c-jaune-dim);
    font-size: 0.75em;
}

/* Hero side graphic (Carrera-inspired geometric diamond / aura mark) */
.crp56-hero-glyph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    animation: fade-rise 0.9s 0.35s var(--t-mid) both;
}

.crp56-primordial-mark {
    position: relative;
    width: clamp(90px, 12vw, 140px);
    height: clamp(90px, 12vw, 140px);
}

.crp56-primordial-mark svg {
    width: 100%;
    height: 100%;
    animation: aura-pulse 3.2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px oklch(from #d4b84a l c h / 0.5));
}

.crp56-primordial-label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-jaune-dim);
    text-align: center;
}

/* ============================================================
   SECTION STRUCTURE
   ============================================================ */
.crp56-section {
    padding-block: clamp(var(--sp-10), 5vw, var(--sp-20));
    border-top: 1px solid var(--c-border-soft);
}

.crp56-section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: clamp(var(--sp-6), 3vw, var(--sp-12));
}

.crp56-section-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text);
}

/* Divider accent line beside section title */
.crp56-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, oklch(from #d4b84a l c h / 0.4), oklch(from #d4b84a l c h / 0.08), transparent);
}

/* Skull pin icon accent */
.crp56-skull {
    font-size: 1.1em;
    color: var(--c-jaune);
    transition: transform var(--t-fast);
    cursor: default;
}

.crp56-skull:hover {
    animation: skull-rotate 0.5s ease-in-out;
}

/* ============================================================
   ARCHITECTURE SECTION — 4-COLUMN GRID
   ============================================================ */
.crp56-arch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--sp-4);
}

/* ============================================================
   CARDS — base style
   ============================================================ */
.crp56-card {
    position: relative;
    padding: var(--sp-6);
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: border-color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid);
}

/* Inner shimmer layer (hidden until hover) */
.crp56-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, oklch(from #d4b84a l c h / 0.07) 0%, transparent 50%, oklch(from #7ab8d6 l c h / 0.04) 100%);
    background-size: 200% 100%;
    background-position: -200% 0;
    opacity: 0;
    transition: opacity var(--t-slow), background-position var(--t-slow);
}

/* Top accent bar */
.crp56-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: var(--sp-4);
    right: var(--sp-4);
    height: 1px;
    background: linear-gradient(to right, transparent, oklch(from #d4b84a l c h / 0.5), transparent);
    opacity: 0;
    transition: opacity var(--t-mid);
}

.crp56-card:hover {
    border-color: oklch(from #d4b84a l c h / 0.35);
    box-shadow: var(--shadow-lift), var(--shadow-glow-jaune);
    transform: translateY(-2px);
}

.crp56-card:hover::before {
    opacity: 1;
    background-position: 200% 0;
    animation: shimmer-sweep 1.2s ease-out both;
}

.crp56-card:hover::after {
    opacity: 1;
}

/* Card icon (Font Awesome) */
.crp56-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-jaune-ghost);
    border: 1px solid oklch(from #d4b84a l c h / 0.25);
    border-radius: var(--r-md);
    color: var(--c-jaune);
    font-size: 0.95rem;
    margin-bottom: var(--sp-4);
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.crp56-card:hover .crp56-card-icon {
    background: oklch(from #d4b84a l c h / 0.16);
    border-color: oklch(from #d4b84a l c h / 0.5);
    box-shadow: 0 0 10px oklch(from #d4b84a l c h / 0.3);
}

.crp56-card-title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text);
    margin-bottom: var(--sp-3);
    transition: color var(--t-fast);
}

.crp56-card:hover .crp56-card-title {
    color: var(--c-jaune-bright);
}

.crp56-card-body {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    line-height: 1.7;
}

/* ============================================================
   FMOD AUDIO VISUALISER
   ============================================================ */
.crp56-audio-vis
{
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-card);
}

.crp56-audio-topbar
{
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--sp-6);
}

/* Mixer groups row */
.crp56-mixer-row
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.crp56-mixer-group
{
    background: rgba(5, 5, 12, 0.9);
    border: 1px solid rgba(212, 184, 74, 0.15);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.crp56-mixer-group.active
{
    border-color: rgba(212, 184, 74, 0.5);
    box-shadow: 0 0 16px rgba(212, 184, 74, 0.2);
}

.crp56-mixer-group.muted
{
    opacity: 0.45;
}

.crp56-mixer-label
{
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-jaune-dim);
}

.crp56-mixer-group.active .crp56-mixer-label
{
    color: var(--c-jaune-bright);
}

/* Animated equalizer bars */
.crp56-mixer-bars
{
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 48px;
    width: 100%;
    justify-content: center;
}

.crp56-mixer-bars span
{
    display: inline-block;
    width: 6px;
    height: 8%;
    background: linear-gradient(to top, var(--c-jaune-dim), var(--c-jaune));
    border-radius: 2px;
    transition: height 0.15s ease-out, opacity 0.3s;
    box-shadow: 0 0 4px rgba(212, 184, 74, 0.3);
}

.crp56-mixer-group[data-group="sfx"] .crp56-mixer-bars span
{
    background: linear-gradient(to top, var(--c-iris-deep), var(--c-iris));
    box-shadow: 0 0 4px rgba(122, 184, 214, 0.35);
}

.crp56-mixer-group[data-group="music"] .crp56-mixer-bars span
{
    background: linear-gradient(to top, var(--c-jaune-dim), var(--c-bone));
    box-shadow: 0 0 4px rgba(232, 228, 216, 0.25);
}

.crp56-mixer-group.muted .crp56-mixer-bars span
{
    height: 8% !important;
    opacity: 0.25;
    animation: none !important;
}

/* Sliders */
.crp56-mixer-slider {
    width: 100%;
    accent-color: var(--c-jaune);
}

.crp56-mixer-group[data-group="sfx"] .crp56-mixer-slider
{
    accent-color: var(--c-iris);
}

.crp56-mixer-group[data-group="music"] .crp56-mixer-slider
{
    accent-color: var(--c-bone);
}

/* Mute button */
.crp56-mute-btn
{
    background: none;
    border: 1px solid rgba(212, 184, 74, 0.3);
    color: var(--c-jaune-dim);
    font-size: 0.85rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast);
}

.crp56-mute-btn:hover
{
    border-color: var(--c-jaune);
    color: var(--c-jaune);
    box-shadow: 0 0 10px rgba(212, 184, 74, 0.3);
}

.crp56-mute-btn.is-muted {
    color: var(--c-iris);
    border-color: rgba(122, 184, 214, 0.4);
}

/* SFX trigger buttons row */
.crp56-sfx-triggers
{
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}

.crp56-sfx-btn
{
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--text-xs);
}

.crp56-sfx-btn.is-firing
{
    background: rgba(212, 184, 74, 0.18);
    border-color: rgba(212, 184, 74, 0.7);
    box-shadow: var(--shadow-glow-jaune);
    color: var(--c-jaune-bright);
}

.crp56-sfx-btn[data-sfx="error"].is-firing
{
    background: rgba(122, 184, 214, 0.1);
    border-color: rgba(122, 184, 214, 0.6);
    box-shadow: 0 0 20px rgba(122, 184, 214, 0.3);
    color: var(--c-iris-bright);
}

/* Responsive */
@media (max-width: 680px)
{
    .crp56-mixer-row
    {
        grid-template-columns: 1fr;
    }
    .crp56-sfx-triggers
    {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
   FEATURE GRID — larger 3/2 layout
   ============================================================ */
.crp56-feature-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--sp-5);
}

/* Featured (wide) card variant */
.crp56-card--wide
{
    grid-column: span 2;
}

@media (max-width: 700px)
{
    .crp56-card--wide { grid-column: span 1; }
}

/* ============================================================
   FLOW DIAGRAM (bridge / audio flows)
   ============================================================ */
.crp56-flows
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--sp-6);
}

.crp56-flow
{
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-card);
}

.crp56-flow-title
{
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-jaune);
    margin-bottom: var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.crp56-flow-title::before
{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-jaune);
    box-shadow: 0 0 6px var(--c-jaune);
    animation: status-blink 2s ease-in-out infinite;
}

.crp56-flow-steps
{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.crp56-flow-step
{
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    transition: background var(--t-fast), border-color var(--t-fast);
    position: relative;
}

.crp56-flow-step:hover
{
    background: var(--c-jaune-ghost);
    border-color: oklch(from #d4b84a l c h / 0.18);
}

.crp56-flow-step-label
{
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    transition: color var(--t-fast);
}

.crp56-flow-step:hover .crp56-flow-step-label
{
    color: var(--c-text);
}

/* Step connector arrow */
.crp56-flow-connector
{
    display: flex;
    justify-content: center;
    padding-block: var(--sp-1);
    color: oklch(from #d4b84a l c h / 0.35);
    font-size: 0.75rem;
    font-family: var(--font-body);
    user-select: none;
}

/* Step index badge */
.crp56-flow-index
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--c-panel-high);
    border: 1px solid var(--c-border);
    font-size: var(--text-xs);
    color: var(--c-jaune-dim);
    font-family: var(--font-body);
}

/* ============================================================
   CODE BLOCK / FOLDER TREE
   ============================================================ */
.crp56-code
{
    position: relative;
    background: #08070b;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-5);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--c-jaune-bright);
    overflow-x: auto;
    box-shadow: var(--shadow-card);
}

/* Top chrome bar */
.crp56-code::before
{
    content: "●  ●  ●";
    display: block;
    letter-spacing: 0.4em;
    font-size: 0.55rem;
    color: var(--c-border);
    margin-bottom: var(--sp-4);
}

/* Filename badge */
.crp56-code-label
{
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-4);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    color: var(--c-jaune-dim);
    font-family: var(--font-body);
}

.crp56-code .dim  { color: var(--c-text-faint); }
.crp56-code .key  { color: var(--c-iris); }
.crp56-code .str  { color: var(--c-bone); }

/* ============================================================
   STATUS LIST
   ============================================================ */
.crp56-status-list
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.crp56-status-list li
{
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    transition: background var(--t-fast), color var(--t-fast);
}

.crp56-status-list li:hover
{
    background: var(--c-jaune-ghost);
    color: var(--c-text);
}

/* Bullet mark */
.crp56-status-list li::before
{
    content: "✦";
    flex-shrink: 0;
    color: var(--c-jaune);
    font-size: 0.65em;
    margin-top: 0.35em;
    text-shadow: 0 0 6px oklch(from #d4b84a l c h / 0.6);
}

/* ============================================================
   MIGRATION TIMELINE
   ============================================================ */
.crp56-timeline
{
    position: relative;
    padding-left: var(--sp-8);
}

/* Vertical line */
.crp56-timeline::before
{
    content: "";
    position: absolute;
    left: calc(var(--sp-3) - 1px);
    top: var(--sp-3);
    bottom: var(--sp-3);
    width: 1px;
    background: linear-gradient(to bottom, var(--c-jaune), oklch(from #d4b84a l c h / 0.15), transparent);
}

.crp56-timeline-item
{
    position: relative;
    margin-bottom: var(--sp-5);
}

/* Node dot */
.crp56-timeline-item::before
{
    content: "";
    position: absolute;
    left: calc(-1 * var(--sp-8) + var(--sp-3) - 5px);
    top: 0.45em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-panel-high);
    border: 1.5px solid var(--c-jaune);
    transition: background var(--t-fast), box-shadow var(--t-fast);
}

.crp56-timeline-item:hover::before
{
    background: var(--c-jaune);
    box-shadow: 0 0 8px oklch(from #d4b84a l c h / 0.65);
}

.crp56-timeline-step
{
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-jaune-dim);
    margin-bottom: var(--sp-1);
}

.crp56-timeline-desc
{
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    line-height: 1.55;
}

.crp56-timeline-item:hover .crp56-timeline-desc
{
    color: var(--c-text);
}

/* ============================================================
   CRP56 IMAGE GALLERY
   ============================================================ */
.crp56-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-4);
}

.crp56-gallery-item {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--c-border);
    background: var(--c-panel);
    cursor: pointer;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.crp56-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.crp56-gallery-item:hover {
    border-color: rgba(212, 184, 74, 0.45);
    box-shadow: var(--shadow-lift), var(--shadow-glow-jaune);
    transform: translateY(-3px);
}

.crp56-gallery-item:hover img {
    transform: scale(1.06);
}

.crp56-gallery-overlay
{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 7, 11, 0.35);
    color: var(--c-jaune-bright);
    font-size: 1.4rem;
    opacity: 0;
    transition: opacity var(--t-fast);
}

.crp56-gallery-item:hover .crp56-gallery-overlay {
    opacity: 1;
}

/* Lightbox */
.crp56-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 4, 8, 0.94);
    backdrop-filter: blur(6px);
}

.crp56-lightbox.active
{
    display: flex;
}

.crp56-lightbox-img
{
    max-width: 88vw;
    max-height: 84vh;
    border-radius: var(--r-md);
    border: 1px solid rgba(212, 184, 74, 0.3);
    box-shadow: 0 0 40px rgba(212, 184, 74, 0.2);
}

.crp56-lightbox-close
{
    position: absolute;
    top: var(--sp-6);
    right: var(--sp-6);
    background: rgba(20, 17, 28, 0.8);
    border: 1px solid rgba(212, 184, 74, 0.3);
    color: var(--c-jaune);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all var(--t-fast);
}

.crp56-lightbox-close:hover {
    border-color: var(--c-jaune);
    box-shadow: var(--shadow-glow-jaune);
    color: var(--c-jaune-bright);
}

.crp56-lightbox-nav
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20, 17, 28, 0.8);
    border: 1px solid rgba(212, 184, 74, 0.3);
    color: var(--c-jaune);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all var(--t-fast);
}

.crp56-lightbox-nav:hover {
    border-color: var(--c-jaune);
    box-shadow: var(--shadow-glow-jaune);
    color: var(--c-jaune-bright);
}

.crp56-lightbox-prev { left: var(--sp-6); }
.crp56-lightbox-next { right: var(--sp-6); }

.crp56-lightbox-counter
{
    position: absolute;
    bottom: var(--sp-6);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-jaune-dim);
    background: rgba(20, 17, 28, 0.75);
    border: 1px solid rgba(212, 184, 74, 0.2);
    border-radius: 999px;
    padding: 0.4rem 1rem;
}

@media (max-width: 640px)
{
    .crp56-lightbox-nav {width: 40px;height: 40px;}
    .crp56-lightbox-prev { left: var(--sp-3); }
    .crp56-lightbox-next { right: var(--sp-3); }
}

/* ============================================================
   GITHUB LINK BUTTON
   ============================================================ */
.crp56-link-btn
{
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-6);
    background: var(--c-panel-lift);
    border: 1px solid oklch(from #d4b84a l c h / 0.35);
    border-radius: var(--r-md);
    color: var(--c-jaune);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}

.crp56-link-btn:hover
{
    background: oklch(from #d4b84a l c h / 0.1);
    border-color: oklch(from #d4b84a l c h / 0.65);
    box-shadow: var(--shadow-glow-jaune);
    color: var(--c-jaune-bright);
}

.crp56-link-btn .btn-icon
{
    font-size: 0.9em;
    transition: transform var(--t-fast);
}

.crp56-link-btn:hover .btn-icon
{
    transform: translateX(3px);
}

/* ============================================================
   INLINE HIGHLIGHT CHIP (e.g. "PRIVATE PROJECT")
   ============================================================ */
.crp56-chip
{
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 2px var(--sp-3);
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
}

.crp56-chip--yellow
{
    background: oklch(from #d4b84a l c h / 0.12);
    border: 1px solid oklch(from #d4b84a l c h / 0.3);
    color: var(--c-jaune);
}

.crp56-chip--blue
{
    background: oklch(from #7ab8d6 l c h / 0.1);
    border: 1px solid oklch(from #7ab8d6 l c h / 0.25);
    color: var(--c-iris);
}

.crp56-chip--bone
{
    background: oklch(from #e8e4d8 l c h / 0.05);
    border: 1px solid oklch(from #e8e4d8 l c h / 0.15);
    color: var(--c-bone-dim);
}

/* ============================================================
   CRP56 HERO BANNER — scoped fix (leaves page bg untouched)
   ============================================================ */

.crp56-hero-banner {
    position: relative;
    width: 100%;
    min-height: 420px;
    height: clamp(420px, 54vh, 680px);
    margin-bottom: var(--sp-10);
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid rgba(212, 184, 74, 0.28);
    background-color: var(--c-panel-lift);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: var(--shadow-card), 0 0 18px rgba(212, 184, 74, 0.12);
}

.crp56-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
            linear-gradient(to bottom, rgba(10, 9, 14, 0.05) 0%, rgba(10, 9, 14, 0.5) 55%, rgba(10, 9, 14, 0.85) 100%),
            linear-gradient(to right, rgba(212, 184, 74, 0.10) 0%, rgba(212, 184, 74, 0.02) 35%, transparent 60%);
}

.crp56-hero-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: clamp(1.5rem, 3vw, 3rem);
    gap: 0.85rem;
}

.crp56-hero-banner .crp56-primordial-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(212, 184, 74, 0.35);
    border-radius: 999px;
    background: rgba(20, 17, 28, 0.7);
    backdrop-filter: blur(4px);
    color: var(--c-jaune);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.crp56-hero-banner .crp56-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6vw, 6rem);
    line-height: 0.92;
    text-transform: uppercase;
    color: #f6f1df;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 18px rgba(212,184,74,0.15);
}

.crp56-hero-banner .crp56-title .jaune-mark {
    color: var(--c-jaune);
}

.crp56-hero-banner .crp56-subtitle {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-iris-bright);
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

.crp56-hero-banner .crp56-description {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.7;
    color: rgba(232, 228, 216, 0.92);
    text-shadow: 0 1px 6px rgba(0,0,0,0.28);
}

.crp56-hero-banner .crp56-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.4rem;
}

.crp56-hero-banner .crp56-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(212, 184, 74, 0.22);
    background: rgba(20, 17, 28, 0.78);
    color: rgba(232, 228, 216, 0.92);
    font-size: 0.82rem;
    line-height: 1;
}

.crp56-hero-glyph {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.crp56-hero-glyph .crp56-primordial-mark {
    width: 90px;
    height: 90px;
    filter: drop-shadow(0 0 10px rgba(212, 184, 74, 0.25));
}

.crp56-hero-glyph .crp56-primordial-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(240, 212, 110, 0.8);
}

@media (max-width: 768px) {
    .crp56-hero-banner {
        min-height: 360px;
        height: auto;
    }
    .crp56-hero-overlay {
        padding: 1.25rem;
    }
    .crp56-hero-glyph {
        display: none;
    }
}

/* ============================================================
   GLITCH HOVER CLASS (apply to .crp56-title or any heading)
   ============================================================ */
.crp56-glitch
{
    position: relative;
    display: inline-block;
}

.crp56-glitch:hover
{
    animation: glitch-x 0.35s ease-in-out;
}

/* ============================================================
   DIVIDER
   ============================================================ */
.crp56-divider
{
    height: 1px;
    background: linear-gradient(
            to right,
            transparent,
            oklch(from #d4b84a l c h / 0.3) 20%,
            oklch(from #d4b84a l c h / 0.3) 80%,
            transparent
    );
    margin-block: var(--sp-4);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px)
{
    .crp56-hero-inner
    {
        grid-template-columns: 1fr;
    }

    .crp56-hero-glyph
    {
        display: none; /* hide glyph on small screens to avoid crowding */
    }

    .crp56-arch-grid
    {
        grid-template-columns: 1fr;
    }

    .crp56-flows
    {
        grid-template-columns: 1fr;
    }

    .crp56-feature-grid
    {
        grid-template-columns: 1fr;
    }

    .crp56-card--wide
    {
        grid-column: span 1;
    }
}

@media (max-width: 480px)
{
    .crp56-title
    {

        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }

    .crp56-meta
    {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   UTILITY
   ============================================================ */
.crp56-two-col
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: var(--sp-6);
}

.crp56-iris-text  { color: var(--c-iris); }
.crp56-jaune-text { color: var(--c-jaune); }
.crp56-muted-text { color: var(--c-text-muted); font-size: var(--text-sm); }