/* ==========================================================================
   Morphly Marketing — Landing Styles
   ========================================================================== */

@import url('../../colors_and_type.css');

body { background: var(--void); color: var(--fg-1); margin: 0; }

/* ----- Layout ----- */
.section { max-width: 1280px; margin: 0 auto; padding: 96px 32px; }
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 48px; max-width: 720px; }
.section-head .h2 { margin: 0; }
.section-sub { font-size: 18px; color: var(--fg-3); margin: 0; line-height: 1.5; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-ghost {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: 12px; text-decoration: none;
  transition: all 200ms var(--ease-out);
}
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow-magenta); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 64px rgba(176,38,255,.6); }
.btn-secondary { background: rgba(255,255,255,.06); color: var(--fg-1); border: 1px solid rgba(255,255,255,.12); }
.btn-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { color: var(--fg-1); }
.lg { padding: 18px 28px; font-size: 16px; }
.full { width: 100%; justify-content: center; }
.arr { font-family: var(--font-mono); transition: transform 200ms var(--ease-out); }
.btn-primary:hover .arr { transform: translateX(4px); }

/* Labels & badges */
.lbl-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; }
.grad-text { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.money-text { background: linear-gradient(135deg, #00ff88, #00f0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metric-grad { font-family: var(--font-mono); font-weight: 700; font-size: 36px; background: linear-gradient(135deg, #00ff88, #00f0ff); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(13,1,24,.7); backdrop-filter: blur(24px); border-bottom: 1px solid var(--hairline); }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; position: relative; }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -1.2px; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-dot { position: absolute; top: 4px; right: -8px; width: 6px; height: 6px; border-radius: 999px; background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 14px; color: var(--fg-3); text-decoration: none; transition: color 150ms; }
.nav-links a:hover { color: var(--fg-1); }
.nav-cta { display: flex; gap: 8px; align-items: center; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: 96px 32px 128px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background:
  radial-gradient(at 20% 30%, var(--magenta-a-30) 0%, transparent 50%),
  radial-gradient(at 80% 70%, var(--cyan-a-30) 0%, transparent 50%); pointer-events: none; }
.hero-grid { position: absolute; inset: 0; background-image:
  linear-gradient(rgba(0,240,255,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,240,255,.05) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); pointer-events: none; }
.hero-inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.badge-row { display: flex; gap: 8px; margin-bottom: 32px; }
.badge-hot { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; padding: 6px 10px; border-radius: 6px; background: var(--pink); color: #fff; }
.badge-mono { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--fg-3); border: 1px solid var(--hairline); }
.h-display { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 7vw, 96px); line-height: .92; letter-spacing: -.04em; margin: 0 0 24px; color: var(--fg-1); }
.hero-sub { font-size: 18px; color: var(--fg-2); line-height: 1.55; margin: 0 0 32px; max-width: 540px; }
.cta-row { display: flex; gap: 12px; margin-bottom: 56px; flex-wrap: wrap; }
.proof-row { display: flex; gap: 48px; padding-top: 32px; }
.proof-row > div { display: flex; flex-direction: column; gap: 8px; }
.proof-icon { width: 28px; height: 28px; color: var(--cyan); }
.proof-num { font-family: var(--font-mono); font-weight: 700; font-size: 28px; color: var(--fg-1); letter-spacing: -.02em; }
.proof-lbl { font-size: 12px; color: var(--fg-3); }

.hero-right { position: relative; }
.portrait-card { position: relative; aspect-ratio: 3/4; border-radius: 32px 4px 32px 4px; overflow: hidden; border: 1px solid rgba(176,38,255,.3); box-shadow: 0 16px 64px rgba(176,38,255,.3); }
.portrait-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(13,1,24,.95) 100%); pointer-events: none; }
.portrait-meta { position: absolute; top: 20px; left: 20px; display: flex; gap: 8px; align-items: center; }
.badge-live { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; padding: 5px 9px; border-radius: 6px; background: rgba(0,255,136,.15); color: var(--money); border: 1px solid rgba(0,255,136,.3); backdrop-filter: blur(12px); }
.portrait-name { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); padding: 5px 9px; border-radius: 6px; background: rgba(0,0,0,.4); backdrop-filter: blur(12px); border: 1px solid var(--hairline); }
.portrait-video-stat { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.portrait-video-stat .lbl-mono { color: var(--fg-1); font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
.portrait-stat { position: absolute; bottom: 24px; left: 24px; right: 24px; display: flex; flex-direction: column; gap: 4px; }
.float-bubble { position: absolute; background: rgba(26,5,51,.85); backdrop-filter: blur(16px); border: 1px solid rgba(0,255,136,.3); border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 8px 32px rgba(0,255,136,.2); animation: float 4s ease-in-out infinite; }
.float-bubble .lbl-mono { color: var(--money); font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
.bubble-sub { font-size: 11px; color: var(--fg-3); }
.bubble-1 { top: 12%; right: -32px; animation-delay: 0s; }
.bubble-2 { bottom: 18%; left: -36px; animation-delay: 1.5s; border-color: rgba(0,240,255,.3); box-shadow: 0 8px 32px rgba(0,240,255,.2); }
.bubble-2 .lbl-mono { color: var(--cyan); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ==========================================================================
   How it works
   ========================================================================== */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.how-card { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(180deg, var(--surface-1), rgba(26,5,51,.64)); border: 1px solid var(--hairline); border-radius: 22px; padding: 28px; box-shadow: var(--shadow-inset-top); overflow: hidden; transition: transform 200ms var(--ease-out), border-color 200ms, box-shadow 200ms, background 200ms; }
.how-card::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; background: var(--grad-primary); opacity: .72; }
.how-card.is-clickable { cursor: pointer; outline: none; background:
  radial-gradient(circle at 74% 18%, rgba(0,240,255,.18), transparent 34%),
  linear-gradient(180deg, rgba(176,38,255,.2), rgba(26,5,51,.72)); border-color: rgba(0,240,255,.26); padding-bottom: 76px; }
.how-card.is-clickable::before { content: ""; position: absolute; inset: 1px; border-radius: 21px; border: 1px solid rgba(255,255,255,.05); pointer-events: none; }
.how-card.is-clickable:hover, .how-card.is-clickable:focus-visible, .how-card.is-open { transform: translateY(-4px); border-color: rgba(0,240,255,.52); box-shadow: 0 18px 56px rgba(0,240,255,.13), 0 0 44px rgba(176,38,255,.22), var(--shadow-inset-top); }
.how-card.is-clickable:hover .how-card-cta, .how-card.is-clickable:focus-visible .how-card-cta, .how-card.is-open .how-card-cta { color: var(--fg-1); }
.how-card.is-clickable:hover .how-card-cta i, .how-card.is-clickable:focus-visible .how-card-cta i { transform: translateY(2px); border-color: rgba(255,255,255,.24); background: var(--grad-primary); color: #fff; box-shadow: 0 0 24px rgba(176,38,255,.42); }
.how-card.is-open .how-card-cta i { transform: translateY(-2px); border-color: rgba(255,255,255,.24); background: var(--grad-primary); color: #fff; box-shadow: 0 0 24px rgba(176,38,255,.42); }
.how-card.is-open { background:
  radial-gradient(circle at 76% 18%, rgba(0,240,255,.24), transparent 35%),
  linear-gradient(180deg, rgba(176,38,255,.28), rgba(26,5,51,.76)); }
.how-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.how-idx { font-family: var(--font-mono); font-size: 42px; line-height: .9; font-weight: 700; letter-spacing: -.06em; color: rgba(255,255,255,.16); }
.how-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--cyan); padding: 5px 8px; border: 1px solid rgba(0,240,255,.24); border-radius: 6px; background: rgba(0,240,255,.08); }
.how-card h3 { position: relative; z-index: 1; font-family: var(--font-display); font-size: 26px; line-height: 1.05; letter-spacing: -.03em; margin: 0 0 12px; color: var(--fg-1); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.how-card p { position: relative; z-index: 1; margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.55; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.how-card-cta { position: absolute; left: 28px; right: 28px; bottom: 22px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-1); padding-top: 16px; border-top: 1px solid rgba(0,240,255,.22); transition: color 180ms; }
.how-card-cta span { color: var(--cyan); }
.how-card-cta i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(0,240,255,.28); background: rgba(0,240,255,.09); color: var(--cyan); font-family: var(--font-body); font-size: 22px; font-style: normal; line-height: 1; transition: transform 180ms var(--ease-out), border-color 180ms, background 180ms, color 180ms, box-shadow 180ms; }
.how-photo-bg { position: absolute; inset: 0; z-index: 0; border-radius: 22px; overflow: hidden; }
.how-photo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%); pointer-events: none; }
.how-photo-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: brightness(1.25) contrast(0.95); }
.how-photo-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,1,24,.35) 0%, rgba(13,1,24,.35) 55%, rgba(13,1,24,.85) 85%, rgba(13,1,24,1) 100%); pointer-events: none; border-radius: 22px; }
.how-photo-content { position: absolute; top: 24px; left: 28px; right: 28px; z-index: 2; }
.how-photo-title { position: relative; z-index: 2; font-size: 36px !important; letter-spacing: -.04em !important; margin-bottom: 10px !important; line-height: 1 !important; }
.how-photo-subtitle { position: relative; z-index: 2; font-size: 14px !important; color: rgba(255,255,255,.72) !important; margin: 0 !important; line-height: 1.45 !important; max-width: 92%; }
.model-flow { margin-top: 22px; padding: 24px; border: 1px solid rgba(0,240,255,.22); border-radius: 28px; background:
  radial-gradient(circle at 18% 0%, rgba(176,38,255,.18), transparent 36%),
  radial-gradient(circle at 82% 10%, rgba(0,240,255,.15), transparent 34%),
  rgba(13,1,24,.72); box-shadow: 0 18px 70px rgba(0,0,0,.35), var(--shadow-inset-top); }
.model-flow-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.model-flow-head strong { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: -.03em; color: var(--fg-1); }
.model-flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.flow-video-card { position: relative; min-height: 430px; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.045); border: 1px solid var(--hairline); overflow: hidden; }
.flow-video-num { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--fg-1); padding: 7px 9px; border-radius: 999px; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); }
.flow-video-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 260px; border-radius: 18px; background: rgba(255,255,255,.05); overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.flow-video-frame::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 100% 18px; opacity: .36; }
.flow-video-card h4 { position: relative; z-index: 1; margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; line-height: 1.12; letter-spacing: -.03em; color: var(--fg-1); text-wrap: balance; }
.flow-video-card p { position: relative; z-index: 1; margin: 0; color: var(--fg-3); font-size: 13px; line-height: 1.45; text-wrap: pretty; }
.frame-model { background: linear-gradient(180deg, rgba(176,38,255,.18), rgba(13,1,24,.8)); }
.frame-dance { background: linear-gradient(180deg, rgba(0,240,255,.16), rgba(13,1,24,.82)); }
.frame-result { background: linear-gradient(180deg, rgba(0,255,136,.13), rgba(176,38,255,.16) 48%, rgba(13,1,24,.86)); }
.source-shot,
.reference-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.source-shot { object-position: 50% 42%; filter: saturate(1.08) contrast(1.03); transform: scale(1.02); }
.reference-video { display: block; background: #08030f url("assets/dance-reference-poster.jpg") center / cover no-repeat; object-position: center; }
.frame-dance::after { content: "dance reference"; position: absolute; left: 12px; bottom: 12px; z-index: 3; padding: 7px 9px; border-radius: 999px; background: rgba(0,0,0,.48); border: 1px solid rgba(255,255,255,.14); color: var(--fg-1); font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(12px); }
.result-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; z-index: 1; filter: saturate(1.06) contrast(1.02); }
.frame-result::after { content: "generated result"; position: absolute; left: 12px; bottom: 12px; z-index: 3; padding: 7px 9px; border-radius: 999px; background: rgba(0,255,136,.14); border: 1px solid rgba(0,255,136,.38); color: #b8ffd9; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(12px); }
.dance-ref { position: absolute; inset: 34px 26px; display: grid; grid-template-rows: repeat(3, 1fr); gap: 12px; }
.dance-ref i { display: block; border-radius: 18px; background: linear-gradient(90deg, rgba(0,240,255,.18), rgba(255,255,255,.12)); border: 1px solid rgba(0,240,255,.24); transform: skewX(-8deg); }
.dance-ref i:nth-child(2) { margin-left: 34px; background: linear-gradient(90deg, rgba(176,38,255,.2), rgba(255,255,255,.1)); }
.dance-ref i:nth-child(3) { margin-right: 38px; background: linear-gradient(90deg, rgba(0,255,136,.15), rgba(255,255,255,.1)); }
.traffic-dash { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; background: linear-gradient(135deg, rgba(176,38,255,.04), rgba(0,240,255,.03)); }
.dash-mock { width: auto; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); }
.tracking-panel { width: min(100%, 330px); min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: rgba(10,13,18,.88); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 34px rgba(0,0,0,.28); font-family: var(--font-body); }
.tracking-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tracking-top span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.tracking-top strong { max-width: 170px; color: var(--fg-1); font-size: 14px; line-height: 1.15; text-align: right; }
.platform-links { display: flex; flex-direction: column; gap: 8px; }
.platform-link { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.platform-link.active { background: rgba(0,240,255,.08); border-color: rgba(0,240,255,.26); }
.platform-dot { width: 9px; height: 9px; border-radius: 999px; box-shadow: 0 0 12px currentColor; }
.platform-dot.tiktok { color: var(--cyan); background: var(--cyan); }
.platform-dot.reels { color: var(--pink); background: var(--pink); }
.platform-dot.tg { color: var(--money); background: var(--money); }
.platform-link strong { display: block; margin-bottom: 4px; color: var(--fg-1); font-size: 12px; }
.platform-link code { display: block; max-width: 178px; color: var(--fg-3); font-family: var(--font-mono); font-size: 9px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.platform-link em { color: var(--cyan); font-style: normal; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.utm-strip { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 10px; border-radius: 10px; background: rgba(0,0,0,.22); border: 1px dashed rgba(0,240,255,.2); }
.utm-strip span { color: var(--fg-2); font-family: var(--font-mono); font-size: 9px; line-height: 1.35; }
.lead-card { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.lead-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lead-avatar { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: rgba(176,38,255,.16); color: #e7c4ff; font-weight: 700; }
.lead-head strong { color: var(--fg-1); font-family: var(--font-mono); font-size: 12px; }
.lead-head p { margin: 3px 0 0; color: var(--fg-3); font-size: 10px; line-height: 1.3; }
.lead-fields { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 7px 10px; align-items: center; }
.lead-fields span { color: var(--fg-4); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.lead-fields b { min-width: 0; color: var(--fg-1); font-family: var(--font-mono); font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-line { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin-top: auto; color: var(--fg-2); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.route-line i { height: 1px; background: linear-gradient(90deg, rgba(0,240,255,.15), rgba(0,240,255,.65)); position: relative; }
.route-line i::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid rgba(0,240,255,.75); border-right: 1px solid rgba(0,240,255,.75); transform: rotate(45deg); }
.report-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.report-summary div { padding: 10px 8px; border-radius: 10px; background: rgba(0,255,136,.055); border: 1px solid rgba(0,255,136,.16); }
.report-summary span { display: block; color: var(--fg-3); font-size: 9px; margin-bottom: 6px; }
.report-summary strong { display: block; color: var(--money); font-family: var(--font-mono); font-size: 14px; letter-spacing: -.02em; }
.channel-table { display: flex; flex-direction: column; gap: 7px; }
.channel-table div { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 9px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.075); }
.channel-table span { color: var(--fg-1); font-size: 11px; font-weight: 700; }
.channel-table b { color: var(--fg-2); font-size: 10px; font-weight: 600; white-space: nowrap; }
.channel-table em { color: var(--money); font-family: var(--font-mono); font-size: 10px; font-style: normal; white-space: nowrap; }
.best-source { margin-top: auto; padding: 10px; border-radius: 10px; color: #b8ffd9; background: rgba(0,255,136,.08); border: 1px solid rgba(0,255,136,.2); font-size: 11px; line-height: 1.35; }
.dance-stick { position: absolute; left: 50%; top: 50%; display: block; background: var(--fg-1); box-shadow: 0 0 18px rgba(0,240,255,.4); z-index: 2; }
.dance-stick.head { width: 34px; height: 34px; margin-left: -17px; margin-top: -92px; border-radius: 50%; background: linear-gradient(135deg, #f5f0ff, #ffb5dc); }
.dance-stick.body { width: 9px; height: 78px; margin-left: -5px; margin-top: -54px; border-radius: 999px; background: linear-gradient(#ff2e93, #b026ff); transform: rotate(-8deg); }
.dance-stick.arm, .dance-stick.leg { width: 8px; height: 76px; border-radius: 999px; transform-origin: 50% 8px; background: linear-gradient(#00f0ff, #f5f0ff); }
.dance-stick.arm-a { margin-left: -10px; margin-top: -45px; transform: rotate(58deg); }
.dance-stick.arm-b { margin-left: 3px; margin-top: -42px; transform: rotate(-64deg); }
.dance-stick.leg-a { margin-left: -10px; margin-top: 18px; transform: rotate(24deg); background: linear-gradient(#b026ff, #f5f0ff); }
.dance-stick.leg-b { margin-left: 8px; margin-top: 16px; transform: rotate(-30deg); background: linear-gradient(#b026ff, #f5f0ff); }
.frame-traffic-1 { background: linear-gradient(180deg, rgba(176,38,255,.14), rgba(13,1,24,.82)); }
.frame-traffic-2 { background: linear-gradient(180deg, rgba(0,240,255,.14), rgba(13,1,24,.82)); }
.frame-traffic-3 { background: linear-gradient(180deg, rgba(0,255,136,.13), rgba(13,1,24,.82)); }
.traffic-funnel-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; }
.mini-funnel { width: 100%; height: 100%; max-width: 280px; max-height: 200px; opacity: .92; font-family: var(--font-mono); }
.frame-traffic-3 { background: linear-gradient(180deg, rgba(0,255,136,.14), rgba(13,1,24,.84)); }
.frame-bot-1 { background: linear-gradient(180deg, rgba(0,240,255,.14), rgba(13,1,24,.84)); }
.frame-bot-2 { background: linear-gradient(180deg, rgba(176,38,255,.18), rgba(13,1,24,.84)); }
.frame-bot-3 { background: linear-gradient(180deg, rgba(0,255,136,.15), rgba(13,1,24,.84)); }
.bot-chat-frame { position: absolute; inset: 12px 12px 12px; border-radius: 18px; background: linear-gradient(180deg, #0a0d12, #12151c); overflow: hidden; border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.bot-chat-frame .dash-mock { width: 100%; height: 100%; }
.bot-chat-frame .chat-mock { width: 100%; height: 100%; }
.bot-chat-frame .chat-mock svg { width: 100%; height: 100%; }
.chat-ui { width: 100%; height: 100%; display: flex; flex-direction: column; color: #f5f0ff; font-family: -apple-system, sans-serif; }
.chat-statusbar { display: flex; justify-content: space-between; padding: 18px 24px; font-size: 17px; font-weight: 600; opacity: 0.6; }
.chat-header { display: flex; align-items: center; gap: 16px; padding: 16px 24px; background: rgba(10,13,18,0.92); border-bottom: 1px solid rgba(255,255,255,0.06); }
.chat-avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(176,38,255,0.2); display: flex; align-items: center; justify-content: center; color: #e7c4ff; font-size: 20px; font-weight: 600; }
.chat-info { display: flex; flex-direction: column; gap: 4px; }
.chat-name { font-size: 19px; font-weight: 600; }
.chat-status { font-size: 15px; color: #00ff88; }
.chat-messages { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.chat-msg { display: flex; flex-direction: column; gap: 6px; }
.chat-msg.her { align-items: flex-start; }
.chat-msg.his { align-items: flex-end; }
.msg-bubble { padding: 16px 20px; border-radius: 22px; font-size: 19px; line-height: 1.4; max-width: 75%; }
.chat-msg.her .msg-bubble { background: rgba(176,38,255,0.15); }
.chat-msg.his .msg-bubble { background: rgba(255,255,255,0.08); }
.msg-bubble > div { margin-bottom: 4px; }
.msg-bubble > div:last-child { margin-bottom: 0; }
.msg-time { font-size: 14px; color: #a896c4; padding: 0 8px; }
.chat-msg.his .msg-time { text-align: right; }
.msg-bubble.typing { background: rgba(176,38,255,0.1); display: flex; gap: 8px; padding: 16px 18px; }
.msg-bubble.typing span { width: 10px; height: 10px; border-radius: 50%; background: #b026ff; animation: typingDot 1.4s infinite; }
.msg-bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
.msg-bubble.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.msg-bubble.premium-card { max-width: 90%; background: rgba(0,255,136,0.12); border: 2px solid rgba(0,255,136,0.3); padding: 22px 24px; }
.premium-title { font-size: 18px; font-weight: 700; color: #b8ffd9; text-align: center; margin-bottom: 14px; letter-spacing: 0.5px; }
.premium-divider { height: 1px; background: rgba(255,255,255,0.12); margin-bottom: 16px; }
.premium-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.premium-list > div { font-size: 17px; color: #f5f0ff; }
.premium-cta { width: 100%; padding: 14px 20px; background: #00ff88; color: #0a0d12; font-size: 17px; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; margin-bottom: 10px; transition: all 0.2s; }
.premium-cta:hover { background: #00ff88; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,255,136,0.3); }
.premium-note { font-size: 13px; color: #a896c4; text-align: center; }

/* Bot Configuration UI */
.bot-config-ui { width: 100%; height: 100%; padding: 28px 24px; overflow-y: auto; }
.config-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.config-title { font-size: 20px; font-weight: 700; color: #f5f0ff; font-family: var(--font-mono); }
.config-status { font-size: 14px; color: #00ff88; font-weight: 600; }
.config-section { margin-bottom: 32px; }
.config-label { font-size: 12px; font-weight: 600; color: #a896c4; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
.config-options { display: flex; gap: 10px; }
.config-option { padding: 10px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #b8a4d4; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.config-option.active { background: rgba(176,38,255,0.15); border-color: rgba(176,38,255,0.4); color: #e7c4ff; }
.config-option:hover { background: rgba(255,255,255,0.06); }

/* Content Grid */
.config-content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.content-item { padding: 16px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.content-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.content-thumb { font-size: 32px; margin-bottom: 10px; }
.content-name { font-size: 14px; color: #f5f0ff; font-weight: 500; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content-count { font-size: 12px; color: #a896c4; }
.content-item.add-content { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,255,136,0.05); border-color: rgba(0,255,136,0.2); }
.add-icon { font-size: 36px; color: #00ff88; margin-bottom: 6px; }
.add-text { font-size: 14px; color: #00ff88; font-weight: 600; }

/* Scenario List */
.config-scenario-list { display: flex; flex-direction: column; gap: 12px; }
.scenario-item { padding: 16px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; transition: all 0.2s; }
.scenario-item.active { background: rgba(0,240,255,0.08); border-color: rgba(0,240,255,0.25); }
.scenario-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.scenario-name { font-size: 15px; color: #f5f0ff; font-weight: 600; }
.scenario-badge { padding: 4px 12px; background: rgba(0,255,136,0.2); color: #00ff88; font-size: 11px; font-weight: 700; border-radius: 6px; text-transform: uppercase; }
.scenario-badge.off { background: rgba(255,255,255,0.08); color: #a896c4; }
.scenario-desc { font-size: 13px; color: #b8a4d4; }

/* Toggle Row */
.config-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.config-toggle-row:last-child { border-bottom: none; }
.config-toggle-row span { font-size: 15px; color: #f5f0ff; }
.toggle { width: 52px; height: 28px; background: rgba(255,255,255,0.08); border-radius: 14px; position: relative; cursor: pointer; transition: all 0.3s; }
.toggle.on { background: #00ff88; }
.toggle-handle { width: 22px; height: 22px; background: #f5f0ff; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: all 0.3s; }
.toggle.on .toggle-handle { left: 27px; }

/* Unified bot sales workspace */
.bot-flow-unified { display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); gap: 16px; min-height: 560px; }
.bot-builder-panel,
.bot-preview-panel { position: relative; min-width: 0; border-radius: 24px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); box-shadow: var(--shadow-inset-top); overflow: hidden; }
.bot-builder-panel { padding: 24px; }
.bot-preview-panel { padding: 14px; background:
  radial-gradient(circle at 76% 12%, rgba(0,255,136,.16), transparent 34%),
  linear-gradient(180deg, rgba(10,13,18,.86), rgba(10,13,18,.98)); }
.config-subtitle { margin-top: 6px; color: #a896c4; font-size: 13px; line-height: 1.35; }
.config-section.compact { margin-bottom: 24px; }
.persona-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 16px; background: rgba(176,38,255,.1); border: 1px solid rgba(176,38,255,.24); }
.persona-main { display: flex; gap: 13px; min-width: 0; }
.persona-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: linear-gradient(135deg, #ff2e93, #b026ff); box-shadow: 0 0 22px rgba(176,38,255,.28); }
.persona-card strong,
.delivery-item strong { display: block; color: #f5f0ff; font-size: 15px; line-height: 1.2; }
.persona-card p,
.delivery-item p { margin: 5px 0 0; color: #b8a4d4; font-size: 12px; line-height: 1.45; }
.persona-score { flex: 0 0 auto; padding: 6px 8px; border-radius: 999px; background: rgba(0,255,136,.12); border: 1px solid rgba(0,255,136,.24); color: #b8ffd9; font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; }
.config-options.split { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); }
.content-delivery { display: grid; gap: 10px; }
.delivery-item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
.delivery-item.active { border-color: rgba(0,255,136,.32); background: rgba(0,255,136,.075); }
.delivery-item em { color: #00ff88; font-family: var(--font-mono); font-size: 14px; font-style: normal; font-weight: 700; }
.delivery-thumb { width: 46px; height: 46px; border-radius: 12px; display: block; background: linear-gradient(135deg, rgba(255,46,147,.82), rgba(176,38,255,.7)); position: relative; overflow: hidden; }
.delivery-thumb::after { content: ""; position: absolute; inset: 10px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.1); }
.delivery-thumb.video { background: linear-gradient(135deg, rgba(0,240,255,.74), rgba(0,255,136,.58)); }
.add-pack { width: 100%; border: 1px dashed rgba(0,255,136,.34); border-radius: 14px; background: rgba(0,255,136,.055); color: #00ff88; font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 12px 14px; cursor: pointer; }
.script-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.script-timeline span { min-height: 48px; display: flex; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid rgba(0,240,255,.16); background: rgba(0,240,255,.055); color: #c9f8ff; font-size: 11px; line-height: 1.25; }
.config-toggle-row.tight { padding: 10px 0; }
.bot-preview-panel .chat-ui { height: 100%; min-height: 532px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, #0a0d12, #12151c); }
.sales-preview .chat-messages { gap: 14px; padding: 20px; }
.sales-preview .msg-bubble { font-size: 15px; max-width: 82%; padding: 12px 15px; border-radius: 18px; }
.sales-preview .chat-msg.her .msg-bubble { background: rgba(176,38,255,.16); border: 1px solid rgba(176,38,255,.12); }
.sales-preview .chat-msg.his .msg-bubble { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.06); }
.preview-pack { min-width: min(320px, 86%); background: rgba(0,255,136,.12) !important; border-color: rgba(0,255,136,.3) !important; }
.preview-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.preview-row span { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(135deg, rgba(255,46,147,.72), rgba(176,38,255,.42)); border: 1px solid rgba(255,255,255,.12); }
.preview-row span:nth-child(2) { background: linear-gradient(135deg, rgba(176,38,255,.72), rgba(0,240,255,.3)); }
.preview-row span:nth-child(3) { background: linear-gradient(135deg, rgba(0,240,255,.55), rgba(0,255,136,.32)); }
.preview-pack strong { display: block; color: #b8ffd9; font-size: 15px; margin-bottom: 4px; }
.preview-pack p { margin: 0 0 12px; color: #d8cde8; font-size: 13px; }
.sales-preview .premium-cta { padding: 12px 14px; font-size: 14px; border-radius: 10px; margin: 0; }

/* Unified traffic tracking workspace */
.traffic-flow-unified { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.traffic-builder-panel,
.traffic-report-panel { position: relative; min-width: 0; border-radius: 24px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); box-shadow: var(--shadow-inset-top); overflow: hidden; }
.traffic-stage-primary { grid-column: 1 / -1; }
.traffic-stage-secondary { min-height: 360px; }
.traffic-builder-panel { padding: 28px; }
.traffic-report-panel { padding: 14px; background:
  radial-gradient(circle at 22% 8%, rgba(0,240,255,.18), transparent 34%),
  radial-gradient(circle at 88% 0%, rgba(0,255,136,.12), transparent 30%),
  linear-gradient(180deg, rgba(10,13,18,.86), rgba(10,13,18,.98)); }
.traffic-builder-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr); gap: 16px; align-items: stretch; }
.traffic-platform-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.traffic-platform-tabs button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); color: #b8a4d4; font-family: var(--font-mono); font-size: 12px; font-weight: 700; cursor: pointer; }
.traffic-platform-tabs button.active { color: #d8fbff; border-color: rgba(0,240,255,.32); background: rgba(0,240,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.platform-dot.shorts { color: #f5f0ff; background: #f5f0ff; }
.link-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.link-form-grid label { min-width: 0; padding: 15px 16px; border-radius: 14px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.08); }
.link-form-grid span { display: block; margin-bottom: 7px; color: #a896c4; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.link-form-grid strong { display: block; min-width: 0; color: #f5f0ff; font-family: var(--font-mono); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.generated-link { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px; border-radius: 16px; border: 1px solid rgba(0,240,255,.24); background: rgba(0,240,255,.065); }
.generated-link code { min-width: 0; color: #c9f8ff; font-family: var(--font-mono); font-size: 13px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
.public-link-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.public-link-copy span { color: #a896c4; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.public-link-copy code { display: block; width: max-content; max-width: 100%; padding: 3px 0; color: #f5f0ff; font-size: clamp(18px, 2.8vw, 28px); font-weight: 800; letter-spacing: -.04em; overflow-wrap: normal; word-break: normal; }
.public-link-copy small { color: #7f6f98; font-size: 11px; line-height: 1.35; }
.link-choice-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding: 10px; background: rgba(0,240,255,.045); }
.link-choice-panel .public-link-copy { padding: 14px; border-radius: 13px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.link-choice-panel .public-link-copy:first-child { border-color: rgba(0,240,255,.28); background: rgba(0,240,255,.07); }
.link-choice-panel .public-link-copy.custom { border-color: rgba(0,255,136,.28); background: rgba(0,255,136,.065); }
.link-choice-panel .public-link-copy.custom code { color: #d8ffe9; }
.generated-link button { border: 0; border-radius: 12px; padding: 12px 14px; background: #00f0ff; color: #071019; font-family: var(--font-mono); font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.link-privacy-note { margin-top: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(0,255,136,.24); background: rgba(0,255,136,.055); }
.link-privacy-note span { white-space: nowrap; color: #b8ffd9; font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.link-privacy-note p { margin: 0; color: #b8a4d4; font-size: 12px; line-height: 1.4; }
.tracking-pipeline { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr; gap: 0; align-items: stretch; margin-top: 24px; }
.pipeline-step { min-width: 0; padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
.pipeline-step.active { border-color: rgba(0,255,136,.28); background: rgba(0,255,136,.07); }
.pipeline-step span { width: 24px; height: 24px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 999px; background: rgba(0,240,255,.12); color: #c9f8ff; font-family: var(--font-mono); font-size: 11px; font-weight: 800; }
.pipeline-step strong { display: block; color: #f5f0ff; font-size: 15px; line-height: 1.2; }
.pipeline-step p { margin: 7px 0 0; color: #a896c4; font-size: 12px; line-height: 1.4; }
.tracking-pipeline > i { align-self: center; height: 1px; background: linear-gradient(90deg, rgba(0,240,255,.12), rgba(0,240,255,.7)); position: relative; }
.tracking-pipeline > i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid rgba(0,240,255,.75); border-right: 1px solid rgba(0,240,255,.75); transform: rotate(45deg); }
.traffic-window-bar { height: 44px; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 12px; padding: 0 14px; border-radius: 16px 16px 0 0; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); border-bottom: 0; }
.traffic-window-bar div { display: flex; gap: 7px; }
.traffic-window-bar div span { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.22); }
.traffic-window-bar div span:nth-child(1) { background: #ff5f57; }
.traffic-window-bar div span:nth-child(2) { background: #febc2e; }
.traffic-window-bar div span:nth-child(3) { background: #28c840; }
.traffic-window-bar strong { color: #f5f0ff; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; text-align: center; }
.traffic-window-bar em { color: #a896c4; font-family: var(--font-mono); font-size: 10px; font-style: normal; text-transform: uppercase; }
.traffic-report-grid { min-height: 292px; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 0 0 16px 16px; background: rgba(7,8,13,.74); }
.traffic-leads-column,
.traffic-table-column { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 0 0 16px 16px; background: rgba(7,8,13,.74); }
.report-panel-title { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 0 2px 2px; }
.report-panel-title span { color: #a896c4; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.report-panel-title strong { color: #f5f0ff; font-size: 15px; }
.lead-feed-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.lead-feed-card.active { border-color: rgba(0,240,255,.32); background: rgba(0,240,255,.07); }
.lead-feed-card .lead-avatar { width: 42px; height: 42px; }
.lead-avatar.alt { background: rgba(0,255,136,.13); color: #b8ffd9; }
.lead-feed-card strong { display: block; color: #f5f0ff; font-family: var(--font-mono); font-size: 13px; }
.lead-feed-card p { margin: 4px 0 0; color: #a896c4; font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; }
.lead-feed-card em { color: #00f0ff; font-family: var(--font-mono); font-size: 10px; font-style: normal; }
.lead-passport-wide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: auto; }
.lead-passport-wide div { min-width: 0; padding: 11px; border-radius: 12px; background: rgba(0,0,0,.23); border: 1px solid rgba(255,255,255,.075); }
.lead-passport-wide span { display: block; margin-bottom: 6px; color: #a896c4; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.lead-passport-wide b { display: block; min-width: 0; color: #f5f0ff; font-family: var(--font-mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.traffic-metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.traffic-metrics-row div { padding: 13px 12px; border-radius: 14px; background: rgba(0,255,136,.06); border: 1px solid rgba(0,255,136,.16); }
.traffic-metrics-row span { display: block; margin-bottom: 7px; color: #a896c4; font-size: 10px; }
.traffic-metrics-row strong { display: block; color: #00ff88; font-family: var(--font-mono); font-size: 18px; letter-spacing: -.03em; }
.tracking-table { display: flex; flex-direction: column; gap: 7px; }
.tracking-table > div { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(82px, 1fr) 52px 70px; gap: 8px; align-items: center; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.075); }
.tracking-table .tracking-table-head { background: transparent; border-color: transparent; padding-top: 0; padding-bottom: 0; }
.tracking-table-head span { color: #a896c4 !important; font-family: var(--font-mono); font-size: 9px !important; letter-spacing: .09em; text-transform: uppercase; }
.tracking-table div.is-best { background: rgba(0,240,255,.075); border-color: rgba(0,240,255,.28); }
.tracking-table span { color: #f5f0ff; font-size: 12px; font-weight: 700; }
.tracking-table code { min-width: 0; color: #c9f8ff; font-family: var(--font-mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracking-table b { color: #f5f0ff; font-family: var(--font-mono); font-size: 11px; }
.tracking-table em { color: #00ff88; font-family: var(--font-mono); font-size: 11px; font-style: normal; white-space: nowrap; }
.traffic-insight { margin-top: auto; padding: 14px; border-radius: 14px; background: rgba(176,38,255,.09); border: 1px solid rgba(176,38,255,.2); }
.traffic-insight strong { display: block; margin-bottom: 5px; color: #e7c4ff; font-size: 13px; }
.traffic-insight p { margin: 0; color: #cdbde2; font-size: 12px; line-height: 1.45; }
.traffic-insight code { color: #c9f8ff; font-family: var(--font-mono); font-size: 11px; }

/* Full Conversation Scrollable */
.chat-ui.full-conversation .chat-messages { max-height: 100%; overflow-y: auto; }
.chat-ui.full-conversation .chat-messages::-webkit-scrollbar { width: 6px; }
.chat-ui.full-conversation .chat-messages::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
.chat-ui.full-conversation .chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

.flow-mini-scene { position: absolute; inset: 28px 22px; display: flex; flex-direction: column; justify-content: center; gap: 14px; z-index: 1; }
.flow-mini-scene span { display: block; min-height: 46px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(90deg, rgba(255,255,255,.11), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); animation: scenePulse 2s ease-in-out infinite; }
.flow-mini-scene span:nth-child(1) { width: 76%; }
.flow-mini-scene span:nth-child(2) { width: 92%; margin-left: auto; animation-delay: .18s; }
.flow-mini-scene span:nth-child(3) { width: 64%; animation-delay: .34s; }
@keyframes scanVideo { 0%,100% { transform: translateY(-54px); opacity: .35; } 50% { transform: translateY(78px); opacity: 1; } }
@keyframes aiDance { 0%,100% { transform: translateX(-50%) rotate(-3deg) translateY(0); } 25% { transform: translateX(-53%) rotate(4deg) translateY(-5px); } 50% { transform: translateX(-50%) rotate(1deg) translateY(-10px); } 75% { transform: translateX(-47%) rotate(-5deg) translateY(-4px); } }
@keyframes dancePulse { 0%,100% { transform: translateX(-50%) rotate(-2deg); } 50% { transform: translateX(-50%) rotate(3deg) translateY(-4px); } }
@keyframes sparkBlink { 0%,100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes ringSweep { 0%,100% { opacity: .26; transform: translateY(0) rotate(var(--r, 18deg)); } 50% { opacity: 1; transform: translateY(-8px) rotate(calc(var(--r, 18deg) + 12deg)); } }
@keyframes scenePulse { 0%,100% { opacity: .52; transform: translateX(0); } 50% { opacity: 1; transform: translateX(8px); } }

/* ==========================================================================
   Monetization
   ========================================================================== */
.money-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; }
.money-total { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 32px; padding: 40px; box-shadow: var(--shadow-inset-top); display: flex; flex-direction: column; gap: 12px; }
.money-big { font-family: var(--font-mono); font-weight: 700; font-size: 88px; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, #00ff88, #00f0ff); -webkit-background-clip: text; background-clip: text; color: transparent; transition: filter 200ms; }
.money-sub { font-size: 14px; color: var(--fg-3); transition: color 200ms; min-height: 20px; }
.money-grid.has-active .money-sub { color: var(--fg-1); font-family: var(--font-mono); font-weight: 600; letter-spacing: .02em; }
.bar-stack { display: flex; gap: 4px; height: 16px; margin-top: 16px; border-radius: 999px; overflow: hidden; }
.bar { display: block; height: 100%; cursor: pointer; transition: opacity 200ms, filter 200ms, transform 200ms; transform-origin: center; }
.bar:hover { transform: scaleY(1.15); }
.money-grid.has-active .bar.dim { opacity: .25; filter: saturate(.4); }
.money-grid.has-active .bar.on { box-shadow: 0 0 16px currentColor; }
.bar-magenta { background: var(--magenta); color: var(--magenta); }
.bar-pink { background: var(--pink); color: var(--pink); }
.bar-cyan { background: var(--cyan); color: var(--cyan); }
.bar-money { background: var(--money); color: var(--money); }
.bar-legend { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 12px; }
.legend-dot { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); transition: opacity 200ms; }
.legend-dot.dim { opacity: .35; }
.legend-dot i { width: 10px; height: 10px; border-radius: 999px; display: block; }
.legend-magenta i { background: var(--magenta); }
.legend-pink i { background: var(--pink); }
.legend-cyan i { background: var(--cyan); }
.legend-money i { background: var(--money); }
.legend-dot em { font-style: normal; color: var(--fg-2); font-weight: 600; }
.money-list { display: flex; flex-direction: column; gap: 8px; }
.money-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; align-items: center; padding: 20px 24px; background: var(--surface-1); border: 1px solid var(--hairline); border-left: 3px solid; border-radius: 16px; cursor: pointer; transition: opacity 200ms, filter 200ms, border-color 200ms, box-shadow 200ms, transform 200ms; }
.money-grid.has-active .money-row.dim { opacity: .35; filter: saturate(.3); }
.money-grid.has-active .money-row.on { transform: translateX(4px); box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.money-row.money-magenta { border-left-color: var(--magenta); }
.money-row.money-magenta.on { border-color: var(--magenta); box-shadow: 0 0 32px rgba(176,38,255,.25), 0 8px 32px rgba(0,0,0,.4); }
.money-row.money-pink { border-left-color: var(--pink); }
.money-row.money-pink.on { border-color: var(--pink); box-shadow: 0 0 32px rgba(255,46,147,.25), 0 8px 32px rgba(0,0,0,.4); }
.money-row.money-cyan { border-left-color: var(--cyan); }
.money-row.money-cyan.on { border-color: var(--cyan); box-shadow: 0 0 32px rgba(0,240,255,.25), 0 8px 32px rgba(0,0,0,.4); }
.money-row.money-money { border-left-color: var(--money); }
.money-row.money-money.on { border-color: var(--money); box-shadow: 0 0 32px rgba(0,255,136,.25), 0 8px 32px rgba(0,0,0,.4); }
.money-pct { font-family: var(--font-mono); font-weight: 700; font-size: 24px; }
.money-magenta .money-pct { color: var(--magenta-2); }
.money-pink .money-pct { color: var(--pink-2); }
.money-cyan .money-pct { color: var(--cyan-2); }
.money-money .money-pct { color: var(--money-2); }
.money-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--fg-1); }
.money-row-sub { display: block; font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.money-amt { font-family: var(--font-mono); font-weight: 700; font-size: 20px; color: var(--fg-1); }

/* ==========================================================================
   Video Algo
   ========================================================================== */
.algo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.algo-card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-inset-top); position: relative; transition: all 200ms var(--ease-out); }
.algo-card:hover { border-color: rgba(176,38,255,.4); box-shadow: 0 8px 32px rgba(176,38,255,.2), var(--shadow-inset-top); transform: translateY(-2px); }
.algo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.algo-idx { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--fg-3); }
.algo-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; padding: 4px 8px; border-radius: 4px; }
.tag-input { background: rgba(0,240,255,.15); color: var(--cyan); }
.tag-checkpoint { background: rgba(176,38,255,.15); color: var(--magenta-2); }
.tag-gen { background: rgba(255,46,147,.15); color: var(--pink-2); }
.tag-audio { background: rgba(255,184,0,.15); color: var(--warn); }
.tag-output { background: rgba(0,255,136,.15); color: var(--money); }
.algo-title { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--fg-1); margin: 0 0 8px; letter-spacing: -.02em; }
.algo-desc { font-size: 14px; color: var(--fg-3); line-height: 1.5; margin: 0 0 20px; min-height: 44px; }
.algo-progress { height: 3px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.algo-progress span { display: block; height: 100%; background: var(--grad-primary); }

/* ==========================================================================
   Flowchart
   ========================================================================== */
.flow-section { max-width: 1280px; }
.flow-frame { position: relative; background: var(--void-2); border: 1px solid var(--hairline); border-radius: 32px; padding: 56px; box-shadow: var(--shadow-inset-top); overflow: hidden; }
.flow-grid-bg { position: absolute; inset: 0; background-image:
  linear-gradient(rgba(0,240,255,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,240,255,.06) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); pointer-events: none; }
.flow-corners .corner { position: absolute; width: 24px; height: 24px; border: 2px solid var(--magenta); }
.flow-corners .tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.flow-corners .tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.flow-corners .bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.flow-corners .br { bottom: 16px; right: 16px; border-left: none; border-top: none; }
.flow-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); gap: 24px 64px; }
.flow-node { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-inset-top); position: relative; z-index: 2; min-height: 110px; display: flex; flex-direction: column; gap: 6px; }
.flow-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--fg-3); }
.flow-t { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1); margin: 0; letter-spacing: -.01em; }
.flow-sub { font-size: 13px; color: var(--fg-3); margin: 0; }
.flow-node.tone-magenta { border-color: rgba(176,38,255,.4); }
.flow-node.tone-magenta .flow-tag { color: var(--magenta-2); }
.flow-node.tone-cyan { border-color: rgba(0,240,255,.3); }
.flow-node.tone-cyan .flow-tag { color: var(--cyan); }
.flow-node.tone-pink { border-color: rgba(255,46,147,.4); }
.flow-node.tone-pink .flow-tag { color: var(--pink-2); }
.flow-node.tone-money { border-color: rgba(0,255,136,.5); box-shadow: 0 0 32px rgba(0,255,136,.2), var(--shadow-inset-top); }
.flow-node.tone-money .flow-tag { color: var(--money); }
.flow-node.tone-money .flow-t { color: var(--money); font-family: var(--font-mono); font-size: 22px; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.flow-foot { display: flex; align-items: center; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.foot-val { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--fg-1); }
.foot-sep { color: var(--fg-4); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--shadow-inset-top); position: relative; }
.price-card.popular { border-color: var(--magenta); box-shadow: 0 0 48px rgba(176,38,255,.25), var(--shadow-inset-top); transform: scale(1.02); background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); }
.price-pop { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; padding: 6px 14px; border-radius: 999px; background: var(--grad-primary); color: #fff; }
.price-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-2); }
.price-row { display: flex; align-items: baseline; gap: 8px; }
.price-num { font-family: var(--font-display); font-weight: 700; font-size: 64px; color: var(--fg-1); letter-spacing: -.04em; line-height: 1; }
.price-per { font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); }
.price-desc { font-size: 14px; color: var(--fg-3); margin: 0; min-height: 42px; }
.price-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.price-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--fg-2); }
.check { color: var(--money); font-weight: 700; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 880px; }
.faq-item { width: 100%; text-align: left; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 16px; padding: 20px 24px; cursor: pointer; transition: all 200ms; font-family: inherit; color: inherit; }
.faq-item:hover { border-color: rgba(176,38,255,.3); }
.faq-item.open { border-color: rgba(176,38,255,.4); }
.faq-q { display: flex; align-items: center; gap: 16px; }
.faq-idx { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); font-weight: 600; }
.faq-text { flex: 1; font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--fg-1); }
.faq-toggle { font-family: var(--font-mono); font-size: 24px; color: var(--magenta-2); width: 24px; text-align: center; }
.faq-a { padding-top: 16px; padding-left: 36px; font-size: 15px; color: var(--fg-2); line-height: 1.55; }

/* ==========================================================================
   Bot Widget (fixed bottom-right)
   ========================================================================== */
.bot-fab { position: fixed; bottom: 24px; right: 24px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: rgba(26,5,51,.9); backdrop-filter: blur(16px); border: 1px solid rgba(176,38,255,.4); border-radius: 999px; cursor: pointer; box-shadow: 0 8px 32px rgba(176,38,255,.3); font-family: inherit; color: inherit; transition: all 200ms; }
.bot-fab:hover { transform: translateY(-2px); border-color: rgba(176,38,255,.6); }
.bot-fab-av { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, var(--magenta), var(--cyan)); position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; }
.bot-fab-av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 999px; background: var(--money); border: 2px solid var(--surface-1); }
.bot-fab-text { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.bot-fab-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--fg-1); }
.bot-fab-sub { font-family: var(--font-mono); font-size: 10px; color: var(--money); }
.bot-fab-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--pink); border-radius: 999px; font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: #fff; box-shadow: 0 0 12px var(--pink); }

.bot-widget { position: fixed; bottom: 24px; right: 24px; z-index: 60; width: 360px; background: linear-gradient(180deg, var(--surface-1), var(--void-2)); border: 1px solid rgba(176,38,255,.3); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 80px rgba(176,38,255,.4); display: flex; flex-direction: column; max-height: 520px; }
.bot-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,.02); }
.bot-av { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, var(--magenta), var(--cyan)); position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; }
.bot-av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 999px; background: var(--money); border: 2px solid var(--surface-1); }
.bot-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.bot-quick button { font-family: var(--font-body); font-size: 12px; color: var(--fg-2); background: rgba(255,255,255,.04); border: 1px solid var(--hairline); padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: all 150ms; }
.bot-quick button:hover { color: var(--fg-1); border-color: rgba(176,38,255,.4); background: rgba(176,38,255,.08); }

/* ==========================================================================
   Node graph — interactive decision algorithm
   ========================================================================== */
.node-canvas { position: relative; width: 1760px; min-height: 860px; background: #0a0d12; border: 1px solid var(--hairline); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-inset-top); padding: 56px 16px 16px; cursor: grab; touch-action: pan-x; }
.node-canvas.panning,
.node-canvas-wrap.panning .node-canvas { cursor: grabbing; user-select: none; }
.node-canvas.panning .flow-node-g,
.node-canvas-wrap.panning .flow-node-g { transition: none; }
.node-inner { position: relative; will-change: transform; background-image:
  linear-gradient(rgba(0,240,255,.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,240,255,.04) 1px, transparent 1px);
  background-size: 24px 24px; }
.node-canvas-wrap { width: 100%; max-height: min(76vh, 700px); border-radius: 24px; position: relative; overflow-x: auto; overflow-y: hidden; padding: 0 10px 10px 0; overscroll-behavior-x: contain; overscroll-behavior-y: auto; scrollbar-color: rgba(0,240,255,.42) rgba(255,255,255,.06); scrollbar-width: thin; cursor: grab; }
.node-canvas-wrap.panning { cursor: grabbing; }
.node-canvas-wrap::-webkit-scrollbar { width: 0; height: 10px; }
.node-canvas-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 999px; }
.node-canvas-wrap::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(176,38,255,.7), rgba(0,240,255,.75)); border-radius: 999px; border: 2px solid #0a0d12; }
.node-canvas-wrap::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, rgba(176,38,255,.95), rgba(0,240,255,.95)); }
.node-canvas .wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.node-canvas .wires .wire-g { pointer-events: auto; }
.node-canvas .wire { stroke-width: 1.8; fill: none; transition: stroke-opacity 180ms, stroke-width 180ms, filter 180ms; }
.node-canvas .wire-hit { stroke: transparent; stroke-width: 18; fill: none; cursor: none; pointer-events: stroke; }
.node-canvas .ghost .wire { stroke-dasharray: 6 4; opacity: .8; pointer-events: none; }
.node-canvas[data-active] .wire-g .wire { stroke-opacity: .15; filter: saturate(.2); }
.node-canvas[data-active] .wire-g.is-active .wire { stroke-opacity: 1; stroke-width: 2.6; filter: drop-shadow(0 0 6px currentColor); }
.node-canvas[data-active] .flow-node-g { opacity: .3; filter: saturate(.3); }
.node-canvas[data-active] .flow-node-g.is-active { opacity: 1; filter: none; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 4px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.flow-node-g { position: absolute; background: #1a2230; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); font-size: 12px; z-index: 2; transition: opacity 180ms, box-shadow 180ms, filter 180ms; user-select: none; }
.flow-node-g.dragging { transition: none; box-shadow: 0 8px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); z-index: 5; }
.fn-hd { padding: 7px 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; border-radius: 8px 8px 0 0; display: flex; justify-content: space-between; cursor: grab; }
.fn-hd:active { cursor: grabbing; }
.hd-mag { background: linear-gradient(90deg, rgba(176,38,255,.4), rgba(176,38,255,.15)); color: #e7c4ff; border-bottom: 1px solid rgba(176,38,255,.3); }
.hd-cyan { background: linear-gradient(90deg, rgba(0,240,255,.3), rgba(0,240,255,.08)); color: #aef0ff; border-bottom: 1px solid rgba(0,240,255,.3); }
.hd-green { background: linear-gradient(90deg, rgba(0,255,136,.3), rgba(0,255,136,.08)); color: #b8ffd9; border-bottom: 1px solid rgba(0,255,136,.3); }
.hd-pink { background: linear-gradient(90deg, rgba(255,46,147,.3), rgba(255,46,147,.08)); color: #ffc4dd; border-bottom: 1px solid rgba(255,46,147,.3); }
.fn-row { display: grid; grid-template-columns: 52px 82px minmax(0, 1fr) 58px; align-items: center; padding: 7px 14px; border-bottom: 1px solid rgba(255,255,255,.04); position: relative; column-gap: 10px; row-gap: 4px; }
.fn-row:last-child { border-bottom: none; }
.fn-pair { margin: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.035); overflow: visible; position: relative; }
.fn-pair + .fn-pair { margin-top: 10px; }
.fn-pair .fn-row { padding: 20px 12px 10px; background: rgba(10,13,18,.2); min-height: 54px; grid-template-columns: 52px 86px minmax(128px, 1fr) 58px; align-items: start; }
.fn-pair .fn-row[data-row-role="trigger"] { border-bottom-color: rgba(255,46,147,.14); }
.fn-pair .fn-row[data-row-role="trigger"]::after { content: "TRIGGER"; position: absolute; left: 12px; top: 6px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; color: #ff9dcb; pointer-events: none; }
.fn-pair .fn-row[data-row-role="action"] { background: rgba(0,255,136,.045); }
.fn-pair .fn-row[data-row-role="action"]::after { content: "ACTION"; position: absolute; left: 12px; top: 6px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; color: #a9ffd3; pointer-events: none; }
.fn-pair .fn-row[data-row-role="describe"] { background: rgba(255,209,102,.04); min-height: 48px; }
.fn-pair .fn-row[data-row-role="describe"]::after { content: "DESCRIBE"; position: absolute; left: 12px; top: 6px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; color: #ffe29a; pointer-events: none; }
.fn-pair .fn-v { min-width: 0; max-width: none; white-space: normal; overflow-wrap: break-word; word-break: normal; text-align: left; line-height: 1.25; justify-self: stretch; }
.fn-pair .fn-pill { white-space: nowrap; width: max-content; max-width: 100%; }
.fn-l { color: #c4b5d9; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fn-v { color: #f5f0ff; font-family: var(--font-mono); font-size: 11px; opacity: .85; white-space: nowrap; min-width: 0; justify-self: end; }
.fn-pill { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 3px; padding: 1px 5px; color: #a896c4; font-family: var(--font-mono); font-size: 10px; }
.dot { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid #0a0d12; position: absolute; top: 50%; transform: translateY(-50%); box-shadow: 0 0 0 1px rgba(255,255,255,.15); cursor: crosshair; transition: transform 120ms, box-shadow 120ms; }
.dot:hover { transform: translateY(-50%) scale(1.4); box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 8px currentColor; }
.fn-row.is-target { background: rgba(0,255,136,.08); }
.fn-row.is-target .dot.in { transform: translateY(-50%) scale(1.5); box-shadow: 0 0 0 2px #00ff88, 0 0 12px #00ff88; }
.fn-row.is-selected { background: linear-gradient(90deg, rgba(255,209,102,.14), rgba(255,209,102,.035)); box-shadow: inset 0 0 0 1px rgba(255,209,102,.28); }
.fn-row.is-selected .fn-l,
.fn-row.is-selected .fn-v { color: #fff8d7; opacity: 1; }
.fn-row.is-selected .fn-select-toggle { color: #ffd166; border-color: rgba(255,209,102,.48); background: rgba(255,209,102,.16); opacity: 1; }
.dot.in { left: -5px; }
.dot.out { right: -5px; }
.dot.dm { background: #b026ff; }
.dot.dc { background: #00f0ff; }
.dot.dg { background: #00ff88; }
.dot.dp { background: #ff2e93; }
.node-hint { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); margin: 16px 0 0; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hint-key { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid var(--line-1); border-bottom-width: 2px; border-radius: 4px; background: var(--bg-2); color: var(--fg-1); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.hint-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; vertical-align: middle; margin: 0 2px; }
.hint-dot-out { background: #b026ff; box-shadow: 0 0 6px #b026ff; }
.hint-dot-in { background: #00ff88; box-shadow: 0 0 6px #00ff88; }
.add-script-btn { background: rgba(0,240,255,.1); border: 1px dashed rgba(0,240,255,.4); color: #aef0ff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: all 150ms; }
.add-script-btn:hover { background: rgba(0,240,255,.2); border-color: rgba(0,240,255,.7); color: #fff; }
.node-toolbar { position: absolute; top: 12px; left: 16px; right: 16px; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.node-toolbar > * { pointer-events: auto; }
.zoom-ctl { display: inline-flex; align-items: center; gap: 4px; background: rgba(10,13,18,.85); backdrop-filter: blur(8px); border: 1px solid var(--hairline); border-radius: 8px; padding: 4px; }
.zoom-ctl button { background: transparent; border: none; color: var(--fg-2); width: 28px; height: 28px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 4px; transition: all 120ms; }
.zoom-ctl button:hover { background: rgba(255,255,255,.06); color: var(--fg-1); }
.zoom-ctl .zoom-val { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); min-width: 44px; text-align: center; padding: 0 6px; letter-spacing: .04em; }
.zoom-ctl .zoom-reset { font-size: 12px; }

.scissor-cursor { position: absolute; z-index: 8; width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; background: linear-gradient(135deg, #ff2e93, #b026ff); color: #fff; border: 1.5px solid rgba(255,255,255,.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(255,46,147,.5), 0 0 0 0 rgba(255,46,147,.6); pointer-events: none; opacity: 0; transform: scale(.6) rotate(-12deg); transition: opacity 120ms, transform 120ms; }
.scissor-cursor.show { opacity: 1; transform: scale(1) rotate(0); }
.scissor-cursor.cut { animation: scissor-cut 240ms ease-out; }
@keyframes scissor-cut { 0% { transform: scale(1) rotate(0); } 50% { transform: scale(1.4) rotate(20deg); } 100% { transform: scale(0) rotate(40deg); opacity: 0; } }

.fn-hd [contenteditable="true"], .fn-row [contenteditable="true"] { outline: none; cursor: text; border-bottom: 1px dashed transparent; padding: 0 1px; }
.fn-hd [contenteditable="true"]:hover, .fn-row [contenteditable="true"]:hover { border-bottom-color: rgba(255,255,255,.18); }
.fn-hd [contenteditable="true"]:focus, .fn-row [contenteditable="true"]:focus { border-bottom-color: var(--cyan); color: #fff; cursor: text; }
.fn-hd [contenteditable="true"] { cursor: text; }
.fn-close { cursor: pointer; opacity: .4; transition: opacity 120ms; user-select: none; }
.fn-close:hover { opacity: 1; }

.fn-actions { display: inline-flex; gap: 4px; opacity: 0; transition: opacity 120ms; margin-left: 2px; justify-self: end; align-self: center; width: 58px; justify-content: flex-end; }
.fn-row:hover .fn-actions { opacity: 1; }
.fn-row.is-selected .fn-actions { opacity: 1; }
.fn-act { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; cursor: pointer; font-size: 10px; line-height: 1; color: var(--fg-3); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); user-select: none; transition: all 120ms; }
.fn-act:hover { color: var(--fg-1); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.fn-select-toggle:hover { color: #ffd166; border-color: rgba(255,209,102,.44); }
.fn-port-toggle:hover { color: #00f0ff; border-color: rgba(0,240,255,.4); }
.fn-row-rm:hover { color: #ff2e93; border-color: rgba(255,46,147,.4); }

/* Type indicator (left edge of row) + dropdown */
.fn-row { position: relative; }
.fn-row::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 1px; background: transparent; pointer-events: none; }
.fn-row.ft-input::before  { background: #00f0ff; box-shadow: 0 0 6px rgba(0,240,255,.6); }
.fn-row.ft-output::before { background: #b026ff; box-shadow: 0 0 6px rgba(176,38,255,.6); }
.fn-row.ft-trigger::before{ background: #ff2e93; box-shadow: 0 0 6px rgba(255,46,147,.6); }
.fn-row.ft-bool::before   { background: #00ff88; box-shadow: 0 0 6px rgba(0,255,136,.6); }
.fn-row.ft-describe::before { background: #ffd166; box-shadow: 0 0 6px rgba(255,209,102,.6); }
.fn-row.ft-text::before   { background: #ffd166; box-shadow: 0 0 6px rgba(255,209,102,.6); }
.fn-row.ft-number::before { background: #ff9f1c; box-shadow: 0 0 6px rgba(255,159,28,.6); }
.fn-type-tag { box-sizing: border-box; font-family: var(--font-mono); font-size: 8px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; padding: 2px 4px; border-radius: 3px; background: rgba(255,255,255,.06); color: var(--fg-3); cursor: pointer; user-select: none; transition: all 120ms; border: 1px solid transparent; width: 52px; max-width: 52px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.fn-type-tag:hover { color: var(--fg-1); border-color: rgba(255,255,255,.2); }
.fn-row.ft-input  .fn-type-tag { color: #00f0ff; background: rgba(0,240,255,.12); }
.fn-row.ft-output .fn-type-tag { color: #b026ff; background: rgba(176,38,255,.12); }
.fn-row.ft-trigger .fn-type-tag{ color: #ff2e93; background: rgba(255,46,147,.12); }
.fn-row.ft-bool   .fn-type-tag { color: #00ff88; background: rgba(0,255,136,.12); }
.fn-row.ft-describe .fn-type-tag { color: #ffd166; background: rgba(255,209,102,.12); }
.fn-row.ft-text   .fn-type-tag { color: #ffd166; background: rgba(255,209,102,.12); }
.fn-row.ft-number .fn-type-tag { color: #ff9f1c; background: rgba(255,159,28,.12); }

.fn-type-pop { position: absolute; z-index: 50; background: #1a2230; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); padding: 4px; display: flex; flex-direction: column; min-width: 96px; }
.fn-type-opt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; padding: 5px 8px; border-radius: 4px; cursor: pointer; color: var(--fg-2); display: flex; align-items: center; gap: 6px; user-select: none; }
.fn-type-opt:hover { background: rgba(255,255,255,.06); color: var(--fg-1); }
.fn-type-opt .swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.fn-foot { padding: 4px 8px 8px; border-top: 1px solid rgba(255,255,255,.04); }
.fn-add-field,
.fn-add-describe { width: 100%; background: transparent; border: 1px dashed rgba(255,255,255,.1); color: var(--fg-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; padding: 5px; border-radius: 4px; cursor: pointer; transition: all 120ms; }
.fn-add-field:hover { color: var(--cyan); border-color: rgba(0,240,255,.4); background: rgba(0,240,255,.05); }
.fn-add-describe { width: calc(100% - 16px); margin: 2px 8px 8px; color: rgba(255,209,102,.74); border-color: rgba(255,209,102,.16); }
.fn-add-describe:hover { color: #ffe29a; border-color: rgba(255,209,102,.45); background: rgba(255,209,102,.055); }
.bot-meta { flex: 1; display: flex; flex-direction: column; }
.bot-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg-1); }
.bot-status { font-family: var(--font-mono); font-size: 11px; color: var(--money); }
.bot-close { background: transparent; border: 1px solid var(--hairline); color: var(--fg-3); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; }
.bot-close:hover { color: var(--fg-1); border-color: rgba(255,255,255,.2); }
.bot-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bot-m { padding: 10px 14px; border-radius: 14px; max-width: 85%; font-size: 13px; line-height: 1.45; }
.bot-m-them { background: rgba(255,255,255,.06); color: var(--fg-1); border-bottom-left-radius: 4px; align-self: flex-start; }
.bot-m-me { background: var(--grad-hot); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.bot-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--hairline); background: rgba(0,0,0,.2); }
.bot-input input { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--hairline); color: var(--fg-1); padding: 10px 14px; border-radius: 999px; font-family: inherit; font-size: 13px; outline: none; }
.bot-input input:focus { border-color: var(--magenta); }
.bot-input button { background: var(--grad-primary); border: none; color: #fff; width: 38px; height: 38px; border-radius: 999px; cursor: pointer; font-family: var(--font-mono); font-size: 18px; }

/* ==========================================================================
   Auth modal
   ========================================================================== */
.auth-layer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; }
.auth-scrim { position: absolute; inset: 0; border: 0; background:
  radial-gradient(at 50% 20%, rgba(176,38,255,.26), transparent 42%),
  rgba(4,1,10,.78); backdrop-filter: blur(16px); cursor: pointer; }
.auth-card { position: relative; width: min(100%, 440px); background: linear-gradient(180deg, rgba(26,5,51,.96), rgba(10,13,18,.98)); border: 1px solid rgba(176,38,255,.35); border-radius: 28px; padding: 34px; box-shadow: 0 28px 90px rgba(176,38,255,.38), var(--shadow-inset-top); overflow: hidden; }
.auth-card::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0,240,255,.05) 1px, transparent 1px),
  linear-gradient(rgba(0,240,255,.05) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%); pointer-events: none; }
.auth-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--hairline); background: rgba(255,255,255,.04); color: var(--fg-2); font-size: 22px; line-height: 1; cursor: pointer; z-index: 1; }
.auth-close:hover { color: var(--fg-1); border-color: rgba(255,255,255,.2); }
.auth-kicker { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.auth-card h2 { position: relative; z-index: 1; font-family: var(--font-display); font-size: 36px; line-height: 1; letter-spacing: -.03em; margin: 0 0 12px; color: var(--fg-1); }
.auth-copy { position: relative; z-index: 1; margin: 0 0 26px; color: var(--fg-3); line-height: 1.5; }
.auth-form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 8px; }
.auth-form label span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.auth-form input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.06); border: 1px solid var(--hairline); color: var(--fg-1); padding: 15px 16px; border-radius: 14px; font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color 160ms, box-shadow 160ms, background 160ms; }
.auth-form input:focus { background: rgba(255,255,255,.08); border-color: rgba(0,240,255,.55); box-shadow: 0 0 0 4px rgba(0,240,255,.1); }
.auth-form input::placeholder { color: var(--fg-4); }
.auth-code { font-family: var(--font-mono) !important; font-size: 30px !important; letter-spacing: .32em; text-align: center; }
.auth-status { color: var(--pink-2); font-size: 13px; line-height: 1.4; min-height: 18px; }
.auth-status.success { color: var(--money); }
.auth-back { align-self: center; border: 0; background: transparent; color: var(--fg-3); font-family: var(--font-body); font-size: 14px; cursor: pointer; padding: 4px 8px; }
.auth-back:hover { color: var(--fg-1); }
.auth-switch { position: relative; z-index: 1; display: flex; justify-content: center; gap: 8px; margin-top: 22px; color: var(--fg-3); font-size: 14px; }
.auth-switch button { border: 0; background: transparent; color: var(--cyan); font: inherit; cursor: pointer; padding: 0; }
.auth-switch button:hover { color: var(--fg-1); }

/* ==========================================================================
   User account dashboard
   ========================================================================== */
.account-shell { min-height: 100vh; display: grid; grid-template-columns: 284px minmax(0, 1fr); background:
  radial-gradient(circle at 80% 0%, rgba(0,240,255,.16), transparent 36%),
  radial-gradient(circle at 12% 18%, rgba(176,38,255,.18), transparent 38%),
  var(--void); color: var(--fg-1); }
.account-sidebar { position: sticky; top: 0; height: 100vh; padding: 24px; border-right: 1px solid var(--hairline); background: rgba(10,13,18,.72); backdrop-filter: blur(18px); display: flex; flex-direction: column; gap: 22px; }
.account-logo { margin-bottom: 10px; }
.account-status-card { padding: 18px; border: 1px solid rgba(0,240,255,.18); border-radius: 20px; background:
  linear-gradient(180deg, rgba(0,240,255,.08), rgba(255,255,255,.025)); box-shadow: var(--shadow-inset-top); }
.account-status-card span,
.dash-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.account-status-card strong { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 22px; line-height: 1; letter-spacing: -.03em; }
.account-status-card p { margin: 8px 0 0; color: var(--fg-3); font-size: 13px; line-height: 1.45; }
.account-tabs { display: flex; flex-direction: column; gap: 8px; }
.account-tabs button { width: 100%; text-align: left; border: 1px solid transparent; background: transparent; color: var(--fg-3); padding: 13px 14px; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: all 160ms var(--ease-out); }
.account-tabs button:hover { color: var(--fg-1); background: rgba(255,255,255,.045); border-color: var(--hairline); }
.account-tabs button.active { color: var(--fg-1); background: rgba(176,38,255,.13); border-color: rgba(176,38,255,.34); box-shadow: 0 0 28px rgba(176,38,255,.12), var(--shadow-inset-top); }
.account-tabs span { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.account-tabs small { font-size: 12px; color: var(--fg-4); }
.account-main { min-width: 0; }
.account-topbar { position: sticky; top: 0; z-index: 20; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 32px; border-bottom: 1px solid var(--hairline); background: rgba(10,13,18,.72); backdrop-filter: blur(18px); }
.account-topbar strong { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 24px; letter-spacing: -.03em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.topbar-actions .btn-primary,
.topbar-actions .btn-secondary,
.topbar-actions .btn-ghost { padding: 11px 14px; font-size: 13px; border-radius: 10px; }
.account-content { max-width: 1260px; margin: 0 auto; padding: 32px; }
.dash-view { display: none; }
.dash-view.active { display: block; }
.dash-hero-card { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; padding: 32px; border: 1px solid rgba(176,38,255,.28); border-radius: 28px; background:
  radial-gradient(circle at 82% 8%, rgba(0,240,255,.15), transparent 32%),
  linear-gradient(180deg, rgba(26,34,48,.92), rgba(17,22,30,.82)); box-shadow: 0 18px 70px rgba(0,0,0,.28), var(--shadow-inset-top); }
.dash-hero-card h1 { margin: 12px 0 12px; max-width: 760px; font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); line-height: .94; letter-spacing: -.045em; }
.dash-hero-card p { max-width: 650px; margin: 0; color: var(--fg-2); font-size: 17px; line-height: 1.58; }
.dash-activation { align-self: stretch; padding: 22px; border-radius: 20px; background: rgba(10,13,18,.58); border: 1px solid rgba(0,255,136,.18); }
.dash-activation span { font-family: var(--font-mono); color: var(--money); font-size: 11px; letter-spacing: .12em; }
.dash-activation strong { display: block; margin: 8px 0 18px; font-family: var(--font-display); font-size: 24px; letter-spacing: -.03em; }
.dash-activation ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dash-activation li { display: flex; gap: 10px; align-items: center; color: var(--fg-2); font-size: 14px; }
.dash-activation b { font-family: var(--font-mono); color: var(--cyan); font-size: 11px; }
.dash-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.dash-metric { padding: 20px; border-radius: 20px; border: 1px solid var(--hairline); background: rgba(255,255,255,.035); box-shadow: var(--shadow-inset-top); min-width: 0; }
.dash-metric span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.dash-metric strong { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 34px; line-height: 1; letter-spacing: -.04em; color: var(--fg-1); }
.dash-metric p { margin: 8px 0 0; color: var(--fg-4); font-size: 13px; }
.dash-main-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.span-2 { grid-column: span 2; }
.locked-panel { position: relative; min-height: 320px; border: 1px solid var(--hairline); border-radius: 24px; background: linear-gradient(180deg, rgba(26,34,48,.86), rgba(17,22,30,.76)); overflow: hidden; box-shadow: var(--shadow-inset-top); }
.locked-content { height: 100%; padding: 22px; filter: blur(4px) saturate(.78); opacity: .55; transform: scale(.998); pointer-events: none; }
.locked-panel::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(0,240,255,.035) 1px, transparent 1px),
  linear-gradient(rgba(0,240,255,.035) 1px, transparent 1px); background-size: 34px 34px; opacity: .8; pointer-events: none; }
.locked-overlay { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(86%, 360px); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px; border: 1px solid rgba(176,38,255,.36); border-radius: 22px; background: rgba(10,13,18,.76); backdrop-filter: blur(16px); box-shadow: 0 18px 64px rgba(176,38,255,.22); }
.locked-overlay strong { font-family: var(--font-display); font-size: 24px; line-height: 1.04; letter-spacing: -.03em; }
.locked-overlay p { margin: 0 0 6px; color: var(--fg-3); font-size: 14px; line-height: 1.45; }
.lock-glyph { width: 42px; height: 36px; position: relative; display: inline-block; border: 2px solid rgba(0,240,255,.72); border-radius: 10px; background: rgba(0,240,255,.08); box-shadow: 0 0 26px rgba(0,240,255,.22); }
.lock-glyph::before { content: ""; position: absolute; left: 8px; right: 8px; top: -18px; height: 24px; border: 2px solid rgba(0,240,255,.72); border-bottom: 0; border-radius: 18px 18px 0 0; }
.lock-glyph::after { content: ""; position: absolute; left: 50%; top: 12px; width: 5px; height: 10px; transform: translateX(-50%); border-radius: 999px; background: var(--cyan); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-head span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.panel-head b { font-family: var(--font-mono); color: var(--money); font-size: 12px; font-weight: 700; }
.spark-chart { width: 100%; height: 220px; color: var(--cyan); overflow: visible; }
.spark-chart.money { color: var(--money); }
.spark-chart .grid-line { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.spark-chart .area { fill: url(#area-money); }
.spark-chart.cyan .area { fill: url(#area-cyan); }
.spark-chart .line { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 10px currentColor); }
.spark-chart circle { fill: currentColor; }
.mini-bars { display: flex; flex-direction: column; gap: 15px; padding-top: 10px; }
.bar-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 38px; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.bar-row i { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.bar-row i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--grad-money); }
.bar-row b { color: var(--fg-1); text-align: right; }
.model-view { grid-template-columns: 1.05fr 1fr 1fr; }
.persona-console { grid-column: span 1; min-height: 520px; border: 1px solid rgba(0,240,255,.18); border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.035); }
.persona-preview { position: relative; height: 260px; overflow: hidden; background: rgba(176,38,255,.1); }
.persona-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.persona-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(10,13,18,.92)); }
.persona-preview span { position: absolute; left: 18px; bottom: 16px; z-index: 1; font-family: var(--font-mono); color: var(--fg-1); font-size: 12px; letter-spacing: .12em; }
.persona-fields { padding: 22px; }
.persona-fields h2,
.billing-card h2 { margin: 10px 0 10px; font-family: var(--font-display); font-size: 34px; line-height: 1; letter-spacing: -.035em; }
.persona-fields p,
.billing-card p,
.side-checklist p { color: var(--fg-3); line-height: 1.52; margin: 0 0 18px; }
.field-stack { display: flex; flex-direction: column; gap: 10px; }
.field-stack label { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(10,13,18,.38); border: 1px solid var(--hairline); }
.field-stack span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--fg-4); text-transform: uppercase; }
.field-stack b { color: var(--fg-1); font-size: 13px; min-width: 0; overflow-wrap: break-word; }
.generation-board,
.content-library-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.generation-board div,
.content-library-preview div { min-height: 128px; padding: 16px; border-radius: 16px; border: 1px solid var(--hairline); background: rgba(255,255,255,.045); }
.generation-board span,
.content-library-preview span { font-family: var(--font-mono); color: var(--cyan); font-size: 11px; }
.generation-board strong,
.content-library-preview strong { display: block; margin: 14px 0 6px; font-family: var(--font-display); font-size: 22px; letter-spacing: -.03em; }
.generation-board p,
.content-library-preview p { margin: 0; color: var(--fg-3); font-family: var(--font-mono); font-size: 12px; }
.tracking-view { display: flex; flex-direction: column; gap: 16px; }
.tracking-builder-large { padding: 24px; border: 1px solid rgba(0,240,255,.22); border-radius: 24px; background:
  radial-gradient(circle at 90% 0%, rgba(0,240,255,.14), transparent 32%),
  rgba(255,255,255,.035); box-shadow: var(--shadow-inset-top); }
.link-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.link-choice { padding: 18px; border-radius: 18px; border: 1px solid var(--hairline); background: rgba(10,13,18,.44); min-width: 0; }
.link-choice.active { border-color: rgba(0,255,136,.38); box-shadow: 0 0 28px rgba(0,255,136,.08); }
.link-choice span { font-family: var(--font-mono); color: var(--fg-3); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.link-choice strong { display: block; margin: 10px 0 8px; font-family: var(--font-mono); font-size: clamp(20px, 3vw, 34px); color: var(--fg-1); overflow-wrap: anywhere; }
.link-choice p { margin: 0; color: var(--fg-3); font-size: 14px; }
.tracking-table-preview { display: flex; flex-direction: column; gap: 10px; }
.tracking-table-preview div { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hairline); background: rgba(255,255,255,.04); }
.tracking-table-preview span { color: var(--fg-1); font-weight: 700; }
.tracking-table-preview b { color: var(--fg-3); font-family: var(--font-mono); }
.tracking-table-preview strong { color: var(--money); font-family: var(--font-mono); }
.lead-passport-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid rgba(0,240,255,.18); border-radius: 18px; background: rgba(10,13,18,.46); font-family: var(--font-mono); }
.lead-passport-card span { color: var(--cyan); font-size: 12px; }
.lead-passport-card strong { font-size: 24px; color: var(--fg-1); }
.lead-passport-card p { margin: 0; color: var(--fg-3); font-size: 13px; }
.side-checklist { padding: 24px; border: 1px solid rgba(0,255,136,.18); border-radius: 24px; background: rgba(0,255,136,.045); }
.side-checklist h3 { margin: 10px 0 10px; font-family: var(--font-display); font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.billing-view { min-height: 620px; display: grid; place-items: center; }
.billing-card { width: min(100%, 880px); padding: 34px; border: 1px solid rgba(176,38,255,.32); border-radius: 28px; background:
  radial-gradient(circle at 80% 0%, rgba(176,38,255,.18), transparent 36%),
  linear-gradient(180deg, rgba(26,34,48,.9), rgba(17,22,30,.78)); box-shadow: 0 22px 90px rgba(176,38,255,.16), var(--shadow-inset-top); }
.billing-plan-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0; }
.billing-plan-row div { padding: 18px; border-radius: 18px; border: 1px solid var(--hairline); background: rgba(255,255,255,.035); }
.billing-plan-row .selected { border-color: rgba(0,255,136,.42); background: rgba(0,255,136,.06); }
.billing-plan-row span { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: .1em; text-transform: uppercase; }
.billing-plan-row strong { display: block; margin: 10px 0 6px; font-family: var(--font-display); font-size: 44px; line-height: 1; letter-spacing: -.04em; }
.billing-plan-row p { margin: 0; color: var(--fg-3); font-size: 13px; }

/* Interactive chat admin */
.livechat-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin-bottom: 18px; padding: 30px; border: 1px solid rgba(0,240,255,.24); border-radius: 28px; background:
  radial-gradient(circle at 82% 0%, rgba(0,240,255,.18), transparent 34%),
  radial-gradient(circle at 8% 18%, rgba(176,38,255,.14), transparent 30%),
  linear-gradient(180deg, rgba(26,34,48,.9), rgba(17,22,30,.78)); box-shadow: 0 18px 70px rgba(0,0,0,.26), var(--shadow-inset-top); }
.livechat-hero h1 { max-width: 840px; margin: 12px 0; font-family: var(--font-display); font-size: clamp(38px, 4.4vw, 62px); line-height: .96; letter-spacing: -.045em; }
.livechat-hero p { max-width: 720px; margin: 0; color: var(--fg-2); font-size: 16px; line-height: 1.55; }
.livechat-health { align-self: stretch; padding: 20px; border-radius: 20px; border: 1px solid rgba(0,255,136,.22); background: rgba(0,255,136,.055); }
.livechat-health span { color: var(--money); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.livechat-health strong { display: block; margin: 10px 0 8px; color: #b8ffd9; font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: -.035em; }
.livechat-health p { margin: 0; color: var(--fg-3); font-size: 13px; line-height: 1.45; }
.livechat-workspace { display: grid; grid-template-columns: minmax(520px, 1.45fr) minmax(340px, .85fr); gap: 16px; align-items: stretch; }
.screen-reader-panel,
.chat-copilot-panel,
.livechat-bottom-grid article { min-width: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: rgba(255,255,255,.045); box-shadow: var(--shadow-inset-top); }
.screen-reader-panel { padding: 18px; }
.chat-copilot-panel { padding: 20px; }
.browser-capture { overflow: hidden; border-radius: 20px; border: 1px solid rgba(255,255,255,.09); background: rgba(7,8,13,.74); }
.capture-bar { height: 44px; display: grid; grid-template-columns: 12px 12px 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 0 14px; background: rgba(0,0,0,.26); border-bottom: 1px solid rgba(255,255,255,.08); }
.capture-bar i { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.22); }
.capture-bar i:nth-child(1) { background: #ff5f57; }
.capture-bar i:nth-child(2) { background: #febc2e; }
.capture-bar i:nth-child(3) { background: #28c840; }
.capture-bar strong { min-width: 0; color: var(--fg-1); font-family: var(--font-mono); font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capture-bar em { color: var(--fg-3); font-family: var(--font-mono); font-size: 10px; font-style: normal; text-transform: uppercase; }
.captured-screen { min-height: 528px; display: grid; grid-template-columns: 190px minmax(0, 1fr); background:
  linear-gradient(90deg, rgba(0,240,255,.035) 1px, transparent 1px),
  linear-gradient(rgba(0,240,255,.035) 1px, transparent 1px),
  rgba(10,13,18,.9); background-size: 32px 32px; }
.captured-list { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-right: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.captured-list span { padding: 12px; border-radius: 12px; color: var(--fg-3); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.captured-list span.active { color: #d8fbff; border-color: rgba(0,240,255,.32); background: rgba(0,240,255,.08); }
.captured-chat { position: relative; display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; padding: 28px; overflow: hidden; }
.captured-chat::before { content: "SCREEN READER ACTIVE"; position: absolute; top: 18px; right: 18px; padding: 7px 9px; border-radius: 999px; color: #b8ffd9; background: rgba(0,255,136,.1); border: 1px solid rgba(0,255,136,.24); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; }
.capture-message { max-width: 76%; padding: 13px 15px; border-radius: 17px; color: var(--fg-2); font-size: 14px; line-height: 1.42; border: 1px solid rgba(255,255,255,.07); }
.capture-message.incoming { align-self: flex-start; background: rgba(176,38,255,.13); border-color: rgba(176,38,255,.18); }
.capture-message.outgoing { align-self: flex-end; background: rgba(255,255,255,.07); }
.capture-message.active { color: var(--fg-1); border-color: rgba(0,240,255,.36); box-shadow: 0 0 28px rgba(0,240,255,.1); }
.capture-input-zone { position: relative; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 0 16px; border-radius: 16px; color: var(--fg-4); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); }
.capture-input-zone b { color: var(--cyan); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; }
.selection-frame { position: absolute; left: 24px; right: 24px; bottom: 22px; height: 66px; border: 2px solid rgba(0,255,136,.72); border-radius: 18px; pointer-events: none; box-shadow: 0 0 0 999px rgba(0,0,0,.18), 0 0 34px rgba(0,255,136,.2); }
.selection-frame i { position: absolute; width: 14px; height: 14px; border: 2px solid #b8ffd9; }
.selection-frame i:nth-child(1) { left: -5px; top: -5px; border-right: 0; border-bottom: 0; }
.selection-frame i:nth-child(2) { right: -5px; top: -5px; border-left: 0; border-bottom: 0; }
.selection-frame i:nth-child(3) { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.selection-frame i:nth-child(4) { left: -5px; bottom: -5px; border-right: 0; border-top: 0; }
.selection-frame strong { position: absolute; right: 14px; top: -30px; padding: 6px 9px; border-radius: 999px; color: #071019; background: #00ff88; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.chat-flow-steps { display: grid; gap: 10px; margin-bottom: 16px; }
.chat-flow-steps div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(10,13,18,.4); }
.chat-flow-steps span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; color: var(--fg-3); background: rgba(255,255,255,.06); font-family: var(--font-mono); font-size: 11px; font-weight: 800; }
.chat-flow-steps strong { display: block; color: var(--fg-1); font-size: 14px; }
.chat-flow-steps p { grid-column: 2; margin: -4px 0 0; color: var(--fg-3); font-size: 12px; line-height: 1.35; }
.chat-flow-steps .done span { color: #b8ffd9; background: rgba(0,255,136,.12); }
.chat-flow-steps .active { border-color: rgba(0,240,255,.3); background: rgba(0,240,255,.07); }
.chat-flow-steps .active span { color: #d8fbff; background: rgba(0,240,255,.14); }
.reply-composer { margin-bottom: 16px; padding: 18px; border-radius: 18px; border: 1px solid rgba(0,240,255,.22); background: rgba(0,240,255,.055); }
.reply-composer p { margin: 12px 0 16px; color: var(--fg-1); font-size: 16px; line-height: 1.45; }
.composer-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; }
.composer-actions button { min-height: 42px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: var(--fg-1); background: rgba(255,255,255,.055); font-family: var(--font-mono); font-size: 11px; font-weight: 800; cursor: pointer; text-transform: uppercase; }
.composer-actions button.send { color: #071019; border-color: transparent; background: #00ff88; }
.guardrail-stack { display: grid; gap: 8px; }
.guardrail-stack div { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.035); }
.guardrail-stack span { width: 9px; height: 9px; margin-top: 4px; border-radius: 999px; background: var(--money); box-shadow: 0 0 14px rgba(0,255,136,.42); }
.guardrail-stack strong { display: block; color: var(--fg-1); font-size: 13px; }
.guardrail-stack p { grid-column: 2; margin: -2px 0 0; color: var(--fg-3); font-size: 12px; line-height: 1.35; }
.livechat-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.livechat-bottom-grid article { padding: 20px; }
.detected-table,
.operator-queue { display: grid; gap: 9px; margin-top: 14px; }
.detected-table div,
.operator-queue div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 13px; border-radius: 13px; border: 1px solid rgba(255,255,255,.08); background: rgba(10,13,18,.38); }
.operator-queue div { grid-template-columns: minmax(0, 1fr) auto; }
.detected-table b,
.operator-queue strong { color: var(--fg-1); font-family: var(--font-mono); font-size: 12px; }
.detected-table span,
.operator-queue span { color: var(--fg-3); font-size: 12px; }
.detected-table em { color: var(--money); font-family: var(--font-mono); font-size: 12px; font-style: normal; }

/* Live Chat operator tool */
.livechat-tool-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid rgba(0,240,255,.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(0,240,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(14,23,36,.84), rgba(7,10,18,.92));
  box-shadow: var(--shadow-inset-top);
}
.livechat-tool-header h1 {
  max-width: 780px;
  margin: 8px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.3vw, 48px);
  line-height: .98;
  letter-spacing: -.04em;
}
.livechat-tool-header p {
  max-width: 760px;
  margin: 0;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.5;
}
.session-control-card {
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(0,255,136,.22);
  border-radius: 18px;
  background: rgba(0,255,136,.055);
}
.session-control-card span,
.tool-panel-head span,
.draft-head span {
  color: var(--cyan);
}
.session-control-card strong {
  color: #b8ffd9;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: -.01em;
}
.session-control-card button,
.tool-panel-head button,
.draft-actions button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: var(--fg-1);
  background: rgba(255,255,255,.055);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.session-control-card button {
  color: #ffd1d8;
  border-color: rgba(255,46,147,.3);
  background: rgba(255,46,147,.08);
}
.chat-tool-grid {
  display: grid;
  grid-template-columns: minmax(560px, 1.25fr) minmax(360px, .75fr);
  gap: 16px;
  align-items: start;
}
.user-screen-tool,
.reply-console,
.chat-tool-bottom article {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(17,34,56,.72), rgba(5,12,23,.86)),
    rgba(8,18,31,.8);
  box-shadow: 0 24px 90px rgba(0,0,0,.32), var(--shadow-inset-top);
}
.user-screen-tool,
.reply-console {
  padding: 16px;
}
.tool-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.tool-panel-head strong {
  display: block;
  margin-top: 5px;
  color: var(--fg-1);
  font-size: 17px;
  letter-spacing: -.02em;
}
.screen-picker {
  overflow: hidden;
  border: 1px solid rgba(203,239,255,.12);
  border-radius: 18px;
  background: rgba(3,7,13,.82);
}
.screen-toolbar {
  height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  font-family: var(--font-mono);
  font-size: 11px;
}
.screen-toolbar span { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-toolbar b { color: var(--money); }
.screen-toolbar em { color: var(--fg-3); font-style: normal; text-transform: uppercase; }
.screen-canvas {
  position: relative;
  min-height: 486px;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  background:
    linear-gradient(90deg, rgba(0,240,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(0,240,255,.04) 1px, transparent 1px),
    rgba(5,10,18,.94);
  background-size: 28px 28px;
}
.mock-chat-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}
.mock-chat-list span {
  color: var(--fg-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mock-chat-list b {
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  color: var(--fg-3);
  background: rgba(255,255,255,.035);
  font-size: 12px;
  font-weight: 700;
}
.mock-chat-list b.active {
  color: #d8fbff;
  border-color: rgba(0,240,255,.32);
  background: rgba(0,240,255,.08);
}
.mock-chat-thread {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 13px;
  padding: 74px 28px 30px;
}
.chat-row {
  max-width: 76%;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  color: var(--fg-2);
  background: rgba(255,255,255,.055);
  font-size: 14px;
  line-height: 1.42;
}
.chat-row.them {
  align-self: flex-start;
  background: rgba(176,38,255,.12);
  border-color: rgba(176,38,255,.18);
}
.chat-row.us {
  align-self: flex-end;
}
.chat-row.latest {
  color: var(--fg-1);
  border-color: rgba(0,240,255,.38);
  box-shadow: 0 0 30px rgba(0,240,255,.12);
}
.chat-input-target {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  color: var(--fg-4);
  background: rgba(255,255,255,.055);
}
.chat-input-target strong {
  color: var(--money);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.select-box {
  position: absolute;
  pointer-events: none;
  border: 2px solid rgba(0,240,255,.8);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0,0,0,.11), 0 0 34px rgba(0,240,255,.18);
}
.select-box span {
  position: absolute;
  top: -31px;
  left: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #06101b;
  background: #bfeeff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}
.select-box.area {
  left: 196px;
  right: 22px;
  top: 70px;
  bottom: 104px;
}
.select-box.input {
  left: 196px;
  right: 22px;
  bottom: 22px;
  height: 70px;
  border-color: rgba(0,255,136,.82);
  box-shadow: 0 0 0 999px rgba(0,0,0,.05), 0 0 34px rgba(0,255,136,.18);
}
.select-box.input span {
  background: #00ff88;
}
.ocr-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr .8fr;
  gap: 10px;
  margin-top: 12px;
}
.ocr-strip div {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.ocr-strip span,
.operator-controls span {
  display: block;
  margin-bottom: 6px;
  color: var(--fg-4);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ocr-strip strong {
  color: var(--fg-1);
  font-size: 13px;
}
.operator-controls {
  display: grid;
  gap: 10px;
}
.operator-controls label {
  display: block;
}
.operator-controls select,
.draft-box textarea {
  width: 100%;
  border: 1px solid rgba(203,239,255,.14);
  border-radius: 13px;
  color: var(--fg-1);
  background: rgba(3,7,13,.62);
  outline: none;
}
.operator-controls select {
  min-height: 42px;
  padding: 0 12px;
  appearance: none;
}
.analysis-card {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid rgba(0,240,255,.18);
  border-radius: 16px;
  background: rgba(0,240,255,.055);
}
.analysis-lines {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.analysis-lines p {
  margin: 0;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.42;
}
.analysis-lines b {
  color: var(--fg-1);
}
.draft-box {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid rgba(0,255,136,.18);
  border-radius: 16px;
  background: rgba(0,255,136,.045);
}
.draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.draft-head b {
  color: var(--fg-4);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}
.draft-box textarea {
  min-height: 148px;
  padding: 13px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.48;
}
.draft-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.draft-actions button.send {
  color: #06101b;
  border-color: transparent;
  background: #00ff88;
}
.draft-actions button.danger {
  color: #ffd1d8;
  border-color: rgba(255,46,147,.32);
  background: rgba(255,46,147,.09);
}
.chat-tool-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.chat-tool-bottom article {
  padding: 18px;
}
.pipeline-steps,
.incoming-queue {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}
.pipeline-steps div,
.incoming-queue div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(3,7,13,.42);
}
.pipeline-steps b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--fg-3);
  background: rgba(255,255,255,.06);
  font-family: var(--font-mono);
  font-size: 11px;
}
.pipeline-steps strong,
.incoming-queue strong {
  color: var(--fg-1);
  font-size: 13px;
}
.pipeline-steps span,
.incoming-queue span {
  color: var(--fg-3);
  font-size: 12px;
}
.pipeline-steps .done b {
  color: #b8ffd9;
  background: rgba(0,255,136,.12);
}
.pipeline-steps .active {
  border-color: rgba(0,240,255,.28);
  background: rgba(0,240,255,.06);
}
.incoming-queue div {
  grid-template-columns: minmax(0, 1fr) auto;
}
.incoming-queue em {
  color: var(--money);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
}

@media (max-width: 1180px) {
  .livechat-tool-header,
  .chat-tool-grid,
  .chat-tool-bottom {
    grid-template-columns: 1fr;
  }

  .session-control-card {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (max-width: 760px) {
  .screen-canvas {
    grid-template-columns: 1fr;
  }

  .mock-chat-list {
    display: none;
  }

  .select-box.area,
  .select-box.input {
    left: 18px;
    right: 18px;
  }

  .ocr-strip,
  .draft-actions {
    grid-template-columns: 1fr;
  }

  .tool-panel-head,
  .draft-head,
  .session-control-card {
    grid-template-columns: 1fr;
    display: grid;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { max-width: 1280px; margin: 0 auto; padding: 64px 32px 48px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.footer-brand p { font-size: 13px; color: var(--fg-3); margin: 12px 0 0; max-width: 320px; line-height: 1.55; }
.footer-col h5 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--fg-2); text-decoration: none; padding: 6px 0; transition: color 150ms; }
.footer-col a:hover { color: var(--fg-1); }
.footer-bottom { max-width: 1280px; margin: 0 auto; padding: 24px 32px 48px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); letter-spacing: .08em; }

/* responsive */
@media (max-width: 980px) {
  .hero-inner, .how-grid, .money-grid, .algo-grid, .price-grid, .flow-grid, .footer { grid-template-columns: 1fr; }
  .account-shell { grid-template-columns: 1fr; }
  .account-sidebar { position: relative; height: auto; padding: 18px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .account-tabs { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .account-topbar { position: relative; align-items: flex-start; flex-direction: column; }
  .dash-hero-card, .dash-main-grid, .model-view { grid-template-columns: 1fr; }
  .livechat-hero, .livechat-workspace, .livechat-bottom-grid { grid-template-columns: 1fr; }
  .livechat-workspace { align-items: stretch; }
  .captured-screen { grid-template-columns: 150px minmax(0, 1fr); }
  .span-2, .persona-console { grid-column: span 1; }
  .dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-flow-grid { grid-template-columns: 1fr; }
  .bot-flow-unified { grid-template-columns: 1fr; }
  .traffic-flow-unified { grid-template-columns: 1fr; }
  .traffic-builder-grid { grid-template-columns: 1fr; }
  .traffic-report-grid { grid-template-columns: 1fr; }
  .flow-video-card { min-height: 380px; }
  .flow-grid { gap: 16px; }
  .nav-links { display: none; }
}

@media (max-width: 560px) {
  .nav-inner { padding: 14px 18px; }
  .section { padding-left: 18px; padding-right: 18px; }
  .account-content { padding: 18px; }
  .account-topbar { padding: 16px 18px; }
  .topbar-actions { width: 100%; justify-content: flex-start; }
  .dash-hero-card { padding: 22px; border-radius: 22px; }
  .dash-activation { padding: 16px; }
  .dash-metrics, .link-choice-grid, .generation-board, .content-library-preview, .billing-plan-row { grid-template-columns: 1fr; }
  .locked-panel { min-height: 360px; }
  .locked-overlay { width: calc(100% - 28px); padding: 20px; }
  .tracking-table-preview div { grid-template-columns: 1fr; }
  .captured-screen { grid-template-columns: 1fr; }
  .captured-list { display: none; }
  .captured-chat { min-height: 440px; padding: 20px; }
  .selection-frame { left: 16px; right: 16px; }
  .composer-actions, .detected-table div, .operator-queue div { grid-template-columns: 1fr; }
  .field-stack label { grid-template-columns: 1fr; gap: 4px; }
  .model-flow { padding: 16px; border-radius: 22px; }
  .model-flow-head { align-items: flex-start; flex-direction: column; }
  .model-flow-head strong { font-size: 24px; }
  .bot-builder-panel { padding: 18px; }
  .config-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .traffic-builder-panel { padding: 18px; }
  .traffic-platform-tabs, .link-form-grid, .tracking-pipeline, .lead-passport-wide, .traffic-metrics-row { grid-template-columns: 1fr; }
  .generated-link { grid-template-columns: 1fr; }
  .generated-link button { width: 100%; }
  .link-privacy-note { grid-template-columns: 1fr; gap: 6px; }
  .link-privacy-note span { white-space: normal; }
  .tracking-pipeline > i { display: none; }
  .traffic-window-bar { grid-template-columns: 56px 1fr; }
  .traffic-window-bar em { display: none; }
  .tracking-table > div { grid-template-columns: 1fr 1fr; }
  .persona-card, .delivery-item { grid-template-columns: 1fr; }
  .persona-card { flex-direction: column; }
  .config-options.split, .script-timeline { grid-template-columns: 1fr; }
  .bot-preview-panel .chat-ui { min-height: 500px; }
  .nav-cta .btn-ghost, .nav-cta .btn-primary { padding: 11px 13px; font-size: 13px; }
  .auth-layer { padding: 14px; align-items: end; }
  .auth-card { padding: 28px 22px 24px; border-radius: 24px; }
  .auth-card h2 { font-size: 30px; }
  .auth-code { font-size: 26px !important; letter-spacing: .24em; }
}

/* ==========================================================================
   Cinematic orbital redesign
   Visual-only layer for the existing Morphly landing content.
   ========================================================================== */

:root {
  --void: #02060d;
  --void-2: #07111d;
  --surface-1: rgba(10, 20, 34, 0.74);
  --surface-2: rgba(14, 28, 48, 0.82);
  --surface-3: rgba(21, 43, 70, 0.9);
  --hairline: rgba(195, 230, 255, 0.18);
  --hairline-2: rgba(195, 230, 255, 0.08);
  --fg-1: #f7fbff;
  --fg-2: #b9cbe0;
  --fg-3: #738aa4;
  --fg-4: #44566d;
  --magenta: #7cc8ff;
  --magenta-2: #d7f2ff;
  --magenta-dim: #2d5f89;
  --cyan: #88ddff;
  --cyan-2: #e8f8ff;
  --pink: #a8ffea;
  --pink-2: #d8fff6;
  --money: #b8ffda;
  --money-2: #effff7;
  --money-dim: #42a979;
  --grad-primary: linear-gradient(135deg, #eaf8ff 0%, #7cc8ff 48%, #b8ffda 100%);
  --grad-hot: linear-gradient(135deg, #d7f2ff 0%, #88ddff 100%);
  --grad-money: linear-gradient(135deg, #b8ffda 0%, #88ddff 100%);
  --grad-text: linear-gradient(180deg, #ffffff 0%, #a8c9e8 100%);
  --grad-surface: linear-gradient(180deg, rgba(17, 34, 56, .92) 0%, rgba(4, 12, 22, .94) 100%);
  --shadow-glow-magenta: 0 0 54px rgba(124, 200, 255, 0.22);
  --shadow-glow-cyan: 0 0 58px rgba(136, 221, 255, 0.22);
  --shadow-glow-money: 0 0 42px rgba(184, 255, 218, 0.18);
  --shadow-lg: 0 34px 120px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html,
body {
  background:
    radial-gradient(circle at 50% -10%, rgba(136, 221, 255, .18), transparent 36rem),
    radial-gradient(circle at 88% 18%, rgba(184, 255, 218, .08), transparent 28rem),
    radial-gradient(circle at 10% 48%, rgba(124, 200, 255, .08), transparent 34rem),
    linear-gradient(180deg, #02060d 0%, #06101b 48%, #02060d 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: -1;
}

body::before {
  width: 84vmin;
  height: 84vmin;
  right: -24vmin;
  top: -20vmin;
  border: 1px solid rgba(180, 230, 255, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 44px rgba(180, 230, 255, .025),
    0 0 0 112px rgba(180, 230, 255, .018),
    inset 0 0 80px rgba(124, 200, 255, .06);
}

body::after {
  inset: 0;
  background-image:
    linear-gradient(rgba(180, 230, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 230, 255, .035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 70%);
  opacity: .55;
}

.nav {
  background: rgba(2, 8, 15, .72);
  border-bottom-color: rgba(203, 235, 255, .16);
  box-shadow: 0 14px 50px rgba(0, 0, 0, .32);
}

.logo-mark {
  background: conic-gradient(from 210deg, #effaff, #7cc8ff, #b8ffda, #effaff);
  box-shadow: 0 0 34px rgba(124, 200, 255, .35);
}

.logo-text,
.h-display,
.h1,
.h2,
.h3,
.h4 {
  letter-spacing: -0.05em;
}

.hero {
  min-height: 860px;
  padding-top: 118px;
  background:
    radial-gradient(circle at 66% 35%, rgba(124, 200, 255, .22), transparent 22rem),
    radial-gradient(circle at 80% 54%, rgba(255,255,255,.08), transparent 18rem);
}

.hero-bg {
  background:
    radial-gradient(circle at 72% 42%, rgba(180, 230, 255, .17), transparent 24rem),
    linear-gradient(180deg, rgba(2, 6, 13, .08), rgba(2, 6, 13, .96));
}

.hero-bg::before,
.hero-right::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-bg::before {
  width: min(920px, 78vw);
  height: min(920px, 78vw);
  right: -10vw;
  top: 34px;
  border: 1px solid rgba(216, 244, 255, .14);
  box-shadow:
    inset 0 0 80px rgba(124, 200, 255, .06),
    0 0 0 58px rgba(216, 244, 255, .025),
    0 0 0 148px rgba(216, 244, 255, .016);
  transform: rotate(-12deg);
}

.hero-grid {
  opacity: .26;
  background-size: 92px 92px;
}

.badge-hot,
.badge-mono,
.how-tag,
.lbl-mono,
.flow-tag,
.algo-tag,
.config-label,
.config-status,
.node-hint,
.footer-col h5 {
  color: #cbefff;
  border-color: rgba(203, 239, 255, .24);
  text-shadow: 0 0 18px rgba(124, 200, 255, .24);
}

.h-display {
  color: #f9fcff;
  text-shadow: 0 0 42px rgba(124, 200, 255, .16);
}

.hero-sub,
.section-sub {
  color: #9fb6cc;
}

.btn-primary {
  color: #06101b;
  background: linear-gradient(135deg, #ffffff 0%, #bfeeff 48%, #a6ffd9 100%);
  box-shadow: 0 0 48px rgba(124, 200, 255, .28), inset 0 1px 0 rgba(255,255,255,.8);
}

.btn-primary:hover {
  box-shadow: 0 0 70px rgba(124, 200, 255, .42), inset 0 1px 0 rgba(255,255,255,.86);
}

.btn-secondary,
.btn-ghost {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(203, 239, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.portrait-card,
.how-card,
.model-flow,
.money-total,
.money-row,
.algo-card,
.flow-frame,
.flow-node,
.faq-item,
.bot-widget,
.bot-fab,
.bot-builder-panel,
.bot-preview-panel,
.traffic-builder-panel,
.traffic-report-panel,
.traffic-stage-primary,
.screen-reader-panel,
.chat-copilot-panel,
.livechat-bottom-grid article {
  background:
    linear-gradient(180deg, rgba(17, 34, 56, .82), rgba(5, 13, 24, .86)),
    rgba(8, 18, 31, .82);
  border-color: rgba(203, 239, 255, .16);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.07);
}

.portrait-card {
  border-radius: 34px;
  overflow: hidden;
}

.portrait-card::before,
.model-flow::before,
.flow-frame::before,
.bot-preview-panel::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(203, 239, 255, .12);
  border-radius: inherit;
  pointer-events: none;
}

.portrait-card img {
  filter: saturate(.82) contrast(1.12) brightness(.78) hue-rotate(164deg);
}

.portrait-card img.hero-portrait-img {
  object-position: 50% 38%;
  filter: brightness(1.25) contrast(0.95);
}

.portrait-overlay {
  background:
    radial-gradient(circle at 50% 30%, transparent 20%, rgba(2, 8, 15, .26) 48%, rgba(2, 8, 15, .88) 100%),
    linear-gradient(180deg, transparent 42%, rgba(2, 8, 15, .88));
}

.float-bubble,
.portrait-stat,
.proof-row div,
.generated-link,
.link-privacy-note,
.pipeline-step,
.lead-feed-card,
.traffic-metrics-row div,
.traffic-insight,
.persona-card,
.delivery-item,
.config-section,
.config-option,
.script-step,
.node-toolbar,
.zoom-ctl,
.flow-node-g,
.fn-row,
.fn-add-describe,
.fn-type-pop,
.pricing-card,
.price-card,
.auth-card {
  background: rgba(6, 16, 28, .74);
  border-color: rgba(203, 239, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.hero .proof-row {
  gap: 14px;
  padding-top: 24px;
  border-top-color: rgba(203, 239, 255, .13);
}

.hero .proof-row > div {
  min-width: 148px;
  padding: 14px 16px 13px;
  border: 1px solid rgba(203, 239, 255, .13);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    rgba(7, 18, 31, .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075);
  backdrop-filter: blur(14px);
}

.hero .proof-lbl {
  color: rgba(203, 239, 255, .56);
}

.hero .proof-icon {
  margin-top: 6px;
  color: rgba(203, 239, 255, .32);
  font-size: 13px;
  line-height: 1;
}

.how-card::after,
.algo-progress span,
.flow-corners .corner {
  background: linear-gradient(90deg, rgba(255,255,255,.8), rgba(124,200,255,.85), rgba(184,255,218,.7));
  border-color: rgba(203, 239, 255, .62);
}

.how-card.is-clickable:hover,
.how-card.is-clickable:focus-visible,
.how-card.is-open,
.algo-card:hover,
.faq-item:hover,
.faq-item.open {
  border-color: rgba(203, 239, 255, .38);
  box-shadow: 0 26px 90px rgba(0, 0, 0, .48), 0 0 54px rgba(124, 200, 255, .12), inset 0 1px 0 rgba(255,255,255,.1);
}

.how-idx {
  color: rgba(229, 247, 255, .2);
  text-shadow: 0 0 24px rgba(124, 200, 255, .16);
}

.flow-video-frame,
.traffic-window-bar,
.traffic-report-grid,
.traffic-leads-column,
.traffic-table-column,
.bot-preview-panel .chat-ui,
.bot-chat-frame,
.browser-capture,
.captured-screen {
  background:
    linear-gradient(rgba(180, 230, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 230, 255, .035) 1px, transparent 1px),
    rgba(2, 8, 15, .88);
  background-size: 34px 34px;
  border-color: rgba(203, 239, 255, .16);
}

.flow-video-frame img,
.flow-video-frame video {
  filter: saturate(.88) contrast(1.1) brightness(.82);
}

.money-big,
.money-text,
.metric-grad,
.money-pct,
.money-amt,
.proof-num {
  background: linear-gradient(135deg, #ffffff 0%, #8fe2ff 50%, #b8ffda 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.bar-row i::before,
.bar-stack .bar,
.composer-actions button.send,
.capture-bar i:nth-child(3) {
  background: linear-gradient(135deg, #b8ffda 0%, #88ddff 100%);
}

.flow-svg path,
.wires path {
  filter: drop-shadow(0 0 10px rgba(124, 200, 255, .35));
}

.flow-node-g {
  color: #d9ecff;
}

.fn-hd,
.hd-mag,
.hd-cyan,
.hd-pink,
.hd-green {
  color: #06101b;
  background: linear-gradient(135deg, #e8f8ff, #88ddff);
}

.bot-fab,
.bot-widget {
  border-color: rgba(203, 239, 255, .24);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 48px rgba(124, 200, 255, .18);
}

.bot-fab-av,
.bot-av {
  color: #06101b;
  background: linear-gradient(135deg, #ffffff, #88ddff);
}

.bot-m-me,
.bot-input button {
  color: #06101b;
  background: linear-gradient(135deg, #ffffff, #88ddff);
}

.auth-layer {
  background:
    radial-gradient(circle at 50% 20%, rgba(124, 200, 255, .24), transparent 32rem),
    rgba(2, 6, 13, .74);
}

.footer {
  border-top-color: rgba(203, 239, 255, .14);
}

@media (max-width: 980px) {
  .hero {
    min-height: auto;
    padding-top: 72px;
  }

  .hero-bg::before {
    right: -42vw;
    top: 120px;
  }
}

/* Readability pass for the first hero badge. */
.hero .badge-row .badge-hot {
  color: #06101b;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(176, 235, 255, .88));
  border: 1px solid rgba(203, 239, 255, .56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 10px 28px rgba(8, 20, 36, .22);
  text-shadow: none;
}

/* First-screen background image pass. */
.hero {
  background: #020812;
}

.hero-bg {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(2, 6, 13, .08) 0%, rgba(2, 6, 13, .22) 44%, rgba(2, 6, 13, .9) 100%);
}

.hero-bg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 108vw;
  height: 100%;
  min-width: 1440px;
  transform: translateX(-50%);
  background: url("../../mqe7ozi6-image.png") center top / 100% auto no-repeat;
  opacity: .92;
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(2, 6, 13, .82) 0%, rgba(2, 6, 13, .4) 48%, rgba(2, 6, 13, .34) 100%),
    linear-gradient(180deg, rgba(2, 6, 13, .18) 0%, rgba(2, 6, 13, .04) 50%, rgba(2, 6, 13, .84) 100%);
  pointer-events: none;
}

.hero-grid {
  opacity: .12;
}

.hero-inner {
  z-index: 2;
}

@media (max-width: 980px) {
  .hero-bg::after {
    width: 138vw;
    min-width: 0;
    background-size: 100% auto;
    background-position: 54% top;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(2, 6, 13, .62) 0%, rgba(2, 6, 13, .32) 42%, rgba(2, 6, 13, .9) 100%);
  }
}

/* Lift hero copy slightly while keeping the original How it works cards. */
.hero {
  padding-top: 72px;
  padding-bottom: 92px;
  min-height: 820px;
}

.hero-inner {
  align-items: start;
  padding-top: 22px;
}

.hero-left {
  padding-top: 6px;
}

.hero .badge-row {
  margin-bottom: 24px;
}

.hero .h-display {
  margin-bottom: 22px;
}

.hero .hero-sub {
  margin-bottom: 28px;
}

.hero .cta-row {
  margin-bottom: 42px;
}

/* Unified first-page scene: hero + How it works share one uncropped background. */
body {
  overflow-x: hidden;
  background: #020812;
}

#app {
  position: relative;
  isolation: isolate;
  background: #020812;
}

#app::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: max(108vw, 1440px);
  height: calc(max(108vw, 1440px) * .6667);
  transform: translateX(-50%);
  background: url("../../mqe7ozi6-image.png") center top / 100% auto no-repeat;
  pointer-events: none;
}

#app::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: calc(max(108vw, 1440px) * .6667);
  background:
    linear-gradient(90deg, rgba(2, 6, 13, .78) 0%, rgba(2, 6, 13, .36) 46%, rgba(2, 6, 13, .3) 100%),
    linear-gradient(180deg, rgba(2, 6, 13, .1) 0%, rgba(2, 6, 13, .04) 40%, rgba(2, 6, 13, .82) 74%, #020812 100%);
  pointer-events: none;
}

#app > * {
  position: relative;
  z-index: 1;
}

.hero {
  overflow: visible;
  background: transparent;
  min-height: 640px;
  padding-top: 62px;
  padding-bottom: 170px;
}

.hero-bg {
  background: transparent;
}

.hero-bg::after,
.hero::before {
  display: none;
}

.hero-inner {
  align-items: start;
  gap: 54px;
  padding-top: 8px;
}

.hero-right {
  max-width: 430px;
  justify-self: center;
  width: 100%;
}

.portrait-card {
  border-radius: 28px 6px 28px 6px;
}

.hero .badge-row {
  margin-bottom: 20px;
}

.hero .h-display {
  max-width: 690px;
  margin-bottom: 18px;
}

.hero .hero-sub {
  max-width: 560px;
  margin-bottom: 24px;
}

.hero .cta-row {
  margin-bottom: 30px;
}

.proof-row {
  padding-top: 22px;
}

#how.section {
  z-index: 4;
  margin-top: 0;
  padding-top: 36px;
  padding-bottom: 72px;
  background: transparent;
}

#how .section-head {
  transform: translateY(-4px);
}

#how .how-card {
  min-height: 188px;
  background:
    linear-gradient(180deg, rgba(12, 28, 46, .38), rgba(3, 10, 19, .58)),
    rgba(5, 13, 24, .54);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .09);
}

@media (min-width: 1180px) and (max-height: 860px) {
  .hero {
    min-height: 590px;
    padding-top: 48px;
    padding-bottom: 154px;
  }

  .hero-right {
    max-width: 390px;
  }

  .h-display {
    font-size: clamp(48px, 6.1vw, 82px);
  }

  #how.section {
    margin-top: 0;
    padding-top: 32px;
  }

  #how .how-card {
    min-height: 172px;
  }
}

@media (max-width: 980px) {
  #app::before {
    width: 138vw;
    height: 92vw;
    min-height: 760px;
    background-position: 54% top;
  }

  #app::after {
    height: 92vw;
    min-height: 760px;
    background:
      linear-gradient(180deg, rgba(2, 6, 13, .66) 0%, rgba(2, 6, 13, .34) 42%, rgba(2, 6, 13, .9) 82%, #020812 100%);
  }

  .hero {
    min-height: auto;
    padding-top: 54px;
    padding-bottom: 64px;
  }

  #how.section {
    margin-top: 0;
    padding-top: 30px;
    padding-bottom: 68px;
  }
}

/* Softer traffic-flow controls for the How it works workspace. */
#how .model-flow.is-traffic {
  border-color: rgba(202, 230, 236, .14);
  background:
    radial-gradient(circle at 16% 0%, rgba(116, 174, 188, .12), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(168, 255, 218, .08), transparent 28%),
    rgba(6, 15, 27, .62);
  box-shadow: 0 24px 78px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07);
}

#how .traffic-builder-panel,
#how .traffic-report-panel,
#how .traffic-stage-primary {
  border-color: rgba(213, 238, 238, .12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .024)),
    rgba(7, 17, 30, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

#how .config-title {
  color: rgba(245, 250, 247, .94);
}

#how .config-subtitle,
#how .config-label,
#how .public-link-copy span,
#how .link-privacy-note p,
#how .pipeline-step p,
#how .traffic-window-bar em {
  color: rgba(215, 232, 232, .58);
}

#how .config-status {
  color: rgba(184, 255, 218, .82);
}

#how .traffic-platform-tabs button,
#how .config-option,
#how .generated-link button {
  border: 1px solid rgba(216, 242, 238, .14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035)),
    rgba(9, 21, 35, .46);
  color: rgba(222, 238, 238, .72);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

#how .traffic-platform-tabs button.active,
#how .config-option.active {
  color: rgba(248, 253, 249, .96);
  border-color: rgba(185, 255, 220, .25);
  background:
    linear-gradient(180deg, rgba(184, 255, 218, .13), rgba(184, 255, 218, .045)),
    rgba(9, 24, 33, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 26px rgba(0, 0, 0, .16);
}

#how .generated-link,
#how .link-choice-panel,
#how .link-privacy-note,
#how .pipeline-step,
#how .lead-feed-card,
#how .traffic-insight,
#how .traffic-metrics-row div,
#how .tracking-table div {
  border-color: rgba(213, 238, 238, .12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .026)),
    rgba(7, 17, 30, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

#how .link-choice-panel .public-link-copy,
#how .link-choice-panel .public-link-copy:first-child,
#how .link-choice-panel .public-link-copy.custom {
  border-color: rgba(213, 238, 238, .12);
  background: rgba(255, 255, 255, .035);
}

#how .link-choice-panel .public-link-copy.custom {
  border-color: rgba(184, 255, 218, .18);
  background: rgba(184, 255, 218, .045);
}

#how .public-link-copy code,
#how .link-choice-panel .public-link-copy.custom code {
  color: rgba(244, 250, 247, .96);
}

#how .generated-link button {
  background: linear-gradient(135deg, rgba(235, 255, 245, .96), rgba(174, 238, 221, .92));
  color: #07131a;
  box-shadow: 0 12px 30px rgba(16, 49, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .44);
}

#how .generated-link button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(16, 49, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .5);
}

#how .pipeline-step.active,
#how .lead-feed-card.active,
#how .tracking-table .is-best {
  border-color: rgba(184, 255, 218, .2);
  background:
    linear-gradient(180deg, rgba(184, 255, 218, .1), rgba(184, 255, 218, .035)),
    rgba(7, 17, 30, .48);
}

#how .pipeline-step span,
#how .scenario-badge,
#how .platform-dot {
  box-shadow: none;
}

#how .tracking-pipeline > i {
  background: linear-gradient(90deg, rgba(213, 238, 238, .1), rgba(184, 255, 218, .42));
}

#how .tracking-pipeline > i::after {
  border-color: rgba(184, 255, 218, .48);
}

#how .traffic-window-bar {
  border-color: rgba(213, 238, 238, .12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
    rgba(5, 13, 24, .6);
}

/* ── Soften flow blocks (Drive traffic + Automate sales) to match admin cards ── */
/* Admin palette: graphite surface, gentle shadows, hairline borders, rounded. */
#how .traffic-flow-unified,
#how .bot-flow-unified {
  gap: 18px;
}
#how .traffic-builder-panel,
#how .traffic-report-panel,
#how .traffic-stage-primary,
#how .traffic-stage-secondary,
#how .bot-builder-panel,
#how .bot-preview-panel,
#how .bot-widget,
#how .chat-copilot-panel,
#how .screen-reader-panel,
#how .livechat-bottom-grid article {
  background: #2c2c2e !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}
/* nested inner tiles a touch lighter, same soft language */
#how .traffic-builder-panel .config-header,
#how .bot-builder-panel .config-header {
  border-radius: 12px;
}
#how .traffic-flow-unified .lbl-mono,
#how .bot-flow-unified .lbl-mono {
  color: #98989d;
}

/* Soften inner "square" tiles inside flow blocks → admin-style rounded cards */
#how .config-section,
#how .generated-link,
#how .public-link-copy,
#how .link-privacy-note,
#how .pipeline-step,
#how .traffic-window-bar,
#how .traffic-leads-column,
#how .lead-feed-card,
#how .traffic-report-grid,
#how .traffic-table-column,
#how .traffic-insight,
#how .traffic-builder-grid > *,
#how .bot-config-tile,
#how .bot-offer-card,
#how .bot-scenario-step,
#how .bot-msg,
#how .bot-preview-panel .bot-widget,
#how .config-tile,
#how .offer-row,
#how .scenario-chip {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #3a3a3c !important;
  box-shadow: none !important;
}
/* nested chips / small pills a bit tighter radius */
#how .scenario-chip,
#how .pipeline-step .lbl-mono {
  border-radius: 999px !important;
}
/* the pipeline number badges stay circular */
#how .pipeline-step b,
#how .pipeline-step span:first-child {
  border-radius: 50% !important;
}