/* ============================================================
   Voice & Chat AI — page styles (matched to actual JSX classes)
   ============================================================ */

/* ---------- HERO ---------- */
.vc-hero { position: relative; padding: 120px 0 80px; overflow: hidden; background: var(--site-bg); }
.vc-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
}
.vc-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 18% 20%, rgba(0,85,255,0.18) 0%, transparent 65%),
    radial-gradient(40% 50% at 88% 14%, rgba(94,255,164,0.10) 0%, transparent 60%),
    radial-gradient(70% 60% at 70% 95%, rgba(25,0,255,0.15) 0%, transparent 60%);
}
.vc-hero .container { position: relative; }
.vc-hero-tag {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 14px 6px 6px; border: 1px solid var(--site-line-2);
  background: rgba(255,255,255,0.03); font-size: 12px; color: var(--site-text);
  margin-bottom: 28px;
}
.vc-hero-tag .pill { font-size: 10px; letter-spacing: 0.18em; background: var(--site-blue); color: #fff; padding: 4px 8px; }
.vc-hero-h {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 78px); line-height: 1.02;
  letter-spacing: -0.035em; color: #fff; font-weight: 400;
  margin: 0 0 28px; max-width: 1100px;
}
.vc-accent { background: linear-gradient(120deg, #4FC8FF 0%, #5EFFA4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vc-hero-sub { font-size: 19px; line-height: 1.55; color: var(--site-text-2); max-width: 800px; margin: 0 0 32px; }
.vc-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.vc-hero-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-channel {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--site-line);
  background: rgba(255,255,255,0.02); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; color: var(--site-text-2);
}
.vc-channel svg { color: var(--site-cyan); }

/* Hero visual */
.vc-hero-visual { position: relative; max-width: 1440px; margin: 64px auto 0; padding: 0 32px; }
.vc-hv-frame {
  border: 1px solid var(--site-line);
  background: linear-gradient(180deg, rgba(15,21,48,0.65), rgba(5,7,15,0.4));
  padding: 14px;
}
.vc-hv-chrome {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 6px 12px; border-bottom: 1px solid var(--site-line); margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--site-text-3);
  flex-wrap: wrap;
}
.vc-hv-chrome .dot.rec { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--site-mint); box-shadow: 0 0 8px var(--site-mint); animation: pulse 1.4s infinite; }
.vc-hv-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.vc-hv-panel { padding: 14px; border: 1px solid var(--site-line); background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 8px; }
.vc-hv-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--site-text-3); }
.vc-hv-bubble { padding: 8px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--site-line); font-size: 13px; line-height: 1.4; color: #fff; max-width: 90%; align-self: flex-start; }
.vc-hv-bubble.out { background: rgba(0,85,255,0.10); border-color: rgba(79,200,255,0.3); align-self: flex-end; max-width: 95%; }
.vc-hv-bubble.done { border-color: rgba(94,255,164,0.4); background: rgba(94,255,164,0.06); }
.vc-hv-stamp { display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--site-mint); margin-right: 8px; padding: 2px 6px; background: rgba(94,255,164,0.1); border: 1px solid rgba(94,255,164,0.25); }
.vc-hv-wave { display: flex; align-items: center; gap: 2px; height: 56px; margin: 4px 0 8px; }
.vc-hv-wave span { display: block; flex: 1; background: linear-gradient(180deg, var(--site-cyan), rgba(79,200,255,0.4)); transition: height 80ms linear; }
.vc-hv-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 3px 0; border-top: 1px dashed var(--site-line); font-family: var(--font-mono); letter-spacing: 0.04em; }
.vc-hv-row span { color: var(--site-text-3); }
.vc-hv-row b { color: #fff; font-weight: 500; }
.vc-hv-step { font-family: var(--font-mono); font-size: 11.5px; color: var(--site-text-2); padding: 3px 0; }
.vc-hv-step.done { color: var(--site-mint); }
.vc-hv-step.active { color: var(--site-amber); }

/* ---------- ARCHITECTURE ---------- */
.vc-arch { padding: 120px 0 100px; background: var(--site-bg); border-top: 1px solid var(--site-line); }
.vc-arch-stage { margin-top: 56px; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 32px; align-items: center; position: relative; }
.vc-arch-col { display: flex; flex-direction: column; gap: 8px; }
.vc-arch-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--site-cyan); margin-bottom: 6px; }
.vc-arch-node { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--site-line); background: rgba(255,255,255,0.02); font-size: 13px; color: var(--site-text); }
.vc-arch-node svg { color: var(--site-cyan); }
.vc-arch-center, .vc-arch-orb { position: relative; display: grid; place-items: center; min-height: 360px; }
.vc-arch-orb {
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0,85,255,0.3), rgba(25,0,255,0.18));
  border: 1px solid rgba(79,200,255,0.5);
  box-shadow: 0 0 0 1px rgba(79,200,255,0.15), 0 0 60px rgba(0,85,255,0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.vc-arch-orb-ring {
  position: absolute; inset: -30px; border: 1px dashed var(--site-line-2); border-radius: 50%;
  pointer-events: none;
}
.vc-arch-orb-inner { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.vc-arch-orb-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--site-cyan); }
.vc-arch-orb-title { font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: #fff; font-weight: 400; letter-spacing: -0.01em; }
.vc-arch-orb-stack { font-family: var(--font-mono); font-size: 10px; color: var(--site-text-2); letter-spacing: 0.06em; }
.vc-arch-verbs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; max-width: 220px; }
.vc-arch-verb { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; padding: 3px 8px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); color: #fff; }
.vc-arch-lines { position: absolute; inset: 0; pointer-events: none; opacity: 0.3; }
.vc-arch-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--site-cyan); box-shadow: 0 0 6px var(--site-cyan); }

/* ---------- PILLARS ---------- */
.vc-pillars { padding: 120px 0 100px; background: var(--site-bg-2); border-top: 1px solid var(--site-line); }
.vc-pillars-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--site-line); }
.vc-pillar {
  position: relative; padding: 32px 28px; min-height: 320px;
  border-right: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line);
  display: flex; flex-direction: column; gap: 14px; cursor: pointer;
  background: rgba(255,255,255,0.012); transition: background 220ms;
  text-align: left; color: inherit; font: inherit;
}
.vc-pillar:nth-child(3n) { border-right: 0; }
.vc-pillar:nth-last-child(-n+3) { border-bottom: 0; }
.vc-pillar:hover, .vc-pillar.open { background: rgba(0,85,255,0.06); }
.vc-pillar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vc-pillar-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--site-cyan); }
.vc-pillar-plus { font-family: var(--font-mono); font-size: 18px; color: var(--site-text-3); line-height: 1; }
.vc-pillar.open .vc-pillar-plus { color: var(--site-cyan); }
.vc-pillar-ico { width: 36px; height: 36px; border: 1px solid var(--site-line-2); display: grid; place-items: center; color: var(--site-cyan); }
.vc-pillar-ico svg { width: 16px; height: 16px; }
.vc-pillar-name { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: #fff; font-weight: 500; }
.vc-pillar-sub { font-size: 14px; line-height: 1.5; color: var(--site-text-2); margin: 0; }
.vc-pillar-body { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--site-line); }
.vc-pillar-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.vc-pillar-bullets li { font-size: 12.5px; color: var(--site-text); padding: 4px 0; display: flex; gap: 8px; align-items: center; }
.vc-pillar-bullets li::before { content: ""; width: 4px; height: 4px; background: var(--site-cyan); flex-shrink: 0; }

/* ---------- INDUSTRIES ---------- */
.vc-industries { padding: 120px 0 100px; background: var(--site-bg); border-top: 1px solid var(--site-line); }
.vc-ind-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 36px 0 28px; }
.vc-ind-tabs button {
  padding: 8px 14px; border: 1px solid var(--site-line); background: rgba(255,255,255,0.02);
  color: var(--site-text-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  cursor: pointer; transition: all 180ms;
}
.vc-ind-tabs button:hover { color: #fff; border-color: var(--site-line-2); }
.vc-ind-tabs button.active { color: var(--site-cyan); border-color: rgba(79,200,255,0.4); background: rgba(79,200,255,0.06); }
.vc-ind-panel { border: 1px solid var(--site-line); background: linear-gradient(180deg, rgba(15,21,48,0.6), rgba(5,7,15,0.4)); padding: 32px; }
.vc-ind-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.vc-ind-h { font-family: var(--font-display); font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; color: #fff; font-weight: 400; margin: 0; }
.vc-ind-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vc-ind-pain { padding: 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--site-line); display: flex; flex-direction: column; gap: 6px; }
.vc-ind-pain b { font-size: 13.5px; color: #fff; font-weight: 500; }
.vc-ind-pain p { font-size: 12.5px; color: var(--site-text-3); line-height: 1.5; margin: 0; }

/* ---------- SCENARIOS ---------- */
.vc-scen { padding: 120px 0 100px; background: var(--site-bg-2); border-top: 1px solid var(--site-line); }
.vc-scen-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vc-scen-card {
  padding: 22px 20px; background: linear-gradient(180deg, rgba(15,21,48,0.6), rgba(5,7,15,0.4));
  border: 1px solid var(--site-line); display: flex; flex-direction: column; gap: 12px;
  cursor: pointer; transition: all 220ms; text-align: left; color: inherit; font: inherit; min-height: 180px;
}
.vc-scen-card:hover { border-color: rgba(79,200,255,0.35); transform: translateY(-2px); }
.vc-scen-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--site-cyan); }
.vc-scen-ico { width: 32px; height: 32px; border: 1px solid var(--site-line-2); display: grid; place-items: center; color: var(--site-cyan); }
.vc-scen-ico svg { width: 14px; height: 14px; }
.vc-scen-card h3 { font-size: 17px; line-height: 1.25; color: #fff; font-weight: 500; margin: 0; letter-spacing: -0.005em; }
.vc-scen-card p { font-size: 12.5px; line-height: 1.5; color: var(--site-text-2); margin: 0; flex-grow: 1; }
.vc-scen-cta { display: flex; align-items: center; gap: 6px; color: var(--site-cyan); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; padding-top: 8px; border-top: 1px solid var(--site-line); }

/* ---------- HOW IT WORKS ---------- */
.vc-how { padding: 120px 0 100px; background: var(--site-bg); border-top: 1px solid var(--site-line); }
.vc-how-flow { margin-top: 40px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.vc-how-step { position: relative; padding: 22px 18px; border: 1px solid var(--site-line); background: linear-gradient(180deg, rgba(15,21,48,0.4), transparent); display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.vc-how-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--site-cyan); }
.vc-how-title { font-size: 15px; line-height: 1.2; color: #fff; font-weight: 500; }
.vc-how-desc { font-size: 12px; line-height: 1.5; color: var(--site-text-3); margin: 0; }
.vc-how-arrow { position: absolute; right: -8px; top: 36px; width: 0; height: 0; border-left: 8px solid var(--site-line); border-top: 6px solid transparent; border-bottom: 6px solid transparent; z-index: 2; }

/* ---------- DASHBOARD ---------- */
.vc-dash { padding: 120px 0 100px; background: var(--site-bg-2); border-top: 1px solid var(--site-line); }
.vc-dash-frame { margin-top: 40px; border: 1px solid var(--site-line); background: linear-gradient(180deg, rgba(15,21,48,0.5), rgba(5,7,15,0.4)); padding: 14px; }
.vc-dash-chrome { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--site-line); margin-bottom: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--site-text-3); letter-spacing: 0.1em; }
.vc-dash-tophead { display: flex; align-items: center; gap: 8px; }
.vc-dash-eyebrow { color: var(--site-cyan); }
.vc-dash-title { color: #fff; font-weight: 500; }
.vc-dash-user { display: flex; align-items: center; gap: 8px; }
.vc-dash-grid { display: grid; grid-template-columns: 200px 1fr; gap: 14px; }
.vc-dash-side { display: flex; flex-direction: column; gap: 2px; padding: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--site-line); }
.vc-dash-side button { padding: 8px 10px; background: transparent; border: 1px solid transparent; color: var(--site-text-2); font-size: 12px; text-align: left; cursor: pointer; font: inherit; }
.vc-dash-side button:hover { color: #fff; background: rgba(255,255,255,0.03); }
.vc-dash-side button.active { color: var(--site-cyan); background: rgba(79,200,255,0.06); border-color: var(--site-line-2); }
.vc-dash-side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--site-line); font-family: var(--font-mono); font-size: 10px; color: var(--site-text-3); letter-spacing: 0.06em; }
.vc-dash-main { padding: 14px; border: 1px solid var(--site-line); background: rgba(255,255,255,0.012); display: flex; flex-direction: column; gap: 14px; min-height: 460px; }
.vc-dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vc-dash-card { padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--site-line); display: flex; flex-direction: column; gap: 6px; }
.vc-dash-card-l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--site-text-3); }
.vc-dash-card-v { font-family: var(--font-display); font-size: 24px; color: #fff; font-weight: 400; letter-spacing: -0.01em; }
.vc-dash-spark { display: flex; align-items: end; gap: 2px; height: 18px; }
.vc-dash-spark span { display: block; flex: 1; background: var(--site-cyan); opacity: 0.7; }
.vc-dash-actions { display: flex; gap: 6px; }
.vc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vc-table th, .vc-table td { padding: 8px 10px; border-bottom: 1px solid var(--site-line); text-align: left; }
.vc-table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--site-text-3); font-weight: 500; }
.vc-table td { color: var(--site-text); }
.vc-conv-list { display: flex; flex-direction: column; }
.vc-conv { display: grid; grid-template-columns: 140px 1fr 90px 110px 70px; gap: 12px; padding: 10px 0; border-top: 1px solid var(--site-line); align-items: center; font-size: 12px; }
.vc-conv-ch { font-family: var(--font-mono); font-size: 10.5px; color: var(--site-cyan); letter-spacing: 0.06em; }
.vc-conv-cust { color: #fff; font-weight: 500; }
.vc-conv-sum { color: var(--site-text-2); font-size: 12px; line-height: 1.4; }
.vc-conv-head { font-family: var(--font-mono); font-size: 10.5px; color: var(--site-text-3); letter-spacing: 0.06em; }
.vc-conv-actions { display: flex; gap: 4px; }
.vc-conv-ago { font-family: var(--font-mono); font-size: 10.5px; color: var(--site-text-3); text-align: right; }
.vc-takeover { padding: 14px; background: rgba(255,176,32,0.04); border: 1px solid rgba(255,176,32,0.2); display: flex; flex-direction: column; gap: 10px; }
.vc-takeover-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--site-amber); }
.vc-takeover-divider { height: 1px; background: var(--site-line); margin: 6px 0; }
.vc-takeover-chat { display: flex; flex-direction: column; gap: 6px; }
.vc-takeover-msg { padding: 8px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--site-line); font-size: 12.5px; color: var(--site-text); }
.vc-feed { display: flex; flex-direction: column; }
.vc-feed-row { display: grid; grid-template-columns: 90px 110px 1fr 80px; gap: 12px; padding: 8px 0; border-top: 1px solid var(--site-line); font-family: var(--font-mono); font-size: 11px; color: var(--site-text-2); align-items: center; }
.vc-feed-row:first-child { border-top: 0; }
.vc-set-grid, .vc-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vc-set-card, .vc-usage-card { padding: 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--site-line); display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.vc-set-card b, .vc-usage-card b { font-size: 13px; color: #fff; font-weight: 500; }
.vc-set-card span, .vc-usage-card span { color: var(--site-text-2); font-size: 11.5px; }

/* ---------- BENEFITS ---------- */
.vc-benefits { padding: 120px 0 100px; background: var(--site-bg); border-top: 1px solid var(--site-line); }
.vc-benefits-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--site-line); }
.vc-benefit { padding: 24px 20px; border-right: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,0.012); transition: background 220ms; min-height: 200px; }
.vc-benefit:nth-child(5n) { border-right: 0; }
.vc-benefit:nth-last-child(-n+5) { border-bottom: 0; }
.vc-benefit:hover { background: rgba(0,85,255,0.06); }
.vc-benefit-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--site-cyan); }
.vc-benefit h3 { font-size: 15px; line-height: 1.25; color: #fff; font-weight: 500; margin: 0; letter-spacing: -0.005em; }
.vc-benefit p { font-size: 12.5px; line-height: 1.55; color: var(--site-text-3); margin: 0; }

/* ---------- DEPLOY ---------- */
.vc-deploy { padding: 120px 0 100px; background: var(--site-bg-2); border-top: 1px solid var(--site-line); }
.vc-deploy-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 40px; }
.vc-deploy-step { position: relative; padding: 32px 24px 24px; border-right: 1px solid var(--site-line); }
.vc-deploy-step:last-child { border-right: 0; }
.vc-deploy-line { position: absolute; top: 16px; left: 0; right: 0; height: 1px; background: var(--site-line); }
.vc-deploy-dot { position: absolute; top: 12px; left: 24px; width: 9px; height: 9px; border-radius: 50%; background: var(--site-cyan); box-shadow: 0 0 0 3px rgba(79,200,255,0.15), 0 0 12px var(--site-cyan); }
.vc-deploy-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--site-cyan); margin-bottom: 8px; }
.vc-deploy-title { font-size: 18px; line-height: 1.2; color: #fff; font-weight: 500; margin-bottom: 6px; }
.vc-deploy-dur { font-family: var(--font-mono); font-size: 11px; color: var(--site-mint); letter-spacing: 0.06em; margin-bottom: 12px; }
.vc-deploy-desc { font-size: 13px; line-height: 1.55; color: var(--site-text-2); margin: 0; }
.vc-deploy-note { margin-top: 32px; padding: 16px 20px; border: 1px solid var(--site-line); background: rgba(255,176,32,0.04); font-size: 13px; color: var(--site-text-2); line-height: 1.5; }
.vc-deploy-note span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--site-amber); margin-right: 10px; }

/* ---------- ENABLE ---------- */
.vc-enable { padding: 120px 0 100px; background: var(--site-bg); border-top: 1px solid var(--site-line); }
.vc-enable-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--site-line); }
.vc-enable-col { padding: 32px 28px; border-right: 1px solid var(--site-line); background: rgba(255,255,255,0.012); display: flex; flex-direction: column; gap: 14px; }
.vc-enable-col:last-child { border-right: 0; }
.vc-enable-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--enable-c, var(--site-cyan)); }
.vc-enable-col h3 { font-size: 22px; line-height: 1.2; color: #fff; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 8px; }
.vc-enable-col ul { list-style: none; padding: 0; margin: 0; }
.vc-enable-col li { padding: 8px 0; font-size: 13.5px; color: var(--site-text); border-top: 1px solid var(--site-line); display: flex; align-items: center; gap: 10px; }
.vc-enable-col li:first-child { border-top: 0; }
.vc-enable-col li::before { content: ""; width: 5px; height: 5px; background: var(--enable-c, var(--site-cyan)); flex-shrink: 0; }

/* ---------- PACK ---------- */
.vc-pack { padding: 120px 0 100px; background: var(--site-bg-2); border-top: 1px solid var(--site-line); }
.vc-pack-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vc-pack-card { padding: 32px 28px; background: linear-gradient(180deg, rgba(15,21,48,0.5), rgba(5,7,15,0.4)); border: 1px solid var(--site-line); display: flex; flex-direction: column; gap: 16px; position: relative; }
.vc-pack-card.feat { border-color: rgba(94,255,164,0.4); background: linear-gradient(180deg, rgba(94,255,164,0.06), rgba(5,7,15,0.4)); }
.vc-pack-badge { position: absolute; top: -1px; right: -1px; padding: 4px 10px; background: var(--site-mint); color: #001233; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; }
.vc-pack-tier { font-family: var(--font-display); font-size: 28px; color: #fff; font-weight: 400; letter-spacing: -0.02em; }
.vc-pack-desc { font-size: 14px; line-height: 1.5; color: var(--site-text-2); margin: 0; }
.vc-pack-list { list-style: none; padding: 0; margin: 0; }
.vc-pack-list li { padding: 10px 0; font-size: 13px; color: var(--site-text); border-top: 1px solid var(--site-line); display: flex; align-items: center; gap: 10px; }
.vc-pack-list li:first-child { border-top: 0; }
.vc-pack-list li svg { color: var(--pack-c, var(--site-cyan)); flex-shrink: 0; }
.vc-pack-cta { margin-top: 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vc-pack-foot { font-size: 13px; color: var(--site-text-3); font-family: var(--font-mono); letter-spacing: 0.04em; }

/* ---------- INTEGRATIONS ---------- */
.vc-int { padding: 120px 0 100px; background: var(--site-bg); border-top: 1px solid var(--site-line); position: relative; overflow: hidden; }
.vc-int-stage { position: relative; height: 520px; margin: 40px 0 80px; border: 1px solid var(--site-line); background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,85,255,0.10), transparent 70%), linear-gradient(180deg, rgba(15,21,48,0.4), rgba(5,7,15,0.3)); overflow: hidden; }
.vc-int-orbit { position: relative; width: 100%; height: 100%; }
.vc-int-orbit::before, .vc-int-orbit::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid var(--site-line); transform: translate(-50%, -50%); pointer-events: none; }
.vc-int-orbit::before { width: 60%; height: 60%; border-style: dashed; opacity: 0.5; }
.vc-int-orbit::after { width: 90%; height: 70%; opacity: 0.3; }
.vc-int-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px 28px; min-width: 240px; background: linear-gradient(135deg, rgba(0,85,255,0.25), rgba(25,0,255,0.18)); border: 1px solid rgba(79,200,255,0.5); box-shadow: 0 0 0 1px rgba(79,200,255,0.15), 0 0 60px rgba(0,85,255,0.25); display: flex; flex-direction: column; gap: 4px; text-align: center; z-index: 5; }
.vc-int-core-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--site-cyan); }
.vc-int-core-title { font-family: var(--font-display); font-size: 22px; color: #fff; font-weight: 400; letter-spacing: -0.01em; }
.vc-int-core-stack { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--site-text-2); margin-top: 2px; }
.vc-int-node { position: absolute; width: 180px; padding: 10px 14px; background: rgba(15,21,48,0.85); backdrop-filter: blur(8px); border: 1px solid var(--site-line-2); display: flex; flex-direction: column; gap: 2px; z-index: 3; }
.vc-int-node-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--site-cyan); }
.vc-int-node-items { font-size: 11.5px; color: var(--site-text-2); line-height: 1.35; }
.vc-int-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.vc-int-grid, .vc-int-list { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--site-line); }
.vc-int-card, .vc-int-listcard { padding: 18px 16px; border-right: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,0.012); }
.vc-int-card:nth-child(5n), .vc-int-listcard:nth-child(5n) { border-right: 0; }
.vc-int-card:nth-last-child(-n+5), .vc-int-listcard:nth-last-child(-n+5) { border-bottom: 0; }
.vc-int-listcat, .vc-int-kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--site-cyan); }
.vc-int-name { font-size: 14px; color: #fff; font-weight: 500; }
.vc-int-status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--site-mint); }
.vc-int-listcard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.vc-int-listcard li { font-size: 12.5px; color: var(--site-text-2); padding: 3px 0; }

/* ---------- TECH ---------- */
.vc-tech { padding: 120px 0 100px; background: var(--site-bg-2); border-top: 1px solid var(--site-line); }
.vc-tech-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--site-line); }
.vc-tech-cell { padding: 18px 18px 20px; border-right: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); background: rgba(255,255,255,0.012); transition: background 220ms; min-height: 110px; }
.vc-tech-cell:nth-child(4n) { border-right: 0; }
.vc-tech-cell:hover { background: rgba(0,85,255,0.06); }
.vc-tech-h { font-size: 13.5px; color: #fff; font-weight: 500; margin-bottom: 6px; }
.vc-tech-d { font-size: 12px; color: var(--site-text-3); line-height: 1.5; }

/* ---------- FINAL ---------- */
.vc-final { padding: 120px 0; background: var(--site-bg); border-top: 1px solid var(--site-line); }
.vc-final-card { position: relative; padding: 80px 64px; border: 1px solid rgba(79,200,255,0.3); background: radial-gradient(60% 100% at 50% 0%, rgba(0,85,255,0.18), transparent 70%), linear-gradient(180deg, rgba(15,21,48,0.65), rgba(5,7,15,0.4)); text-align: center; overflow: hidden; }
.vc-final-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--site-cyan); margin-bottom: 24px; }
.vc-final-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--site-mint); box-shadow: 0 0 10px var(--site-mint); animation: pulse 1.6s infinite; }
.vc-final-h { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.03em; color: #fff; font-weight: 400; margin: 0 0 24px; }
.vc-final-sub { font-size: 17px; line-height: 1.55; color: var(--site-text-2); max-width: 700px; margin: 0 auto 40px; }
.vc-final-ctas { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- DEMO MODAL ---------- */
.vc-modal-back { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 32px; animation: vc-fade 240ms ease-out; }
@keyframes vc-fade { from { opacity: 0; } to { opacity: 1; } }
.vc-modal { position: relative; width: min(1200px, 96vw); max-height: 92vh; overflow: auto; background: var(--site-bg); border: 1px solid var(--site-line-2); }
.vc-modal-close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 32px; height: 32px; border: 1px solid var(--site-line-2); background: rgba(0,0,0,0.5); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vc-modal-close:hover { background: rgba(255,255,255,0.08); }
.vc-modal-grid { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 600px; }
.vc-modal-form { padding: 36px 40px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--site-line); }
.vc-modal-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--site-cyan); }
.vc-modal-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--site-mint); box-shadow: 0 0 8px var(--site-mint); animation: pulse 1.4s infinite; }
.vc-modal-title { font-family: var(--font-display); font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; font-weight: 400; margin: 0; }
.vc-modal-sub { font-size: 14px; color: var(--site-text-2); margin: 0; line-height: 1.5; }
.vc-field { display: flex; flex-direction: column; gap: 6px; }
.vc-field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--site-text-3); }
.vc-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.vc-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--site-line); background: rgba(255,255,255,0.02); color: var(--site-text-2); font-size: 12px; font: inherit; cursor: pointer; }
.vc-seg-btn svg { color: var(--site-cyan); }
.vc-seg-btn.active { color: #fff; background: rgba(0,85,255,0.12); border-color: rgba(79,200,255,0.4); }
.vc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.vc-chip { padding: 5px 10px; border: 1px solid var(--site-line); background: rgba(255,255,255,0.02); color: var(--site-text-2); font-size: 11.5px; font: inherit; cursor: pointer; }
.vc-chip.active { color: var(--site-cyan); border-color: rgba(79,200,255,0.4); background: rgba(79,200,255,0.08); }
.vc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.vc-cellbtn { padding: 9px 12px; border: 1px solid var(--site-line); background: rgba(255,255,255,0.02); color: var(--site-text-2); font-size: 12px; font: inherit; cursor: pointer; text-align: left; }
.vc-cellbtn.active { color: #fff; background: rgba(0,85,255,0.12); border-color: rgba(79,200,255,0.4); }
.vc-textarea, .vc-input { width: 100%; padding: 10px 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--site-line); color: #fff; font: inherit; font-size: 13px; resize: vertical; }
.vc-modal-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vc-modal-foot { font-size: 11.5px; color: var(--site-text-3); line-height: 1.5; margin: 0; }
.vc-modal-preview { padding: 28px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, rgba(15,21,48,0.4), rgba(5,7,15,0.4)); }
.vc-mp-chrome { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border: 1px solid var(--site-line); background: rgba(0,0,0,0.3); font-family: var(--font-mono); font-size: 10.5px; color: var(--site-text-3); letter-spacing: 0.1em; }
.vc-mp-chrome .dot.rec { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--site-mint); box-shadow: 0 0 8px var(--site-mint); animation: pulse 1.4s infinite; margin-right: 6px; }
.vc-mp-stage { flex: 1; padding: 16px; border: 1px solid var(--site-line); background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 10px; min-height: 380px; }
.vc-mp-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-mp-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--site-text-2); padding: 4px 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--site-line); }
.vc-mp-tag.accent { color: var(--site-cyan); border-color: rgba(79,200,255,0.3); background: rgba(79,200,255,0.06); }

/* Voice / Chat / WhatsApp previews */
.vc-vprev { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.vc-vprev-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--site-text-3); }
.vc-vprev-call { padding: 18px; background: rgba(0,0,0,0.3); border: 1px solid var(--site-line); display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.vc-vprev-name { font-size: 16px; color: #fff; font-weight: 500; }
.vc-vprev-num { font-family: var(--font-mono); font-size: 12px; color: var(--site-text-3); }
.vc-vprev-status { font-family: var(--font-mono); font-size: 11px; color: var(--site-mint); letter-spacing: 0.1em; }
.vc-vprev-phone { width: 60px; height: 60px; border: 1px solid var(--site-line-2); border-radius: 50%; display: grid; place-items: center; color: var(--site-cyan); }
.vc-vprev-wave { display: flex; align-items: center; gap: 2px; height: 36px; width: 100%; }
.vc-vprev-wave span { display: block; flex: 1; background: var(--site-cyan); transition: height 80ms linear; opacity: 0.7; }
.vc-vprev-trans { padding: 12px; border: 1px solid var(--site-line); background: rgba(0,0,0,0.2); font-size: 12.5px; color: var(--site-text); line-height: 1.5; }
.vc-vprev-line { padding: 4px 0; border-top: 1px dashed var(--site-line); }
.vc-vprev-line:first-child { border-top: 0; }
.vc-vprev-controls { display: flex; gap: 8px; justify-content: center; padding-top: 6px; }
.vc-cprev, .vc-wprev { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.vc-cprev-bubble, .vc-wprev-bubble { padding: 8px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--site-line); font-size: 13px; color: #fff; align-self: flex-start; max-width: 85%; line-height: 1.4; }
.vc-cprev-bubble.out, .vc-wprev-bubble.out { background: rgba(0,85,255,0.12); border-color: rgba(79,200,255,0.3); align-self: flex-end; }
.vc-cprev-input { margin-top: auto; padding: 8px 12px; border: 1px solid var(--site-line); background: rgba(0,0,0,0.3); color: var(--site-text-3); font-size: 12px; }
.vc-cprev-stamp, .vc-wprev-stamp { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--site-text-3); padding: 2px 0; }
.vc-wprev-head { padding: 8px 12px; background: #075E54; color: #fff; font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.vc-wprev-body { flex: 1; padding: 12px; background: #0B141A; display: flex; flex-direction: column; gap: 6px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 50ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 100ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 150ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 200ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 250ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 300ms; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 350ms; }
.reveal-stagger.in > *:nth-child(9) { transition-delay: 400ms; }
.reveal-stagger.in > *:nth-child(10) { transition-delay: 450ms; }

/* Responsive */
@media (max-width: 1200px) {
  .vc-hv-grid { grid-template-columns: 1fr; }
  .vc-arch-stage { grid-template-columns: 1fr; }
  .vc-pillars-grid { grid-template-columns: 1fr 1fr; }
  .vc-pillar:nth-child(3n) { border-right: 1px solid var(--site-line); }
  .vc-pillar:nth-child(2n) { border-right: 0; }
  .vc-benefits-grid { grid-template-columns: repeat(3, 1fr); }
  .vc-benefit:nth-child(5n) { border-right: 1px solid var(--site-line); }
  .vc-benefit:nth-child(3n) { border-right: 0; }
  .vc-tech-grid { grid-template-columns: repeat(3, 1fr); }
  .vc-tech-cell:nth-child(4n) { border-right: 1px solid var(--site-line); }
  .vc-tech-cell:nth-child(3n) { border-right: 0; }
  .vc-int-grid, .vc-int-list { grid-template-columns: repeat(3, 1fr); }
  .vc-int-card:nth-child(5n), .vc-int-listcard:nth-child(5n) { border-right: 1px solid var(--site-line); }
  .vc-int-card:nth-child(3n), .vc-int-listcard:nth-child(3n) { border-right: 0; }
  .vc-how-flow { grid-template-columns: repeat(3, 1fr); }
  .vc-how-arrow { display: none; }
  .vc-modal-grid { grid-template-columns: 1fr; }
  .vc-modal-form { border-right: 0; border-bottom: 1px solid var(--site-line); }
  .vc-dash-grid { grid-template-columns: 1fr; }
  .vc-dash-cards { grid-template-columns: 1fr 1fr; }
  .vc-conv { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 800px) {
  .vc-pillars-grid, .vc-benefits-grid, .vc-tech-grid, .vc-int-grid, .vc-int-list, .vc-scen-grid, .vc-pack-grid, .vc-enable-grid, .vc-deploy-rail, .vc-how-flow, .vc-ind-cols { grid-template-columns: 1fr; }
  .vc-pillar, .vc-benefit, .vc-tech-cell, .vc-int-card, .vc-int-listcard, .vc-enable-col, .vc-deploy-step { border-right: 0 !important; }
  .vc-final-card { padding: 56px 28px; }
  .vc-int-stage { height: 380px; }
  .vc-int-node { width: 130px; padding: 8px 10px; }
}