/*
 * Think Macro — AI Analytics Page
 * page-analytics.css
 *
 * Standalone page-specific styles for /ai-analytics/.
 * This page uses a different design system (--navy-mid, --navy-card,
 * --muted variables) so most CSS is self-contained here.
 * Only the base reset, fonts, and scroll animations from tm-styles.css apply.
 */

/* ── ANALYTICS VARIABLES ──────────────────────────────── */
:root {
  --navy-mid: #111827;
  --navy-card: #141B2B;
  --muted: rgba(255,255,255,.55);
  --muted2: rgba(255,255,255,.35);
  --red: #ef4444;
  --green: #22c55e;
  --amber: #f59e0b;
}

/* ── HERO ─────────────────────────────────────────────── */
.hero-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:700; color:var(--teal); letter-spacing:.16em; text-transform:uppercase; margin-bottom:20px; background:rgba(65,190,176,.08); border:1px solid rgba(65,190,176,.22); border-radius:40px; padding:5px 13px 5px 9px; }
.hero-eyebrow::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--teal); flex-shrink:0; box-shadow:0 0 6px rgba(65,190,176,.9); }
.hero-sub { font-size:17px; color:rgba(255,255,255,.72); line-height:1.65; margin-bottom:32px; max-width:480px; }
.btn-primary { background:var(--teal); color:var(--navy); font-weight:700; font-size:14px; padding:14px 28px; border-radius:10px; text-decoration:none; transition:opacity .2s,transform .2s; }
.btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.hero-trust { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.hero-trust-dots { display:flex; }
.trust-dot { width:28px; height:28px; border-radius:50%; background:var(--navy-card); border:2px solid var(--navy); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--teal); margin-left:-6px; }

/* ── HERO DASHBOARD WIDGET ────────────────────────────── */
.hero-widget { background:var(--navy-card); border:1px solid var(--teal-border); border-radius:20px; padding:0; overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px rgba(65,190,176,.12),0 0 100px rgba(65,190,176,.06); position:relative; }
.widget-titlebar { background:rgba(8,13,23,.8); padding:12px 16px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--teal-border); }
.wtb-dot { width:10px; height:10px; border-radius:50%; }
.wtb-dot.r { background:#ef4444; } .wtb-dot.y { background:#f59e0b; } .wtb-dot.g { background:#22c55e; }
.wtb-title { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-left:6px; }
.widget-body { padding:18px; }

/* KPI row */
.kpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.kpi-card { background:rgba(8,13,23,.6); border:1px solid var(--teal-border); border-radius:10px; padding:12px 14px; position:relative; overflow:hidden; }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--teal-dark),var(--teal),#7dd9d1); }
.kpi-label { font-size:9px; font-weight:600; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
.kpi-val { font-family:'Montserrat',sans-serif; font-weight:900; font-size:22px; color:var(--white); letter-spacing:-.02em; text-shadow:0 0 20px rgba(65,190,176,.3); }
.kpi-delta { font-size:10px; font-weight:600; margin-top:2px; }
.kpi-delta.up { color:var(--green); } .kpi-delta.down { color:var(--red); }

/* Sparkline chart */
.chart-area { background:rgba(8,13,23,.5); border:1px solid var(--teal-border); border-radius:10px; padding:14px; margin-bottom:14px; }
.chart-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.chart-title { font-size:11px; font-weight:600; color:var(--white); }
.chart-badge { font-size:9px; font-weight:700; color:var(--teal); background:rgba(65,190,176,.1); border:1px solid rgba(65,190,176,.2); border-radius:20px; padding:2px 8px; }
.chart-svg-wrap { width:100%; height:70px; position:relative; }
.chart-svg-wrap svg { width:100%; height:100%; }

/* Insight cards row */
.insight-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.insight-card { background:rgba(8,13,23,.6); border:1px solid var(--teal-border); border-radius:10px; padding:12px; }
.ic-head { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.ic-icon { width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.ic-icon.teal { background:rgba(65,190,176,.15); color:var(--teal); }
.ic-icon.amber { background:rgba(245,158,11,.12); color:var(--amber); }
.ic-label { font-size:10px; font-weight:700; color:var(--white); }
.ic-bar-track { background:rgba(255,255,255,.08); border-radius:4px; height:5px; margin-bottom:6px; overflow:hidden; }
.ic-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--teal-dark),var(--teal)); animation:bar-grow 1.6s ease forwards; }
.ic-bar-fill.amber { background:linear-gradient(90deg,#b45309,var(--amber)); }
.ic-text { font-size:9px; color:var(--muted); line-height:1.4; }

/* AI pulse indicator */
.ai-pulse { display:flex; align-items:center; gap:7px; margin-top:12px; padding:8px 12px; background:rgba(65,190,176,.06); border:1px solid rgba(65,190,176,.14); border-radius:8px; }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse-glow 1.8s ease-in-out infinite; }
.ai-pulse-text { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--teal); }

/* ── SECTIONS (analytics layout) ──────────────────────── */
.section { padding:96px 60px; max-width:1280px; margin:0 auto; }
.section-head-center { text-align:center; margin-bottom:56px; }
.section-head-center .section-sub { margin:0 auto; }

/* ── BLIND VS VISIBLE ─────────────────────────────────── */
.bvv { background:var(--navy-mid); }
.bvv-inner { padding:96px 60px; max-width:1280px; margin:0 auto; }
.bvv-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:56px; }
.bvv-col { border-radius:16px; overflow:hidden; }
.bvv-head { padding:18px 24px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.06); }
.bvv-head.blind { background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.2); border-bottom:none; }
.bvv-head.visible { background:rgba(65,190,176,.07); border:1px solid rgba(65,190,176,.2); border-bottom:none; }
.bvv-head-icon { font-size:18px; }
.bvv-head-title { font-family:'Montserrat',sans-serif; font-weight:900; font-size:16px; }
.bvv-head.blind .bvv-head-title { color:#ef4444; }
.bvv-head.visible .bvv-head-title { color:var(--teal); }
.bvv-items { padding:0; }
.bvv-item { display:flex; align-items:flex-start; gap:12px; padding:16px 24px; border:1px solid rgba(239,68,68,.12); border-top:none; background:rgba(239,68,68,.03); }
.bvv-item.v { border-color:rgba(65,190,176,.12); background:rgba(65,190,176,.03); }
.bvv-item-icon { font-size:14px; flex-shrink:0; margin-top:1px; }
.bvv-item-text { font-size:14px; color:rgba(255,255,255,.8); line-height:1.5; }
.bvv-item-text strong { display:block; font-weight:600; color:var(--white); margin-bottom:2px; font-size:13px; }

/* ── ANALYTICS FEATURES (different layout from shared) ── */
.feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:56px; }
.feat-grid.flip { direction:rtl; }
.feat-grid.flip > * { direction:ltr; }
.feat-desc { font-size:15px; color:rgba(255,255,255,.68); line-height:1.7; margin-bottom:24px; }
.feat-checks { display:flex; flex-direction:column; gap:10px; }
.feat-check { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:rgba(255,255,255,.8); }
.feat-check::before { content:'✓'; color:var(--teal); font-weight:700; flex-shrink:0; margin-top:1px; }

/* ── FEATURE WIDGETS ──────────────────────────────────── */
.rev-widget, .pipe-widget, .churn-widget { background:var(--navy-card); border:1px solid var(--teal-border); border-radius:16px; overflow:hidden; box-shadow:0 32px 96px rgba(0,0,0,.6),0 0 0 1px rgba(65,190,176,.1),0 0 80px rgba(65,190,176,.05); transition:transform .3s,box-shadow .3s; }
.rev-widget:hover, .pipe-widget:hover, .churn-widget:hover { transform:translateY(-3px); box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(65,190,176,.2),0 0 120px rgba(65,190,176,.09); }

/* Revenue attribution widget */
.rw-header, .pw-header, .cw-header { background:rgba(8,13,23,.7); padding:12px 16px; border-bottom:1px solid var(--teal-border); display:flex; justify-content:space-between; align-items:center; }
.rw-title, .pw-title, .cw-title { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); }
.rw-live { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:600; color:var(--teal); }
.rw-live::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); animation:pulse-glow 1.8s ease-in-out infinite; }
.rw-body, .pw-body, .cw-body { padding:16px; }
.channel-rows { display:flex; flex-direction:column; gap:10px; }
.ch-row { display:flex; align-items:center; gap:10px; }
.ch-name { font-size:11px; font-weight:600; color:var(--white); width:80px; flex-shrink:0; }
.ch-bar-track { flex:1; height:8px; background:rgba(255,255,255,.07); border-radius:4px; overflow:hidden; }
.ch-bar-fill { height:100%; border-radius:4px; animation:bar-grow 1.4s ease forwards; }
.ch-bar-fill.teal { background:linear-gradient(90deg,var(--teal-dark),var(--teal)); }
.ch-bar-fill.teal2 { background:linear-gradient(90deg,#006F87,#5cd6ca); }
.ch-bar-fill.amber { background:linear-gradient(90deg,#b45309,#f59e0b); }
.ch-bar-fill.purple { background:linear-gradient(90deg,#6d28d9,#a78bfa); }
.ch-val { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal); width:44px; text-align:right; flex-shrink:0; }
.rw-total { margin-top:14px; padding-top:12px; border-top:1px solid var(--teal-border); display:flex; justify-content:space-between; align-items:center; }
.rw-total-label { font-size:11px; color:var(--muted); }
.rw-total-val { font-family:'Montserrat',sans-serif; font-weight:900; font-size:20px; color:var(--teal); text-shadow:0 0 20px rgba(65,190,176,.4); }

/* Predictive pipeline widget */
.pw-badge { font-size:9px; font-weight:700; color:var(--amber); background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2); border-radius:20px; padding:2px 8px; }
.pipeline-stages { display:flex; gap:8px; margin-bottom:14px; }
.pipe-stage { flex:1; text-align:center; }
.ps-bar-wrap { height:60px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:6px; }
.ps-bar { width:28px; border-radius:4px 4px 0 0; }
.ps-bar.s1 { background:rgba(65,190,176,.3); height:40%; }
.ps-bar.s2 { background:rgba(65,190,176,.5); height:60%; }
.ps-bar.s3 { background:rgba(65,190,176,.7); height:80%; }
.ps-bar.s4 { background:var(--teal); height:100%; box-shadow:0 0 12px rgba(65,190,176,.4); }
.ps-label { font-size:9px; color:var(--muted); text-align:center; }
.ps-val { font-size:11px; font-weight:700; color:var(--white); text-align:center; margin-bottom:2px; }
.pw-prediction { background:rgba(65,190,176,.06); border:1px solid rgba(65,190,176,.15); border-radius:10px; padding:12px; }
.pp-head { display:flex; align-items:center; gap:6px; margin-bottom:8px; font-size:10px; font-weight:700; color:var(--teal); }
.pp-head::before { content:'⚡'; font-size:11px; }
.pp-items { display:flex; flex-direction:column; gap:5px; }
.pp-item { font-size:11px; color:rgba(255,255,255,.75); display:flex; gap:6px; }
.pp-item::before { content:'→'; color:var(--teal); flex-shrink:0; }

/* Churn widget */
.cw-scan { font-size:10px; color:var(--teal); }
.risk-rows { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.risk-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.risk-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.risk-avatar.high { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.25); }
.risk-avatar.med { background:rgba(245,158,11,.1); color:var(--amber); border:1px solid rgba(245,158,11,.2); }
.risk-avatar.low { background:rgba(65,190,176,.1); color:var(--teal); border:1px solid rgba(65,190,176,.2); }
.risk-info { flex:1; }
.risk-name { font-size:12px; font-weight:600; color:var(--white); }
.risk-sub { font-size:10px; color:var(--muted); }
.risk-badge { font-size:9px; font-weight:700; border-radius:20px; padding:2px 8px; }
.risk-badge.high { background:rgba(239,68,68,.12); color:#ef4444; border:1px solid rgba(239,68,68,.2); }
.risk-badge.med { background:rgba(245,158,11,.08); color:var(--amber); border:1px solid rgba(245,158,11,.15); }
.risk-badge.low { background:rgba(65,190,176,.08); color:var(--teal); border:1px solid rgba(65,190,176,.15); }
.cw-action { background:var(--teal); color:var(--navy); font-weight:700; font-size:11px; padding:8px 14px; border-radius:8px; text-align:center; cursor:pointer; }

/* ── USE CASE TABS (analytics variant) ────────────────── */
.tabs-section { background:var(--navy-mid); }
.tabs-inner { padding:96px 60px; max-width:1280px; margin:0 auto; }
.tab-btns { display:flex; gap:8px; margin-bottom:40px; border-bottom:1px solid var(--teal-border); padding-bottom:0; }
.tab-pane { display:none; }
.tab-pane.active { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.uc-list { display:flex; flex-direction:column; gap:16px; }
.uc-item { background:var(--navy-card); border:1px solid var(--teal-border); border-radius:12px; padding:20px; transition:border-color .2s; }
.uc-item:hover { border-color:rgba(65,190,176,.4); }
.uc-item-title { font-weight:700; font-size:15px; color:var(--white); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.uc-item-title::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0; box-shadow:0 0 6px rgba(65,190,176,.8); }
.uc-item-desc { font-size:13px; color:rgba(255,255,255,.65); line-height:1.6; }
.uc-outcome { background:rgba(65,190,176,.06); border:1px solid rgba(65,190,176,.15); border-radius:12px; padding:24px; }
.uo-label { font-size:10px; font-weight:700; color:var(--teal); letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.uo-metrics { display:flex; flex-direction:column; gap:12px; }
.uo-metric { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(8,13,23,.5); border-radius:10px; border:1px solid var(--teal-border); }
.uo-metric-label { font-size:13px; color:rgba(255,255,255,.75); }
.uo-metric-val { font-family:'Montserrat',sans-serif; font-weight:900; font-size:20px; color:var(--teal); text-shadow:0 0 16px rgba(65,190,176,.3); }

/* ── ANALYTICS PROCESS (4-col variant) ────────────────── */
.proc-step { text-align:center; position:relative; z-index:1; }
.proc-num { width:48px; height:48px; border-radius:50%; background:var(--navy-card); border:2px solid var(--teal); display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:900; font-size:16px; color:var(--teal); margin:0 auto 16px; box-shadow:0 0 20px rgba(65,190,176,.2); }
.proc-title { font-weight:700; font-size:15px; color:var(--white); margin-bottom:8px; }
.proc-desc { font-size:13px; color:var(--muted); line-height:1.6; }

/* ── CTA BANNER (analytics variant) ───────────────────── */
.cta-banner { background:linear-gradient(135deg,rgba(0,111,135,.2) 0%,rgba(65,190,176,.1) 100%); border-top:1px solid var(--teal-border); border-bottom:1px solid var(--teal-border); }
.cta-inner { padding:80px 60px; max-width:1280px; margin:0 auto; text-align:center; }
.cta-inner h2 { font-family:'Montserrat',sans-serif; font-weight:900; font-size:40px; line-height:1.15; margin-bottom:16px; }
.cta-inner h2 em { font-style:italic; background:linear-gradient(135deg,#41BEB0 0%,#7dd9d1 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cta-inner p { font-size:17px; color:rgba(255,255,255,.7); margin-bottom:32px; }

/* ── DIVIDER ──────────────────────────────────────────── */
.section-divider { border:none; border-top:1px solid var(--teal-border); margin:0; }

/* ── ANALYTICS ANIMATIONS ─────────────────────────────── */
@keyframes bar-grow { from{width:0} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 4px rgba(65,190,176,.5)} 50%{box-shadow:0 0 12px rgba(65,190,176,.9)} }
@keyframes chart-draw { from{stroke-dashoffset:400} to{stroke-dashoffset:0} }
.chart-line-anim { stroke-dasharray:400; stroke-dashoffset:400; animation:chart-draw 2s ease forwards .4s; }

/* Analytics uses .fadein.visible instead of .fadein.vis */
.fadein.visible { opacity:1; transform:translateY(0); }