/* ═══════════════════════════════════════════════
   HOMEPAGE — Shared styles (DE + EN)
   ═══════════════════════════════════════════════ */

/* Animations */
@keyframes gradientFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 8px 25px rgba(124,58,237,0.3); } 50% { box-shadow: 0 8px 40px rgba(124,58,237,0.5); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes breathe { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(167,139,250,0.5)); } 50% { filter: drop-shadow(0 0 20px rgba(167,139,250,0.8)); } }

/* Reduced Motion (BITV 2.0 / WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Scroll Animations */
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
.animate-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease; }
.animate-scale.visible { opacity: 1; transform: scale(1); }

/* Hover Effects */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.hover-glow { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px rgba(167,139,250,0.4); border-color: rgba(167,139,250,0.6); }

/* Focus States (BITV 2.0) */
a:focus, button:focus { outline: 3px solid #A78BFA; outline-offset: 3px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #A78BFA; outline-offset: 3px; }

/* Responsive */
@media (max-width: 768px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .flex-wrap-mobile { flex-direction: column; }
  .hide-mobile { display: none !important; }
  .text-center-mobile { text-align: center !important; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr !important; }
}

/* Progress Indicator */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #7C3AED, #00FF88); z-index: 9999; transition: width 0.1s; }

/* ═══════════════════════════════════════════════
   DARK MODE – Override inline styles
   ═══════════════════════════════════════════════ */

/* Dark mode backgrounds & text handled globally by unified-theme.css */

/* Hero vision card (white gradient → dark glass) — page-specific */
[data-theme="dark"] [style*="linear-gradient(180deg, #ffffff"] {
  background: linear-gradient(90deg, #7C3AED, #A78BFA, #0891B2, #10B981, #059669) top/100% 4px no-repeat,
              linear-gradient(180deg, rgba(22,18,50,0.96) 0%, rgba(12,12,30,0.98) 100%) !important;
  border-color: rgba(124,58,237,0.35) !important;
  box-shadow: 0 8px 32px rgba(124,58,237,0.2) !important;
}

/* KPI cards glow */
[data-theme="dark"] .hero-kpi { box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important; }

/* Hover adjustments centralized in senticor-core.css */

/* Hero CTA */
.hero-cta-primary { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hero-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(124,58,237,0.45) !important; }
.hero-kpi { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hero-kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important; }

/* Context Flow compact overview */
.cf-flow{display:flex;align-items:stretch;gap:0;margin:1rem 0 1rem;overflow-x:auto;padding:0.5rem 0;cursor:pointer;width:100%}
.cf-flow:hover .cf-step-inner{border-color:rgba(5,150,105,0.3);box-shadow:0 6px 20px rgba(5,150,105,0.1)}
.cf-step{flex:1;min-width:150px;text-align:center;padding:0 0.3rem;display:flex;flex-direction:column;align-items:center;gap:0.35rem}
.cf-step-title{font-weight:800;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.cf-step-inner{background:var(--bg-light);border:1.5px solid rgba(5,150,105,0.12);border-radius:1rem;padding:0.6rem 0.4rem 0.7rem;width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;transition:all 0.3s}
.cf-step-inner:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(5,150,105,0.15)!important}
.cf-step-svg{display:flex;align-items:center;justify-content:center;width:100%}
.cf-step-svg svg{max-width:100%;height:auto}
.cf-desc{font-size:0.6rem;color:var(--text-light);line-height:1.35;max-width:140px}
.cf-step-num{font-weight:900;font-size:1.5rem;opacity:0.1;line-height:1;margin-top:0.2rem}
.cf-arrow{display:flex;align-items:center;padding:0 0.08rem;flex-shrink:0;align-self:center;margin-top:3rem}
.cf-hint{text-align:center;font-size:0.72rem;color:var(--text-light);opacity:0.6;transition:opacity 0.3s;margin-top:0.5rem}
@media(max-width:768px){.cf-flow{flex-direction:column;align-items:stretch;overflow-x:hidden}.cf-step{min-width:0}.cf-step-title{font-size:0.75rem}.cf-desc{font-size:0.7rem}.cf-arrow{justify-content:center;transform:rotate(90deg);padding:0.25rem 0;margin-top:0}}
.cf-enlarge-btn{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(124,58,237,0.1);border:1.5px solid rgba(124,58,237,0.25);color:#A78BFA;padding:0.6rem 1.25rem;border-radius:0.75rem;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s;margin-top:0.5rem}
.cf-enlarge-btn:hover{background:rgba(124,58,237,0.2);border-color:rgba(124,58,237,0.4);transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,58,237,0.15);color:#C4B5FD}
.cf-dialog{border:none!important;background:transparent!important;padding:0!important;max-width:100vw!important;max-height:100vh!important;width:100vw!important;height:100vh!important;margin:0!important;overflow:visible!important;box-sizing:border-box!important;position:fixed!important;inset:0!important;z-index:10000!important;display:none}
.cf-dialog[open]{display:flex!important;align-items:center!important;justify-content:center!important}
.cf-dialog::backdrop{background:rgba(0,0,0,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cf-dialog-inner{background:linear-gradient(180deg,#1e1b4b 0%,#0f0f23 100%);border:2px solid rgba(124,58,237,0.2);border-radius:1.5rem;padding:2.5rem;box-shadow:0 25px 80px rgba(0,0,0,0.6),0 0 120px rgba(124,58,237,0.08);position:relative;max-height:90vh;overflow:auto;width:92vw;max-width:1400px;margin:auto}
.cf-dialog-inner strong{color:#E8E8F0}
.cf-dialog-close{position:absolute;top:1rem;right:1rem;background:rgba(124,58,237,0.15);border:1.5px solid rgba(124,58,237,0.3);width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#A78BFA;transition:all 0.2s;z-index:1}
.cf-dialog-close:hover{background:rgba(124,58,237,0.3);transform:scale(1.1)}
.cf-dialog img{width:100%;height:auto;border-radius:1rem;border:1px solid rgba(124,58,237,0.15);box-shadow:0 8px 32px rgba(0,0,0,0.3)}

/* Context Flow — simple numbered variant (how-it-works) */
.cf-flow-simple{display:flex;align-items:stretch;gap:0;margin:2rem 0;overflow-x:auto;padding:0.5rem 0}
.cf-step-simple{flex:1;min-width:130px;text-align:center;position:relative;padding:1rem 0.5rem}
.cf-step-simple-inner{background:var(--bg-light);border:1.5px solid rgba(5,150,105,0.12);border-radius:1rem;padding:1.25rem 0.75rem;height:100%;display:flex;flex-direction:column;align-items:center;gap:0.5rem;transition:transform 0.2s,box-shadow 0.2s}
.cf-step-simple-inner:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(5,150,105,0.1)}
.cf-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.85rem;color:white;flex-shrink:0}
.cf-label{font-weight:700;font-size:0.85rem;color:var(--text-dark);line-height:1.3}
.cf-desc-simple{font-size:0.72rem;color:var(--text-light);line-height:1.4}
.cf-arrow-simple{display:flex;align-items:center;color:var(--text-light);font-size:1.2rem;padding:0 0.15rem;flex-shrink:0;font-weight:700}
@media(max-width:768px){.cf-flow-simple{flex-direction:column;align-items:stretch}.cf-arrow-simple{justify-content:center;transform:rotate(90deg);padding:0.25rem 0}}

/* Context-Flow process grid responsive */
@media(max-width:768px){.cf-process-grid{grid-template-columns:1fr!important}.cf-process-grid>div[style*="font-size: 1.2rem"]{transform:rotate(90deg);justify-content:center;padding:0.25rem 0!important}}

/* Use-cases responsive */
@media(max-width:768px){.grid-problem-solution{grid-template-columns:1fr!important;gap:0!important}.grid-problem-solution>div:nth-child(2){transform:rotate(90deg);padding:0!important;margin:-0.25rem auto}}
@media(max-width:900px){.usecase-card [style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:550px){.usecase-card [style*="grid-template-columns: repeat(4"]{grid-template-columns:1fr!important}}