/* ==========================================================================
   Catalyst page
   Extends the tokens declared in styles.css (--cream, --charcoal, --orange…)
   ========================================================================== */

.catalyst-page { --cat-dark: linear-gradient(120deg, rgba(18,18,18,.99), rgba(34,28,25,.98) 55%, rgba(30,29,24,.99)); }

/* --- Hero ---------------------------------------------------------------- */
.cat-hero { position:relative; overflow:hidden; padding:clamp(132px,13vw,178px) 0 clamp(72px,8vw,110px); background:linear-gradient(135deg,#f9ede0 0%,var(--cream) 45%,#f8dfc5 100%); }
.cat-hero::before { content:""; position:absolute; inset:auto -10% -40% 45%; height:70%; border-radius:50%; background:radial-gradient(circle,rgba(217,92,50,.12),transparent 68%); pointer-events:none; }
.cat-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(40px,6vw,88px); }
.cat-hero-title { margin:0; max-width:15ch; color:var(--charcoal); font-family:var(--hero-sans); font-size:clamp(48px,6.4vw,104px); font-weight:500; line-height:.9; letter-spacing:.005em; }
.cat-hero-title em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
.cat-hero-intro { margin-top:32px; max-width:560px; }
.cat-hero-intro p { color:#4a4340; font-size:clamp(16px,1.4vw,20px); line-height:1.6; }
.cat-hero-intro p + p { margin-top:14px; }
.cat-hero-intro .hero-actions { justify-content:flex-start; margin-top:32px; }

/* --- Hero system map (SVG) ---------------------------------------------- */
.cat-hero-visual { position:relative; }
.sysmap { display:block; width:100%; height:auto; overflow:visible; }
.sysmap .wire { fill:none; stroke:rgba(23,23,23,.22); stroke-width:1.25; stroke-linecap:round; }
.sysmap .node rect { fill:rgba(255,252,247,.86); stroke:rgba(23,23,23,.16); stroke-width:1; }
.sysmap .node text { fill:var(--charcoal); font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.01em; text-anchor:middle; }
.sysmap .node-top rect { fill:var(--charcoal); stroke:none; }
.sysmap .node-top text { fill:var(--cream); font-size:12px; font-weight:700; letter-spacing:.12em; }
.sysmap .node-core rect { fill:var(--orange); stroke:none; }
.sysmap .node-core text { fill:#fff; font-size:16px; font-weight:700; letter-spacing:.14em; }
.sysmap .node-leaf text { fill:#6b625c; font-size:11.5px; font-weight:500; }
.sysmap .core-glow { animation:cat-breathe 4.2s ease-in-out infinite; transform-origin:260px 310px; }
.sysmap .node-app rect, .sysmap .node-layer rect { animation:cat-nodepulse 3.6s ease-in-out infinite; }
.sysmap .node-app[data-pulse="1"] rect, .sysmap .node-layer[data-pulse="1"] rect { animation-delay:.6s; }
.sysmap .node-app[data-pulse="2"] rect, .sysmap .node-layer[data-pulse="2"] rect { animation-delay:1.2s; }
.sysmap .node.is-hot rect { fill:#fde3d3; stroke:rgba(217,92,50,.6); }
.sysmap .particles circle { fill:var(--orange); }
.sysmap-caption { margin:22px 0 0; text-align:center; color:#6b625c; font-size:13px; }

@keyframes cat-breathe { 0%,100% { opacity:.5; transform:scale(.94); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes cat-nodepulse { 0%,100% { stroke:rgba(23,23,23,.16); } 50% { stroke:rgba(217,92,50,.42); } }

/* --- Shared chips / flows ---------------------------------------------- */
.chip { display:inline-flex; align-items:center; padding:9px 16px; border:1px solid rgba(23,23,23,.16); border-radius:999px; background:rgba(255,252,247,.86); font-size:13px; font-weight:600; white-space:nowrap; }
.chip-sm { padding:7px 13px; font-size:12px; }
.chip-core { background:var(--orange); border-color:transparent; color:#fff; }
.dash { display:block; width:26px; height:1px; background:rgba(23,23,23,.28); flex:0 0 auto; }
.dash-v { width:1px; height:18px; margin-left:34px; }
.flow-row { display:flex; align-items:center; gap:9px; flex-wrap:nowrap; }
.flow-wrap { flex-wrap:wrap; row-gap:12px; }
.flow-branch { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:6px; }
.flow-branch .chip-sm { margin-left:16px; }
.flow-seq .chip.is-active { background:var(--orange); border-color:transparent; color:#fff; transition:background .3s, color .3s; }
.chip-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.chip-grid .chip { justify-content:center; }

/* --- Positioning -------------------------------------------------------- */
.cat-position { background:rgba(247,241,232,.92); }
.cat-position .section-heading h2 { font-family:var(--hero-sans); font-weight:500; text-transform:none; }
.cat-position .section-heading h2 em { color:var(--orange); }
.cat-position .lead + .lead { margin-top:18px; }

/* --- Story ------------------------------------------------------------- */
.cat-story { color:var(--cream); background:var(--cat-dark); }
.cat-story .section-heading h2 { font-family:var(--hero-sans); font-weight:500; text-transform:none; }
.cat-story .section-heading h2 em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
.cat-story .lead { max-width:640px; margin:26px auto 0; color:#d9d1c9; }
.story-stage { margin:clamp(52px,6vw,84px) auto 0; max-width:760px; display:flex; flex-direction:column; align-items:center; gap:0; }
.story-track { list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; align-items:center; }
.story-step, .story-branch { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:16px 26px; border:1px solid rgba(255,252,247,.2); border-radius:14px; background:rgba(255,252,247,.06); text-align:center; transition:border-color .35s, background .35s, transform .35s; }
.story-step strong, .story-branch strong { font-size:16px; letter-spacing:-.02em; }
.story-step em, .story-branch em { color:#a9a19a; font-size:12px; font-style:normal; }
.story-track > .story-step:not(:first-child) { margin-top:44px; }
.story-track > .story-step:not(:first-child)::before,
.story-track-end > .story-step::before,
.story-branch::before { content:""; position:absolute; left:50%; top:-44px; width:1px; height:44px; background:rgba(255,252,247,.2); }
.story-dot { position:absolute; left:50%; top:-44px; width:7px; height:7px; margin-left:-3px; border-radius:50%; background:var(--orange); opacity:0; transform:translateY(0); }
.story-step-core { border-color:rgba(251,119,68,.5); background:linear-gradient(145deg,rgba(251,119,68,.2),rgba(217,92,50,.1)); }
.story-fan { position:relative; width:100%; margin-top:44px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.story-fan::before { content:""; position:absolute; left:16.6%; right:16.6%; top:-22px; height:1px; background:rgba(255,252,247,.2); }
.story-branch::before { top:-22px; height:22px; }
.story-track-end { margin-top:44px; }
.story-track-end > .story-step::before { top:-44px; height:44px; }
/* active state driven by JS */
.story-step.is-live, .story-branch.is-live { border-color:rgba(251,119,68,.72); background:rgba(251,119,68,.16); transform:translateY(-2px); }
.story-step.is-live .story-dot, .story-branch.is-live .story-dot { animation:cat-travel .5s ease-out; }
.story-statement { margin:clamp(44px,5vw,64px) auto 0; max-width:20ch; text-align:center; font-family:var(--hero-sans); font-size:clamp(26px,3.4vw,46px); font-weight:500; line-height:1.04; letter-spacing:.005em; }
.story-statement em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
@keyframes cat-travel { from { opacity:1; transform:translateY(-34px); } to { opacity:0; transform:translateY(6px); } }

/* --- Layers ------------------------------------------------------------ */
.cat-layers { background:rgba(247,241,232,.92); }
.cat-layers .section-heading h2 { font-family:var(--hero-sans); font-weight:500; text-transform:none; }
.cat-layers .section-heading h2 em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
.layer-stack { margin:clamp(52px,6vw,80px) auto 0; max-width:900px; display:flex; flex-direction:column; align-items:center; }
.layer { width:100%; padding:24px; border:1px solid rgba(255,255,255,.82); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,252,247,.68)); box-shadow:0 14px 28px rgba(89,64,45,.09); text-align:center; }
.layer-label { display:block; margin-bottom:14px; color:var(--orange); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.layer-items { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.layer-core { border-color:rgba(217,92,50,.34); background:linear-gradient(145deg,rgba(253,227,211,.9),rgba(255,252,247,.8)); }
.layer-core .chip-core { padding:12px 30px; font-size:15px; letter-spacing:.06em; }
.layer-join { display:block; width:1px; height:38px; background:rgba(23,23,23,.24); position:relative; }
.layer-join::after { content:""; position:absolute; left:50%; top:0; width:5px; height:5px; margin-left:-2px; border-radius:50%; background:var(--orange); animation:cat-drop 2.6s linear infinite; }
.layer-join:nth-of-type(2)::after { animation-delay:1.3s; }
@keyframes cat-drop { 0% { transform:translateY(0); opacity:0; } 25% { opacity:1; } 100% { transform:translateY(33px); opacity:0; } }

/* --- Method (reuses .approach/.method-list from styles.css) ------------ */
.catalyst-page .approach { background:rgba(247,241,232,.92); }
.catalyst-page .approach .section-heading h2 { font-family:var(--hero-sans); font-weight:500; text-transform:none; }
.catalyst-page .approach .section-heading h2 em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
.catalyst-page .method-item .eyebrow { margin:0; }
.catalyst-page .method-item h3 { margin:34px 0 10px; }

/* --- Technical capability ---------------------------------------------- */
.cat-tech { color:var(--cream); background:var(--cat-dark); }
.cat-tech .section-heading h2 { font-family:var(--hero-sans); font-weight:500; text-transform:none; }
.cat-tech .section-heading h2 em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
.orbit { position:relative; width:min(100%,620px); aspect-ratio:1; margin:clamp(40px,5vw,64px) auto 0; }
.orbit::before, .orbit::after { content:""; position:absolute; left:50%; top:50%; border:1px solid rgba(255,252,247,.12); border-radius:50%; transform:translate(-50%,-50%); }
.orbit::before { width:56%; height:56%; }
.orbit::after { width:92%; height:92%; }
.orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:16px 34px; border-radius:999px; background:var(--orange); color:#fff; font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 0 0 12px rgba(217,92,50,.14),0 0 46px rgba(251,119,68,.4); }
.orbit-word { position:absolute; left:50%; top:50%; padding:9px 17px; border:1px solid rgba(255,252,247,.24); border-radius:999px; background:rgba(255,252,247,.06); font-size:13px; font-weight:600; letter-spacing:.02em; white-space:nowrap; transform:translate(-50%,-50%) rotate(var(--a)) translateX(min(38vw,232px)) rotate(calc(-1 * var(--a))); animation:cat-float 6s ease-in-out infinite; }
.orbit-word:nth-of-type(2n) { animation-delay:-1.4s; }
.orbit-word:nth-of-type(3n) { animation-delay:-2.8s; }
.orbit-word.is-hot { border-color:rgba(251,119,68,.72); background:rgba(251,119,68,.18); }
@keyframes cat-float { 0%,100% { margin-top:0; } 50% { margin-top:-8px; } }
.cat-tech-copy { max-width:640px; margin:clamp(40px,5vw,60px) auto 0; text-align:center; color:#d9d1c9; }

.tech-details { max-width:760px; margin:clamp(40px,5vw,58px) auto 0; }
.tech-details details { border:1px solid rgba(255,252,247,.2); border-radius:16px; background:rgba(255,252,247,.05); overflow:hidden; }
.tech-details summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; cursor:pointer; font-size:clamp(17px,1.7vw,22px); font-weight:600; letter-spacing:-.02em; list-style:none; }
.tech-details summary::-webkit-details-marker { display:none; }
.tech-details summary span { flex:0 0 auto; width:24px; height:24px; position:relative; }
.tech-details summary span::before, .tech-details summary span::after { content:""; position:absolute; left:50%; top:50%; background:var(--orange); transition:transform .25s; }
.tech-details summary span::before { width:14px; height:1.5px; margin:-.75px 0 0 -7px; }
.tech-details summary span::after { width:1.5px; height:14px; margin:-7px 0 0 -.75px; }
.tech-details details[open] summary span::after { transform:scaleY(0); }
.tech-details-body { padding:0 26px 26px; }
.tech-details-body p { max-width:60ch; color:#d9d1c9; font-size:15px; }
.tech-details-body ul { display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 0; padding:0; list-style:none; }
.tech-details-body li { padding:8px 15px; border:1px solid rgba(255,252,247,.22); border-radius:999px; font-size:13px; font-weight:600; }

/* --- Final CTA --------------------------------------------------------- */
.cat-cta { position:relative; overflow:hidden; color:var(--cream); background:var(--cat-dark); }
.cat-cta::before, .cat-cta::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(217,92,50,.28); pointer-events:none; }
.cat-cta::before { width:620px; height:620px; right:-190px; bottom:-330px; }
.cat-cta::after { width:380px; height:380px; right:6%; bottom:-290px; }
.cat-cta .contact-inner { position:relative; z-index:1; text-align:center; max-width:1000px; margin:0 auto; }
.cat-cta h2 { margin:0; font-family:var(--hero-sans); font-size:clamp(40px,5.6vw,86px); font-weight:500; line-height:.94; letter-spacing:.005em; }
.cat-cta h2 em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
.cat-cta .lead { max-width:620px; margin:22px auto 30px; color:#d9d1c9; }
.cat-cta .hero-actions { justify-content:center; }
.cat-cta .text-link { color:var(--cream); }

/* --- Responsive -------------------------------------------------------- */
@media (max-width:1080px) {
  .cat-hero-inner { grid-template-columns:1fr; gap:52px; }
  .cat-hero-visual { max-width:520px; margin:0 auto; }
  .cat-hero-title { max-width:none; }
}
@media (max-width:900px) {
  .orbit-word { font-size:12px; padding:7px 13px; }
}
@media (max-width:640px) {
  .cat-hero { padding-top:112px; }
  .cat-hero-title { font-size:clamp(38px,11vw,56px); }
  .cat-hero-intro .hero-actions .button { width:100%; justify-content:center; }
  .chip-grid { grid-template-columns:1fr; }
  /* mobile: collapse the fan into a vertical flow */
  .story-fan { grid-template-columns:1fr; gap:34px; }
  .story-fan::before { display:none; }
  .story-branch::before { top:-34px; height:34px; }
  .story-statement { max-width:none; }
  .layer-items { gap:8px; }
  .layer-items .chip { font-size:12px; padding:8px 13px; }
  /* mobile: orbit becomes a simple tag cloud, no absolute ring */
  .orbit { aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:16px; }
  .orbit::before, .orbit::after { display:none; }
  .orbit-core { position:static; transform:none; box-shadow:0 0 30px rgba(251,119,68,.34); }
  .orbit-word { position:static; transform:none; animation:none; }
  .orbit > .orbit-word { display:inline-flex; }
  .orbit { flex-wrap:wrap; flex-direction:row; justify-content:center; gap:10px; }
  .orbit-core { order:-1; flex:0 0 100%; text-align:center; justify-content:center; }
  .tech-details summary { padding:18px 20px; font-size:17px; }
  .tech-details-body { padding:0 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sysmap .core-glow, .sysmap .node-app rect, .sysmap .node-layer rect,
  .layer-join::after, .orbit-word, .story-dot { animation:none !important; }
  .sysmap .particles { display:none; }
}