/* ============================================================
   SKYN3T Landing — landing.css (Light Neumorphic v2)
   Overrides dark tokens from colors_and_type.css with light
   neumorphic values matching Login/Register pages.
   Protected containers (demo panels) retain dark internal
   styling via scoped variable restoration.
   ============================================================ */

/* ============================================================
   THEME OVERRIDE — Light Neumorphic
   Source of truth: neuromorphismTheme in neuTheme.ts
   ============================================================ */
:root {
  /* Surfaces */
  --sk-bg:            #e0e0e0;
  --sk-bg-elevated:   #d6d6d6;
  --sk-surface-1:     #e8e8e8;
  --sk-surface-2:     #ececec;
  --sk-surface-3:     #d6d6d6;

  /* Text (dark on light) */
  --sk-text-hi:       #1a1a1a;
  --sk-text:          #2a2a2a;
  --sk-text-muted:    #5a5a5a;
  --sk-text-dim:      #808080;
  --sk-text-disabled: #b0b0b0;

  /* Primary accents — TEAL (#14b8a6) */
  --sk-primary-rgb:   20, 184, 166;
  --sk-primary-300:   #0d9488;
  --sk-primary-500:   #14b8a6;
  --sk-primary-600:   #0d9488;
  --sk-primary-700:   #0f766e;

  /* Borders & dividers (dark alpha on light) */
  --sk-border:        rgba(0, 0, 0, 0.08);
  --sk-border-strong: rgba(0, 0, 0, 0.12);
  --sk-border-focus:  rgba(var(--sk-primary-rgb), 0.45);
  --sk-divider:       rgba(0, 0, 0, 0.06);

  /* Neumorphic shadows (dual: dark SE + light NW) */
  --sk-shadow-1:  3px 3px 6px rgba(0,0,0,0.1), -3px -3px 6px rgba(255,255,255,0.7);
  --sk-shadow-2:  6px 6px 12px rgba(0,0,0,0.15), -6px -6px 12px rgba(255,255,255,0.8);
  --sk-shadow-3:  8px 8px 16px rgba(0,0,0,0.15), -8px -8px 16px rgba(255,255,255,0.85);
  --sk-shadow-glow: 0 0 0 1px rgba(var(--sk-primary-rgb),0.2), 6px 6px 12px rgba(0,0,0,0.1), -6px -6px 12px rgba(255,255,255,0.7);

  /* Glass (light neumorphic) */
  --sk-glass-bg: linear-gradient(145deg, rgba(232,232,232,0.8), rgba(216,216,216,0.6));
  --sk-glass-bg-strong: linear-gradient(145deg, rgba(240,240,240,0.9), rgba(224,224,224,0.7));
  --sk-glass-bg-flat: linear-gradient(145deg, rgba(232,232,232,0.5), rgba(216,216,216,0.3));
}

/* ============================================================
   DARK SCOPE — Restore dark tokens inside product demo panels.
   These panels showcase the CRM's dark UI; internal styling
   must resolve to original dark values.
   ============================================================ */
.panel,
.vpanel,
.eco3-mock {
  --sk-bg:            #1a1a2e;
  --sk-bg-elevated:   #0d1117;
  --sk-surface-1:     #141528;
  --sk-surface-2:     #1f2040;
  --sk-text-hi:       #ffffff;
  --sk-text:          #e6edf3;
  --sk-text-muted:    #c9d1d9;
  --sk-text-dim:      #8b949e;
  --sk-text-disabled: #484f58;
  --sk-primary-rgb:   20, 184, 166;
  --sk-primary-300:   #5eead4;
  --sk-border:        rgba(255, 255, 255, 0.08);
  --sk-border-strong: rgba(255, 255, 255, 0.15);
  --sk-divider:       rgba(255, 255, 255, 0.05);
  --sk-shadow-2:      0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 16px rgba(0,0,0,0.35);
  --sk-shadow-3:      0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 40px rgba(0,0,0,0.45);
}

/* ============================================================
   LIGHT RESTORATION — vpanel.dash (Dashboard mock)
   Overrides DARK SCOPE for this specific panel.
   ============================================================ */
.vpanel.dash {
  --sk-bg:            #e0e0e0;
  --sk-bg-elevated:   #d6d6d6;
  --sk-surface-1:     #e8e8e8;
  --sk-surface-2:     #ececec;
  --sk-text-hi:       #1a1a1a;
  --sk-text:          #2a2a2a;
  --sk-text-muted:    #5a5a5a;
  --sk-text-dim:      #808080;
  --sk-text-disabled: #b0b0b0;
  --sk-primary-300:   #0d9488;
  --sk-border:        rgba(0, 0, 0, 0.08);
  --sk-border-strong: rgba(0, 0, 0, 0.12);
  --sk-divider:       rgba(0, 0, 0, 0.06);
  --sk-shadow-2:      6px 6px 12px rgba(0,0,0,0.15), -6px -6px 12px rgba(255,255,255,0.8);
  --sk-shadow-3:      8px 8px 16px rgba(0,0,0,0.15), -8px -8px 16px rgba(255,255,255,0.85);
  background: #e0e0e0;
  border-color: rgba(0,0,0,.04);
  box-shadow: 8px 8px 16px rgba(0,0,0,.12), -8px -8px 16px rgba(255,255,255,.7);
}
/* Dashboard light: header dots & border */
.vpanel.dash .vp-head { border-bottom-color: rgba(0,0,0,.06) }
.vpanel.dash .vp-head .d span { background: rgba(0,0,0,.12) }
/* KPI cards — neumorphic inset */
.vpanel.dash .kpi {
  background: #e0e0e0;
  border-color: rgba(0,0,0,.04);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,.06), inset -2px -2px 4px rgba(255,255,255,.5);
}
/* Chart / data cards */
.vpanel.dash .dcard {
  background: #e0e0e0;
  border-color: rgba(0,0,0,.04);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,.06), inset -2px -2px 4px rgba(255,255,255,.5);
}
/* SVG grid lines (override HTML presentation attributes) */
.vpanel.dash .line-chart line { stroke: rgba(0,0,0,.06) }
/* Donut background ring */
.vpanel.dash .donut > circle:first-child { stroke: rgba(0,0,0,.06) }
/* Activity list items */
.vpanel.dash .act-list li { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.04) }
/* Text colors — override dark hardcoded values */
.vpanel.dash .vp-head { color: #2a2a2a }
.vpanel.dash .kpi-v { color: #1a1a1a }
.vpanel.dash .kpi-l { color: #5a5a5a }
.vpanel.dash .dcard-t { color: #2a2a2a }
.vpanel.dash .dcard-s { color: #5a5a5a }
.vpanel.dash .dcard-val { color: #1a1a1a }
.vpanel.dash .line-labels { color: #5a5a5a }
.vpanel.dash .donut-total { fill: #1a1a1a }
.vpanel.dash .donut-label { fill: #5a5a5a }
.vpanel.dash .donut-legend { color: #2a2a2a }
.vpanel.dash .donut-legend li em { color: #5a5a5a }
.vpanel.dash .act-txt b { color: #2a2a2a }
.vpanel.dash .act-txt em { color: #5a5a5a }
.vpanel.dash .act-tag { color: #5a5a5a; border-color: rgba(0,0,0,.08) }
.vpanel.dash .act-tag.act-ok { color: #059669; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08) }
/* KPI icon accents — darker for light bg */
.vpanel.dash .k-rev { background: rgba(var(--sk-primary-rgb),.12); color: var(--sk-primary-300) }
.vpanel.dash .k-lead { background: rgba(52,211,153,.12); color: #059669 }
.vpanel.dash .k-conv { background: rgba(245,158,11,.12); color: #d97706 }
.vpanel.dash .k-contact { background: rgba(139,92,246,.12); color: #7c3aed }
/* Activity icon accents */
.vpanel.dash .act-ic.call { background: rgba(var(--sk-primary-rgb),.12); color: var(--sk-primary-300) }
.vpanel.dash .act-ic.visit { background: rgba(245,158,11,.12); color: #d97706 }
.vpanel.dash .act-ic.sign { background: rgba(52,211,153,.12); color: #059669 }
.vpanel.dash .act-ic.send { background: rgba(139,92,246,.12); color: #7c3aed }

/* ============================================================
   LIGHT RESTORATION — vpanel.hier-panel (Hierarchy mock)
   ============================================================ */
.vpanel.hier-panel {
  --sk-bg: #e0e0e0; --sk-bg-elevated: #d6d6d6;
  --sk-surface-1: #e8e8e8; --sk-surface-2: #ececec;
  --sk-text-hi: #1a1a1a; --sk-text: #2a2a2a; --sk-text-muted: #5a5a5a;
  --sk-text-dim: #808080; --sk-text-disabled: #b0b0b0;
  --sk-primary-300: #0d9488;
  --sk-border: rgba(0,0,0,0.08); --sk-border-strong: rgba(0,0,0,0.12);
  --sk-divider: rgba(0,0,0,0.06);
  --sk-shadow-2: 6px 6px 12px rgba(0,0,0,0.15), -6px -6px 12px rgba(255,255,255,0.8);
  --sk-shadow-3: 8px 8px 16px rgba(0,0,0,0.15), -8px -8px 16px rgba(255,255,255,0.85);
  background: #e0e0e0;
  border-color: rgba(0,0,0,.04);
  box-shadow: 8px 8px 16px rgba(0,0,0,.12), -8px -8px 16px rgba(255,255,255,.7);
}
.vpanel.hier-panel .vp-head { color: #2a2a2a; border-bottom-color: rgba(0,0,0,.06) }
.vpanel.hier-panel .vp-head .d span { background: rgba(0,0,0,.15) }
.vpanel.hier-panel .hn { background: rgba(0,0,0,.03) }
.vpanel.hier-panel .hn.sel { background: rgba(var(--sk-primary-rgb),.15); border-color: rgba(var(--sk-primary-rgb),.3) }

/* ============================================================
   LIGHT RESTORATION — Hero panels (Workflows + Orchestrator)
   ============================================================ */
.mock .panel {
  --sk-bg: #e0e0e0; --sk-bg-elevated: #d6d6d6;
  --sk-surface-1: #e8e8e8; --sk-surface-2: #ececec;
  --sk-text-hi: #1a1a1a; --sk-text: #2a2a2a; --sk-text-muted: #5a5a5a;
  --sk-text-dim: #808080; --sk-text-disabled: #b0b0b0;
  --sk-primary-300: #0d9488;
  --sk-border: rgba(0,0,0,0.08); --sk-border-strong: rgba(0,0,0,0.12);
  --sk-divider: rgba(0,0,0,0.06);
  --sk-shadow-2: 6px 6px 12px rgba(0,0,0,0.15), -6px -6px 12px rgba(255,255,255,0.8);
  --sk-shadow-3: 8px 8px 16px rgba(0,0,0,0.15), -8px -8px 16px rgba(255,255,255,0.85);
  background: #e0e0e0;
  border-color: rgba(0,0,0,.04);
  box-shadow: 8px 8px 16px rgba(0,0,0,.12), -8px -8px 16px rgba(255,255,255,.7);
}
.mock .wf-track { background: rgba(0,0,0,.06) }
.mock .bub.u { background: rgba(0,0,0,.03) }
.mock .bub.a { background: linear-gradient(145deg, rgba(var(--sk-primary-rgb),.08), rgba(224,224,224,.5)); border-color: rgba(var(--sk-primary-rgb),.2) }
.mock .ph { background: rgba(0,0,0,.04) }
.mock .ia.ghost { border-color: rgba(0,0,0,.12) }
.mock .composer { background: rgba(0,0,0,.04) }
.mock .scene-dots .sd { background: rgba(0,0,0,.12) }
.mock .orch-action { background: rgba(0,0,0,.03) }
.mock .osr { background: rgba(0,0,0,.03) }
.mock .osr .pg .tr { background: rgba(0,0,0,.06) }

/* ============================================================
   LIGHT RESTORATION — vpanel.agents-panel (AI Agents Organigrama)
   ============================================================ */
.vpanel.agents-panel {
  --sk-bg: #e0e0e0; --sk-bg-elevated: #d6d6d6;
  --sk-surface-1: #e8e8e8; --sk-surface-2: #ececec;
  --sk-text-hi: #1a1a1a; --sk-text: #2a2a2a; --sk-text-muted: #5a5a5a;
  --sk-text-dim: #808080; --sk-text-disabled: #b0b0b0;
  --sk-primary-300: #0d9488; --sk-primary-500: #14b8a6;
  --sk-secondary-400: #2dd4bf; --sk-warning-500: #f59e0b;
  --sk-border: rgba(0,0,0,0.08); --sk-border-strong: rgba(0,0,0,0.12);
  --sk-divider: rgba(0,0,0,0.06);
  --sk-shadow-2: 6px 6px 12px rgba(0,0,0,0.15), -6px -6px 12px rgba(255,255,255,0.8);
  --sk-shadow-3: 8px 8px 16px rgba(0,0,0,0.15), -8px -8px 16px rgba(255,255,255,0.85);
  background: #e0e0e0;
  border-color: rgba(0,0,0,.04);
  box-shadow: 8px 8px 16px rgba(0,0,0,.12), -8px -8px 16px rgba(255,255,255,.7);
}
.vpanel.agents-panel .vp-head { color: #2a2a2a; border-bottom-color: rgba(0,0,0,.06) }
.vpanel.agents-panel .vp-head .d span { background: rgba(0,0,0,.15) }
.vpanel.agents-panel .ap-meta { color: #808080 }
.vpanel.agents-panel .ap-canvas { background: radial-gradient(ellipse at 50% 0%, rgba(var(--sk-primary-rgb),.06), transparent 55%), #e0e0e0 }
.vpanel.agents-panel .ap-grid { background-image: linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px) }
.vpanel.agents-panel .ap-edge { stroke: rgba(var(--sk-primary-rgb),.22) }
.vpanel.agents-panel .ap-edge.master { stroke: rgba(var(--sk-primary-rgb),.38) }
.vpanel.agents-panel .ap-edge.hot { stroke: rgba(var(--sk-primary-rgb),.6) }
.vpanel.agents-panel .ap-node { background: #e0e0e0; border-color: rgba(0,0,0,.1); box-shadow: 3px 3px 6px rgba(0,0,0,.1), -3px -3px 6px rgba(255,255,255,.7); max-width: 180px }
.vpanel.agents-panel .ap-node .nn { color: #2a2a2a }
.vpanel.agents-panel .ap-node .nt { color: #808080 }
.vpanel.agents-panel .ap-node .nd { box-shadow: 0 0 0 2px rgba(0,0,0,.06) }
.vpanel.agents-panel .ap-node.master { background: linear-gradient(145deg, rgba(var(--sk-primary-rgb),.12), #e0e0e0); border-color: rgba(var(--sk-primary-rgb),.35); box-shadow: 0 0 0 4px rgba(var(--sk-primary-rgb),.08), 4px 4px 10px rgba(0,0,0,.1), -4px -4px 10px rgba(255,255,255,.7); max-width: 220px }
.vpanel.agents-panel .ap-node.master .nn { color: #1a1a1a }
.vpanel.agents-panel .ap-node.area { background: linear-gradient(145deg, rgba(var(--sk-primary-rgb),.08), #dcdcdc); border-color: rgba(var(--sk-primary-rgb),.25) }
.vpanel.agents-panel .ap-node.agent { background: #d8d8d8; border-color: rgba(0,0,0,.08) }
.vpanel.agents-panel .ap-node.agent .nn { color: #5a5a5a }
.vpanel.agents-panel .ap-node:hover { box-shadow: 0 0 0 1px rgba(var(--sk-primary-rgb),.4), 4px 4px 12px rgba(0,0,0,.12), -4px -4px 12px rgba(255,255,255,.8); z-index: 5 }
.vpanel.agents-panel .ap-tooltip { background: rgba(255,255,255,.97); border-color: rgba(0,0,0,.1); color: #2a2a2a; box-shadow: 6px 6px 12px rgba(0,0,0,.12), -6px -6px 12px rgba(255,255,255,.8) }
.vpanel.agents-panel .ap-tooltip .tt-hd b { color: #1a1a1a }
.vpanel.agents-panel .ap-tooltip .tt-task { color: #5a5a5a }
.vpanel.agents-panel .ap-tooltip .tt-meta { color: #b0b0b0 }
.vpanel.agents-panel .ap-legend { color: #808080 }
.vpanel.agents-panel .ap-legend .ld.agent { background: #6b7280 }

/* ---- Wider layout for AI agents section ---- */
.row.ai-row { grid-template-columns: .45fr 1fr; gap: 40px }

/* ============================================================
   LIGHT RESTORATION — vpanel.intg-panel (Integrations)
   ============================================================ */
.vpanel.intg-panel {
  --sk-bg: #e0e0e0; --sk-bg-elevated: #d6d6d6;
  --sk-surface-1: #e8e8e8; --sk-surface-2: #ececec;
  --sk-text-hi: #1a1a1a; --sk-text: #2a2a2a; --sk-text-muted: #5a5a5a;
  --sk-text-dim: #808080; --sk-text-disabled: #b0b0b0;
  --sk-primary-300: #0d9488; --sk-secondary-400: #2dd4bf;
  --sk-border: rgba(0,0,0,0.08); --sk-border-strong: rgba(0,0,0,0.12);
  --sk-divider: rgba(0,0,0,0.06);
  --sk-shadow-2: 6px 6px 12px rgba(0,0,0,0.15), -6px -6px 12px rgba(255,255,255,0.8);
  background: #e0e0e0;
  border-color: rgba(0,0,0,.04);
  box-shadow: 8px 8px 16px rgba(0,0,0,.12), -8px -8px 16px rgba(255,255,255,.7);
}
.vpanel.intg-panel .vp-head { color: #2a2a2a; border-bottom-color: rgba(0,0,0,.06) }
.vpanel.intg-panel .vp-head .d span { background: rgba(0,0,0,.15) }
.vpanel.intg-panel .intg-ttl { color: #808080 }
.vpanel.intg-panel .intg-item { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); box-shadow: inset 2px 2px 4px rgba(0,0,0,.05), inset -2px -2px 4px rgba(255,255,255,.5) }
.vpanel.intg-panel .intg-item .ic { background: rgba(var(--sk-primary-rgb),.1); color: var(--sk-primary-300) }
.vpanel.intg-panel .intg-item .nm { color: #1a1a1a }
.vpanel.intg-panel .intg-item .dc { color: #808080 }
.vpanel.intg-panel .intg-item .st { color: #059669 }
.vpanel.intg-panel .intg-item .st .d { background: #059669 }

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:100}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 14px;background:var(--sk-primary-500);color:#fff;font-weight:600;border-radius:var(--sk-radius-sm);outline:2px solid var(--sk-primary-500);outline-offset:2px}
a:focus-visible, button:focus-visible, .btn:focus-visible{outline:2px solid var(--sk-primary-500);outline-offset:2px;border-radius:var(--sk-radius-xs)}
html,body{margin:0;padding:0;background:#e0e0e0;color:var(--sk-text);font-family:var(--sk-font-sans);-webkit-font-smoothing:antialiased}
body{
  background:#e0e0e0;
  background-attachment: fixed; min-height:100vh;
}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.15;
  background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 40%,transparent 80%)}
.container{max-width:1180px;margin:0 auto;padding:0 28px;position:relative;z-index:1}

/* NAV */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);background:rgba(224,224,224,.78);border-bottom:1px solid var(--sk-divider);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.nav-in{display:flex;align-items:center;height:60px;gap:28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--sk-text-hi);font-weight:600;letter-spacing:-.01em}
.brand img{height:22px;width:auto;display:block;filter:brightness(0.2)}
.brand .dom{font-family:var(--sk-font-mono);font-size:11px;color:var(--sk-text-dim);padding-left:10px;border-left:1px solid var(--sk-border);margin-left:2px}
.nav-links{display:flex;gap:22px;margin-left:12px}
.nav-links a{color:var(--sk-text-muted);text-decoration:none;font-size:13.5px;font-weight:450;transition:color .15s}
.nav-links a:hover{color:var(--sk-text-hi)}
.nav-spacer{flex:1}
.nav-ctas{display:flex;align-items:center;gap:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;height:36px;border-radius:var(--sk-radius-md);font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap;font-family:var(--sk-font-sans)}
.btn-ghost{color:var(--sk-text);background:var(--sk-bg);border-color:rgba(0,0,0,.1);box-shadow:3px 3px 6px rgba(0,0,0,0.1), -3px -3px 6px rgba(255,255,255,0.7)}
.btn-ghost:hover{border-color:rgba(0,0,0,.15);background:var(--sk-surface-1);box-shadow:inset 2px 2px 4px rgba(0,0,0,.08), inset -2px -2px 4px rgba(255,255,255,.5)}
.btn-primary{color:#fff;background:var(--sk-primary-500);box-shadow:3px 3px 8px rgba(0,0,0,.15), -3px -3px 8px rgba(255,255,255,.6)}
.btn-primary:hover{background:var(--sk-primary-600);box-shadow:inset 2px 2px 4px rgba(0,0,0,.15), inset -2px -2px 4px rgba(255,255,255,.2), 0 0 12px rgba(var(--sk-primary-rgb),.15)}
.btn-lg{height:44px;padding:0 20px;font-size:14px;border-radius:var(--sk-radius-lg)}
.btn-sm{height:30px;padding:0 12px;font-size:12px;border-radius:var(--sk-radius-sm)}

/* HERO */
.hero{padding:32px 0 28px;position:relative}
.hero > h1,.hero > p.sub,.hero > .hero-ctas{padding-left:60px}
.hero-logo-side{position:absolute;top:80px;right:40px;width:340px;opacity:.6;pointer-events:none;z-index:0;filter:drop-shadow(0 8px 32px rgba(var(--sk-primary-rgb),.15))}
.hero-logo-side img{width:100%;display:block;position:relative;z-index:1;filter:brightness(0.15)}
.hero-logo-side::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(var(--sk-primary-rgb),.06),transparent);background-size:100% 220%;animation:heroLogoScan 6s linear infinite;opacity:.4;z-index:2;-webkit-mask:url('/landing-assets/logo-white.png') no-repeat center / 100% 100%;mask:url('/landing-assets/logo-white.png') no-repeat center / 100% 100%}
@keyframes heroLogoScan{0%{background-position:0 -110%}100%{background-position:0 110%}}
@media (max-width:1024px){.hero-logo-side{display:none}}
.eyebrow{font-family:var(--sk-font-mono);font-size:11px;letter-spacing:.14em;color:var(--sk-primary-500);text-transform:uppercase;margin:0 0 20px;display:inline-flex;align-items:center;gap:10px}
.eyebrow .dot{width:6px;height:6px;border-radius:var(--sk-radius-full);background:var(--sk-primary-500);box-shadow:0 0 12px var(--sk-primary-500)}
.hero h1{font-size:44px;line-height:1.08;letter-spacing:-.03em;font-weight:700;color:var(--sk-text-hi);margin:0 0 14px;max-width:860px}
.hero h1 em{font-style:normal;background:linear-gradient(180deg,var(--sk-primary-500),var(--sk-primary-700));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:16px;line-height:1.5;color:var(--sk-text-muted);max-width:640px;margin:0 0 20px}
.hero-ctas{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hero-ctas .tertiary{color:var(--sk-text-dim);font-size:13.5px;text-decoration:none;margin-left:10px}
.hero-ctas .tertiary:hover{color:var(--sk-text)}

/* HERO MOCKUP — split panels */
.mock-wrap{margin-top:32px;perspective:2400px}
.mock{transform:rotateX(6deg) rotateY(-1.5deg);transform-style:preserve-3d;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;position:relative}
.mock::after{content:"";position:absolute;inset:-40px;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(var(--sk-primary-rgb),.08),transparent 70%);z-index:-1;pointer-events:none}

.panel{background:linear-gradient(145deg,rgba(var(--sk-primary-rgb),.12),rgba(13,17,23,.88));border:1px solid rgba(255,255,255,.12);border-radius:var(--sk-radius-xl);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:8px 8px 16px rgba(0,0,0,.12), -8px -8px 16px rgba(255,255,255,.7), 0 0 0 1px rgba(var(--sk-primary-rgb),.1);overflow:hidden;display:flex;flex-direction:column}
.p-head{padding:14px 18px;border-bottom:1px solid var(--sk-divider);display:flex;align-items:center;gap:10px}
.p-head h4{font-size:13px;color:var(--sk-text-hi);margin:0;font-weight:600;letter-spacing:-.01em;flex:1}
.p-head .meta{font-family:var(--sk-font-mono);font-size:10px;color:var(--sk-text-dim);letter-spacing:.06em}
.p-head .icon{color:var(--sk-primary-300)}

/* workflow list */
.wf-list{padding:8px;display:flex;flex-direction:column;gap:2px}
.wf{padding:11px 12px;border-radius:var(--sk-radius-md);display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;cursor:pointer;transition:background .15s;position:relative}
.wf:hover{background:rgba(255,255,255,.03)}
.wf.sel{background:rgba(var(--sk-primary-rgb),.12)}
.wf.sel::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--sk-primary-500);border-radius:2px}
.wf-av{width:28px;height:28px;border-radius:var(--sk-radius-full);display:flex;align-items:center;justify-content:center;font-family:var(--sk-font-sans);font-size:10px;font-weight:700;color:var(--sk-text-hi);text-transform:uppercase}
.wf-av.a{background:#475569;color:#f1f5f9}
.wf-av.b{background:#1e40af;color:#dbeafe}
.wf-av.c{background:#52525b;color:#fafafa}
.wf-av.d{background:#334155;color:#e2e8f0}
.wf-av.e{background:#1e3a8a;color:#bfdbfe}
.wf-mid{min-width:0}
.wf-ttl{font-size:13.5px;color:var(--sk-text-hi);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.wf-row{display:flex;align-items:center;gap:8px}
.wf-state{font-family:var(--sk-font-mono);font-size:10px;letter-spacing:.04em;color:var(--sk-text-dim);display:flex;align-items:center;gap:4px}
.wf-state .d{width:6px;height:6px;border-radius:var(--sk-radius-full);background:var(--sk-secondary-400)}
.wf-state.review .d{background:var(--sk-warning-400)}
.wf-state.plan .d{background:#6b7280}
.wf-track{flex:1;height:3px;background:rgba(255,255,255,.06);border-radius:var(--sk-radius-full);overflow:hidden;min-width:60px}
.wf-fill{height:100%;background:linear-gradient(90deg,rgba(var(--sk-primary-rgb),.9),rgba(var(--sk-primary-rgb),.5));border-radius:var(--sk-radius-full)}
.wf-right{text-align:right;font-family:var(--sk-font-mono);font-size:11px;color:var(--sk-text-hi);font-weight:600}
.wf-right .sub{font-size:10px;color:var(--sk-text-dim);font-weight:400;margin-top:2px}

/* orchestrator panel */
.orch{display:flex;flex-direction:column;min-height:420px}
.orch .p-head .pulse{width:8px;height:8px;border-radius:var(--sk-radius-full);background:var(--sk-primary-500);box-shadow:0 0 10px var(--sk-primary-500);animation:ppulse 2s ease-in-out infinite}
@keyframes ppulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
.msgs{flex:1;padding:16px 18px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .mav{width:24px;height:24px;border-radius:var(--sk-radius-full);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--sk-text-hi)}
.msg .mav.u{background:#475569}
.msg .mav.a{background:linear-gradient(145deg,var(--sk-primary-500),var(--sk-primary-700));box-shadow:0 0 0 1px rgba(var(--sk-primary-rgb),.3)}
.bub{flex:1;min-width:0;padding:10px 13px;border-radius:var(--sk-radius-lg);font-size:13.5px;line-height:1.55;color:var(--sk-text)}
.bub.u{background:rgba(255,255,255,.04);border:1px solid var(--sk-divider)}
.bub.a{background:linear-gradient(145deg,rgba(var(--sk-primary-rgb),.1),rgba(13,17,23,.4));border:1px solid rgba(var(--sk-primary-rgb),.18)}
.bub .name{font-family:var(--sk-font-mono);font-size:10px;color:var(--sk-text-dim);letter-spacing:.04em;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.bub.a .name{color:var(--sk-primary-300)}
.bub .name b{color:var(--sk-text-hi);font-weight:500}
.bub .ts{margin-left:auto;color:var(--sk-text-dim)}
.bub p{margin:0;color:var(--sk-text)}
.bub.a p b{color:var(--sk-primary-300);font-weight:500}
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.ph{padding:8px 8px;background:rgba(13,17,23,.5);border:1px solid var(--sk-divider);border-radius:var(--sk-radius-sm);text-align:center}
.ph .n{font-family:var(--sk-font-mono);font-size:9px;color:var(--sk-primary-300);letter-spacing:.1em;margin-bottom:3px}
.ph .t{font-size:11px;color:var(--sk-text-hi);font-weight:500}
.inline-actions{display:flex;gap:8px;margin-top:10px}
.ia{padding:6px 12px;border-radius:var(--sk-radius-sm);font-size:12px;font-weight:500;cursor:pointer;border:1px solid transparent;font-family:var(--sk-font-sans)}
.ia.primary{background:var(--sk-primary-500);color:var(--sk-text-hi)}
.ia.ghost{background:transparent;color:var(--sk-text);border-color:rgba(255,255,255,.15)}
.composer{padding:12px 14px;border-top:1px solid var(--sk-divider);display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.15)}
.composer-text{flex:1;color:var(--sk-text-dim);font-size:13px;font-family:var(--sk-font-sans);min-height:16px;display:flex;align-items:center}
.composer-text.typing{color:var(--sk-text)}
.composer-text .caret{display:inline-block;width:1.5px;height:14px;background:var(--sk-primary-500);margin-left:2px;vertical-align:middle;animation:blinkCaret 1s steps(2) infinite;opacity:0}
.composer-text.typing .caret{opacity:1}
@keyframes blinkCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
.composer .send{width:28px;height:28px;border-radius:var(--sk-radius-sm);background:var(--sk-primary-500);color:var(--sk-text-hi);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease}
.composer .send.pulse{transform:scale(.92);box-shadow:0 0 0 4px rgba(var(--sk-primary-rgb),.25)}

/* scene dots in panel header */
.scene-dots{display:flex;gap:5px;margin-left:auto}
.scene-dots .sd{width:5px;height:5px;border-radius:var(--sk-radius-full);background:rgba(255,255,255,.15);transition:background .3s, width .3s}
.scene-dots .sd.active{background:var(--sk-primary-500);width:18px;border-radius:var(--sk-radius-xs)}

/* message enter animation */
.orch .msg{opacity:0;transform:translateY(8px);animation:msgIn .4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes msgIn{to{opacity:1;transform:translateY(0)}}

/* typing indicator inside agent bubble */
.typing-dots{display:inline-flex;align-items:center;gap:4px;height:18px;padding:2px 4px}
.typing-dots span{width:5px;height:5px;border-radius:var(--sk-radius-full);background:var(--sk-primary-300);opacity:.4;animation:td 1.2s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.18s}
.typing-dots span:nth-child(3){animation-delay:.36s}
@keyframes td{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* phases stagger */
.phases.anim .ph{opacity:0;transform:translateY(6px);animation:phaseIn .35s ease forwards}
.phases.anim .ph:nth-child(1){animation-delay:.05s}
.phases.anim .ph:nth-child(2){animation-delay:.14s}
.phases.anim .ph:nth-child(3){animation-delay:.23s}
.phases.anim .ph:nth-child(4){animation-delay:.32s}
@keyframes phaseIn{to{opacity:1;transform:translateY(0)}}

/* inline-actions subtle slide */
.inline-actions.anim{opacity:0;transform:translateY(4px);animation:iaIn .35s ease .5s forwards}
@keyframes iaIn{to{opacity:1;transform:translateY(0)}}

/* scene 2 — action suggestion block */
.orch-action{margin-top:10px;padding:10px 12px;border-radius:var(--sk-radius-md);background:rgba(255,255,255,.035);border:1px solid var(--sk-divider);border-left:2px solid var(--sk-primary-500);font-size:12.5px;line-height:1.5;color:var(--sk-text-muted)}
.orch-action .lab{font-family:var(--sk-font-mono);font-size:9.5px;color:var(--sk-primary-300);letter-spacing:.1em;margin-bottom:4px;text-transform:uppercase}
.orch-action b{color:var(--sk-text-hi);font-weight:500}

/* scene 3 — summary block with mini bars */
.orch-summary{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.osr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--sk-radius-sm);background:rgba(255,255,255,.03);border:1px solid var(--sk-divider)}
.osr .ot{font-size:12px;color:var(--sk-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osr .ot .dot{display:inline-block;width:6px;height:6px;border-radius:var(--sk-radius-full);background:var(--sk-secondary-400);margin-right:7px;vertical-align:middle}
.osr .ot .dot.slate{background:#6b7280}
.osr .pg{display:flex;align-items:center;gap:8px}
.osr .pg .tr{width:60px;height:3px;background:rgba(255,255,255,.06);border-radius:var(--sk-radius-full);overflow:hidden}
.osr .pg .tr .fl{height:100%;background:linear-gradient(90deg,rgba(var(--sk-primary-rgb),.9),rgba(var(--sk-primary-rgb),.5));border-radius:var(--sk-radius-full);width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.osr .pg .pt{font-family:var(--sk-font-mono);font-size:10.5px;color:var(--sk-text-hi);font-weight:600;min-width:26px;text-align:right}
.orch-summary.anim .osr{opacity:0;transform:translateY(6px);animation:phaseIn .35s ease forwards}
.orch-summary.anim .osr:nth-child(1){animation-delay:.05s}
.orch-summary.anim .osr:nth-child(2){animation-delay:.15s}
.orch-summary.anim .osr:nth-child(3){animation-delay:.25s}

/* pause overlay */
.orch.paused .p-head .pulse{animation:none;opacity:.4}

/* ================= DASHBOARD MOCK ================= */
.vpanel.dash{padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:6px 6px 12px rgba(0,0,0,.12), -6px -6px 12px rgba(255,255,255,.7)}
.dash .vp-head{padding:0 2px 10px;border-bottom:1px solid rgba(0,0,0,.06);margin-bottom:2px}

.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:var(--sk-bg);border:1px solid rgba(0,0,0,.04);border-radius:var(--sk-radius-lg);padding:12px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;box-shadow:inset 2px 2px 4px rgba(0,0,0,.06), inset -2px -2px 4px rgba(255,255,255,.5)}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--sk-primary-500),transparent);opacity:0;transition:opacity .6s ease}
.kpi.on::before{opacity:.7}
.kpi-ic{width:22px;height:22px;border-radius:var(--sk-radius-sm);display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--sk-font-mono);color:var(--sk-text-hi);margin-bottom:2px}
.k-rev{background:rgba(var(--sk-primary-rgb),.15);color:var(--sk-primary-300)}
.k-lead{background:rgba(52,211,153,.15);color:var(--sk-secondary-400)}
.k-conv{background:rgba(245,158,11,.15);color:var(--sk-warning-500)}
.k-contact{background:rgba(139,92,246,.15);color:#a78bfa}
.kpi-v{font-size:18px;font-weight:700;color:var(--sk-text-hi);letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi-l{font-size:11px;color:var(--sk-text-dim);line-height:1.3}

.dash-charts{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.dcard{background:var(--sk-bg);border:1px solid rgba(0,0,0,.04);border-radius:var(--sk-radius-lg);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0;box-shadow:inset 2px 2px 4px rgba(0,0,0,.06), inset -2px -2px 4px rgba(255,255,255,.5)}
.dcard-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dcard-t{font-size:12.5px;color:var(--sk-text);font-weight:600;letter-spacing:-.005em}
.dcard-s{font-size:10.5px;color:var(--sk-text-dim);margin-top:2px}
.dcard-val{font-size:14px;color:var(--sk-text-hi);font-weight:600;font-variant-numeric:tabular-nums}

.line-chart{width:100%;height:90px;display:block}
#line-path{stroke-dasharray:1000;stroke-dashoffset:1000}
.dash.anim #line-path{animation:drawLine 1.6s cubic-bezier(.4,.1,.3,1) forwards}
.dash.anim #line-area{animation:chartFadeIn .6s ease 1.3s forwards}
.dash.anim #line-mark{animation:chartFadeIn .3s ease 1.5s forwards}
.dash.anim #line-mark-ring{animation:ringPulse 1.6s ease 1.6s infinite}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes chartFadeIn{to{opacity:1}}
@keyframes ringPulse{0%{r:4;opacity:.8}100%{r:11;opacity:0}}
.line-labels{display:flex;justify-content:space-between;padding:0 2px;font-family:var(--sk-font-mono);font-size:9.5px;color:var(--sk-text-disabled);letter-spacing:.06em}

.donut-wrap{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.donut{width:84px;height:84px;flex-shrink:0}
.dseg{transition:stroke-dasharray 1s cubic-bezier(.3,.8,.3,1)}
.donut-total{fill:var(--sk-text-hi);font-size:14px;font-weight:700;font-family:var(--sk-font-sans);font-variant-numeric:tabular-nums}
.donut-label{fill:var(--sk-text-dim);font-size:7px;font-family:var(--sk-font-mono);letter-spacing:.1em;text-transform:uppercase}
.donut-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--sk-text-muted);min-width:0}
.donut-legend li{display:flex;align-items:center;gap:6px;line-height:1.4}
.donut-legend li em{margin-left:auto;font-style:normal;color:var(--sk-text-dim);font-family:var(--sk-font-mono);font-size:9.5px;font-variant-numeric:tabular-nums}
.donut-legend .sw{width:7px;height:7px;border-radius:2px;flex-shrink:0}

.dash-activity .act-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.act-list li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:7px 8px;border-radius:var(--sk-radius-sm);background:rgba(0,0,0,.02);border:1px solid transparent;opacity:0;transform:translateX(-6px)}
.dash.anim .act-list li{animation:actIn .4s cubic-bezier(.2,.8,.2,1) forwards}
.dash.anim .act-list li:nth-child(1){animation-delay:1.8s}
.dash.anim .act-list li:nth-child(2){animation-delay:2.05s}
.dash.anim .act-list li:nth-child(3){animation-delay:2.3s}
.dash.anim .act-list li:nth-child(4){animation-delay:2.55s}
@keyframes actIn{to{opacity:1;transform:translateX(0)}}
.act-ic{width:24px;height:24px;border-radius:var(--sk-radius-sm);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--sk-text-hi);font-family:var(--sk-font-mono)}
.act-ic.call{background:rgba(var(--sk-primary-rgb),.18);color:var(--sk-primary-300)}
.act-ic.visit{background:rgba(245,158,11,.18);color:var(--sk-warning-500)}
.act-ic.sign{background:rgba(52,211,153,.18);color:var(--sk-secondary-400)}
.act-ic.send{background:rgba(139,92,246,.18);color:#a78bfa}
.act-txt{min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.act-txt b{font-size:12px;font-weight:500;color:var(--sk-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-txt em{font-style:normal;font-size:10.5px;color:var(--sk-text-dim)}
.act-tag{font-family:var(--sk-font-mono);font-size:9px;letter-spacing:.08em;color:var(--sk-text-dim);padding:3px 7px;border:1px solid var(--sk-border);border-radius:var(--sk-radius-full);text-transform:uppercase;flex-shrink:0}
.act-tag.act-ok{color:var(--sk-secondary-400);border-color:rgba(52,211,153,.25);background:rgba(52,211,153,.06)}

/* ================= AGENTS TREE (n8n-style) ================= */
.vpanel.agents-panel{padding:0;overflow:hidden;display:flex;flex-direction:column;box-shadow:6px 6px 12px rgba(0,0,0,.12), -6px -6px 12px rgba(255,255,255,.7)}
.agents-panel .vp-head{padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--sk-text-muted)}
.agents-panel .vp-head .ap-meta{margin-left:auto;font-family:var(--sk-font-mono);font-size:10px;color:var(--sk-text-dim);display:flex;align-items:center;gap:8px}
.ap-live{display:inline-flex;align-items:center;gap:5px;color:var(--sk-secondary-400);font-weight:600}
.ap-live .pd{width:6px;height:6px;border-radius:var(--sk-radius-full);background:var(--sk-secondary-400);animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.25)}}

.ap-canvas{position:relative;height:520px;width:100%;background:
  radial-gradient(ellipse at 50% 0%, rgba(var(--sk-primary-rgb),.08), transparent 55%),
  var(--sk-bg-elevated);
  overflow:hidden;user-select:none;touch-action:none}
.ap-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:24px 24px;pointer-events:none;mask-image:radial-gradient(ellipse at center, black 60%, transparent 100%)}

.ap-edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ap-edge{fill:none;stroke:rgba(74,222,128,.18);stroke-width:1.25;transition:stroke .2s}
.ap-edge.hot{stroke:rgba(var(--sk-primary-rgb),.55)}
.ap-edge.master{stroke-width:1.6;stroke:rgba(var(--sk-primary-rgb),.28)}

/* packets */
.ap-packet{fill:var(--sk-primary-500);filter:drop-shadow(0 0 4px rgba(var(--sk-primary-rgb),.9))}
.ap-packet.down{fill:var(--sk-primary-300)}
.ap-packet.up{fill:var(--sk-secondary-400);filter:drop-shadow(0 0 4px rgba(52,211,153,.9))}

.ap-nodes{position:absolute;inset:0;pointer-events:none}
.ap-node{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);cursor:grab;transition:box-shadow .2s, transform .08s;background:var(--sk-bg-elevated);border:1px solid var(--sk-border-strong);border-radius:var(--sk-radius-md);padding:6px 10px;display:flex;align-items:center;gap:7px;min-width:68px;max-width:150px;white-space:nowrap}
.ap-node:active{cursor:grabbing;z-index:10}
.ap-node .nd{width:6px;height:6px;border-radius:var(--sk-radius-full);background:#6b7280;flex-shrink:0;box-shadow:0 0 0 2px rgba(107,114,128,.15)}
.ap-node .nn{font-size:11px;color:var(--sk-text);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.ap-node .nt{font-family:var(--sk-font-mono);font-size:9px;color:var(--sk-text-dim);letter-spacing:.06em;text-transform:uppercase}

/* variants */
.ap-node.master{background:linear-gradient(145deg,rgba(var(--sk-primary-rgb),.2),rgba(var(--sk-primary-rgb),.06));border-color:rgba(var(--sk-primary-rgb),.45);padding:8px 14px;box-shadow:0 0 0 4px rgba(var(--sk-primary-rgb),.08), 0 6px 20px rgba(0,0,0,.3)}
.ap-node.master .nd{background:var(--sk-primary-500);box-shadow:0 0 0 2px rgba(var(--sk-primary-rgb),.25);animation:masterPulse 2s ease-in-out infinite}
.ap-node.master .nn{color:var(--sk-text-hi);font-weight:600;font-size:12px}
@keyframes masterPulse{0%,100%{box-shadow:0 0 0 2px rgba(var(--sk-primary-rgb),.25)}50%{box-shadow:0 0 0 5px rgba(var(--sk-primary-rgb),.08)}}

.ap-node.area{background:linear-gradient(145deg,rgba(74,222,128,.12),rgba(17,22,29,.9));border-color:rgba(74,222,128,.32)}
.ap-node.area .nd{background:var(--sk-primary-300)}
.ap-node.agent{background:rgba(17,22,29,.85);border-color:var(--sk-border);padding:5px 8px;min-width:56px}
.ap-node.agent .nn{font-size:10px;color:var(--sk-text-muted)}
.ap-node.agent .nd{width:5px;height:5px}

/* status colors */
.ap-node[data-status="working"] .nd{background:var(--sk-warning-500);animation:workPulse .9s ease-in-out infinite}
@keyframes workPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(245,158,11,.5)}50%{opacity:.7;box-shadow:0 0 0 5px rgba(245,158,11,0)}}
.ap-node[data-status="done"] .nd{background:var(--sk-secondary-400)}
.ap-node[data-status="idle"] .nd{background:#6b7280}

.ap-node:hover{box-shadow:0 0 0 1px rgba(var(--sk-primary-rgb),.5),0 8px 24px rgba(0,0,0,.4);z-index:5}

/* tooltip */
.ap-tooltip{position:absolute;pointer-events:none;background:rgba(13,17,23,.97);border:1px solid rgba(255,255,255,.12);border-radius:var(--sk-radius-md);padding:10px 12px;font-size:11px;color:var(--sk-text);line-height:1.5;max-width:240px;box-shadow:var(--sk-shadow-2);opacity:0;transform:translateY(4px);transition:opacity .18s ease, transform .18s ease;z-index:20;backdrop-filter:blur(8px)}
.ap-tooltip.show{opacity:1;transform:translateY(0)}
.ap-tooltip .tt-hd{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.ap-tooltip .tt-hd b{font-size:12px;color:var(--sk-text-hi);font-weight:600}
.ap-tooltip .tt-hd .tt-st{margin-left:auto;font-family:var(--sk-font-mono);font-size:9px;letter-spacing:.1em;color:var(--sk-text-dim);text-transform:uppercase;padding:2px 6px;border-radius:var(--sk-radius-full);border:1px solid var(--sk-border-strong)}
.ap-tooltip .tt-hd .tt-st.working{color:var(--sk-warning-500);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.ap-tooltip .tt-hd .tt-st.done{color:var(--sk-secondary-400);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08)}
.ap-tooltip .tt-hd .tt-st.idle{color:var(--sk-text-dim)}
.ap-tooltip .tt-task{color:var(--sk-text-muted);margin-bottom:4px}
.ap-tooltip .tt-meta{font-family:var(--sk-font-mono);font-size:9.5px;color:var(--sk-text-disabled);letter-spacing:.04em}

/* legend */
.ap-legend{position:absolute;left:14px;bottom:10px;right:14px;display:flex;align-items:center;gap:14px;font-family:var(--sk-font-mono);font-size:9.5px;color:var(--sk-text-dim);letter-spacing:.04em;z-index:2;pointer-events:none}
.ap-legend span{display:inline-flex;align-items:center;gap:5px}
.ap-legend .ld{width:8px;height:8px;border-radius:2px}
.ap-legend .ld.master{background:var(--sk-primary-500)}
.ap-legend .ld.area{background:var(--sk-primary-300)}
.ap-legend .ld.agent{background:#6b7280}
.ap-legend .ap-hint{margin-left:auto}

/* ================= ECO3 — Three products with mockups ================= */
.eco3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1160px;margin:0 auto}
.eco3-card{position:relative;display:flex;flex-direction:column;border-radius:var(--sk-radius-xl);overflow:hidden;background:#e0e0e0;border:1px solid rgba(0,0,0,.04);text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;box-shadow:6px 6px 12px rgba(0,0,0,.12), -6px -6px 12px rgba(255,255,255,.7)}
.eco3-card:hover{transform:translateY(-3px);box-shadow:8px 8px 16px rgba(0,0,0,.15), -8px -8px 16px rgba(255,255,255,.85)}
.eco3-card.eco3-self{border-color:rgba(var(--sk-primary-rgb),.2);background:linear-gradient(145deg, #ddf0e5, #d6e8dd)}
.eco3-card.eco3-self:hover{box-shadow:8px 8px 16px rgba(0,0,0,.15), -8px -8px 16px rgba(255,255,255,.85), 0 0 20px rgba(var(--sk-primary-rgb),.1)}
.eco3-badge{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--sk-font-mono);font-size:9px;letter-spacing:.1em;color:#fff;background:var(--sk-primary-500);padding:4px 8px;border-radius:var(--sk-radius-xs);text-transform:uppercase;font-weight:600}
.eco3-mock{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sk-bg-elevated);border-bottom:1px solid rgba(0,0,0,.06)}
.eco3-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
.eco3-hd{display:flex;align-items:center;gap:8px}
.eco3-dot{width:8px;height:8px;border-radius:var(--sk-radius-full);flex-shrink:0}
.eco3-name{font-family:var(--sk-font-mono);font-size:13.5px;color:var(--sk-text-hi);margin:0;font-weight:500;letter-spacing:-.005em}
.eco3-desc{font-size:13px;color:var(--sk-text-muted);line-height:1.55;margin:0;min-height:40px}
.eco3-cta{font-family:var(--sk-font-mono);font-size:11.5px;color:var(--sk-primary-500);margin-top:auto;letter-spacing:.03em}
.eco3-card:hover .eco3-cta{color:var(--sk-primary-600)}

/* Card 1 — skyn3t.cl (static PNG + motion overlay) */
.sk-home{background:var(--sk-bg-elevated)}
.sk-iframe-wrap{display:none}
.sk-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .45s ease, transform .8s ease;z-index:2}
.eco3-card:hover .sk-fallback{opacity:1;transform:scale(1.03)}
.sk-hover-cta{position:absolute;right:10px;bottom:10px;z-index:4;font-family:var(--sk-font-mono);font-size:10px;letter-spacing:.08em;color:var(--sk-bg-elevated);background:rgba(74,222,128,.95);padding:5px 9px;border-radius:var(--sk-radius-xs);opacity:0;transform:translateY(4px);transition:opacity .25s, transform .25s;text-transform:uppercase}
.eco3-card:hover .sk-hover-cta{opacity:1;transform:translateY(0)}

/* Animated "live" overlay */
.sk-home::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(circle at 30% 40%, rgba(74,222,128,0.18), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(var(--sk-primary-rgb),0.12), transparent 50%);
  mix-blend-mode:screen;
  animation:skPulse 7s ease-in-out infinite;
}
.sk-home::after{
  content:'';position:absolute;inset:-20%;z-index:3;pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.08) 48%, rgba(74,222,128,0.12) 50%, rgba(255,255,255,0.06) 52%, transparent 65%);
  transform:translateX(-60%);
  animation:skShimmer 5.5s ease-in-out infinite;
}
@keyframes skPulse{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}
@keyframes skShimmer{
  0%{transform:translateX(-80%)}
  60%{transform:translateX(80%)}
  100%{transform:translateX(80%)}
}
.eco3-scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(var(--sk-primary-rgb),.06),transparent);background-size:100% 220%;animation:ecoScan 6s linear infinite;opacity:.7}
@keyframes ecoScan{0%{background-position:0 -110%}100%{background-position:0 110%}}

/* Card 2 — SKYN3T AI Manager mini-dashboard */
.sk-manager{padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--sk-bg-elevated);color:var(--sk-text-muted)}
.mx-head{display:flex;align-items:center;gap:8px;padding-bottom:4px}
.mx-dots{display:flex;gap:4px}
.mx-dots span{width:6px;height:6px;border-radius:var(--sk-radius-full);background:rgba(255,255,255,.15)}
.mx-url{font-family:var(--sk-font-mono);font-size:10px;color:var(--sk-text-dim)}
.mx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mx-kpi{background:rgba(255,255,255,.03);border:1px solid var(--sk-divider);border-radius:var(--sk-radius-sm);padding:6px 8px;display:flex;flex-direction:column;gap:1px}
.mx-k-l{font-size:9px;color:var(--sk-text-dim);font-family:var(--sk-font-mono);letter-spacing:.05em}
.mx-kpi b{font-size:12px;color:var(--sk-text-hi);font-weight:600;font-variant-numeric:tabular-nums}
.mx-chart svg{width:100%;height:42px;display:block}
.mx-line{stroke-dasharray:400;stroke-dashoffset:400;animation:mxDraw 2.2s ease-out .4s forwards infinite alternate}
@keyframes mxDraw{to{stroke-dashoffset:0}}
.mx-rows{display:flex;flex-direction:column;gap:4px}
.mx-row{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:7px;padding:5px 7px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04);border-radius:5px}
.mx-r-ic{width:6px;height:6px;border-radius:var(--sk-radius-full);background:var(--sk-secondary-400)}
.mx-r-ic.ic-a{background:var(--sk-warning-500)}
.mx-r-t{font-size:10.5px;color:var(--sk-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-r-tag{font-family:var(--sk-font-mono);font-size:9px;color:var(--sk-text-dim)}
.mx-r-tag.mx-ok{color:var(--sk-secondary-400)}

/* Card 3 — Encrypt forensic terminal */
.sk-enc{padding:0;background:var(--sk-bg-elevated);position:relative;overflow:hidden;font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace}
.sk-enc .et-head{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--sk-bg-elevated);border-bottom:1px solid rgba(var(--sk-primary-rgb),.18)}
.et-dots{display:flex;gap:4px}
.et-dots span{width:7px;height:7px;border-radius:var(--sk-radius-full)}
.et-dots .r{background:rgba(239,68,68,.7)}
.et-dots .y{background:rgba(245,158,11,.7)}
.et-dots .g{background:rgba(var(--sk-primary-rgb),.7)}
.et-ttl{font-size:9.5px;color:var(--sk-primary-500);letter-spacing:.08em;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.et-conn{font-size:8.5px;color:var(--sk-primary-500);letter-spacing:.1em;padding:2px 6px;background:rgba(var(--sk-primary-rgb),.1);border:1px solid rgba(var(--sk-primary-rgb),.3);border-radius:var(--sk-radius-xs)}
.et-body{padding:10px 12px;min-height:0;height:100%;overflow:hidden;font-size:10.5px;line-height:1.55;color:var(--sk-primary-500);text-shadow:0 0 6px rgba(var(--sk-primary-rgb),.35);display:flex;flex-direction:column;gap:2px;background:
  radial-gradient(ellipse at 50% 0%, rgba(var(--sk-primary-rgb),.06), transparent 70%),
  #000;
  position:relative}
.et-ln{white-space:pre-wrap;word-break:break-word}
.et-ln.dim{color:rgba(var(--sk-primary-rgb),.6)}
.et-ln.hit{color:#99f6e4;text-shadow:0 0 8px rgba(134,239,172,.5)}
.et-ln.warn{color:var(--sk-warning-400);text-shadow:0 0 6px rgba(251,191,36,.4)}
.et-caret{display:inline-block;width:7px;height:11px;background:var(--sk-primary-500);box-shadow:0 0 6px rgba(var(--sk-primary-rgb),.7);margin-left:3px;vertical-align:-1px;animation:etBlink 1s steps(2) infinite}
@keyframes etBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
/* scanline */
.et-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(var(--sk-primary-rgb),.04) 0,rgba(var(--sk-primary-rgb),.04) 1px,transparent 1px,transparent 3px);mix-blend-mode:screen;opacity:.7}
.sk-enc::after{content:'';position:absolute;left:0;right:0;height:18%;top:-20%;background:linear-gradient(180deg,transparent,rgba(var(--sk-primary-rgb),.08),transparent);animation:etScanSweep 4s linear infinite;pointer-events:none}
@keyframes etScanSweep{0%{top:-20%}100%{top:110%}}
.et-gps{display:inline-block;padding:0 4px;background:rgba(var(--sk-primary-rgb),.15);border-left:2px solid var(--sk-primary-500);color:#99f6e4;margin-left:1px}

/* ================= FOOTER — tighter proportions ================= */

/* SOCIAL STRIP */
.strip{padding:50px 0 30px;border-top:1px solid var(--sk-divider);margin-top:50px}
.strip-label{font-family:var(--sk-font-mono);font-size:10px;letter-spacing:.14em;color:var(--sk-text-dim);text-transform:uppercase;text-align:center;margin:0 0 24px}
.strip-row{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;opacity:.7}
.strip-dom{font-family:var(--sk-font-mono);font-size:13px;color:var(--sk-text-muted);letter-spacing:-.01em}
.strip-dom b{color:var(--sk-text-hi);font-weight:600}

/* SECTIONS */
.section{padding-top:110px;padding-bottom:110px;border-top:1px solid var(--sk-divider);position:relative}
.section-eyebrow{font-family:var(--sk-font-mono);font-size:11px;letter-spacing:.14em;color:var(--sk-primary-500);text-transform:uppercase;margin:0 0 14px}
.section h2{font-size:40px;line-height:1.1;letter-spacing:-.025em;font-weight:700;color:var(--sk-text-hi);margin:0 0 18px;max-width:560px}
.section p.lead{font-size:17px;line-height:1.6;color:var(--sk-text-muted);max-width:520px;margin:0 0 26px}
.feat-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.feat-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--sk-text-muted)}
.feat-list li svg{color:var(--sk-primary-500);flex-shrink:0;margin-top:3px}
.feat-list li b{color:var(--sk-text-hi);font-weight:600}
.row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.row.rev{grid-template-columns:1fr 1fr}
.row.rev .col-text{order:2}
.row.rev .col-visual{order:1}

.vpanel{background:linear-gradient(145deg,rgba(var(--sk-primary-rgb),.1),rgba(13,17,23,.9));border:1px solid rgba(255,255,255,.1);border-radius:var(--sk-radius-lg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden;box-shadow:6px 6px 12px rgba(0,0,0,.12), -6px -6px 12px rgba(255,255,255,.7)}
.vp-head{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sk-text-muted);font-weight:500}
.vp-head .d{display:flex;gap:5px}
.vp-head .d span{width:8px;height:8px;border-radius:var(--sk-radius-full);background:rgba(255,255,255,.12)}

/* feat A — hierarchy visual */
.hier{padding:18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.hn{padding:9px 12px;border-radius:var(--sk-radius-sm);background:rgba(255,255,255,.03);border:1px solid var(--sk-divider);display:flex;align-items:center;gap:10px;color:var(--sk-text)}
.hn.sel{background:rgba(var(--sk-primary-rgb),.12);border-color:rgba(var(--sk-primary-rgb),.25);color:var(--sk-text-hi)}
.hn .lvl{font-family:var(--sk-font-mono);font-size:9px;letter-spacing:.1em;color:var(--sk-primary-300);min-width:58px}
.hn .nm{flex:1;font-weight:500}
.hn .pr{font-family:var(--sk-font-mono);font-size:11px;color:var(--sk-text-dim)}
.hn.sub{margin-left:24px;padding:7px 12px;font-size:12.5px;color:var(--sk-text-muted)}
.hn.sub .lvl{min-width:50px}
.hn.sub.sub2{margin-left:48px}
.hn.sub.sub3{margin-left:72px}

/* feat B — realtime */
.rt{padding:20px}
.rt-card{background:rgba(13,17,23,.6);border:1px solid var(--sk-divider);border-radius:var(--sk-radius-lg);padding:16px}
.rt-ttl{font-size:14px;color:var(--sk-text-hi);font-weight:600;margin:0 0 12px}
.rt-html{font-size:13px !important}
.rt-cur{display:inline-block;width:2px;height:15px;vertical-align:middle;position:relative;animation:blink 1s steps(2) infinite}
.rt-cur.a{background:var(--sk-primary-500)}
.rt-cur.a::after{content:"María F.";position:absolute;top:-20px;left:0;background:var(--sk-primary-500);color:var(--sk-text-hi);font-family:var(--sk-font-mono);font-size:10px;padding:2px 6px;border-radius:var(--sk-radius-xs) 3px 3px 0;white-space:nowrap}
.rt-cur.b{background:#1e40af}
.rt-cur.b::after{content:"Andrés D.";position:absolute;top:-20px;left:0;background:#1e40af;color:var(--sk-text-hi);font-family:var(--sk-font-mono);font-size:10px;padding:2px 6px;border-radius:var(--sk-radius-xs) 3px 3px 0;white-space:nowrap}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.rt-foot{display:flex;align-items:center;margin-top:18px;gap:12px}
.rt-avs{display:flex}
.rt-avs .av{width:26px;height:26px;border-radius:var(--sk-radius-full);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--sk-text-hi);border:2px solid var(--sk-bg-elevated);margin-left:-6px}
.rt-avs .av:first-child{margin-left:0}
.rt-avs .a{background:#475569}
.rt-avs .b{background:#1e40af}
.rt-avs .c{background:#52525b}
.rt-avs .d{background:rgba(255,255,255,.08);color:var(--sk-text);font-weight:500}
.rt-ping{font-family:var(--sk-font-mono);font-size:11px;color:var(--sk-secondary-400);display:flex;align-items:center;gap:6px;margin-left:auto}
.rt-ping .pd{width:6px;height:6px;border-radius:var(--sk-radius-full);background:var(--sk-secondary-400);box-shadow:0 0 6px var(--sk-secondary-500)}

/* feat C — AI split */
.ai-split{display:grid;grid-template-columns:1fr 1fr;min-height:340px}
.ai-left{padding:18px;border-right:1px solid var(--sk-divider);display:flex;flex-direction:column;gap:10px}
.ai-tag{font-family:var(--sk-font-mono);font-size:10px;color:var(--sk-text-dim);letter-spacing:.06em}
.ai-tag b{color:var(--sk-primary-300)}
.ai-step-ttl{font-size:14px;color:var(--sk-text-hi);font-weight:600;margin:0}
.ai-subs{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.ai-sub{display:flex;align-items:center;gap:8px;padding:7px 10px;background:rgba(255,255,255,.03);border:1px solid var(--sk-divider);border-radius:var(--sk-radius-sm);font-size:12.5px;color:var(--sk-text-muted)}
.ai-sub .chk{color:var(--sk-secondary-400)}
.ai-sub.pend{opacity:.6}
.ai-sub.pend .chk{color:var(--sk-text-disabled)}
.ai-right{display:flex;flex-direction:column}
.ai-rh{padding:12px 14px;border-bottom:1px solid var(--sk-divider);font-size:12px;color:var(--sk-text);display:flex;align-items:center;gap:8px;font-weight:500}
.ai-rh .o{width:8px;height:8px;border-radius:var(--sk-radius-full);background:var(--sk-primary-500);box-shadow:0 0 8px var(--sk-primary-500)}
.ai-msgs{flex:1;padding:14px;display:flex;flex-direction:column;gap:10px;font-size:12.5px;line-height:1.55}
.ai-bub{padding:9px 11px;border-radius:9px}
.ai-bub.u{background:rgba(255,255,255,.04);border:1px solid var(--sk-divider);align-self:flex-end;max-width:85%}
.ai-bub.a{background:rgba(var(--sk-primary-rgb),.1);border:1px solid rgba(var(--sk-primary-rgb),.2);color:var(--sk-text)}
.ai-bub.a b{color:var(--sk-primary-300);font-weight:500}
.ai-input{padding:10px 12px;border-top:1px solid var(--sk-divider);display:flex;align-items:center;gap:8px;font-size:11px;color:var(--sk-text-dim)}
.ai-input .k{padding:2px 6px;border:1px solid rgba(255,255,255,.12);border-radius:var(--sk-radius-xs);font-family:var(--sk-font-mono);font-size:10px}

/* feat D — integrations */
.intg{padding:22px 20px}
.intg-ttl{font-family:var(--sk-font-mono);font-size:10px;color:var(--sk-text-dim);letter-spacing:.1em;margin:0 0 12px;text-transform:uppercase}
.intg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.intg-item{padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--sk-divider);border-radius:var(--sk-radius-md);display:flex;align-items:center;gap:10px}
.intg-item .ic{width:32px;height:32px;border-radius:var(--sk-radius-md);background:rgba(var(--sk-primary-rgb),.12);display:flex;align-items:center;justify-content:center;color:var(--sk-primary-300);flex-shrink:0}
.intg-item .nm{font-size:13px;color:var(--sk-text-hi);font-weight:500;margin:0}
.intg-item .dc{font-size:11.5px;color:var(--sk-text-dim);margin:2px 0 0}
.intg-item .st{margin-left:auto;font-family:var(--sk-font-mono);font-size:10px;color:var(--sk-secondary-400);display:flex;align-items:center;gap:5px;flex-shrink:0}
.intg-item .st .d{width:6px;height:6px;border-radius:var(--sk-radius-full);background:var(--sk-secondary-400)}

/* DEMO / CTA CARD section */
.docs-section{padding-top:110px;padding-bottom:110px;border-top:1px solid var(--sk-divider);text-align:center}
.docs-section h2{font-size:36px;letter-spacing:-.02em;color:var(--sk-text-hi);margin:0 0 14px;font-weight:700}
.docs-section p.lead{font-size:16px;color:var(--sk-text-muted);max-width:560px;margin:0 auto 36px}

/* ECOSYSTEM GRID */
.eco{padding:110px 0;border-top:1px solid var(--sk-divider)}
.eco-head{text-align:center;margin-bottom:54px}
.eco-head h2{font-size:40px;letter-spacing:-.025em;color:var(--sk-text-hi);margin:0 0 14px;font-weight:700}
.eco-head p{font-size:17px;color:var(--sk-text-muted);max-width:540px;margin:0 auto}
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.eco-card{display:block;padding:24px;background:#e0e0e0;border:1px solid rgba(0,0,0,.04);border-radius:var(--sk-radius-lg);text-decoration:none;transition:all .2s;box-shadow:4px 4px 8px rgba(0,0,0,.1), -4px -4px 8px rgba(255,255,255,.65)}
.eco-card:hover{border-color:rgba(var(--sk-primary-rgb),.15);transform:translateY(-2px);box-shadow:6px 6px 12px rgba(0,0,0,.12), -6px -6px 12px rgba(255,255,255,.75)}
.eco-card .icn{color:var(--sk-primary-500);margin-bottom:14px}
.eco-card .nm{font-family:var(--sk-font-mono);font-size:13px;color:var(--sk-text-hi);margin:0 0 6px;font-weight:500;letter-spacing:-.01em}
.eco-card .ds{font-size:13.5px;color:var(--sk-text-muted);line-height:1.5;margin:0 0 12px}
.eco-card .arr{font-family:var(--sk-font-mono);font-size:11px;color:var(--sk-primary-500)}
.eco-card.self{background:linear-gradient(145deg, #dde3ed, #d8dee8);border-color:rgba(var(--sk-primary-rgb),.12);box-shadow:4px 4px 8px rgba(0,0,0,.1), -4px -4px 8px rgba(255,255,255,.65), 0 0 0 1px rgba(var(--sk-primary-rgb),.08) inset}
.eco-card.self .tag{display:inline-block;font-family:var(--sk-font-mono);font-size:9px;color:#fff;background:var(--sk-primary-500);padding:2px 6px;border-radius:var(--sk-radius-xs);letter-spacing:.08em;margin-bottom:10px}

/* DUAL CTA */
.dual{padding:110px 0;border-top:1px solid var(--sk-divider)}
.dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dual-card{padding:40px;background:#e0e0e0;border:1px solid rgba(0,0,0,.06);border-radius:var(--sk-radius-xl);box-shadow:6px 6px 12px rgba(0,0,0,.12), -6px -6px 12px rgba(255,255,255,.7)}
.dual-card.primary{background:linear-gradient(145deg, #ddf0e5, #d6e8dd);border-color:rgba(var(--sk-primary-rgb),.15);box-shadow:6px 6px 12px rgba(0,0,0,.12), -6px -6px 12px rgba(255,255,255,.7), 0 0 0 1px rgba(var(--sk-primary-rgb),.08) inset}
.dual-card h3{font-size:22px;letter-spacing:-.01em;color:var(--sk-text-hi);margin:0 0 10px;font-weight:600}
.dual-card p{font-size:14.5px;color:var(--sk-text-muted);line-height:1.55;margin:0 0 22px}
.dual-tertiary{text-align:center;margin-top:28px;font-size:13.5px;color:var(--sk-text-dim)}
.dual-tertiary a{color:var(--sk-primary-500);text-decoration:none}
.dual-tertiary a:hover{color:var(--sk-text-hi)}

/* FOOTER — rich, tidy, responsive */
.footer{padding:80px 0 28px;border-top:1px solid var(--sk-divider);background:#d8d8d8;position:relative}
.footer .container{max-width:1180px}

/* CTA band */
.foot-cta{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:center;padding:32px 36px;border-radius:var(--sk-radius-xl);background:#e0e0e0;border:1px solid rgba(0,0,0,.04);margin-bottom:56px;position:relative;overflow:hidden;box-shadow:6px 6px 12px rgba(0,0,0,.1), -6px -6px 12px rgba(255,255,255,.7)}
.foot-cta::before{content:'';position:absolute;inset:-1px;background:linear-gradient(180deg,transparent,rgba(var(--sk-primary-rgb),.04),transparent);background-size:100% 220%;animation:ecoScan 8s linear infinite;pointer-events:none;border-radius:inherit}
.fc-eyebrow{font-family:var(--sk-font-mono);font-size:11px;color:var(--sk-primary-500);letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
.fc-title{font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--sk-text-hi);margin:0;line-height:1.25;text-wrap:pretty}
.fc-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* Columns */
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;margin-bottom:40px;align-items:start}
.foot-brand{display:flex;flex-direction:column;gap:16px;max-width:320px}
.fb-logo{display:inline-block;text-decoration:none}
.fb-logo img{height:24px;width:auto;opacity:.95;filter:brightness(0.2)}
.fb-tagline{font-size:13.5px;color:var(--sk-text-muted);line-height:1.6;margin:2px 0 8px;max-width:280px}
.fb-meta{display:flex;flex-direction:column;gap:6px;font-family:var(--sk-font-mono);font-size:11px}
.fb-row{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:baseline}
.fb-k{color:var(--sk-text-disabled);letter-spacing:.06em;text-transform:uppercase;font-size:9.5px}
.fb-v{color:var(--sk-text-muted);font-size:11.5px}
.fb-v.lnk{text-decoration:none;color:var(--sk-primary-500)}
.fb-v.lnk:hover{color:var(--sk-primary-600)}
.fb-v.st{display:inline-flex;align-items:center;gap:6px;color:var(--sk-text-muted)}
.st-dot{width:6px;height:6px;border-radius:var(--sk-radius-full);background:var(--sk-secondary-400);box-shadow:0 0 0 3px rgba(52,211,153,.18),0 0 6px rgba(52,211,153,.6)}
@keyframes stPulse{0%,100%{box-shadow:0 0 0 3px rgba(52,211,153,.18),0 0 6px rgba(52,211,153,.6)}50%{box-shadow:0 0 0 5px rgba(52,211,153,.08),0 0 10px rgba(52,211,153,.8)}}
.st-dot{animation:stPulse 2.5s ease-in-out infinite}
.fb-social{display:flex;gap:6px;margin-top:4px}
.fb-social a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--sk-radius-sm);background:rgba(0,0,0,.04);border:1px solid var(--sk-divider);color:var(--sk-text-dim);transition:all .2s}
.fb-social a:hover{color:var(--sk-primary-500);border-color:rgba(var(--sk-primary-rgb),.2);background:rgba(var(--sk-primary-rgb),.06);transform:translateY(-1px)}

.foot-col h5{font-family:var(--sk-font-mono);font-size:10px;letter-spacing:.14em;color:var(--sk-text-dim);text-transform:uppercase;margin:0 0 14px;font-weight:500}
.foot-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-col ul a{color:var(--sk-text-muted);text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:color .18s;line-height:1.4}
.foot-col ul a:hover{color:var(--sk-text-hi)}
.foot-col ul a .arr{color:var(--sk-text-disabled);font-size:10px;transition:transform .2s, color .2s}
.foot-col ul a:hover .arr{color:var(--sk-primary-500);transform:translate(2px,-2px)}
.foot-col ul a.cur{color:var(--sk-primary-500)}
.foot-col ul a .badge-cur{font-family:var(--sk-font-mono);font-size:8.5px;color:#fff;background:var(--sk-primary-500);padding:1px 5px;border-radius:var(--sk-radius-xs);letter-spacing:.08em;text-transform:uppercase;margin-left:2px}

/* Bottom bar */
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;border-top:1px solid var(--sk-divider);font-size:11.5px;color:var(--sk-text-dim);flex-wrap:wrap}
.fbot-copy{font-family:var(--sk-font-mono);font-size:10.5px}
.fbot-r{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-family:var(--sk-font-mono);font-size:10.5px}
.fbot-r a{color:var(--sk-text-dim);text-decoration:none}
.fbot-r a:hover{color:var(--sk-text-muted)}
.fbot-sep{color:var(--sk-text-disabled)}
.fbot-ver{display:inline-flex;align-items:center;gap:6px;color:var(--sk-text-disabled)}
.fbot-dot{width:5px;height:5px;border-radius:var(--sk-radius-full);background:var(--sk-secondary-400);box-shadow:0 0 4px var(--sk-secondary-500)}

/* ================= RESPONSIVE (comprehensive) ================= */

/* Tablet landscape */
@media (max-width: 1100px){
  .container{padding:0 24px}
  .hero h1{font-size:56px}
  .foot-top{grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:32px}
}

/* Tablet portrait */
@media (max-width: 900px){
  .container{padding:0 22px}
  section{padding-top:80px !important;padding-bottom:80px !important}
  h1{font-size:46px !important;letter-spacing:-.02em}
  h2{font-size:34px !important}
  h3{font-size:22px !important}
  .hero{padding:28px 0 50px !important;min-height:auto}
  .hero > h1,.hero > p.sub,.hero > .hero-ctas{padding-left:0}
  .hero h1{font-size:44px;line-height:1.1}
  .hero p.sub{font-size:16px}
  .hero .lead{font-size:17px}
  .mock{grid-template-columns:1fr}
  .row,.row.rev{grid-template-columns:1fr;gap:40px}
  .row.rev .col-text{order:1}
  .row.rev .col-visual{order:2}
  .eco-grid{grid-template-columns:1fr 1fr}
  .eco3-grid{grid-template-columns:1fr 1fr}
  .eco3-card:nth-child(3){grid-column:1/-1}
  .eco3-card:nth-child(3) .eco3-mock{aspect-ratio:20/7}
  .dual-grid{grid-template-columns:1fr}
  .ai-split{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-in{gap:14px}
  .foot-cta{grid-template-columns:1fr;padding:28px 24px;gap:22px}
  .fc-actions{justify-content:flex-start}
  .fc-title{font-size:24px}
  .foot-top{grid-template-columns:1fr 1fr;gap:34px 30px;margin-bottom:36px}
  .foot-brand{grid-column:1/-1;max-width:none;flex-direction:row;flex-wrap:wrap;gap:18px 32px;align-items:flex-start;margin-bottom:8px}
  .foot-brand > .fb-logo{flex-basis:100%}
  .fb-tagline{flex-basis:100%;max-width:520px;margin:0}
  .fb-meta{flex:1 1 260px;min-width:240px}
  .fb-social{flex-basis:100%;margin-top:0}
  .foot-bot{flex-direction:column;align-items:flex-start;gap:12px}
  .fbot-r{flex-wrap:wrap;gap:14px}
  .ap-canvas{min-height:520px}
  .ap-legend{flex-wrap:wrap}
  .pg-cards{grid-template-columns:1fr !important}
  .vpanel{width:100%}
}

/* Mobile */
@media (max-width: 640px){
  .container{padding:0 18px}
  html{font-size:15px}
  section{padding-top:60px !important;padding-bottom:60px !important}
  .grid-bg{background-size:40px 40px}
  .nav-in{height:54px;gap:10px}
  .brand img{height:20px}
  .brand .dom{font-size:10px;padding-left:8px}
  .btn{padding:9px 14px;font-size:13px}
  h1,.hero h1{font-size:36px !important;line-height:1.08;letter-spacing:-.02em}
  .hero .lead{font-size:15.5px;line-height:1.55}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{width:100%;justify-content:center;text-align:center}
  .section-eyebrow{font-size:10px}
  h2{font-size:28px !important;line-height:1.15}
  h3{font-size:20px !important}
  .col-text p.lead{font-size:15.5px}
  .feat-list li{font-size:13.5px}
  .eco3-grid{grid-template-columns:1fr;gap:14px}
  .eco3-card:nth-child(3){grid-column:auto}
  .eco3-card:nth-child(3) .eco3-mock{aspect-ratio:16/10}
  .eco3-mock{aspect-ratio:16/10}
  .eco3-body{padding:16px 16px 18px}
  .eco3-desc{font-size:12.5px;min-height:0}
  .sk-iframe-wrap iframe{transform:scale(.28)}
  .dash-kpis{grid-template-columns:1fr 1fr !important}
  .dash-grid{grid-template-columns:1fr !important}
  .tbl{font-size:12px}
  .ap-canvas{min-height:440px}
  .ap-legend{font-size:10px;gap:10px}
  .ap-legend .ap-hint{flex-basis:100%;margin-left:0;margin-top:4px}
  .pg-track{gap:6px}
  .pg-stg{min-width:80px}
  .dual-card{padding:24px}
  .dual-card h3{font-size:22px}
  .footer{padding:50px 0 22px}
  .foot-cta{padding:22px 18px}
  .fc-title{font-size:20px;line-height:1.25}
  .foot-top{grid-template-columns:1fr;gap:28px;margin-bottom:28px}
  .foot-brand{flex-direction:column;gap:14px}
  .foot-brand > *{flex-basis:auto}
  .fb-meta{min-width:0}
  .fb-row{grid-template-columns:60px 1fr}
  .foot-col h5{font-size:9.5px;margin-bottom:10px}
  .foot-col ul{gap:8px}
  .foot-col ul a{font-size:13.5px}
  .fbot-copy{font-size:10px}
  .fbot-r{font-size:10px;gap:10px}
  .et-ttl{font-size:9px}
  .et-conn{display:none}
  .et-body{font-size:10px;padding:8px 10px}
}

/* Extra small */
@media (max-width: 380px){
  .container{padding:0 14px}
  h1,.hero h1{font-size:32px !important}
  h2{font-size:24px !important}
  .brand .dom{display:none}
  .dash-kpis{grid-template-columns:1fr !important}
}

/* Landscape phones */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){
  .hero{padding:24px 0 30px !important;min-height:auto}
  .hero h1{font-size:36px}
}

/* Touch devices */
@media (hover: none) and (pointer: coarse){
  .btn, .nav a, .foot-col ul a{min-height:40px}
  .eco3-card:hover{transform:none}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .eco3-scan,.mx-line,.et-caret,.sk-home::before,.sk-home::after,.foot-cta::before,.st-dot{animation:none !important}
}