/* ============================================================
   NOVIRA — Costing (flagship) cinematic extras. Loads after styles.css.
   Conveys "flagship / the standout module" CONCEPTUALLY — a rising
   peak + counted depth + breadth of methods. No star symbol, ever.
   Namespaced .cx-*. Animated by js/cost-cine.js (guarded).
   ============================================================ */

/* conceptual flagship banner under the hero */
.cx-flag{display:inline-flex;align-items:center;gap:11px;margin-top:22px;padding:9px 18px;border-radius:100px;
  font-size:13.5px;font-weight:600;color:var(--champ-light);
  background:linear-gradient(120deg,rgb(var(--champ-rgb) / .16),rgb(var(--sage-rgb) / .12));
  border:1px solid rgb(var(--champ-rgb) / .4);box-shadow:0 10px 30px rgb(var(--champ-rgb) / .2)}
.cx-flag-ic{width:20px;height:20px;flex:none;color:var(--purple)}
.cx-flag-ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- DEPTH section ---------- */
.cx-depth{position:relative;padding:clamp(80px,12vh,130px) 0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgb(var(--champ-rgb) / .08),transparent 62%)}
.cx-depth-head{max-width:760px;margin:0 auto clamp(40px,6vh,60px);text-align:center}
.cx-depth-head p{color:var(--muted);font-size:16px;line-height:1.8;margin-top:14px;max-width:640px;margin-inline:auto}

.cx-depth-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:center;
  max-width:1000px;margin:0 auto;padding:clamp(26px,4vw,40px);border-radius:26px;
  background:linear-gradient(150deg,rgb(var(--champ-rgb) / .08),rgb(var(--sage-rgb) / .05));
  border:1px solid rgb(var(--champ-rgb) / .22)}
@media(max-width:780px){.cx-depth-grid{grid-template-columns:1fr;gap:26px;text-align:center}}

/* conceptual emblem: a rising peak + the counted depth */
.cx-emblem{display:flex;flex-direction:column;align-items:center;gap:10px}
.cx-peak{display:flex;align-items:flex-end;gap:7px;height:96px;margin-bottom:8px}
.cx-peak span{width:16px;border-radius:6px 6px 3px 3px;background:var(--grad);
  box-shadow:0 8px 22px rgb(var(--champ-rgb) / .35);transform-origin:bottom}
.cx-peak span:nth-child(1){height:34%}
.cx-peak span:nth-child(2){height:54%}
.cx-peak span:nth-child(3){height:72%}
.cx-peak span:nth-child(4){height:88%}
.cx-peak span:nth-child(5){height:100%}
.cx-count{display:flex;align-items:flex-start;gap:2px;line-height:1}
.cx-count b{font-family:var(--mono);font-size:clamp(52px,9vw,84px);font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.cx-count i{font-style:normal;font-family:var(--mono);font-size:30px;font-weight:800;color:var(--cyan);margin-top:8px}
.cx-count-l{color:var(--muted);font-size:14px;font-weight:600}

/* the breadth, as method chips */
.cx-methods{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:780px){.cx-methods{justify-content:center}}
.cx-methods span{padding:9px 15px;border-radius:11px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  background:rgb(var(--ink-rgb) / .04);border:1px solid var(--border);white-space:nowrap;
  transition:border-color .25s,transform .25s,color .25s}
.cx-methods span:hover{border-color:rgb(var(--champ-rgb) / .5);color:var(--ink);transform:translateY(-2px)}

/* secondary depth screenshots — mini monitor frames */
.cx-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1060px;margin:46px auto 0}
@media(max-width:860px){.cx-frames{grid-template-columns:1fr;gap:24px;max-width:560px}}
.cx-frame{margin:0}
.cx-frame-scr{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);
  background:var(--bg-deep);aspect-ratio:16/9.6;box-shadow:0 18px 44px rgb(var(--shadow-rgb) / .45)}
.cx-frame-scr::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 1px 0 rgb(var(--ink-rgb) / .06);border-radius:16px}
.cx-frame-scr img{width:100%;height:100%;object-fit:contain;object-position:top center;display:block}
.cx-frame figcaption{padding:16px 6px 0}
.cx-frame figcaption b{display:block;font-size:15.5px;font-weight:800;margin-bottom:5px}
.cx-frame figcaption span{color:var(--muted);font-size:13px;line-height:1.65}

/* reduced motion — everything visible, no choreography */
@media(prefers-reduced-motion:reduce){
  .cx-peak span,.cx-methods span,.cx-frame{opacity:1!important;transform:none!important}
}