/* ===================================================================
   FLOWTRIG — channels-viz.css
   "One engine, every channel" — animated hub→channels→revenue viz.
   Right-aligned section (graphics left, text right). Shares global tokens.
   =================================================================== */

.cv-sec{ position:relative; overflow:hidden; }
.cv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:stretch; }
@media(max-width:940px){ .cv-grid{ grid-template-columns:1fr; gap:44px; } .cv-stage-wrap{ order:-1; } }

/* ---- left text column ---- */
.cv-copy{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px; text-align:left; }
.cv-copy h2{ margin:0; font-size:clamp(28px,3.3vw,46px); line-height:1.08; letter-spacing:-.03em; max-width:none; }
.cv-copy .sub{ margin:0; max-width:46ch; }
.cv-kicker{ display:inline-flex; align-items:center; gap:11px; }
.cv-kicker .ki{ width:34px; height:34px; border-radius:10px; background:var(--green-soft); border:1px solid rgba(43,232,129,.22); color:var(--neon); display:flex; align-items:center; justify-content:center; }
.cv-kicker .kt{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-soft); }
.cv-kicker .kl{ width:36px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--neon),transparent); }

.cv-list{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
@media(max-width:560px){ .cv-list{ grid-template-columns:1fr; } }
.cv-item{ position:relative; display:flex; gap:12px; align-items:center; width:100%; padding:13px 15px; border-radius:14px;
  border:1px solid var(--line); background:color-mix(in oklab, var(--surface) 66%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-align:left;
  transition:transform .26s cubic-bezier(.2,.7,.2,1), border-color .25s, background .25s, box-shadow .26s; overflow:hidden; }
.cv-item::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--c1, var(--neon)), var(--c2, var(--green))); transform:scaleY(0); transform-origin:top; transition:transform .3s; }
.cv-item:hover{ transform:translateX(5px); border-color:rgba(43,232,129,.4); background:color-mix(in oklab, var(--surface) 82%, transparent); box-shadow:0 18px 40px -26px rgba(0,0,0,.6); }
.cv-item:hover::after{ transform:scaleY(1); }
.cv-item .ci{ flex:0 0 36px; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.cv-item .ci svg{ width:19px; height:19px; }
.cv-item .ct{ flex:1; min-width:0; }
.cv-item .ct .nm{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-item .ct .ds{ font-size:11.5px; color:var(--tx-mute); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-item .tag{ font-size:10px; color:var(--neon); background:var(--green-soft); border:1px solid rgba(43,232,129,.22); padding:2px 8px; border-radius:999px; white-space:nowrap; margin-left:auto; }

/* ---- viz window (live demo screen) ---- */
.cv-stage-wrap{ display:flex; justify-content:center; align-items:stretch; width:100%; }
.cv-window{ width:100%; height:100%; display:flex; flex-direction:column; border-radius:20px; overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow), 0 0 70px -34px rgba(43,232,129,.5); }
.cv-window::after{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(43,232,129,.6), transparent); z-index:3; }
.cv-winbar{ display:flex; align-items:center; gap:13px; padding:11px 15px; border-bottom:1px solid var(--line); background:var(--surface-2); position:relative; z-index:2; }
.cv-winbar .dots{ display:flex; gap:7px; }
.cv-winbar .dots i{ width:11px; height:11px; border-radius:50%; display:block; }
.cv-winbar .dots i:nth-child(1){ background:#FF5F57; } .cv-winbar .dots i:nth-child(2){ background:#FEBC2E; } .cv-winbar .dots i:nth-child(3){ background:#28C840; }
.cv-winbar .url{ flex:1; text-align:center; font-size:11.5px; color:var(--tx-mute); font-family:var(--font-m); }
.cv-winbar .url b{ color:var(--tx-soft); font-weight:500; }
.cv-winbar .wlive{ font-size:11px; color:var(--neon); display:inline-flex; gap:6px; align-items:center; }
.cv-winbar .wlive::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--neon); box-shadow:0 0 8px var(--neon); animation:pulse 1.8s infinite; }

/* ---- viz stage (fills window body) ---- */
.cv-stage{ position:relative; flex:1; width:100%; min-height:440px;
  background:
    radial-gradient(circle at 50% 48%, rgba(43,232,129,.10), transparent 58%),
    radial-gradient(130% 90% at 50% 0%, color-mix(in oklab, var(--neon) 6%, var(--bg-2)), var(--bg-2)); }
.cv-stage::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(43,232,129,.18) 1px, transparent 1.5px);
  background-size:24px 24px; background-position:center;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 26%, transparent 68%);
  mask-image:radial-gradient(circle at 50% 50%, #000 26%, transparent 68%); }
.cv-stage::after{ content:""; position:absolute; inset:9%; z-index:0; pointer-events:none; border-radius:50%;
  border:1px solid rgba(43,232,129,.07);
  background:conic-gradient(from 90deg, transparent 0 23%, rgba(43,232,129,.16) 24% 26%, transparent 27% 48%, rgba(43,232,129,.16) 49% 51%, transparent 52% 73%, rgba(43,232,129,.16) 74% 76%, transparent 77% 98%, rgba(43,232,129,.16) 99% 100%);
  -webkit-mask:radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px), #000 50%, transparent calc(50% + 1px));
  mask:radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px), #000 50%, transparent calc(50% + 1px)); }
[data-theme="light"] .cv-stage::before{ background-image:radial-gradient(rgba(15,162,80,.16) 1px, transparent 1.5px); }
#cv-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }

/* center hub */
.cv-hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4;
  width:120px; height:120px; border-radius:30px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #0F2A1C, #08160F); border:1px solid rgba(43,232,129,.35);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 0 60px -10px rgba(43,232,129,.6), 0 22px 50px -22px rgba(0,0,0,.7);
  transition:box-shadow .5s, transform .5s; }
[data-theme="light"] .cv-hub{ background:linear-gradient(160deg,#0E3A26,#0B2A1B); }
.cv-hub img{ width:84px; }
.cv-hub::after{ content:""; position:absolute; inset:-42px; border-radius:50%; z-index:-1;
  background:conic-gradient(from 0deg, rgba(43,232,129,0), rgba(43,232,129,.4) 25%, rgba(43,232,129,0) 55%, rgba(43,232,129,0));
  filter:blur(15px); opacity:.7; animation:cv-spin 8s linear infinite; }
@keyframes cv-spin{ to{ transform:rotate(360deg); } }
[data-theme="light"] .cv-hub::after{ background:conic-gradient(from 0deg, rgba(15,162,80,0), rgba(15,162,80,.4) 25%, rgba(15,162,80,0) 55%, rgba(15,162,80,0)); }
.cv-hub::before{ content:""; position:absolute; inset:-6px; border-radius:34px; border:1px solid rgba(43,232,129,.25); opacity:0; transition:opacity .5s; }
.cv-stage.phase-in .cv-hub{ box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 80px -6px rgba(43,232,129,.85), 0 22px 50px -22px rgba(0,0,0,.7); transform:translate(-50%,-50%) scale(1.05); }
.cv-stage.phase-rev .cv-hub{ border-color:rgba(244,192,78,.6); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 90px -6px rgba(244,192,78,.8), 0 22px 50px -22px rgba(0,0,0,.7); transform:translate(-50%,-50%) scale(1.06); }

/* revenue badge */
.cv-rev{ position:absolute; top:50%; left:50%; transform:translate(-50%, -118px) scale(.8); z-index:5;
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(135deg, #F4C04E, #E89B2E); color:#3A2606; font-weight:800; font-size:14px;
  box-shadow:0 12px 30px -10px rgba(244,192,78,.7); opacity:0; transition:opacity .45s, transform .55s cubic-bezier(.2,.9,.3,1.2); pointer-events:none; }
.cv-rev svg{ width:15px; height:15px; }
.cv-stage.phase-rev .cv-rev{ opacity:1; transform:translate(-50%, -134px) scale(1); }

/* channel nodes */
.cv-node{ position:absolute; z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px; transform:translate(-50%,-50%);
  transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.cv-node .nd{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--surface) 74%, transparent); border:1px solid var(--line);
  backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.05) inset; transition:box-shadow .4s, transform .4s, border-color .4s; }
.cv-node .nd svg{ width:26px; height:26px; }
.cv-node .nl{ font-size:10.5px; font-weight:600; color:var(--tx-mute); }
.cv-stage.phase-out .cv-node .nd{ transform:scale(1.08); border-color:rgba(43,232,129,.45); box-shadow:0 0 26px -8px rgba(43,232,129,.6), 0 14px 30px -16px rgba(0,0,0,.6); }
.cv-stage.phase-in .cv-node .nd{ transform:scale(.97); }

/* node positions (around hub, tuned for 16:13 frame) */
.cv-node.n-wa{ top:17%; left:26%; }
.cv-node.n-tg{ top:17%; left:74%; }
.cv-node.n-ig{ top:83%; left:26%; }
.cv-node.n-fb{ top:83%; left:74%; }
.cv-node.n-wh{ top:50%; left:11%; }

@media(prefers-reduced-motion: reduce){
  .cv-hub::before{ display:none; }
}