/* ==========================================================
   YOGERA — MODE PAGES SHARED STYLES
   Used by: voice-programming.html, smart-programming.html,
            no-code-programming.html
   One template, three content sets. Depends on shared.css.
   ========================================================== */

.mode-hero{ padding:170px 24px 20px; }
.mode-hero .wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.mode-eyebrow{ display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; color:var(--blue); text-transform:uppercase; margin-bottom:14px; }
.mode-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 4vw, 3rem); letter-spacing:-0.01em; margin-bottom:10px; }
.mode-tagline{ font-size:17px; color:var(--text-secondary); font-weight:600; margin-bottom:18px; }
.mode-desc{ font-size:15px; line-height:1.75; color:var(--text-muted); max-width:520px; }
.mode-desc b{ color:var(--text-secondary); font-weight:600; }

.mode-visual{
  position:relative; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface);
  padding:32px; min-height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 30px 70px var(--shadow-md);
}
.mode-visual::before{
  content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, var(--blue-soft), transparent 60%); pointer-events:none;
}

/* ---- Voice demo: static waveform, gentle CSS breathing ---- */
.demo-voice{ display:flex; align-items:center; gap:4px; height:80px; position:relative; z-index:1; }
.demo-voice span{ width:5px; border-radius:3px; background:linear-gradient(180deg, var(--blue), var(--purple)); animation:demo-breathe 2.2s ease-in-out infinite; }
@keyframes demo-breathe{ 0%,100%{ transform:scaleY(0.4); } 50%{ transform:scaleY(1); } }

/* ---- Smart Programming demo: mini code editor mock ---- */
.demo-code{ position:relative; z-index:1; width:100%; font-family:var(--font-mono); font-size:12.5px; line-height:1.9; color:var(--text-muted); }
.demo-code .demo-code-bar{ display:flex; gap:6px; margin-bottom:14px; }
.demo-code .demo-code-bar span{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.demo-code .code-keyword{ color:var(--purple); }
.demo-code .code-fn{ color:var(--blue); }
.demo-code .code-string{ color:var(--success); }
.demo-code .ket-tag{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--radius-pill);
  background:var(--purple-soft); color:var(--ket-tag-text); font-size:10.5px; font-weight:700; margin-left:8px; letter-spacing:0.03em;
  animation:ket-pulse 2.4s ease-in-out infinite;
}
@keyframes ket-pulse{ 0%,100%{ box-shadow:0 0 0 0 var(--purple-glow);} 50%{ box-shadow:0 0 0 6px transparent;} }

/* ---- No-Code demo: chip flow ---- */
.demo-flow{ position:relative; z-index:1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.demo-flow .demo-flow-chip{
  padding:14px 18px; border-radius:var(--radius-md); background:var(--surface-raised); border:1px solid var(--line-strong);
  font-size:13.5px; font-weight:600; color:var(--text-primary); animation:df-lift 3s ease-in-out infinite;
}
.demo-flow .demo-flow-chip:nth-child(3){ animation-delay:0.4s; }
.demo-flow .demo-flow-chip:nth-child(5){ animation-delay:0.8s; }
@keyframes df-lift{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.demo-flow .demo-flow-arrow{ color:var(--text-faint); font-size:16px; }

/* ---- Benefits grid ---- */
.mode-benefits{ padding:70px 24px; }
.mode-benefits .section-head{ text-align:left; margin:0 0 40px; max-width:none; }
.benefits-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; perspective:1200px; }
.benefit-card{
  padding:22px 20px; border-radius:var(--radius-md); border:1px solid var(--line); background:var(--surface);
  transition:all var(--dur-comp) var(--ease);
}
.benefit-card:hover{ border-color:var(--blue-glow); background:var(--surface-raised); transform:translateY(-3px) var(--card-tilt); }
.benefit-card .benefit-card-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px;
  background:linear-gradient(135deg, var(--blue-soft), var(--purple-soft)); margin-bottom:14px;
}
.benefit-card h4{ font-family:var(--font-display); font-size:14.5px; font-weight:700; margin-bottom:7px; }
.benefit-card p{ font-size:12.5px; color:var(--text-muted); line-height:1.6; }
@media (max-width:960px){ .benefits-grid{ grid-template-columns:1fr 1fr; } .mode-hero .wrap{ grid-template-columns:1fr; } .cross-nav-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .benefits-grid{ grid-template-columns:1fr; } }

/* ---- CTA ---- */
.mode-cta-wrap{ text-align:center; padding:20px 24px 80px; }

/* ---- Cross-navigation strip ---- */
.cross-nav{ padding:50px 24px 90px; border-top:1px solid var(--line); }
.cross-nav .section-head{ margin-bottom:26px; }
.cross-nav-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; perspective:1200px; }
.cross-card{
  display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--radius-md);
  border:1px solid var(--line); background:var(--surface); transition:all var(--dur-comp) var(--ease);
}
.cross-card:hover{ border-color:var(--blue-glow); background:var(--surface-raised); transform:translateY(-2px) var(--card-tilt); }
.cross-card .cross-card-icon{ font-size:22px; flex-shrink:0; }
.cross-card b{ display:block; font-size:14px; margin-bottom:2px; }
.cross-card span{ font-size:12.5px; color:var(--text-muted); }
@media (max-width:640px){ .cross-nav-grid{ grid-template-columns:1fr; } }

.mode-context-pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--radius-pill);
  background:var(--surface); border:1px solid var(--line); font-size:12px; color:var(--text-muted); margin-bottom:16px;
}