/* =========================================================
   DeltAi Suite — Landing page styles
   ========================================================= */

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

/* Reset belt-and-suspenders */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(70% 50% at 85% -10%, rgba(141, 70, 255, 0.18), transparent 70%),
    radial-gradient(60% 50% at 10% 20%, rgba(56, 229, 232, 0.10), transparent 70%),
    var(--grad-bg);
  background-attachment: fixed;
  overflow-x: hidden;
}
#root { position: relative; z-index: 1; }

/* ---------- Layout ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.section { padding: 112px 0; position: relative; }
.section-tight { padding: 64px 0; }

@media (max-width: 760px) {
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
}

/* ---------- Atmospheric background motifs ---------- */
.atmosphere { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.atmosphere .glow-m { position: absolute; right: -260px; top: -180px; width: 820px; height: 820px;
  background: radial-gradient(circle, rgba(141,70,255,0.22), transparent 60%); }
.atmosphere .glow-c { position: absolute; left: -260px; top: 540px; width: 820px; height: 820px;
  background: radial-gradient(circle, rgba(56,229,232,0.14), transparent 60%); }
.atmosphere .glow-r { position: absolute; right: -180px; top: 1500px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,79,163,0.10), transparent 60%); }
.atmosphere .dots {
  position: absolute; right: 0; top: 80px; width: 60%; height: 720px;
  background-image: radial-gradient(rgba(56,229,232,0.22) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(closest-side at 80% 30%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(closest-side at 80% 30%, #000 0%, transparent 70%);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 15, 28, 0.6);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav .brand { display: inline-flex; align-items: center; gap: 10px; }
.nav .brand img { width: 32px; height: 32px; display:block; }
.nav .brand .word { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--fg-1); }
.nav .brand .word .ai { color: var(--brand-cian-clinico); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-link { font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--fg-2); transition: color var(--dur-base); }
.nav-link:hover { color: var(--fg-1); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav .mobile-toggle { display: none; }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-actions .btn-login-desktop { display: none; }
  .nav .mobile-toggle { display: inline-flex; }
}

.mobile-sheet {
  position: fixed; inset: 72px 0 0 0; z-index: 49;
  background: rgba(5, 15, 28, 0.96); backdrop-filter: blur(20px);
  padding: 32px 24px; display: grid; gap: 8px; align-content: start;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.mobile-sheet.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-sheet a { padding: 14px 12px; border-radius: 10px; color: var(--fg-1); font-family: var(--font-display); font-weight: 600; font-size: 20px; border-bottom: 1px solid var(--border); }
.mobile-sheet .actions { display: grid; gap: 10px; margin-top: 16px; }
.mobile-sheet .actions .btn { width: 100%; justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px; align-items: center;
  padding: 72px 0 80px;
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding: 48px 0 32px; }
}
.hero .eyebrow-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: rgba(56,229,232,0.08); border: 1px solid rgba(56,229,232,0.30);
  font-family: var(--font-ui); font-size: 12px; color: var(--brand-cian-clinico); letter-spacing: 0.08em;
}
.hero-chip .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-cian-clinico);
  box-shadow: 0 0 12px var(--brand-cian-clinico);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.04; letter-spacing: -0.025em;
  color: var(--fg-1); margin-top: 24px; text-wrap: balance;
}
.hero h1 .grad {
  background: linear-gradient(135deg, #38E5E8 0%, #8D46FF 60%, #FF4FA3 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero .sub {
  margin-top: 18px; color: var(--fg-2); font-size: 18px; line-height: 1.6;
  max-width: 560px;
}
.hero .actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero .actions .btn { padding: 14px 22px; font-size: 15px; }
.hero .meta-row {
  display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.hero .meta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 13px; color: var(--fg-2);
}
.hero .meta-pill svg { width: 16px; height: 16px; color: var(--brand-cian-clinico); }

/* Hero visual — the cinematic "report writing itself" mock */
.hero-visual { position: relative; min-height: 480px; }
@media (max-width: 980px) {
  .hero-visual { min-height: 420px; }
}
.hero-visual .arc {
  position: absolute; inset: -40px -20px -40px -20px;
  pointer-events: none; opacity: 0.6;
}
.hero-mock {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(14,36,64,0.92), rgba(8,26,46,0.92));
  border: 1px solid var(--border-2); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(56,229,232,0.05);
  overflow: hidden;
}
.hero-mock .titlebar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: rgba(5, 15, 28, 0.6);
}
.hero-mock .titlebar .dots { display: flex; gap: 6px; }
.hero-mock .titlebar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-3); }
.hero-mock .titlebar .titletext { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); flex: 1; text-align: center; }
.hero-mock .titlebar .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 79, 163, 0.12); border: 1px solid rgba(255, 79, 163, 0.35);
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.1em; color: #FF8FC4; text-transform: uppercase;
}
.hero-mock .live i { width: 6px; height: 6px; border-radius: 50%; background: #FF4FA3; box-shadow: 0 0 8px #FF4FA3; animation: pulse-dot 1.2s infinite; }
.hero-mock .body {
  display: grid; grid-template-columns: 0.95fr 1fr; gap: 0; min-height: 360px;
}
.hero-mock .scan {
  position: relative; background: #02080F;
  border-right: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-mock .scan img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; }
.hero-mock .scan .scanline {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56,229,232,0.9), transparent);
  box-shadow: 0 0 24px rgba(56,229,232,0.55);
  animation: scanmove 3.4s var(--ease-in-out) infinite;
}
@keyframes scanmove { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }
.hero-mock .scan .overlay-pin {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hero-mock .scan .pin {
  font-family: var(--font-mono); font-size: 10px;
  padding: 4px 8px; border-radius: 6px;
  background: rgba(5, 15, 28, 0.7); border: 1px solid rgba(56,229,232,0.30);
  color: var(--brand-cian-clinico); backdrop-filter: blur(6px);
}
.hero-mock .scan .crosshair {
  position: absolute; width: 26px; height: 26px; border: 1.5px solid var(--brand-rosa-neon);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255, 79, 163, 0.6);
  animation: crosshair-move 7s var(--ease-in-out) infinite;
}
@keyframes crosshair-move {
  0% { top: 40%; left: 30%; }
  35% { top: 55%; left: 56%; }
  70% { top: 38%; left: 62%; }
  100% { top: 40%; left: 30%; }
}

.hero-mock .report { padding: 18px 22px; display: grid; gap: 14px; align-content: start; }
.hero-mock .report .row { display: grid; gap: 6px; }
.hero-mock .report .label {
  font-family: var(--font-ui); font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.hero-mock .report .typed {
  font-family: var(--font-body); font-size: 13.5px; color: var(--fg-1); line-height: 1.55;
  min-height: 1.55em;
}
.hero-mock .report .typed .cursor {
  display: inline-block; width: 7px; height: 14px;
  background: var(--brand-cian-clinico); vertical-align: -2px;
  margin-left: 1px; animation: blink 0.95s steps(2) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.hero-mock .report .conclusion {
  margin-top: 4px; padding: 10px 12px;
  background: rgba(56,229,232,0.06); border: 1px solid rgba(56,229,232,0.25);
  border-radius: 10px;
  font-family: var(--font-body); font-size: 12px; color: var(--fg-1); line-height: 1.55;
}
.hero-mock .report .footrow {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border);
}
.hero-mock .report .confidence {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 11px; color: var(--fg-3); letter-spacing: 0.08em; text-transform: uppercase;
}
.hero-mock .report .bar { width: 84px; height: 6px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.hero-mock .report .bar i { display: block; height: 100%; background: linear-gradient(90deg, #38E5E8, #8BF3D1); border-radius: 999px; width: 95%; box-shadow: 0 0 12px rgba(56,229,232,0.6); }
.hero-mock .report .confidence .v { font-family: var(--font-mono); font-size: 14px; color: var(--brand-cian-clinico); }
.hero-mock .report .timer {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
}

.hero-visual .float-card {
  position: absolute; left: -28px; bottom: 28px; z-index: 3;
  padding: 12px 16px; background: var(--bg-2);
  border: 1px solid rgba(56,229,232,0.40); border-radius: 12px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 0 40px rgba(56,229,232,0.20), var(--shadow-2);
  min-width: 200px;
}
.hero-visual .float-card .v { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #38E5E8; line-height: 1; }
.hero-visual .float-card .l { font-family: var(--font-ui); font-size: 10px; color: var(--fg-3); letter-spacing: 0.10em; text-transform: uppercase; }
@media (max-width: 540px) {
  .hero-visual .float-card { left: 8px; bottom: 8px; min-width: 0; padding: 10px 12px; }
  .hero-visual .float-card .v { font-size: 18px; }
}

/* ---------- Metrics strip ---------- */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border);
  border: 1px solid var(--border); border-radius: 18px;
  overflow: hidden; margin-top: 12px;
}
.metric {
  background: linear-gradient(180deg, rgba(14,36,64,0.55), rgba(8,26,46,0.55));
  padding: 28px 26px; display: grid; gap: 6px; position: relative;
}
.metric .v {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -0.025em; color: var(--fg-1);
  display: inline-flex; align-items: baseline; gap: 2px; line-height: 1;
}
.metric .v .unit { font-size: 0.55em; color: var(--brand-cian-clinico); margin-left: 4px; }
.metric .l { font-family: var(--font-ui); font-size: 13px; color: var(--fg-2); line-height: 1.4; }
.metric::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #38E5E8, transparent);
  opacity: 0.55;
}
@media (max-width: 880px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .metrics { grid-template-columns: 1fr; } }

/* ---------- Section heads ---------- */
.section-head { display: grid; gap: 14px; justify-items: start; margin-bottom: 56px; max-width: 760px; }
.section-head.center { justify-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.022em; color: var(--fg-1);
  text-wrap: balance;
}
.section-head h2 .grad {
  background: linear-gradient(135deg, #38E5E8 0%, #8D46FF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section-head p { color: var(--fg-2); font-size: 17px; line-height: 1.55; max-width: 620px; }

/* ---------- Flow (3-step cinematic) ---------- */
.flow-wrap { position: relative; }
.flow-stage {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; position: relative;
}
@media (max-width: 880px) { .flow-stage { grid-template-columns: 1fr; gap: 24px; } }

.flow-card {
  position: relative; border-radius: 18px;
  background: linear-gradient(180deg, rgba(14,36,64,0.75), rgba(8,26,46,0.85));
  border: 1px solid var(--border);
  padding: 22px; min-height: 360px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 14px;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out),
              background var(--dur-slow);
}
.flow-card .step-head { display: flex; align-items: center; gap: 14px; }
.flow-card .step-num {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.16em;
  padding: 4px 8px; border: 1px solid var(--border-2); border-radius: 6px;
}
.flow-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--fg-1);
  letter-spacing: -0.01em; line-height: 1.2;
}
.flow-card .step-desc { font-size: 14px; color: var(--fg-2); line-height: 1.55; }
.flow-card .stage-canvas {
  position: relative; border-radius: 14px;
  background: linear-gradient(180deg, #02080F 0%, #050F1C 100%);
  border: 1px solid var(--border);
  overflow: hidden;
  min-height: 200px;
}
.flow-card.active {
  border-color: rgba(56,229,232,0.55);
  background: linear-gradient(180deg, rgba(14,36,64,1), rgba(8,26,46,1));
  box-shadow: 0 0 0 1px rgba(56,229,232,0.10), 0 0 40px rgba(56,229,232,0.18), var(--shadow-2);
}
.flow-card.active .step-num {
  color: var(--brand-cian-clinico); border-color: rgba(56,229,232,0.5); background: rgba(56,229,232,0.08);
}
.flow-card.consult.active {
  border-color: rgba(141,70,255,0.55);
  box-shadow: 0 0 0 1px rgba(141,70,255,0.10), 0 0 40px rgba(141,70,255,0.22), var(--shadow-2);
}
.flow-card.consult.active .step-num {
  color: #D7B9FF; border-color: rgba(141,70,255,0.5); background: rgba(141,70,255,0.10);
}
.flow-card.success.active {
  border-color: rgba(139,243,209,0.45);
  box-shadow: 0 0 0 1px rgba(139,243,209,0.08), 0 0 40px rgba(139,243,209,0.16), var(--shadow-2);
}
.flow-card.success.active .step-num {
  color: var(--brand-verde-menta); border-color: rgba(139,243,209,0.45); background: rgba(139,243,209,0.08);
}

/* Connector line between cards */
.flow-stage .connector {
  position: absolute; top: 60px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--border-2), var(--border-2));
  border-radius: 999px; z-index: 0;
}
.flow-stage .connector.c1 { left: calc(33.33% - 9px); right: calc(66.66% - 9px); }
.flow-stage .connector.c2 { left: calc(66.66% - 9px); right: calc(33.33% - 9px); }
.flow-stage .connector i {
  position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-cian-clinico);
  box-shadow: 0 0 12px var(--brand-cian-clinico);
  opacity: 0; left: 0;
}
.flow-stage .connector.active i { animation: connector-pulse 1.4s var(--ease-in-out) forwards; }
@keyframes connector-pulse {
  0% { left: 0; opacity: 0; }
  20% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.flow-stage .connector.active { background: linear-gradient(90deg, rgba(56,229,232,0.55), rgba(56,229,232,0.15)); }
@media (max-width: 880px) { .flow-stage .connector { display: none; } }

/* === Stage 1: Dictado / waveform === */
.stage-dict { padding: 18px; display: grid; grid-template-rows: auto 1fr; gap: 12px; height: 100%; }
.stage-dict .mic {
  display: flex; align-items: center; gap: 12px;
}
.mic-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(56,229,232,0.12); border: 1px solid rgba(56,229,232,0.45);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-cian-clinico);
  flex-shrink: 0;
}
.flow-card.active .mic-circle {
  box-shadow: 0 0 0 0 rgba(56,229,232,0.5);
  animation: mic-pulse 1.6s var(--ease-out) infinite;
}
@keyframes mic-pulse {
  0% { box-shadow: 0 0 0 0 rgba(56,229,232,0.55); }
  100% { box-shadow: 0 0 0 14px rgba(56,229,232,0); }
}
.mic-meta { display: grid; gap: 2px; }
.mic-meta .who { font-family: var(--font-ui); font-size: 12px; color: var(--fg-1); font-weight: 600; }
.mic-meta .time { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }

.waveform { display: flex; align-items: center; gap: 3px; height: 36px; padding: 0 4px; }
.waveform i {
  display: block; width: 3px; height: 6px; border-radius: 2px;
  background: var(--brand-cian-clinico); opacity: 0.6;
}
.flow-card.active .waveform i { animation: wave var(--wd, 0.8s) ease-in-out infinite; }
@keyframes wave {
  0%, 100% { height: 6px; opacity: 0.45; }
  50% { height: 26px; opacity: 1; }
}
.dict-lines { display: grid; gap: 6px; align-content: end; }
.dict-line {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.45;
  color: var(--fg-2); padding: 6px 10px; border-radius: 8px;
  background: rgba(56,229,232,0.05); border-left: 2px solid rgba(56,229,232,0.4);
  opacity: 0; transform: translateY(8px);
}
.flow-card.active .dict-line { animation: dict-in 0.6s var(--ease-out) forwards; }
.flow-card.active .dict-line:nth-child(1) { animation-delay: 0.6s; }
.flow-card.active .dict-line:nth-child(2) { animation-delay: 1.7s; }
.flow-card.active .dict-line:nth-child(3) { animation-delay: 2.9s; }
@keyframes dict-in { to { opacity: 1; transform: translateY(0); } }

/* === Stage 2: AI processing === */
.stage-ai { position: relative; height: 100%; padding: 12px; overflow: hidden; }
.stage-ai .neural { position: absolute; inset: 0; opacity: 0.7; }
.stage-ai .neural circle.node { fill: rgba(141,70,255,0.95); }
.stage-ai .neural circle.node.c { fill: rgba(56,229,232,0.95); }
.stage-ai .neural line { stroke: rgba(141,70,255,0.35); stroke-width: 1; }
.flow-card.active .neural .node {
  animation: node-pulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(141,70,255,0.8));
}
.flow-card.active .neural .node.c { filter: drop-shadow(0 0 4px rgba(56,229,232,0.8)); }
@keyframes node-pulse { 0%, 100% { opacity: 0.55; r: 3; } 50% { opacity: 1; r: 5; } }
.flow-card.active .neural line {
  stroke-dasharray: 3 5; animation: line-flow 3.2s linear infinite;
}
@keyframes line-flow { to { stroke-dashoffset: -100; } }

.stage-ai .ai-overlay {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: grid; gap: 8px;
}
.stage-ai .ai-stream {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-1); padding: 8px 10px; border-radius: 8px;
  background: rgba(2, 8, 15, 0.7); border: 1px solid rgba(141,70,255,0.30);
  display: grid; gap: 4px;
  backdrop-filter: blur(6px);
}
.stage-ai .ai-stream .tag {
  font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.16em; color: #D7B9FF; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.stage-ai .ai-stream .tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-magenta); box-shadow: 0 0 8px var(--brand-magenta); }
.flow-card.active .stage-ai .ai-stream .tag i { animation: pulse-dot 1.2s infinite; }
.stage-ai .ai-stream .line { color: var(--fg-2); line-height: 1.4; }
.stage-ai .ai-stream .line .blink::after {
  content: "▍"; color: var(--brand-magenta); margin-left: 2px;
  animation: blink 0.7s steps(2) infinite;
}

/* === Stage 3: Validation & signature === */
.stage-sign { padding: 14px; height: 100%; display: grid; gap: 10px; grid-template-rows: 1fr auto; }
.signed-doc {
  position: relative; padding: 12px;
  background: linear-gradient(180deg, rgba(8,26,46,0.85), rgba(14,36,64,0.85));
  border: 1px solid var(--border); border-radius: 10px;
  display: grid; gap: 6px; overflow: hidden;
}
.signed-doc .docline { height: 5px; border-radius: 3px; background: rgba(141, 200, 230, 0.10); }
.signed-doc .docline.short { width: 60%; }
.signed-doc .docline.mid { width: 80%; }
.signed-doc .stamp {
  position: absolute; bottom: 12px; right: 12px;
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--brand-verde-menta);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-verde-menta);
  background: rgba(139,243,209,0.08);
  transform: rotate(-12deg) scale(0.6);
  opacity: 0;
  box-shadow: 0 0 20px rgba(139,243,209,0.30);
}
.flow-card.success.active .stamp { animation: stamp-in 0.5s var(--ease-out) 1.2s forwards; }
@keyframes stamp-in { to { opacity: 1; transform: rotate(-12deg) scale(1); } }
.signed-doc .sigpath {
  stroke: var(--brand-cian-clinico); stroke-width: 1.6; fill: none; stroke-linecap: round;
  stroke-dasharray: 220; stroke-dashoffset: 220;
}
.flow-card.success.active .sigpath { animation: sig-draw 1.4s var(--ease-out) 0.4s forwards; }
@keyframes sig-draw { to { stroke-dashoffset: 0; } }

.sign-meta { display: flex; align-items: center; justify-content: space-between; }
.sign-meta .who { display: flex; align-items: center; gap: 8px; }
.sign-meta .who .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #38E5E8, #8D46FF);
  display: inline-flex; align-items: center; justify-content: center;
  color: #04161F; font-family: var(--font-ui); font-weight: 700; font-size: 11px;
}
.sign-meta .who .name { font-family: var(--font-ui); font-size: 12px; color: var(--fg-1); font-weight: 600; }
.sign-meta .who .lic { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
.sign-meta .saved {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.1em; color: var(--brand-verde-menta); text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(139,243,209,0.10); border: 1px solid rgba(139,243,209,0.35);
}
.sign-meta .saved i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-verde-menta); }

/* Progress dots */
.flow-progress { display: inline-flex; gap: 6px; margin-top: 28px; align-items: center; justify-content: center; width: 100%; }
.flow-progress i {
  width: 28px; height: 4px; border-radius: 999px;
  background: rgba(141, 200, 230, 0.20);
  transition: background var(--dur-base);
  cursor: pointer;
}
.flow-progress i.active { background: var(--brand-cian-clinico); box-shadow: 0 0 12px rgba(56,229,232,0.6); }

/* ---------- Products grid (3 cards) ---------- */
.products-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 960px) { .products-3 { grid-template-columns: 1fr; } }

.product-3 {
  background: linear-gradient(180deg, rgba(14,36,64,0.65), rgba(8,26,46,0.5));
  border: 1px solid var(--border-2); border-radius: 22px;
  padding: 24px 24px 24px; display: grid; grid-template-rows: auto 1fr auto; gap: 18px;
  position: relative; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.product-3:hover { transform: translateY(-4px); border-color: rgba(56,229,232,0.40); }
.product-3.consult:hover { border-color: rgba(141,70,255,0.45); }
.product-3.flow:hover { border-color: rgba(255,79,163,0.45); }
.product-3::before {
  content: ""; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%;
  opacity: 0.55; pointer-events: none;
}
.product-3.report::before { background: radial-gradient(circle, rgba(56,229,232,0.40), transparent 60%); }
.product-3.consult::before { background: radial-gradient(circle, rgba(141,70,255,0.40), transparent 60%); }
.product-3.flow::before { background: radial-gradient(circle, rgba(255,79,163,0.30), transparent 60%); }

.product-3 .ph {
  display: flex; align-items: center; gap: 12px;
}
.product-3 .ph-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--fg-1); letter-spacing: -0.01em; }
.product-3 .ph-name .name-ai { color: var(--brand-cian-clinico); }
.product-3.consult .ph-name .name-ai { color: #C9A8FF; }
.product-3.flow .ph-name .name-ai { color: #FF8FC4; }
.product-3 .tag { font-family: var(--font-ui); font-size: 12px; color: var(--fg-3); font-style: italic; }
.product-3 .beta {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.12em; color: var(--beta-fg);
  background: var(--beta-bg); padding: 2px 8px; border-radius: 6px; text-transform: uppercase; font-weight: 700;
}
.product-3 .pdesc { color: var(--fg-2); font-size: 14.5px; line-height: 1.55; }
.product-3 .imgwrap {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); aspect-ratio: 16/10;
  background: #02080F;
}
.product-3 .imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.product-3 .bullets { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; }
.product-3 .bullets li {
  display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 13.5px; line-height: 1.45;
}
.product-3 .bullets li svg { width: 16px; height: 16px; flex-shrink: 0; }
.product-3.report .bullets li svg { color: var(--brand-cian-clinico); }
.product-3.consult .bullets li svg { color: #C9A8FF; }
.product-3.flow .bullets li svg { color: #FF8FC4; }

/* ---------- Benefits split (Redactor / Consultor) ---------- */
.benefits {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 960px) { .benefits { grid-template-columns: 1fr; } }
.benefit-card {
  background: linear-gradient(180deg, rgba(14,36,64,0.6), rgba(8,26,46,0.6));
  border: 1px solid var(--border-2); border-radius: 22px;
  padding: 32px; display: grid; gap: 20px;
  position: relative; overflow: hidden;
}
.benefit-card.redactor { box-shadow: inset 0 0 80px rgba(56,229,232,0.05); }
.benefit-card.consultor { box-shadow: inset 0 0 80px rgba(141,70,255,0.06); }
.benefit-card .eyebrow-tag {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  padding: 6px 10px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
}
.benefit-card.redactor .eyebrow-tag { background: rgba(56,229,232,0.12); color: var(--brand-cian-clinico); border: 1px solid rgba(56,229,232,0.30); }
.benefit-card.consultor .eyebrow-tag { background: rgba(141,70,255,0.12); color: #D7B9FF; border: 1px solid rgba(141,70,255,0.30); }
.benefit-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--fg-1);
  letter-spacing: -0.02em;
}
.benefit-card ul.checks { list-style: none; padding: 0; display: grid; gap: 14px; }
.benefit-card ul.checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.benefit-card ul.checks li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.benefit-card.redactor ul.checks li svg { color: var(--brand-cian-clinico); }
.benefit-card.consultor ul.checks li svg { color: #C9A8FF; }

/* ---------- Pricing ---------- */
.pricing {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch;
}
@media (max-width: 960px) { .pricing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pricing { grid-template-columns: 1fr; } }

.price-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 18px; padding: 26px 24px;
  display: grid; gap: 14px; position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.price-card:hover { transform: translateY(-3px); border-color: var(--border-2); }
.price-card.featured {
  border-color: rgba(141,70,255,0.55);
  box-shadow: 0 0 40px rgba(141,70,255,0.18), var(--shadow-1);
  background: linear-gradient(180deg, rgba(141,70,255,0.10), var(--bg-1));
}
.price-card .ribbon {
  position: absolute; top: -12px; right: 18px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.16em;
  padding: 5px 11px; background: linear-gradient(135deg, #8D46FF, #FF4FA3);
  color: #fff; border-radius: 999px; text-transform: uppercase; font-weight: 700;
  box-shadow: 0 4px 14px rgba(141,70,255,0.35);
}
.price-card .name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--fg-1); }
.price-card .vol { font-size: 13px; color: var(--fg-3); }
.price-card .price { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.price-card .price .cur { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.price-card .price .amt { font-family: var(--font-display); font-weight: 800; font-size: 36px; color: var(--fg-1); letter-spacing: -0.025em; }
.price-card .price .per { font-family: var(--font-ui); font-size: 12px; color: var(--fg-3); margin-left: 2px; }
.price-card .price .free { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--brand-verde-menta); }
.price-card .feats { list-style: none; display: grid; gap: 8px; margin-top: 4px; padding: 0; }
.price-card .feats li { display: flex; gap: 8px; color: var(--fg-2); font-size: 13px; align-items: center; }
.price-card .feats li svg { width: 14px; height: 14px; color: var(--brand-verde-menta); flex-shrink: 0; }
.price-card .cta-btn {
  margin-top: 8px; padding: 12px 16px; width: 100%; justify-content: center;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base);
}
.price-card .cta-btn:hover { transform: translateY(-1px); }
.price-card.featured .cta-btn {
  background: linear-gradient(135deg, #8D46FF 0%, #FF4FA3 100%); color: #fff;
  box-shadow: 0 6px 18px rgba(141,70,255,0.35);
}
.price-card .cta-btn.ghost {
  background: rgba(56,229,232,0.08); border-color: rgba(56,229,232,0.40); color: var(--brand-cian-clinico);
}
.price-card .cta-btn.ghost:hover { background: rgba(56,229,232,0.14); }
.price-card.gift { border-color: rgba(139,243,209,0.30); }
.price-card.gift .cta-btn {
  background: rgba(139,243,209,0.10); border-color: rgba(139,243,209,0.40); color: var(--brand-verde-menta);
}

/* Plan compare strip below pricing */
.guarantee {
  margin-top: 24px; padding: 18px 22px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: rgba(8,26,46,0.5); border: 1px dashed var(--border-2); border-radius: 14px;
}
.guarantee .item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 13px; color: var(--fg-2);
}
.guarantee .item svg { width: 18px; height: 18px; color: var(--brand-cian-clinico); }

/* ---------- Testimonials ---------- */
.testimonials {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 960px) { .testimonials { grid-template-columns: 1fr; } }

.testimonial {
  position: relative;
  border: 1px solid var(--border-2);
  border-radius: 20px;
  padding: 32px 28px 26px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.testimonial:hover { transform: translateY(-3px); }
.testimonial .quote-mark {
  position: absolute; top: 12px; right: 22px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 96px; line-height: 0.8;
  color: rgba(56, 229, 232, 0.10);
  user-select: none; pointer-events: none;
}
.testimonial blockquote {
  font-size: 15px; line-height: 1.6; color: var(--fg-2);
  margin: 0; quotes: none; position: relative; z-index: 1;
}
.testimonial figcaption {
  display: flex; align-items: center; gap: 14px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.testimonial .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.testimonial .who { display: grid; gap: 2px; }
.testimonial .name {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--fg-1); letter-spacing: -0.01em;
}
.testimonial .role {
  font-family: var(--font-ui); font-size: 12px; color: var(--fg-3);
}
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 880px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  background: rgba(14,36,64,0.45); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px;
  display: grid; gap: 12px;
  transition: border-color var(--dur-base), transform var(--dur-base);
}
.trust-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.trust-card .ico-halo { margin-bottom: 4px; }
.trust-card .t-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--fg-1); }
.trust-card .t-desc { font-size: 13px; color: var(--fg-3); line-height: 1.5; }

/* ---------- Final CTA ---------- */
.final-cta {
  padding: 56px; border-radius: 24px;
  /* Distinct dark slab — clearly darker than the page bg so it reads as its own card */
  background:
    radial-gradient(circle at 80% 20%, rgba(141,70,255,0.10), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(56,229,232,0.08), transparent 50%),
    linear-gradient(180deg, #03101F 0%, #010812 100%);
  border: 1px solid rgba(56,229,232,0.35);
  box-shadow:
    0 0 0 1px rgba(56,229,232,0.08),
    0 24px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
  position: relative; overflow: hidden;
}
@media (max-width: 760px) { .final-cta { grid-template-columns: 1fr; padding: 40px 28px; } }
.final-cta h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.022em; color: var(--fg-1);
}
.final-cta h2 .cta-hl {
  /* Solid cyan with extra weight — no gradient, no inherited fill. Avoids any
     collision with the general .grad rule used elsewhere on the page. */
  color: var(--brand-cian-clinico) !important;
  -webkit-text-fill-color: var(--brand-cian-clinico) !important;
  background: none !important;
  font-weight: 800;
  text-shadow: 0 0 14px rgba(56, 229, 232, 0.22);
}
.final-cta p { color: var(--fg-2); margin-top: 14px; font-size: 16px; line-height: 1.5; max-width: 540px; }
.final-cta .actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.final-cta .stat-grid { display: grid; gap: 14px; }
.final-cta .stat-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 18px; border-radius: 12px;
  background: rgba(2, 8, 15, 0.4); border: 1px solid var(--border);
}
.final-cta .stat-row .v { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--brand-cian-clinico); letter-spacing: -0.02em; line-height: 1; }
.final-cta .stat-row .l { font-family: var(--font-ui); font-size: 12px; color: var(--fg-2); letter-spacing: 0.04em; }

/* ---------- Footer ---------- */
.footer {
  padding: 56px 0 28px; border-top: 1px solid var(--border); margin-top: 64px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px;
}
@media (max-width: 760px) { .footer { grid-template-columns: 1fr; gap: 28px; } }
.footer h5 { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; font-weight: 700; }
.footer ul { list-style: none; display: grid; gap: 10px; padding: 0; }
.footer a { color: var(--fg-2); font-size: 14px; font-family: var(--font-ui); }
.footer a:hover { color: var(--fg-1); }
.footer .blurb { color: var(--fg-3); font-size: 13px; line-height: 1.55; max-width: 320px; margin-top: 14px; }
.footer .brand img { width: 36px; height: 36px; }
.footer .accent-rule { width: 100px; height: 3px; background: linear-gradient(90deg, #38E5E8, #8D46FF, #FF4FA3); border-radius: 999px; box-shadow: 0 0 14px rgba(141,70,255,0.4); margin-top: 16px; }
.foot-bottom { padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--fg-4); font-size: 12px; font-family: var(--font-ui); border-top: 1px solid var(--border); margin-top: 32px; }

/* ---------- Density tweak ---------- */
body[data-density="compact"] .section { padding: 72px 0; }
body[data-density="compact"] .section-head { margin-bottom: 40px; }
body[data-density="spacious"] .section { padding: 144px 0; }

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}