/* ==========================================================================
   21studio — design system v3
   Ricostruito guardando per davvero Cuadro Group (rif. primario), TheFounderOS,
   Vaylo Studios: pulsanti pill, kicker a quadratino, titolo bold sans + una
   parola in corsivo serif per enfasi, griglia numerata in stile Vaylo per
   moduli/tier, badge colorati per componente come Cuadro — su un tema scuro
   verde cachi/nero (colore storico 21studio) al posto del navy.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg: #0B0C08;
  --bg-alt: #14150F;
  --bg-panel: #181A12;
  --glow: radial-gradient(ellipse 900px 600px at 78% 8%, rgba(139,152,80,0.32), transparent 60%),
          radial-gradient(ellipse 700px 500px at 10% 30%, rgba(139,152,80,0.12), transparent 55%);
  --line: rgba(243,241,236,0.09);
  --line-strong: rgba(243,241,236,0.18);
  --text: #F3F1EC;
  --text-muted: #A6AA95;
  --text-faint: #6E7260;
  --accent: #8A9A5B;
  --accent-2: #B7C17E;
  --accent-dim: rgba(138,154,91,0.16);
  --gold: #C9A227;
  --gold-dim: rgba(201,162,39,0.12);
  --green: #4C8C5E;
  --green-dim: rgba(76,140,94,0.12);
  --purple: #9B6BF2;
  --purple-dim: rgba(155,107,242,0.12);
  --red: #D6553F;
  --red-dim: rgba(214,85,63,0.14);
  --teal: #4FBFA8;
  --teal-dim: rgba(79,191,168,0.14);
  --blue: #5B8FE0;
  --blue-dim: rgba(91,143,224,0.14);
  --radius: 999px;
  --radius-card: 14px;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --container: 1180px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px){ .wrap{ padding: 0 20px; } }

h1,h2,h3,h4{
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
}
h1 i, h2 i, h1 em, h2 em{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  color: var(--accent-2);
  letter-spacing: 0;
}

.eyebrow{
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.eyebrow::before{
  content:'';
  width: 8px; height: 8px;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}

p{ color: var(--text-muted); margin: 0; }
.lede{ font-size: 19px; line-height: 1.65; max-width: 640px; }

/* ---------- buttons (pill — Cuadro / TheFounderOS / Vaylo) ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 15px 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--accent); color: #0B0C08; box-shadow: 0 8px 24px -8px rgba(138,154,91,0.55); }
.btn-primary:hover{ transform: translateY(-2px); background: var(--accent-2); box-shadow: 0 12px 30px -8px rgba(138,154,91,0.7); }
.btn-ghost{ background: rgba(255,255,255,0.03); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--accent-2); color: var(--accent-2); transform: translateY(-2px); }
.btn .arrow{ transition: transform .35s var(--ease); }
.btn:hover .arrow{ transform: translateX(4px); }

/* ---------- header ---------- */
header.site{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 24px 0;
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
header.site.scrolled{
  padding: 14px 0;
  background: rgba(11,12,8,0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; display:flex; align-items:center; gap:8px; }
.logo svg{ height: 20px; width: auto; }
nav.main{ display:flex; align-items:center; gap: 36px; }
nav.main a{ font-size: 14px; font-weight: 500; color: var(--text-muted); transition: color .3s; position: relative; }
nav.main a:hover{ color: var(--text); }
nav.main a.current{ color: var(--accent-2); }
.nav-links{ display:flex; gap:32px; padding: 6px 4px; }
.nav-toggle{ display:none; background:none; border:none; color: var(--text); cursor:pointer; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  header.site nav.main .btn-ghost{ display:none; }
}

/* ---------- hero (rif. Demarly.ai / Sureflow — testo + org-chart live) ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex;
  flex-direction: column;
  justify-content:center;
  padding-top: 150px;
  padding-bottom: 90px;
  overflow: hidden;
  background: var(--glow), var(--bg);
}
.hero-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; position:relative; z-index:2; }
.hero-content{ position: relative; z-index: 2; }
.hero h1{
  font-size: clamp(32px, 3.6vw, 50px);
  max-width: 13ch;
}
.hero .lede{ margin-top: 22px; max-width: 46ch; }
.hero-cta{ display:flex; gap:16px; margin-top: 36px; flex-wrap: wrap; }
.hero-meta{
  margin-top: 56px;
  display:flex; gap: 40px; flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero-meta .stat b{ display:block; font-family: var(--sans); font-size: 24px; color: var(--text); font-weight: 700; }
.hero-meta .stat span{ font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 1000px){
  .hero-layout{ grid-template-columns: 1fr; }
  .hero h1{ max-width: 18ch; }
}

/* ---------- hero centered variant (rif. Promptible.io) ---------- */
.hero.hero-center{ text-align:center; padding-top:190px; }
.hero-badge{
  display:inline-flex; align-items:center; font-family: var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:0.05em; border:1px solid var(--line-strong); border-radius: var(--radius); overflow:hidden; margin-bottom:36px;
  background: rgba(255,255,255,0.02); position:relative; z-index:2;
}
.hero-badge span{ padding:8px 18px; display:inline-block; }
.hero-badge .tag-new{ background: var(--accent); color:#0B0C08; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.hero-badge .tag-desc{ color: var(--text-muted); }
.hero-center .hero-content{ max-width: 900px; margin: 0 auto; position:relative; z-index:2; }
.hero-center h1{ max-width: 17ch; margin: 0 auto; font-size: clamp(34px, 4.6vw, 62px); }
.hero-center .lede{ margin: 24px auto 0; max-width: 58ch; }
.hero-center .hero-cta{ justify-content:center; margin-top:40px; }
.hero-center .hero-caption{ margin-top:28px; font-family: var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color: var(--text-faint); }
@media (max-width: 640px){ .hero.hero-center{ padding-top:150px; } }

/* ---------- org chart — mappa agenti live (rif. Demarly.ai "Live org map" / Sureflow "System map") ---------- */
.org-chart{
  background-color: var(--bg-panel);
  background-image: linear-gradient(rgba(243,241,236,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(243,241,236,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 22px 22px 0; position:relative; overflow:hidden;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.6);
}
.org-chart > .brain-map-canvas{ margin: 4px auto 0; }
.brain-map-hub.org-lead-hub{ max-width: 220px; }
.org-chart-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 30px; flex-wrap:wrap; gap:10px; }
.badge-live{
  display:inline-flex; align-items:center; gap:7px; font-family: var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:0.07em; text-transform:uppercase; color: var(--text-muted);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 6px 12px;
}
.badge-live .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent-2); position:relative; flex-shrink:0; }
.badge-live .dot::after{ content:''; position:absolute; inset:-3px; border-radius:50%; background:inherit; opacity:.4; animation: pulse-dot 2s ease-out infinite; }

.org-lead{
  width: 64%; margin: 0 auto; background: var(--bg-alt); border: 1px solid var(--gold); border-radius: 12px;
  padding: 16px 18px; text-align:center; position:relative;
}
.org-lead .org-tag{ font-family: var(--mono); font-size:10px; font-weight:500; letter-spacing:0.07em; color: var(--gold); background: var(--gold-dim); padding:3px 9px; border-radius:var(--radius); display:inline-block; }
.org-lead h5{ font-size:14px; font-weight:700; margin:8px 0 2px; }
.org-lead p{ font-size:11.5px; color: var(--text-faint); margin:0; }

.org-connector{ width:1px; height:22px; background: var(--line-strong); margin: 0 auto; }
.org-row{ display:flex; gap:10px; position:relative; padding-top:22px; }
.org-row::before{ content:''; position:absolute; top:0; left:14%; right:14%; height:1px; background: var(--line-strong); }
.org-node{ flex:1; position:relative; background: var(--bg-alt); border:1px solid var(--line); border-radius:10px; padding:12px 10px; min-width:0; }
.org-node::before{ content:''; position:absolute; top:-22px; left:50%; width:1px; height:22px; background: var(--line-strong); }
.org-node[data-accent="gold"]{ --module-c: var(--gold); }
.org-node[data-accent="green"]{ --module-c: var(--green); }
.org-node[data-accent="purple"]{ --module-c: var(--purple); }
.org-node .org-tag{ font-family: var(--mono); font-size:9px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color: var(--module-c, var(--accent-2)); }
.org-node .org-status{ position:absolute; top:10px; right:10px; width:6px; height:6px; border-radius:50%; background: var(--module-c, var(--accent-2)); }
.org-node .org-status::after{ content:''; position:absolute; inset:-3px; border-radius:50%; background:inherit; opacity:.4; animation: pulse-dot 2.4s ease-out infinite; }
.org-node h6{ font-size:12px; font-weight:700; margin:7px 0 2px; letter-spacing:-0.01em; }
.org-node .org-role{ font-size:10px; color: var(--text-faint); display:block; line-height:1.4; }

.org-ticker-wrap{ margin: 24px -22px 0; border-top: 1px solid var(--line); background: rgba(0,0,0,0.2); overflow:hidden; padding: 12px 0; }
.org-ticker{ display:flex; gap:36px; white-space:nowrap; font-family: var(--mono); font-size:11px; color: var(--text-faint); animation: ticker 24s linear infinite; width:max-content; }
@keyframes ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

@media (max-width: 1000px){
  .org-lead{ width:80%; }
  .org-row{ flex-wrap:wrap; }
  .org-row::before{ display:none; }
  .org-node::before{ display:none; }
  .org-node{ min-width: 130px; }
}

/* ---------- agents-panel — lista/roster agenti (rif. video: dashboard "AGENTS" con tab + albero ruoli) ---------- */
.agents-panel{
  background-color: var(--bg-panel);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 0; position:relative; overflow:hidden;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.6);
}
/* app shell: sidebar nav + main content — rif. video: chrome persistente attorno alla dashboard */
.agents-shell{ display:flex; align-items:stretch; min-height: 440px; }
.agents-sidebar{
  width: 172px; flex-shrink:0; padding: 20px 14px 18px;
  background: rgba(0,0,0,0.2); border-right: 1px solid var(--line);
  display:flex; flex-direction:column;
}
.agents-brand{
  display:flex; align-items:center; gap:8px;
  font-family: var(--sans); font-size:12.5px; font-weight:700; color: var(--text);
  margin-bottom:16px;
}
.agents-brand-mark{
  width:22px; height:22px; border-radius:6px; flex-shrink:0;
  background: var(--accent-2); color: var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:800; letter-spacing:-0.02em;
}
.agents-newtask{
  display:flex; align-items:center; gap:6px; width:100%;
  font-family: var(--sans); font-size:11px; font-weight:600; color: var(--text);
  background: var(--accent-dim); border:1px solid var(--line-strong); border-radius:7px;
  padding:8px 10px; margin-bottom:18px; cursor:pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.agents-newtask:hover{ background: color-mix(in srgb, var(--accent-2) 18%, transparent); border-color: var(--accent-2); }
.agents-newtask .ic{ width:12px; height:12px; }
.agents-nav{ display:flex; flex-direction:column; gap:1px; }
.agents-nav-label{
  font-size:9.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  color: var(--text-faint); margin:13px 0 6px;
}
.agents-nav-label:first-child{ margin-top:0; }
.agents-nav-item{
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; color: var(--text-muted); padding:7px 8px; border-radius:6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.agents-nav-item:hover{ background: rgba(243,241,236,0.045); color: var(--text); }
.agents-nav-item.active{ background: var(--accent-dim); color: var(--text); font-weight:600; }
.agents-live-dot{
  width:6px; height:6px; border-radius:50%; margin-left:auto; flex-shrink:0;
  background: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-dim);
  animation: bmCorePulse 2.4s ease-in-out infinite;
}
.agents-nav-tag{
  margin-left:auto; font-size:9.5px; font-weight:700; color: var(--accent-2);
  display:flex; align-items:center; gap:4px;
}
.agents-nav-tag::before{
  content:''; width:5px; height:5px; border-radius:50%; background: var(--accent-2);
  animation: bmCorePulse 2.4s ease-in-out infinite;
}
.agents-nav-badge{
  margin-left:auto; min-width:16px; height:16px; padding:0 5px; border-radius:8px;
  background: var(--gold); color: var(--bg); font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ic{ width:14px; height:14px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.agents-main{
  flex:1 1 auto; min-width:0; padding: 20px 22px 26px; position:relative;
  background-image: linear-gradient(rgba(243,241,236,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(243,241,236,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
}
@media (max-width: 700px){
  .agents-sidebar{ display:none; }
}
.agents-tabs{ display:flex; gap:20px; margin-top:22px; border-bottom:1px solid var(--line); padding-bottom:12px; flex-wrap:wrap; }
.agents-tab{ font-size:12.5px; font-weight:600; color: var(--text-faint); position:relative; padding-bottom:12px; }
.agents-tab.active{ color: var(--text); }
.agents-tab.active::after{ content:''; position:absolute; left:0; right:0; bottom:-13px; height:2px; background: var(--accent-2); }
.agents-count{ display:block; font-size:11.5px; color: var(--text-faint); margin:14px 0 16px; }
.agents-tree{ position:relative; padding-left:16px; }
.agents-tree::before{ content:''; position:absolute; top:8px; bottom:24px; left:0; width:1px; background: var(--line-strong); }
.agents-row{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:11px 10px 11px 16px; border-radius:8px;
  margin-bottom:2px; transition: background 0.2s ease;
}
.agents-row.is-hover, .agents-row:hover{ background: rgba(243,241,236,0.04); }
.agents-row.lead{ padding-left:0; margin-bottom:6px; }
.agents-row[data-accent="gold"]{ --module-c: var(--gold); }
.agents-row[data-accent="green"]{ --module-c: var(--green); }
.agents-row[data-accent="purple"]{ --module-c: var(--purple); }
.agents-pill{ width:5px; height:15px; border-radius:3px; background: var(--module-c, var(--accent)); flex-shrink:0; }
.agents-row.lead .agents-pill{ background: var(--accent-2); }
.agents-name{ font-size:13.5px; font-weight:700; }
.agents-row.lead .agents-name{ font-size:14.5px; }
.agents-role{ font-size:11.5px; color: var(--text-faint); }
@media (max-width: 560px){
  .agents-tabs{ gap:14px; }
  .agents-tab{ font-size:11.5px; }
  .agents-role{ font-size:10.5px; }
}

/* ---------- reparti coperti (rif. Demarly.ai "One system. Every department.") ---------- */
.dept-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; margin-top:50px; }
.dept-card{ background:var(--bg-alt); padding:32px 28px; }
.dept-card .dept-icon{ font-family: var(--mono); font-size:11px; color: var(--accent-2); letter-spacing:0.05em; margin-bottom:16px; display:block; }
.dept-card h4{ font-size:16px; font-weight:700; margin-bottom:10px; }
.dept-card p{ font-size:13.5px; }
@media (max-width:860px){ .dept-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .dept-grid{ grid-template-columns:1fr; } }

/* ---------- conoscenza condivisa (rif. Demarly.ai "Shared business knowledge") ---------- */
.knowledge-flow{ display:grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items:center; margin-top:56px; }
.kf-col{ display:flex; flex-direction:column; gap:14px; }
.kf-chip{ background:var(--bg-alt); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.kf-chip h6{ font-size:13.5px; font-weight:700; margin-bottom:4px; }
.kf-chip span{ font-size:11.5px; color: var(--text-faint); }
.kf-hub{ background: var(--bg-panel); border:1px solid var(--accent); border-radius:16px; padding:34px 26px; text-align:center; position:relative; box-shadow:0 30px 60px -20px rgba(138,154,91,0.25); }
.kf-hub .eyebrow{ margin-bottom:10px; justify-content:center; }
.kf-hub h5{ font-size:17px; font-weight:700; }
.kf-hub p{ font-size:12.5px; margin-top:8px; }
.kf-arrow{ text-align:center; color: var(--text-faint); font-size:20px; }
.kf-chip.ready{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.kf-chip.ready .tag-ready{ font-family:var(--mono); font-size:9px; letter-spacing:0.05em; text-transform:uppercase; color: var(--accent-2); background: var(--accent-dim); padding:3px 8px; border-radius:var(--radius); white-space:nowrap; }
@media (max-width:900px){ .knowledge-flow{ grid-template-columns:1fr; } .kf-arrow{ transform:rotate(90deg); } }

/* ---------- second brain chat (rif. Promptible.io "Ready when you are") ---------- */
.brain-chat{
  max-width: 640px; margin: 56px auto 0; background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 46px 40px; text-align:center; position:relative; overflow:hidden;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.6);
}
.brain-chat::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 320px 240px at 50% 0%, rgba(138,154,91,0.28), transparent 65%); pointer-events:none; }
.brain-orb{
  width:52px; height:52px; border-radius:50%; margin: 0 auto 22px; position:relative; z-index:1;
  background: conic-gradient(from 180deg, var(--accent), var(--gold), var(--purple), var(--accent));
  animation: orb-spin 6s linear infinite;
  box-shadow: 0 0 40px -6px rgba(138,154,91,0.6);
}
@keyframes orb-spin{ to{ transform: rotate(360deg); } }
.brain-chat h3{ font-size:22px; font-weight:700; position:relative; z-index:1; }
.brain-chat > p{ font-size:14px; margin:10px auto 0; max-width:42ch; position:relative; z-index:1; }
.brain-input{
  margin-top: 28px; background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 16px 18px; text-align:left; position:relative; z-index:1;
}
.brain-input .typed-line{ font-family: var(--sans); font-size:14.5px; color: var(--text); min-height: 20px; }
.brain-input .typed-line::after{ content:''; display:inline-block; width:1px; height:15px; background:var(--accent-2); margin-left:2px; vertical-align:middle; animation: blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.brain-chips{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; justify-content:center; position:relative; z-index:1; }
.brain-chip{ font-family: var(--mono); font-size:10.5px; color: var(--text-faint); border:1px solid var(--line-strong); border-radius: var(--radius); padding: 6px 13px; }

/* ---------- second brain network map (rif. TheFounderOS "G-BRAIN" live map) ---------- */
.brain-map{
  background-color: var(--bg-panel);
  background-image: linear-gradient(rgba(243,241,236,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(243,241,236,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 22px 22px 34px; position:relative; overflow:hidden; margin-top: 26px;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.6);
}
.brain-map-body{ display:flex; gap:30px; align-items:center; margin-top: 30px; flex-wrap:wrap; }

/* directory panel — rif. G-BRAIN sidebar: numeri + domini di conoscenza, mai un conteggio fisso di reparti/agenti */
.brain-directory{ flex: 0 0 208px; display:flex; flex-direction:column; gap:20px; min-width:0; }
.bd-search{ display:flex; align-items:center; gap:8px; font-family: var(--mono); font-size:10px; color: var(--text-faint); border:1px solid var(--line-strong); border-radius:9px; padding:9px 11px; }
.bd-search .bd-dot{ width:5px; height:5px; border-radius:50%; background: var(--accent-2); flex-shrink:0; }
.bd-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.bd-stat{ border-top:1px solid var(--line); padding-top:12px; }
.bd-stat:nth-child(-n+2){ border-top:none; padding-top:0; }
.bd-stat b{ display:block; font-family: var(--sans); font-size:16px; font-weight:700; color: var(--accent-2); letter-spacing:-0.01em; white-space:nowrap; }
.bd-stat span{ font-size:9px; color: var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; }
.bd-domains{ border-top:1px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:9px; }
.bd-domains-label{ font-family: var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-faint); margin-bottom:3px; display:block; }
.bd-bar{ display:flex; flex-direction:column; gap:5px; }
.bd-bar span{ font-size:10px; color: var(--text-muted); }
.bd-bar-track{ background: var(--line); border-radius:2px; height:3px; overflow:hidden; }
.bd-bar-track i{ display:block; height:100%; border-radius:2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.bd-note{ font-size:9.5px; color: var(--text-faint); font-style:italic; line-height:1.4; }

.brain-map-canvas{ position:relative; aspect-ratio: 1/0.94; flex: 1 1 300px; max-width: 480px; min-width:0; }
.brain-map-canvas::before{
  content:''; position:absolute; top:50%; left:50%; width:52%; aspect-ratio:1; transform: translate(-50%,-50%); border-radius:50%;
  background-image: radial-gradient(circle, rgba(138,154,91,0.55) 1px, transparent 1.4px);
  background-size: 6px 6px; opacity:0.4; pointer-events:none; z-index:0;
  -webkit-mask-image: radial-gradient(circle, black 55%, transparent 100%);
  mask-image: radial-gradient(circle, black 55%, transparent 100%);
  animation: bmCorePulse 3.6s ease-in-out infinite;
}
.brain-map-canvas::after{
  content:''; position:absolute; top:50%; left:50%; width:94%; aspect-ratio:1; transform: translate(-50%,-50%); border-radius:50%;
  background-image: radial-gradient(circle, rgba(138,154,91,0.32) 1px, transparent 1.3px);
  background-size: 15px 15px; opacity:0.3; pointer-events:none; z-index:0;
  -webkit-mask-image: radial-gradient(circle, transparent 56%, black 63%, black 78%, transparent 100%);
  mask-image: radial-gradient(circle, transparent 56%, black 63%, black 78%, transparent 100%);
  animation: haloRotate 70s linear infinite;
}
@keyframes bmCorePulse{ 0%,100%{ opacity:0.4; transform: scale(1); } 50%{ opacity:0.7; transform: scale(1.06); } }
@keyframes haloRotate{ to{ transform: translate(-50%,-50%) rotate(360deg); } }
.brain-map-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.brain-map-lines line{ stroke: var(--line-strong); stroke-width: 0.35; stroke-dasharray: 2 1.6; animation: bmLineFlow 1.6s linear infinite; }
@keyframes bmLineFlow{ to{ stroke-dashoffset: -36; } }

/* net-ring / net-circle — nodi circolari a particelle (rif. G-BRAIN: cerchi + etichetta sotto, mai card rettangolari) */
.net-ring{
  position:absolute; top:50%; left:50%; width:80%; aspect-ratio:1; transform:translate(-50%,-50%);
  border:1px solid var(--line-strong); border-radius:50%; pointer-events:none; z-index:0; opacity:0.6;
}
.net-circle{
  border-radius:50%; background: var(--bg-alt); border:1.5px solid var(--module-c, var(--line-strong));
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 22px -10px rgba(0,0,0,0.7); flex-shrink:0;
}
.net-circle .net-circle-dot{ width:9px; height:9px; border-radius:50%; background: var(--module-c, var(--accent-2)); }
.net-circle--hub{
  width: clamp(120px, 13vw, 178px); height: clamp(120px, 13vw, 178px);
  border-color: var(--accent); position:relative; overflow:hidden;
  color: var(--module-c, var(--accent-2));
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--module-c, var(--accent)) 40%, transparent) 0%, transparent 72%), var(--bg-alt);
  box-shadow: 0 0 34px -6px rgba(138,154,91,0.55), 0 20px 40px -18px rgba(0,0,0,0.7);
}
/* nucleo particellare organico iniettato via JS (rif. G-BRAIN: ammasso denso di puntini + linee, con bagliore caldo, non un pattern piatto) */
.net-circle--hub .particle-net{
  position:absolute; inset:0; width:100%; height:100%; animation: bmCorePulse 3.6s ease-in-out infinite; transform-origin:50% 50%;
}
.net-circle--hub .particle-net .p-dots{ filter: drop-shadow(0 0 1.4px currentColor); }
.net-circle--hub .particle-net .p-dots circle{ fill: currentColor; }
.net-circle--hub .particle-net .p-dots circle.p-hot{ fill: color-mix(in srgb, currentColor 55%, white); filter: drop-shadow(0 0 2.6px currentColor); }
.net-circle--hub .particle-net .p-lines line{ stroke: currentColor; stroke-width:0.45; }
/* nucleo bianco a stella al centro — sotto-hub chiaro innestato nella nube di particelle, come nel riferimento */
.net-circle--hub .particle-net .p-core-lines line{ stroke: rgba(255,255,255,0.55); stroke-width:0.3; }
.net-circle--hub .particle-net .p-core-dots circle{ fill: #F3F1EC; filter: drop-shadow(0 0 1.6px rgba(255,255,255,0.7)); }
.net-circle--hub .particle-net .p-core-dots circle:first-child{ fill:#fff; filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)); }
.net-circle--node{ width:46px; height:46px; }
.net-circle--tool{ width:34px; height:34px; }
.net-circle--tool .net-circle-dot{ width:6px; height:6px; }
/* icone (persone / chiave) iniettate via JS al posto del puntino pieno — rif. foto: nodi hanno un'icona dentro, non solo un puntino */
.net-circle-dot.net-circle-icon{ background:none; display:flex; align-items:center; justify-content:center; }
.net-circle-dot.net-circle-icon svg{ width:100%; height:100%; display:block; }
.net-circle--node .net-circle-dot.net-circle-icon{ width:21px; height:21px; color: var(--module-c, var(--accent-2)); }
.net-circle--tool .net-circle-dot.net-circle-icon{ width:15px; height:15px; color: var(--module-c, var(--accent-2)); }

.brain-map-hub{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; text-align:center; z-index:2; width:max-content; max-width:190px;
}
.brain-map-hub .net-label{ margin-top:14px; }
.brain-map-hub .eyebrow{ justify-content:center; margin-bottom:6px; font-size:9.5px; }
.brain-map-hub h5{ font-size:13.5px; font-weight:700; }
.brain-map-hub p{ font-size:10.5px; color: var(--text-faint); margin-top:5px; line-height:1.45; }
.brain-map-node{
  position:absolute; transform: translate(-50%,-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
}
.brain-map-node[data-accent="gold"]{ --module-c: var(--gold); }
.brain-map-node[data-accent="green"]{ --module-c: var(--green); }
.brain-map-node[data-accent="purple"]{ --module-c: var(--purple); }
.brain-map-node[data-accent="red"]{ --module-c: var(--red); }
.brain-map-node[data-accent="teal"]{ --module-c: var(--teal); }
.brain-map-node[data-accent="blue"]{ --module-c: var(--blue); }
/* i tre hub (org-chart, second-brain, drilldown) — nucleo caldo rosso/arancio come da riferimento, distinto dal khaki del resto del sito */
.brain-map-hub, .drilldown-hub{ --module-c: var(--red); }
.net-label-sm{ font-size:11.5px; font-weight:700; color: var(--module-c, var(--text)); white-space:nowrap; }
@media (max-width: 900px){
  .brain-map-body{ flex-direction:column; }
  .brain-directory{ width:100%; flex:1 1 auto; }
  .brain-map-canvas{ max-width:100%; width:100%; }
}
@media (max-width: 560px){
  .brain-map-canvas{ aspect-ratio: 1/1.1; }
  .net-circle--node{ width:38px; height:38px; }
  .net-label-sm{ font-size:10px; }
  .net-circle--hub{ width: clamp(112px, 34vw, 150px); height: clamp(112px, 34vw, 150px); }
  .brain-map-hub h5{ font-size:12px; }
  .brain-map-hub p{ font-size:9.5px; }
}

/* ---------- split row — testo + visual alternati (rif. Promptible.io "POC / Process Map") ---------- */
.split-row{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items:center; margin-top: 70px; }
.split-row > *{ min-width: 0; }
.split-row.reverse{ grid-template-columns: 1.15fr 0.85fr; }
.split-row.reverse .split-visual{ order:-1; }
.split-text .eyebrow{ margin-bottom:18px; }
.split-text h3{ font-size: clamp(22px,2.4vw,30px); font-weight:700; max-width:22ch; }
.split-text p{ margin-top:16px; font-size:15px; max-width:46ch; }
.split-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.split-tag{ font-family: var(--mono); font-size:10.5px; color: var(--text-faint); border:1px solid var(--line-strong); border-radius: var(--radius); padding: 6px 13px; }

/* colonne equilibrate — usata dove il visual non deve dominare sul testo (rif. feedback: "sezione a destra sproporzionata") */
.split-row.balanced{ grid-template-columns: 1fr 1fr; align-items:flex-start; }
.split-row.balanced .split-text{ padding-top: 4px; }
.split-points{ margin-top:28px; display:flex; flex-direction:column; gap:16px; max-width:40ch; }
.split-point{ border-top:1px solid var(--line); padding-top:14px; }
.split-point:first-child{ border-top:none; padding-top:0; }
.split-point b{ display:block; font-size:13.5px; font-weight:700; margin-bottom:3px; }
.split-point span{ font-size:12.5px; color: var(--text-faint); line-height:1.5; }
@media (max-width: 900px){
  .split-row, .split-row.reverse, .split-row.balanced{ grid-template-columns: 1fr; gap:34px; margin-top:50px; }
  .split-row.reverse .split-visual{ order:0; }
}

/* ---------- drilldown — dentro un reparto (rif. TheFounderOS "Communications" drilldown) ---------- */
.drilldown{
  background-color: var(--bg-panel);
  background-image: linear-gradient(rgba(243,241,236,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(243,241,236,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 26px 22px 32px; position:relative; overflow:hidden;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.6);
}
.drilldown-cols{ display:flex; justify-content:space-between; gap:14px; padding-bottom: 30px; margin-top:22px; }
.drilldown-col{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; min-width:0; }
.drilldown-col::after{ content:''; position:absolute; top:100%; left:50%; width:1px; height:26px; background: var(--line-strong); }
.drilldown-col[data-accent="gold"]{ --module-c: var(--gold); --module-dim: var(--gold-dim); }
.drilldown-col[data-accent="green"]{ --module-c: var(--green); --module-dim: var(--green-dim); }
.drilldown-col[data-accent="purple"]{ --module-c: var(--purple); --module-dim: var(--purple-dim); }
.drilldown-col[data-accent="red"]{ --module-c: var(--red); --module-dim: var(--red-dim); }
.drilldown-col[data-accent="teal"]{ --module-c: var(--teal); --module-dim: var(--teal-dim); }
.dd-tool-label{ font-family: var(--mono); font-size:9px; font-weight:500; color: var(--module-c, var(--accent-2)); margin: 9px 0 10px; white-space:nowrap; }
.dd-connector{ display:block; width:1px; height:16px; background: var(--line-strong); margin: 0 auto 10px; }
.drilldown-col h6{ font-size:12px; font-weight:700; margin: 10px 0 6px; letter-spacing:-0.01em; }
.drilldown-col .task{ font-size:10px; color: var(--text-faint); line-height:1.4; }
.drilldown-hub{
  margin-top: 30px; display:flex; flex-direction:column; align-items:center; text-align:center;
  width:max-content; max-width: 100%; margin-left:auto; margin-right:auto; position:relative;
  --module-c: var(--red);
}
.drilldown-hub .net-label{ margin-top:12px; }
.drilldown-hub .org-tag{ font-family: var(--mono); font-size:10px; color: var(--gold); background: var(--gold-dim); padding:3px 9px; border-radius:var(--radius); display:inline-block; margin-bottom:6px; }
.drilldown-hub h5{ font-size:14px; font-weight:700; }
.drilldown-nav{
  margin: 24px auto 0; width:max-content; display:flex; align-items:center; gap:12px;
  font-family: var(--mono); font-size:10px; letter-spacing:0.04em; color: var(--text-faint);
  border:1px solid var(--line-strong); border-radius: var(--radius); padding: 6px 16px; position:relative; z-index:1;
}
.drilldown-nav .arrow{ opacity:0.5; }
@media (max-width:700px){
  .drilldown-cols{ flex-wrap:wrap; }
  .drilldown-col{ flex: 1 1 40%; margin-bottom:24px; }
  .drilldown-col::after{ display:none; }
}

/* ---------- growth note (libreria agenti in crescita) ---------- */
.growth-note{
  margin-top: 40px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-card); padding: 22px 28px;
}
.growth-note .pulse-dot{ width:8px; height:8px; border-radius:50%; background: var(--accent-2); position:relative; flex-shrink:0; }
.growth-note .pulse-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; background: inherit; opacity:0.4; animation: pulse-dot 2s ease-out infinite; }
.growth-note p{ font-size: 14px; color: var(--text-muted); }
.growth-note p b{ color: var(--text); }

/* ---------- come funziona — step timeline (rif. Sureflow "Map. Build. Expand.") ---------- */
.step-timeline{ margin-top:56px; max-width: 780px; }
.step-item{ display:flex; gap:24px; padding-bottom: 40px; position:relative; }
.step-item:not(:last-child)::before{ content:''; position:absolute; left:19px; top:44px; bottom:0; width:1px; background: var(--line-strong); }
.step-num{
  flex-shrink:0; width:40px; height:40px; border-radius:10px; background: var(--bg-alt); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-family: var(--mono); font-size:13px; font-weight:500; color: var(--accent-2);
  position:relative; z-index:1;
}
.step-body{ padding-top:6px; }
.step-body h4{ font-size:18px; font-weight:700; margin-bottom:8px; }
.step-body p{ font-size:14.5px; max-width:56ch; }
.step-body .tag{ display:inline-block; margin-top:12px; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-faint); }
@media (max-width:600px){ .step-item{ gap:16px; } .step-num{ width:34px; height:34px; font-size:12px; } .step-item:not(:last-child)::before{ left:16px; } }

.scroll-cue{
  position: absolute; bottom: 34px; left: 32px; z-index: 2;
  display:flex; align-items:center; gap:10px;
  font-size: 12px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase;
}
.scroll-cue .line{ width: 1px; height: 34px; background: var(--line-strong); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--accent-2);
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ top:-100%; } 60%{ top: 100%; } 100%{ top:100%; } }

/* ---------- sections generic ---------- */
section{ padding: 140px 0; position: relative; }
section.tight{ padding: 90px 0; }
.section-head{ max-width: 640px; margin-bottom: 64px; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 44px); }
.section-head p{ margin-top: 18px; font-size: 17px; }

.divider{ height:1px; background: var(--line); border:none; margin:0; }

/* ---------- problem section ---------- */
.problem-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  margin-top: 50px; border-radius: var(--radius-card); overflow: hidden;
}
.problem-card{ background: var(--bg-alt); padding: 34px 30px; }
.problem-card .num{ font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--accent-2); display:block; margin-bottom:18px; letter-spacing: 0.05em; }
.problem-card h3{ font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.problem-card p{ font-size: 14.5px; }
@media (max-width: 860px){ .problem-grid{ grid-template-columns: 1fr; } }

/* ---------- process / 3 componenti — griglia numerata (rif. Vaylo) ---------- */
.process{ margin-top: 60px; display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-card); overflow:hidden; }
.process-item{
  background: var(--bg-alt);
  padding: 44px 34px;
  position: relative;
  overflow: hidden;
}
.process-item .ghost-num{
  position: absolute; top: -10px; right: 14px;
  font-family: var(--sans); font-weight: 700; font-size: 110px; line-height: 1;
  color: var(--module-c, var(--accent)); opacity: 0.08; pointer-events: none;
}
.process-item[data-accent="gold"]{ --module-c: var(--gold); }
.process-item[data-accent="green"]{ --module-c: var(--green); }
.process-item[data-accent="purple"]{ --module-c: var(--purple); }
.process-item .idx{ font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--module-c, var(--accent-2)); letter-spacing: 0.05em; position: relative; z-index:1; }
.process-item h3{ font-size: 24px; font-weight: 700; margin-top: 14px; position: relative; z-index:1; }
.process-item .tag{ display:inline-block; margin-top:12px; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color: var(--module-c, var(--accent-2)); position: relative; z-index:1; }
.process-item .desc{ position: relative; z-index:1; margin-top: 18px; }
.process-item .desc p{ font-size: 14.5px; margin-bottom: 16px; }
.process-item .desc a{ font-size: 13.5px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color .3s, color .3s; }
.process-item .desc a:hover{ color: var(--module-c, var(--accent-2)); border-color: var(--module-c, var(--accent-2)); }
@media (max-width: 860px){ .process{ grid-template-columns: 1fr; } }

/* ---------- differentiation ---------- */
.diff-panel{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 64px;
  margin-top: 50px;
  position: relative;
  overflow: hidden;
}
.diff-panel::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 500px 300px at 90% -10%, rgba(138,154,91,0.25), transparent 60%);
  pointer-events: none;
}
.diff-list{ display:grid; grid-template-columns: repeat(4,1fr); gap: 36px; margin-top: 40px; position: relative; }
.diff-list div h4{ font-size: 15px; font-weight:700; color: var(--text); margin-bottom:10px; }
.diff-list div p{ font-size:13.5px; }
@media (max-width: 900px){ .diff-panel{ padding: 38px 26px; } .diff-list{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .diff-list{ grid-template-columns: 1fr; } }

/* ---------- pilot / honesty section ---------- */
.pilot{
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  padding: 46px;
  display:flex; justify-content:space-between; align-items:center; gap: 40px; flex-wrap: wrap;
}
.pilot h3{ font-size: 21px; font-weight:700; max-width: 30ch; }
.pilot p{ margin-top:10px; font-size: 14.5px; max-width: 44ch; }

/* ---------- pricing — badge colorati per componente (rif. Cuadro case-study cards) ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 54px; }
.price-card{
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 40px 32px;
  display:flex; flex-direction:column;
  position: relative;
  overflow: hidden;
}
.price-card[data-accent="gold"]{ --module-c: var(--gold); --module-dim: var(--gold-dim); }
.price-card[data-accent="green"]{ --module-c: var(--green); --module-dim: var(--green-dim); }
.price-card[data-accent="purple"]{ --module-c: var(--purple); --module-dim: var(--purple-dim); }
.price-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--module-c, var(--accent)); }
.price-card.featured{ border-color: var(--module-c, var(--accent)); background: linear-gradient(180deg, var(--module-dim, var(--accent-dim)), transparent 45%), var(--bg-alt); }
.price-card .tier{ font-size: 12.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color: var(--module-c, var(--text-faint)); }
.price-card h3{ font-size: 21px; margin-top: 10px; font-weight:700; }
.price-card .amount{ font-family: var(--sans); font-weight: 700; font-size: 38px; margin-top: 20px; color: var(--text); }
.price-card .amount span{ font-size: 14px; font-weight: 500; color: var(--text-faint); }
.price-card ul{ list-style:none; padding:0; margin: 26px 0; flex:1; }
.price-card li{ font-size: 14px; color: var(--text-muted); padding: 9px 0; border-top: 1px solid var(--line); }
.price-card li:first-child{ border-top:none; }
@media (max-width: 900px){ .pricing-grid{ grid-template-columns: 1fr; } }
.pricing-grid.cols-2{ grid-template-columns: repeat(2,1fr); max-width: 820px; margin-left:auto; margin-right:auto; }
@media (max-width: 700px){ .pricing-grid.cols-2{ grid-template-columns: 1fr; } }

/* ---------- guarantee ---------- */
.guarantee{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.guarantee-visual{ border: 1px solid var(--line); border-radius: var(--radius-card); padding: 46px; background: var(--bg-alt); position: relative; overflow:hidden; }
.guarantee-visual::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 400px 300px at 100% 0%, rgba(138,154,91,0.2), transparent 60%); pointer-events:none; }
.guarantee-visual .days{ font-family: var(--sans); font-weight: 700; font-size: 68px; color: var(--accent-2); line-height:1; position:relative; }
.guarantee-visual .label{ font-size: 12px; text-transform:uppercase; letter-spacing:0.1em; color: var(--text-faint); margin-top: 10px; position:relative; }
@media (max-width: 860px){ .guarantee{ grid-template-columns: 1fr; gap: 30px; } }

/* ---------- faq ---------- */
.faq-item{ border-top: 1px solid var(--line); padding: 26px 0; cursor: pointer; }
.faq-item:last-child{ border-bottom: 1px solid var(--line); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; gap: 20px; }
.faq-q h4{ font-size: 17px; font-weight: 600; font-family: var(--sans); }
.faq-q .plus{ font-size: 20px; color: var(--accent-2); transition: transform .35s var(--ease); flex-shrink:0; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease); }
.faq-a p{ padding-top: 16px; font-size: 15px; max-width: 68ch; }

/* ---------- final cta ---------- */
.final-cta{ text-align:center; padding: 160px 0; position: relative; background: radial-gradient(ellipse 800px 500px at 50% 0%, rgba(138,154,91,0.16), transparent 60%); }
.final-cta h2{ font-size: clamp(30px, 5vw, 54px); max-width: 18ch; margin: 0 auto; }
.final-cta .lede{ margin: 24px auto 0; text-align:center; }
.final-cta .hero-cta{ justify-content:center; margin-top: 42px; }

/* ---------- footer ---------- */
footer.site{ border-top: 1px solid var(--line); padding: 60px 0 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid h5{ font-size: 12px; text-transform:uppercase; letter-spacing:0.1em; color: var(--text-faint); margin-bottom: 18px; font-weight: 600; }
.footer-grid a, .footer-grid p{ display:block; font-size: 14px; color: var(--text-muted); margin-bottom: 10px; }
.footer-grid a:hover{ color: var(--accent-2); }
.footer-bottom{ margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line); display:flex; justify-content:space-between; color: var(--text-faint); font-size: 12.5px; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- inner page hero ---------- */
.page-hero{ padding-top: 170px; padding-bottom: 90px; background: var(--glow), var(--bg); }
.page-hero .eyebrow{ margin-bottom: 20px; }
.page-hero h1{ font-size: clamp(32px, 4.6vw, 54px); max-width: 17ch; }
.page-hero .lede{ margin-top: 24px; }

.included-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-card); overflow:hidden; margin-top: 40px; }
.included-item{ background: var(--bg-alt); padding: 30px; }
.included-item h4{ font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.included-item p{ font-size: 14px; }
@media (max-width: 700px){ .included-grid{ grid-template-columns: 1fr; } }

/* reveal utility */
.reveal{ opacity: 0; transform: translateY(28px); }

/* contact form */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 70px; }
form.contact-form{ display:flex; flex-direction:column; gap: 20px; margin-top: 30px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size: 12px; font-weight: 600; text-transform:uppercase; letter-spacing:0.08em; color: var(--text-faint); }
.field input, .field textarea, .field select{
  background: var(--bg-alt); border: 1px solid var(--line-strong); color: var(--text);
  padding: 13px 18px; font-family: var(--sans); font-size: 14.5px; border-radius: 12px;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline: none; border-color: var(--accent-2); }
.field textarea{ min-height: 120px; resize: vertical; }
.field button.btn{ align-self:flex-start; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; gap: 40px; } }

.contact-info .info-block{ padding: 24px 0; border-top: 1px solid var(--line); }
.contact-info .info-block:first-child{ border-top:none; }
.contact-info .info-block h5{ font-size: 12px; text-transform:uppercase; letter-spacing:0.1em; color: var(--text-faint); margin-bottom: 10px; font-weight: 600; }
.contact-info .info-block p, .contact-info .info-block a{ font-size: 16px; color: var(--text); }

/* ---------- agenti fissi — libreria di agenti pronti (rif. Cashflow Automations) ---------- */
.agents-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 50px; }
.agent-card{
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 30px 28px; display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.agent-card:hover{ border-color: var(--module-c, var(--accent-2)); transform: translateY(-3px); }
.agent-card[data-accent="gold"]{ --module-c: var(--gold); --module-dim: var(--gold-dim); }
.agent-card[data-accent="green"]{ --module-c: var(--green); --module-dim: var(--green-dim); }
.agent-card[data-accent="purple"]{ --module-c: var(--purple); --module-dim: var(--purple-dim); }
.agent-card .cat-tag{
  display:inline-flex; align-self:flex-start; font-family: var(--mono); font-size: 10.5px; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color: var(--module-c, var(--accent-2));
  background: var(--module-dim, var(--accent-dim)); padding: 5px 11px; border-radius: var(--radius);
  margin-bottom: 18px;
}
.agent-card h4{ font-size: 17px; font-weight:700; margin-bottom:10px; letter-spacing:-0.01em; }
.agent-card p{ font-size: 13.5px; flex:1; }
.agent-card .price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.agent-card .price-row .price{ font-family: var(--sans); font-weight:700; font-size:17px; color: var(--text); }
.agent-card .price-row .price span{ font-size:11px; font-weight:500; color: var(--text-faint); }
.agent-card .price-row a{ font-size:13px; font-weight:600; color: var(--module-c, var(--accent-2)); }
@media (max-width: 860px){ .agents-grid{ grid-template-columns: 1fr; } }

/* ---------- dashboard — pannello agenti live (rif. TheFounderOS, Promptible) ---------- */
.dashboard-layout{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items:center; }
.dashboard-panel{
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.55);
}
.dash-topbar{ display:flex; align-items:center; gap:14px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.dash-dots{ display:flex; gap:6px; }
.dash-dots span{ width:9px; height:9px; border-radius:50%; background: var(--line-strong); }
.dash-title{ font-family: var(--mono); font-size: 12px; color: var(--text-faint); letter-spacing:0.02em; }
.dash-stats{ display:grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }
.dash-stats .dash-stat{ padding: 26px 22px; border-left: 1px solid var(--line); }
.dash-stats .dash-stat:first-child{ border-left:none; }
.dash-stat b{ display:block; font-family: var(--sans); font-weight:700; font-size: 26px; color: var(--accent-2); letter-spacing:-0.01em; }
.dash-stat span{ font-size: 11px; color: var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; margin-top:6px; display:block; }
.dash-agents{ padding: 6px 22px; border-bottom: 1px solid var(--line); }
.dash-agent-row{ display:flex; align-items:center; gap:12px; padding: 14px 0; font-size:13.5px; color: var(--text); border-top: 1px solid var(--line); }
.dash-agent-row:first-child{ border-top:none; }
.dash-agent-row em{ margin-left:auto; font-style:normal; font-family: var(--mono); font-size:11px; color: var(--text-faint); }
.status-dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); flex-shrink:0; position:relative; }
.status-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; background: inherit; opacity:0.4; animation: pulse-dot 2s ease-out infinite; }
.status-dot[data-accent="gold"]{ background: var(--gold); }
.status-dot[data-accent="green"]{ background: var(--green); }
.status-dot[data-accent="purple"]{ background: var(--purple); }
@keyframes pulse-dot{ 0%{ transform: scale(0.6); opacity:0.5; } 100%{ transform: scale(2.4); opacity:0; } }
.dash-log{ padding: 18px 22px 22px; font-family: var(--mono); font-size: 12.5px; line-height:2; color: var(--text-muted); background: rgba(0,0,0,0.15); }
.dash-log-line{ opacity:0; transform: translateX(-8px); white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 900px){ .dashboard-layout{ grid-template-columns:1fr; gap:40px; } }
@media (max-width: 560px){
  .dash-stats{ grid-template-columns: 1fr; }
  .dash-stats .dash-stat{ border-left:none; border-top:1px solid var(--line); }
  .dash-stats .dash-stat:first-child{ border-top:none; }
}