/* Cinematic opening — charcoal stage, big type, the orange spark connects four disconnected technologies */
.cine { position: relative; min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); display: flex; align-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 80% at 72% 48%, rgba(244,119,33,.10), transparent 60%), radial-gradient(60% 70% at 10% 100%, rgba(124,58,237,.10), transparent 70%), linear-gradient(180deg, #0c0c11 0%, #0a0a0f 70%, #070821 100%); }
.cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.cine-inner { position: relative; z-index: 2; width: 100%; padding-top: 40px; padding-bottom: 80px; }
.cine-copy { max-width: 760px; }
.cine .kicker { color: #c9c4d8; }
.cine .kicker .dot { background: #f47721; box-shadow: 0 0 12px #f47721; }
.cine h1 { margin-top: 22px; font-size: clamp(54px, 7.6vw, 124px); font-weight: 800; line-height: .97; letter-spacing: -.05em; color: #f4f2f8; text-wrap: balance; }
.cine h1 .spark-word { background: linear-gradient(92deg, #ffb066 0%, #f47721 45%, #ff5a3c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cine h1 .spark-word .fx-wi { color: transparent; }
.cine-lead { margin-top: 48px; max-width: 520px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: rgba(232,230,240,.72); }
.cine-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.cine .btn-spark { background: linear-gradient(100deg, #f47721, #ff5a3c); color: #fff; box-shadow: 0 12px 40px rgba(244,119,33,.35); }
.cine-cue { position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,230,240,.45); }
.cine-cue i { width: 1px; height: 38px; background: linear-gradient(#f47721, transparent); animation: cine-cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cine-cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
/* technology nodes */
.cine-node { position: absolute; z-index: 1; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; will-change: transform; }
.cine-node b { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(220,216,235,.45); background: rgba(20,20,28,.9); transition: background .5s ease, border-color .5s ease, box-shadow .6s ease, transform .5s cubic-bezier(.2,.7,.1,1); }
.cine-node span { font: 600 13px/1.2 var(--body); letter-spacing: .02em; color: rgba(220,216,235,.55); white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(14,14,20,.55); backdrop-filter: blur(6px); transition: color .5s ease, border-color .5s ease; }
.cine-node.on b { background: #f47721; border-color: #ffb066; transform: rotate(45deg) scale(1.15); box-shadow: 0 0 0 6px rgba(244,119,33,.14), 0 0 26px rgba(244,119,33,.8); }
.cine-node.on span { color: #fff; border-color: rgba(244,119,33,.45); }
.cine-hub { position: absolute; z-index: 1; left: 0; top: 0; width: 18px; height: 18px; transform: translate(-50%, -50%) scale(0); border-radius: 3px; background: #f47721; box-shadow: 0 0 0 8px rgba(244,119,33,.12), 0 0 40px 6px rgba(244,119,33,.65); transition: transform .6s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.cine-hub.on { transform: translate(-50%, -50%) scale(1) rotate(45deg); }
/* the old hero below gets a second-level heading with the same look */
.hero h2.hero-h { font-size: clamp(44px, 5.6vw, 72px); font-weight: 800; line-height: .98; letter-spacing: -.04em; }
.cine ~ .svc-intro { padding-top: 96px; }
@media (max-width: 860px) {
  .cine { align-items: flex-start; min-height: calc(100svh - 70px); }
  .cine-inner { padding-top: 28px; padding-bottom: 300px; }
  .cine h1 { font-size: clamp(46px, 12.5vw, 72px); }
  .cine-node span { font-size: 11px; padding: 5px 9px; }
  .cine-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cine-cue i { animation: none; } }
/* the stage starts right under the header: header and top glow match the charcoal */
body:has([data-cine]) .site-header:not(.is-scrolled) { background: #0c0c11; }
body:has([data-cine]) .ambient { top: 100vh; }
@media (max-width: 860px) { .cine .kicker { font-size: 11px; letter-spacing: .1em; } }
.cine .cine-copy .cine-lead { margin-top: 44px; }
.cine .cine-copy .cine-actions { margin-top: 34px; }
@media (max-width: 860px) { .cine .cine-copy .cine-lead { margin-top: 28px; } .cine .cine-inner { padding-bottom: 340px; } }
.cine-node[data-side="top"] { flex-direction: column-reverse; }
.cine-node[data-side="left"] { flex-direction: row-reverse; gap: 12px; }
.cine-node[data-side="right"] { flex-direction: row; gap: 12px; }
/* neon headline: unlit glass tubes until the spark passes */
.cine-canvas { z-index: 3; }
.cine h1.cine-neon { opacity: 1; animation: none; }
.cine h1 .nw { white-space: nowrap; }
.cine h1 .nl { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.13); }
.cine h1 .nl.lit { color: #f7f4ff; -webkit-text-stroke: 0; text-shadow: 0 0 4px rgba(255,255,255,.55), 0 0 18px rgba(255,190,140,.32), 0 0 46px rgba(255,120,40,.18); animation: neon-on .7s linear both; }
.cine h1 .spark-word { background: none; color: inherit; }
.cine h1 .nl.o { -webkit-text-stroke: 1px rgba(255,140,60,.22); }
.cine h1 .nl.o.lit { color: var(--c, #f47721); -webkit-text-stroke: 0; text-shadow: 0 0 6px var(--c, #f47721), 0 0 22px rgba(255,110,40,.7), 0 0 56px rgba(255,80,30,.45); }
@keyframes neon-on { 0% { opacity: .15; filter: brightness(1.5); } 10% { opacity: 1; } 18% { opacity: .25; } 30% { opacity: 1; } 42% { opacity: .55; } 55%, 100% { opacity: 1; filter: none; } }
/* copy beneath waits for the headline to light */
.cine-pre h1:not(.cine-neon), .cine-pre .cine-lead, .cine-pre .cine-actions { opacity: 0; animation: cine-fs .6s 7s forwards; }
.cine-pre .cine-lead, .cine-pre .cine-actions { transform: translateY(12px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.1,1); }
.cine-pre.cine-lit .cine-lead, .cine-pre.cine-lit .cine-actions { opacity: 1; transform: none; animation: none; }
.cine-pre.cine-lit .cine-actions { transition-delay: .15s; }
@keyframes cine-fs { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cine-pre h1, .cine-pre .cine-lead, .cine-pre .cine-actions { opacity: 1; transform: none; animation: none; } }
/* living 3D blob — the pillars are the markers, labels float beside them */
.cine-3d { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.cine-node b { display: none; }
.cine-node { opacity: 0; transition: opacity .5s ease; left: 0; top: 0; }
.cine-node.on { opacity: 1; }
.cine-node span { animation: none; }
.cine-node.on span { color: #fff; border-color: rgba(244,119,33,.5); background: rgba(14,14,20,.62); }
/* cosmic stage: charcoal at the top deepening into the same violet + ember glow as the section below, so the scroll has no seam */
.cine { background:
  radial-gradient(60% 55% at -4% 104%, rgba(124,58,237,.42), transparent 70%),
  radial-gradient(50% 45% at 104% 104%, rgba(255,122,26,.16), transparent 70%),
  radial-gradient(38% 34% at 34% 26%, rgba(168,85,247,.09), transparent 70%),
  radial-gradient(30% 30% at 88% 18%, rgba(255,43,209,.06), transparent 70%),
  radial-gradient(70% 80% at 72% 48%, rgba(244,119,33,.08), transparent 60%),
  linear-gradient(180deg, #0c0c11 0%, #0d0b1a 40%, #100b28 72%, #070821 100%); }
.cine::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px; background-position: left bottom;
  -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 100%); mask-image: linear-gradient(180deg, transparent 50%, #000 100%); }
/* feather the join: a soft blurred band straddling the edge melts the two backdrops into each other */
.cine ~ .svc-intro::after { content: ""; position: absolute; left: 0; right: 0; top: -90px; height: 180px; z-index: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 55%, transparent 100%); }
.cine .cine-cue { bottom: 96px; }
@media (max-width: 860px) { .cine ~ .svc-intro::after { top: -60px; height: 120px; } }