.sec-cs{--bg:#011614;
  --green-700:#0b292d;
  --green-600:#123535;
  --green-500:#164844;
  --neon:#7aff9b;
  --turquoise:#84ffda;
  --text:#ffffff;
  --body:#b4cdd1;
  --dim:#5d7268;
  --hair:rgba(255,255,255,.11);
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.7,.28,1);
  --spring:cubic-bezier(.22,1.06,.32,1)}
.sec-cs *{box-sizing:border-box;margin:0;padding:0}
.sec-cs .cs{position:relative;padding:112px 0 124px;isolation:isolate;overflow-x:clip;background:var(--bg)}
/* No photographic plate here. There is no photo in this section in Figma —
   it is the flat background and nothing else. The starfield image that used
   to sit here was invention, and it also gave the section a visible edge
   where the plate stopped. The #cs-stars canvas below still carries the
   twinkle, which is now the only star layer rather than a top-up on a
   baked-in one. */
/* faded into the page at both edges */
.sec-cs .cs::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(1,22,20,.42) 16%,rgba(1,22,20,.42) 84%,var(--bg) 100%);
}
.sec-cs #cs-stars{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.sec-cs .wrap{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 40px}
.sec-cs .head{max-width:720px;margin-bottom:44px}
.sec-cs .head .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--neon);margin:0 0 18px;max-width:none}
.sec-cs .head h2{font-size:clamp(30px,3.5vw,46px);line-height:1.12;font-weight:500;letter-spacing:-.02em}
.sec-cs .head h2 em{font-style:normal;color:var(--neon)}
.sec-cs .head p{margin-top:14px;font-size:clamp(15px,1.2vw,18px);line-height:1.45;color:var(--body);font-weight:300;max-width:520px}
/* ── stage ─────────────────────────────────────────────── */
.sec-cs .stage{position:relative;height:clamp(500px,60vh,600px)}
.sec-cs .rightcol{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:min(760px,68%);display:flex;flex-direction:column;gap:26px;z-index:5}
/* the ship: rests at the left, enters from beyond the viewport edge */
.sec-cs .ship{position:absolute;left:-3%;top:50%;width:clamp(150px,17vw,232px);z-index:4;
  transform:translate(calc(-100% - 42vw),-50%);opacity:0;
  transition:transform 1.5s cubic-bezier(.16,.72,.24,1),opacity .5s var(--ease) .1s}
.sec-cs .stage.lit .ship{transform:translate(0,-50%);opacity:1}
.sec-cs .ship .float{animation:float 8s ease-in-out infinite}
.sec-cs .ship img{width:100%;display:block;filter:drop-shadow(0 24px 44px rgba(0,0,0,.7))}
@keyframes float{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-12px) rotate(.5deg)}}
/* barely-there projection haze */
.sec-cs .haze{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  filter:blur(26px)}
.sec-cs .haze .wedge{fill:url(#cs-hz);opacity:0;
  /* thrown FROM the ship's nose: aim() writes the nose point into --bx/--by
     so the beam grows out of the lamp rather than scaling about the svg. */
  transform-box:view-box;transform-origin:var(--bx,0) var(--by,0);
  transform:scale(.05,.3)}
/* the light is gated on `lit-on`, NOT `lit`. on the composed page the ship
   flies in from the hero and the beam must not switch on until it has
   actually arrived — which is later than this section igniting. standalone,
   ignite() adds both and nothing changes. */
.sec-cs .stage.lit-on .haze .wedge{animation:beam-on 1.15s cubic-bezier(.16,.72,.24,1) forwards}
/* a lamp striking, not a cross-fade: it stutters twice before it holds */
@keyframes beam-on{
  0%  {transform:scale(.05,.3);  opacity:0}
  7%  {transform:scale(.22,.5);  opacity:.65}
  11% {                          opacity:.12}   /* strike */
  16% {transform:scale(.42,.7);  opacity:.8}
  21% {                          opacity:.3}    /* second stutter */
  100%{transform:scale(1,1);     opacity:1}
}
.sec-cs .glow{position:absolute;z-index:2;pointer-events:none;width:200px;height:200px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.3);opacity:0;
  background:radial-gradient(circle,rgba(132,255,218,.16) 0%,rgba(132,255,218,.05) 40%,transparent 70%)}
/* the lamp itself strikes fractionally BEFORE the beam it throws */
.sec-cs .stage.lit-on .glow{animation:lamp-on 1s cubic-bezier(.16,.72,.24,1) forwards}
@keyframes lamp-on{
  0%  {transform:translate(-50%,-50%) scale(.3);  opacity:0}
  9%  {transform:translate(-50%,-50%) scale(1.1); opacity:1}
  13% {                                           opacity:.2}
  19% {transform:translate(-50%,-50%) scale(1.05);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(1);   opacity:1}
}
/* each card takes the light as the beam sweeps onto it — it arrives dim and
   slightly soft, then resolves. this is what ties the cards to the beam
   rather than to a timer of their own. */
.sec-cs .slot.card-lit{animation:card-lit .82s cubic-bezier(.16,.72,.24,1) both}
@keyframes card-lit{
  0%  {filter:brightness(.28) blur(4px)}
  38% {filter:brightness(1.16) blur(0)}   /* the moment the light lands on it */
  100%{filter:none}
}
/* a strobing lamp is exactly what a vestibular trigger looks like */
@media (prefers-reduced-motion:reduce){.sec-cs .slot.card-lit{animation:none}
.sec-cs .stage.lit-on .haze .wedge{animation:none;transform:none;opacity:1}
.sec-cs .stage.lit-on .glow{animation:none;transform:translate(-50%,-50%);opacity:1}}
/* ── deck ──────────────────────────────────────────────── */
.sec-cs .deck{position:relative;width:100%;height:426px;perspective:1500px;perspective-origin:30% 46%}
/* label + card travel together through the depth */
.sec-cs .slot{
  position:absolute;left:0;top:0;width:392px;
  transform-origin:50% 50%;will-change:transform;cursor:pointer;
  transition:transform .9s var(--spring),opacity .6s var(--ease),filter .6s var(--ease);
}
.sec-cs .slot.front{cursor:default}
.sec-cs .label{font-size:clamp(20px,2.1vw,27px);line-height:1.18;font-weight:500;letter-spacing:-.022em;
  color:#fff;margin-bottom:18px;max-width:380px}
.sec-cs .label em{font-style:normal;color:var(--neon)}
.sec-cs .card{
  position:relative;width:100%;height:330px;
  border-radius:20px;padding:30px 32px 26px;
  background:linear-gradient(160deg,#123535 0%,#0b292d 58%,#08211f 100%);
  border:1px solid var(--hair);
  box-shadow:0 40px 80px -46px #000;
  transition:box-shadow .6s var(--ease);
}
.sec-cs .slot.front .card{box-shadow:0 46px 90px -44px #000,0 0 0 1px rgba(122,255,155,.13) inset}
.sec-cs .card p{font-size:15px;line-height:1.62;color:var(--body);font-weight:300}
.sec-cs .card p + p{margin-top:13px}
/* ── controls ──────────────────────────────────────────── */
.sec-cs .ctl{display:flex;align-items:center;gap:16px;margin-top:-6px}
.sec-cs .dots{display:flex;gap:7px}
.sec-cs .dots i{width:20px;height:2px;border-radius:2px;background:rgba(255,255,255,.18);cursor:pointer;
  overflow:hidden;transition:width .4s var(--spring)}
.sec-cs .dots i.on{width:38px}
.sec-cs .dots i b{display:block;height:100%;width:0;border-radius:2px;background:var(--neon)}
.sec-cs .arw{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);background:transparent;color:var(--body);
  display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.sec-cs .arw:hover{border-color:var(--neon);color:var(--neon);background:rgba(122,255,155,.06)}
.sec-cs .arw svg{width:13px;height:13px}
@media (max-width:1000px){.sec-cs .wrap{padding:0 20px}
.sec-cs .cs{padding:72px 0 92px}
.sec-cs .stage{height:auto;display:flex;flex-direction:column;gap:24px}
.sec-cs .haze, .sec-cs .glow{display:none}
.sec-cs .ship{position:relative;left:0;top:0;width:132px;align-self:flex-start;
    transform:translateX(-60vw);transition:transform 1.1s var(--ease),opacity .5s}
.sec-cs .stage.lit .ship{transform:none}
.sec-cs .rightcol{position:relative;right:auto;top:auto;transform:none;width:100%;gap:22px}
.sec-cs .deck{height:430px;perspective:1100px}
.sec-cs .slot{width:100%;max-width:420px}
.sec-cs .label{font-size:20px;margin-bottom:14px}
.sec-cs .card{padding:24px 22px 22px}
.sec-cs .card .metric b{font-size:46px}
.sec-cs .ctl{margin-top:4px}}
@media (prefers-reduced-motion:reduce){.sec-cs *{animation:none!important;transition-duration:.01ms!important}}