/* =========================
   ANTIGRAVITY DESIGN SYSTEM
   JaroService — Trust & Authority Edition
   UI/UX Pro Max | Palette: Sky Professional
========================= */
:root {
  --ag-cta:        #0369A1;
  --ag-cta-hover:  #0284C7;
  --ag-cta-dark:   #075985;
  --ag-cta-light:  #e0f2fe;
  --ag-cta-med:    #bae6fd;
  --ag-cta-shadow: rgba(3,105,161,0.28);
}
.hero-primary {
  background: linear-gradient(135deg, #0369A1 0%, #0284C7 100%);
  box-shadow: 0 8px 28px rgba(3,105,161,0.40), 0 0 0 1px rgba(2,132,199,0.20);
}
.hero-primary:hover {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
  box-shadow: 0 14px 36px rgba(3,105,161,0.50), 0 0 0 1px rgba(2,132,199,0.30);
}
.hero-badge-icon {
  background: linear-gradient(135deg, #0369A1 0%, #0284C7 100%);
  box-shadow: 0 0 12px rgba(3,105,161,0.55), 0 0 24px rgba(3,105,161,0.20);
}
.cta-header {
  background: linear-gradient(135deg, #0369A1, #0284C7);
  box-shadow: 0 8px 22px rgba(3,105,161,0.22);
}
.cta-header:hover { box-shadow: 0 12px 28px rgba(3,105,161,0.32); }
.section-kicker, .portfolio-kicker, .lifefile-kicker,
.pricing-kicker, .why-kicker, .about-kicker,
.portfolio-group-kicker { color: #0369A1; }
.nav-link::after { background: #0369A1; }
.nav-link:hover, .nav-link.active { color: #0369A1; }
/* TRUST STATS */
.trust-stats {
  background: #ffffff;
  border-top: 1px solid rgba(3,105,161,0.08);
  border-bottom: 1px solid #e8edf5;
  padding: 0 20px;
}
.trust-stats-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.trust-stat-item {
  padding: 26px 16px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative;
  transition: background 0.2s ease;
}
.trust-stat-item:not(:last-child)::after {
  content: "";
  position: absolute; right: 0; top: 20%; height: 60%;
  width: 1px; background: #e2e8f0;
}
.trust-stat-item:hover { background: #f8fafc; }
.trust-stat-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.trust-stat-icon svg { width: 20px; height: 20px; stroke: #0369A1; }
.trust-stat-number {
  font-size: 2.2rem; font-weight: 800; color: #0f172a;
  letter-spacing: -0.04em; line-height: 1; margin-bottom: 5px;
}
.trust-stat-number span { color: #0369A1; }
.trust-stat-label { font-size: 0.82rem; font-weight: 600; color: #64748b; }
/* SERVICE CARDS */
.service-card {
  border-radius: 28px; border-color: #e4edf8;
  box-shadow: 0 8px 32px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
}
.service-card:hover {
  border-color: #bae6fd;
  box-shadow: 0 20px 48px rgba(3,105,161,0.12), 0 4px 12px rgba(15,23,42,0.06);
  transform: translateY(-6px);
}
.service-card-icon {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.service-card-icon svg {
  width: 28px; height: 28px; stroke: #0369A1; stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.service-list li::before { color: #0369A1; }
.service-link { color: #0369A1; background: #e0f2fe; }
.service-link:hover { background: #bae6fd; box-shadow: 0 10px 22px rgba(3,105,161,0.14); }
/* CERT BADGES */
.cert-badges {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-top: 32px; padding: 20px;
  background: rgba(3,105,161,0.04); border: 1px solid rgba(3,105,161,0.10);
  border-radius: 18px;
}
.cert-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: #334155;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.cert-badge:hover {
  border-color: #bae6fd; color: #0369A1;
  box-shadow: 0 4px 14px rgba(3,105,161,0.10); transform: translateY(-1px);
}
.cert-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.cert-badge-dot-green { background: #059669; box-shadow: 0 0 5px #059669; }
.cert-badge-dot-blue  { background: #0369A1; box-shadow: 0 0 5px #0369A1; }
.cert-badge-dot-gold  { background: #D97706; box-shadow: 0 0 5px #D97706; }
/* WHY */
.why-icon { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); }
.why-section { background: #f0f7ff; }
/* PORTFOLIO */
.portfolio-cta-button { color: #0369A1; background: #e0f2fe; }
.portfolio-cta-button:hover { background: #bae6fd; box-shadow: 0 10px 22px rgba(3,105,161,0.14); }
.portfolio-card-featured {
  border-color: #bae6fd;
  background: linear-gradient(180deg, rgba(224,242,254,0.92) 0%, #ffffff 100%);
  box-shadow: 0 18px 42px rgba(3,105,161,0.10);
}
.portfolio-card-featured .portfolio-icon { background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%); }
/* PRICING */
.pricing-card-highlight, .pricing-card-featured { border-color: #0369A1; }
.pricing-card li::before { color: #0369A1; }
.pricing-badge { background: #0369A1; }
/* ABOUT */
.about-cta { background: linear-gradient(135deg, #075985 0%, #0369A1 50%, #0284C7 100%); }
.about-cta-btn { color: #0369A1; }
.about-tl-dot-blue { background: #0284C7; color: #0284C7; }
.about-tl-year { color: #0369A1; }
/* LEGAL */
.legal-container h2 { color: #0369A1; }
.legal-container a { color: #0369A1; }
/* FOOTER */
.site-footer {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  padding: 32px 28px 16px;
}
.footer-inner-simple {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 48px; flex-wrap: wrap;
}
.footer-logo-text {
  font-size: 1.22rem; font-weight: 800;
  color: #0f172a; letter-spacing: -0.02em; margin-bottom: 8px;
}
.footer-tagline { margin: 8px 0 6px; font-size: 0.88rem; line-height: 1.6; color: #475569; }
.footer-region { margin: 0; font-size: 0.82rem; color: #64748b; }
.footer-legal-links { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; align-self: flex-end; }
.footer-legal-links a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px;
  border-radius: 999px; background: #ffffff; border: 1px solid #e2e8f0;
  text-decoration: none; font-size: 0.82rem; font-weight: 600; color: #475569;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.footer-legal-links a:hover { border-color: #bae6fd; color: #0369A1; box-shadow: 0 4px 12px rgba(3,105,161,0.08); }
.footer-bottom-simple {
  max-width: 1180px; margin: 20px auto 0; padding-top: 16px;
  border-top: 1px solid #e2e8f0; font-size: 0.8rem; color: #94a3b8;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
@media (max-width: 768px) {
  .trust-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-stat-item:nth-child(2n)::after { display: none; }
  .footer-inner-simple { flex-direction: column; gap: 24px; }
  .footer-legal-links { align-self: auto; }
}
@media (max-width: 480px) {
  .trust-stat-number { font-size: 1.8rem; }
  .trust-stat-label { font-size: 0.76rem; }
}
/* HERO WOW REDESIGN */
.hero {
  background:
    radial-gradient(ellipse at 8% 75%, rgba(3,105,161,0.22) 0%, transparent 48%),
    radial-gradient(ellipse at 92% 20%, rgba(99,102,241,0.14) 0%, transparent 44%),
    radial-gradient(ellipse at 52% 108%, rgba(14,165,233,0.12) 0%, transparent 42%),
    linear-gradient(165deg, #020817 0%, #071428 38%, #0a1e3d 72%, #0c2050 100%);
  padding: 20px 20px 88px;
  min-height: 92vh;
}
.hero-aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 62%, rgba(3,105,161,0.26) 0%, transparent 46%),
    radial-gradient(ellipse at 82% 28%, rgba(99,102,241,0.16) 0%, transparent 42%),
    radial-gradient(ellipse at 48% 92%, rgba(56,189,248,0.10) 0%, transparent 40%);
  animation: auroraShift 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes auroraShift {
  0%   { opacity: 0.65; transform: scale(1) translate(0, 0); }
  30%  { opacity: 1;    transform: scale(1.05) translate(18px, -10px); }
  65%  { opacity: 0.80; transform: scale(0.97) translate(-12px, 6px); }
  100% { opacity: 1;    transform: scale(1.09) translate(10px, -6px); }
}
.hero-beam { position: absolute; top: 0; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-beam-l { left: 8%; width: 220px; }
.hero-beam-r { right: 12%; width: 180px; }
.hero-beam-l::before, .hero-beam-r::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(56,189,248,0.055) 0%, transparent 60%);
  transform: skewX(-18deg);
}
.hero-beam-r::before { background: linear-gradient(180deg, rgba(99,102,241,0.045) 0%, transparent 55%); }
.hero-badge-wrap {
  display: inline-flex; align-items: stretch; margin-bottom: 44px;
  border-radius: 999px; filter: drop-shadow(0 8px 24px rgba(3,105,161,0.30));
  animation: badgeEntrance 0.8s cubic-bezier(.22,.68,0,1.2) both; cursor: default;
}
.hero-badge-online {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: rgba(5,150,105,0.18); border: 1px solid rgba(52,211,153,0.38);
  border-right: none; border-radius: 999px 0 0 999px;
  font-size: 0.78rem; font-weight: 700; color: #6ee7b7; letter-spacing: 0.01em;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.hero-badge-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 10px #34d399, 0 0 22px rgba(52,211,153,0.55); flex-shrink: 0;
  animation: hsLivePulse 1.6s ease-in-out infinite;
}
.hero-badge-label {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px 10px 16px;
  background: linear-gradient(135deg, rgba(3,105,161,0.24) 0%, rgba(2,132,199,0.16) 100%);
  border: 1px solid rgba(56,189,248,0.30); border-radius: 0 999px 999px 0;
  font-size: 0.86rem; font-weight: 600; color: rgba(186,230,255,0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); position: relative; overflow: hidden;
}
.hero-badge-label::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(108deg, transparent 35%, rgba(147,197,253,0.10) 50%, transparent 65%);
  background-size: 200% 100%; animation: badgeShimmer 4s ease-in-out infinite 1.5s; pointer-events: none;
}
.hero-badge-bolt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%);
  box-shadow: 0 0 12px rgba(14,165,233,0.55), 0 0 28px rgba(14,165,233,0.22);
  font-size: 0.82rem; flex-shrink: 0;
}
.hero h1 {
  font-size: clamp(44px, 6vw, 82px) !important;
  line-height: 1.01 !important; letter-spacing: -0.04em !important;
  font-weight: 900 !important; white-space: normal !important;
  margin: 0 0 22px !important; max-width: 760px;
}
.hero h1 span {
  background: linear-gradient(130deg, #38bdf8 0%, #60a5fa 30%, #a78bfa 65%, #f0abfc 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  display: inline-block; background-size: 200% auto;
  animation: gradientFlow 7s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 18px rgba(56,189,248,0.22));
}
@keyframes gradientFlow { 0% { background-position: 0% center; } 100% { background-position: 100% center; } }
.hero-subline { font-size: 1.12rem !important; line-height: 1.74 !important; color: rgba(188,213,255,0.80) !important; max-width: 540px !important; margin: 0 !important; }
.hero-primary {
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%) !important;
  box-shadow: 0 10px 40px rgba(3,105,161,0.48), 0 0 0 1px rgba(14,165,233,0.28) !important;
  min-height: 60px !important; padding: 0 36px !important; font-size: 1.05rem !important;
  border-radius: 18px !important; position: relative; overflow: hidden; letter-spacing: 0.01em;
}
.hero-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(108deg, transparent 38%, rgba(255,255,255,0.14) 50%, transparent 62%);
  background-size: 200% 100%; animation: ctaShimmer 3.5s ease-in-out infinite 1.2s; pointer-events: none;
}
@keyframes ctaShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.hero-primary:hover { transform: translateY(-3px) scale(1.025) !important; box-shadow: 0 18px 52px rgba(3,105,161,0.60), 0 0 0 1px rgba(14,165,233,0.38) !important; }
.hero-secondary { min-height: 60px !important; padding: 0 30px !important; font-size: 1.05rem !important; border-radius: 18px !important; background: rgba(255,255,255,0.055) !important; border: 1px solid rgba(99,160,255,0.20) !important; color: rgba(200,225,255,0.88) !important; }
.hero-secondary:hover { background: rgba(255,255,255,0.10) !important; border-color: rgba(56,189,248,0.32) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 32px rgba(3,105,161,0.18) !important; }
.hero-proof-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; animation: fadeSlideUp 0.7s ease both 0.5s; }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-rating { display: flex; align-items: center; gap: 9px; }
.hero-rating-stars { color: #FBBF24; font-size: 0.88rem; letter-spacing: 2px; line-height: 1; filter: drop-shadow(0 0 5px rgba(251,191,36,0.40)); }
.hero-rating-text { font-size: 0.84rem; font-weight: 600; color: rgba(186,213,255,0.78); }
.hero-rating-text strong { color: #e0f2fe; font-weight: 700; }
.hero-proof-sep { width: 1px; height: 18px; background: rgba(99,160,255,0.22); }
.hero-response-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; background: rgba(5,150,105,0.10); border: 1px solid rgba(52,211,153,0.22); border-radius: 999px; font-size: 0.81rem; font-weight: 600; color: rgba(110,231,183,0.90); }
.hero-response-chip svg { width: 14px; height: 14px; stroke: #34d399; flex-shrink: 0; }
.hero-trust { flex-direction: row !important; gap: 10px !important; flex-wrap: wrap !important; margin-top: 28px !important; animation: fadeSlideUp 0.7s ease both 0.7s; }
.trust-item { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(99,160,255,0.14) !important; border-radius: 999px !important; padding: 8px 16px !important; gap: 8px !important; font-size: 0.83rem !important; font-weight: 600 !important; color: rgba(186,213,255,0.82) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; transition: background 0.22s, border-color 0.22s, transform 0.22s !important; max-width: none !important; width: auto !important; white-space: nowrap; }
.trust-item:hover { background: rgba(3,105,161,0.12) !important; border-color: rgba(56,189,248,0.28) !important; transform: translateY(-2px) !important; }
.trust-item-icon { width: 20px !important; height: 20px !important; border-radius: 6px !important; background: rgba(3,105,161,0.28) !important; border: 1px solid rgba(56,189,248,0.28) !important; font-size: 0.65rem !important; color: #38bdf8 !important; font-weight: 700 !important; }
.hs-top-row { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 4px; animation: badgeEntrance 0.7s cubic-bezier(.22,.68,0,1.2) 0.2s both; }
.hs-rating-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; background: rgba(25,15,5,0.88); border: 1px solid rgba(251,191,36,0.32); border-radius: 999px; font-size: 0.76rem; font-weight: 700; color: rgba(253,230,138,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 0 18px rgba(251,191,36,0.12), 0 4px 18px rgba(0,0,0,0.38); }
.hs-rating-star { color: #FBBF24; filter: drop-shadow(0 0 5px rgba(251,191,36,0.55)); }
.hero-left { animation: fadeSlideUp 0.65s cubic-bezier(0.22,1,0.36,1) both; }
.hero h1 { animation: fadeSlideUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.15s both !important; }
.hero-subline { animation: fadeSlideUp 0.65s ease 0.25s both !important; }
.hero-actions { animation: fadeSlideUp 0.65s ease 0.35s both; }
.hero-right { animation: fadeSlideUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.30s both; }
@media (max-width: 768px) {
  .hero { min-height: auto; padding: 20px 16px 64px; }
  .hero h1 { font-size: clamp(32px, 9vw, 48px) !important; text-align: center !important; letter-spacing: -0.03em !important; }
  .hero-badge-wrap { flex-direction: column; align-items: flex-start; border-radius: 16px; }
  .hero-badge-online { border-radius: 12px 12px 0 0; border-right: 1px solid rgba(52,211,153,0.38); border-bottom: none; }
  .hero-badge-label { border-radius: 0 0 12px 12px; }
  .hero-proof-row { justify-content: center; }
  .hero-trust { justify-content: center !important; }
}

/* ═══════════════════════════════════════════════
   HERO PHASE 3 — SHOWCASE REDESIGN
   Kicker · Single CTA · Animated Showcase Right
═══════════════════════════════════════════════ */

/* ── Hero Kicker (replaces dual-pill badge) ── */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 36px;
  padding: 9px 18px 9px 14px;
  background: rgba(3,105,161,0.10);
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: fadeSlideUp 0.7s cubic-bezier(.22,.68,0,1.2) both;
}
.hero-kicker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399, 0 0 18px rgba(52,211,153,0.50);
  flex-shrink: 0;
  animation: hsLivePulse 1.8s ease-in-out infinite;
}
@keyframes hsLivePulse {
  0%, 100% { box-shadow: 0 0 6px #34d399, 0 0 14px rgba(52,211,153,0.40); }
  50%       { box-shadow: 0 0 12px #34d399, 0 0 28px rgba(52,211,153,0.70); }
}
.hero-kicker-text {
  font-size: 0.86rem; font-weight: 700;
  color: rgba(186,230,255,0.92);
  letter-spacing: 0.01em;
}
.hero-kicker-sep {
  color: rgba(99,160,255,0.40);
  font-size: 0.9rem;
}
.hero-kicker-tag {
  font-size: 0.82rem; font-weight: 600;
  color: rgba(148,200,255,0.72);
}

/* ── Hero CTA: single button layout ── */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.hero-primary svg {
  width: 18px; height: 18px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 4px;
}
.hero-primary:hover svg { transform: translateX(4px); }

/* ── Hero availability note ── */
.hero-avail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.83rem;
  font-weight: 500;
  color: rgba(148,200,255,0.65);
  animation: fadeSlideUp 0.65s ease 0.45s both;
}
.hero-avail-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 7px rgba(52,211,153,0.70);
  flex-shrink: 0;
  animation: hsLivePulse 2.2s ease-in-out infinite 0.4s;
}

/* ══════════════════════════════════════════
   HERO SHOWCASE — Right Column
══════════════════════════════════════════ */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-showcase {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: fadeSlideUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.35s both;
}

/* ── Display Area ── */
.sc-display {
  background: rgba(8,20,50,0.72);
  border: 1px solid rgba(56,189,248,0.18);
  border-radius: 24px 24px 0 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.50),
    0 0 0 1px rgba(56,189,248,0.06) inset,
    0 1px 0 rgba(255,255,255,0.06) inset;
  min-height: 270px;
  position: relative;
  overflow: hidden;
}

/* ── Panels ── */
.sc-panel {
  position: absolute;
  inset: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.sc-panel.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  position: relative;
}

/* ── Panel 0: Personal / Chat ── */
.sc-p-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc-avatar {
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(3,105,161,0.45);
}
.sc-avatar svg { width: 24px; height: 24px; stroke: #fff; }
.sc-p-info { flex: 1; }
.sc-p-name {
  font-size: 0.92rem; font-weight: 700;
  color: #e8f4ff; line-height: 1.2;
}
.sc-p-role {
  font-size: 0.76rem; font-weight: 500;
  color: rgba(148,200,255,0.65); margin-top: 2px;
}
.sc-online-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: rgba(5,150,105,0.15);
  border: 1px solid rgba(52,211,153,0.28);
  border-radius: 999px;
  font-size: 0.74rem; font-weight: 700;
  color: #6ee7b7;
}
.sc-online-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,0.70);
  animation: hsLivePulse 1.8s ease-in-out infinite;
}
.sc-chat {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; overflow: hidden;
}
.sc-msg {
  display: inline-block;
  max-width: 82%;
  padding: 9px 14px;
  border-radius: 16px;
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.45;
}
.sc-msg-in {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(200,225,255,0.85);
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  animation: msgIn 0.4s ease both;
}
.sc-msg-out {
  background: linear-gradient(135deg, rgba(3,105,161,0.36) 0%, rgba(14,165,233,0.28) 100%);
  border: 1px solid rgba(56,189,248,0.22);
  color: rgba(186,230,255,0.95);
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  animation: msgIn 0.4s ease both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.sc-msg-in:nth-child(1) { animation-delay: 0.05s; }
.sc-msg-out:nth-child(2) { animation-delay: 0.18s; }
.sc-msg-in:nth-child(3) { animation-delay: 0.31s; }
.sc-msg-out:nth-child(4) { animation-delay: 0.44s; }

.sc-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: auto;
}
.sc-tags span {
  padding: 5px 11px;
  background: rgba(3,105,161,0.12);
  border: 1px solid rgba(56,189,248,0.18);
  border-radius: 999px;
  font-size: 0.74rem; font-weight: 600;
  color: rgba(148,200,255,0.80);
}

/* ── Panel 1: Dual — Vor Ort & Remote ── */
.sc-dual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 0;
  flex: 1;
}
.sc-dual-side {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center;
}
.sc-dual-ico {
  width: 56px; height: 56px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.sc-ico-blue {
  background: linear-gradient(135deg, rgba(3,105,161,0.30) 0%, rgba(14,165,233,0.20) 100%);
  border: 1px solid rgba(56,189,248,0.30);
  box-shadow: 0 8px 24px rgba(3,105,161,0.25);
}
.sc-ico-purple {
  background: linear-gradient(135deg, rgba(99,102,241,0.25) 0%, rgba(139,92,246,0.18) 100%);
  border: 1px solid rgba(139,92,246,0.28);
  box-shadow: 0 8px 24px rgba(99,102,241,0.20);
}
.sc-ico-blue svg  { width: 28px; height: 28px; stroke: #38bdf8; }
.sc-ico-purple svg { width: 28px; height: 28px; stroke: #a78bfa; }
.sc-dual-title {
  font-size: 1rem; font-weight: 800; color: #e8f4ff;
  letter-spacing: -0.01em;
}
.sc-dual-sub {
  font-size: 0.76rem; font-weight: 500;
  color: rgba(148,200,255,0.62);
  line-height: 1.4;
}
.sc-loc-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.sc-loc-tags span {
  padding: 4px 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  color: rgba(186,213,255,0.70);
}
.sc-dual-or {
  font-size: 0.78rem; font-weight: 600;
  color: rgba(148,200,255,0.40);
  flex-shrink: 0; text-align: center;
  padding: 0 4px;
  position: relative;
}
.sc-dual-or::before, .sc-dual-or::after {
  content: '';
  display: block;
  width: 1px; height: 28px;
  background: rgba(99,160,255,0.18);
  margin: 6px auto;
}

/* ── Panel 2: Steps ── */
.sc-p-title {
  font-size: 0.88rem; font-weight: 700;
  color: rgba(186,230,255,0.80);
  margin-bottom: 4px;
}
.sc-steps { display: flex; flex-direction: column; gap: 10px; }
.sc-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s, border-color 0.2s;
}
.sc-step.sc-done {
  background: rgba(3,105,161,0.10);
  border-color: rgba(56,189,248,0.16);
}
.sc-step.sc-active {
  background: rgba(3,105,161,0.18);
  border-color: rgba(56,189,248,0.32);
  box-shadow: 0 4px 18px rgba(3,105,161,0.18);
}
.sc-step-n {
  width: 28px; height: 28px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
  flex-shrink: 0;
}
.sc-done .sc-step-n {
  background: rgba(52,211,153,0.18);
  border: 1px solid rgba(52,211,153,0.32);
  color: #6ee7b7;
}
.sc-active .sc-step-n {
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(3,105,161,0.45);
}
.sc-step-label {
  font-size: 0.84rem; font-weight: 700;
  color: rgba(200,225,255,0.90); line-height: 1.3;
}
.sc-step-desc {
  font-size: 0.74rem; font-weight: 500;
  color: rgba(148,200,255,0.55); margin-top: 2px;
  line-height: 1.4;
}

/* ── Panel 3: Availability / Slots ── */
.sc-avail-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 700;
  color: rgba(200,225,255,0.90);
}
.sc-avail-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,0.65);
  flex-shrink: 0;
  animation: hsLivePulse 2s ease-in-out infinite;
}
.sc-slots { display: flex; flex-direction: column; gap: 8px; }
.sc-slot {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  font-size: 0.84rem; font-weight: 600;
}
.sc-slot svg { width: 16px; height: 16px; flex-shrink: 0; }
.sc-free {
  background: rgba(5,150,105,0.10);
  border: 1px solid rgba(52,211,153,0.20);
  color: rgba(110,231,183,0.85);
}
.sc-free svg { stroke: #34d399; }
.sc-busy {
  background: rgba(100,116,139,0.08);
  border: 1px solid rgba(100,116,139,0.16);
  color: rgba(148,163,184,0.60);
}
.sc-busy svg { stroke: #64748b; }
.sc-slot-badge {
  margin-left: auto;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.70rem; font-weight: 700;
  background: rgba(52,211,153,0.18);
  border: 1px solid rgba(52,211,153,0.28);
  color: #6ee7b7;
}
.sc-slot-taken {
  background: rgba(100,116,139,0.14);
  border-color: rgba(100,116,139,0.20);
  color: rgba(148,163,184,0.70);
}
.sc-response-row {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(3,105,161,0.10);
  border: 1px solid rgba(56,189,248,0.16);
  font-size: 0.82rem; font-weight: 600;
  color: rgba(148,200,255,0.80);
}
.sc-response-row svg {
  width: 16px; height: 16px; stroke: #38bdf8; flex-shrink: 0;
}
.sc-response-row strong { color: #e0f2fe; font-weight: 700; }

/* ── Tabs ── */
.sc-tabs {
  display: flex;
  gap: 0;
  background: rgba(5,13,35,0.80);
  border: 1px solid rgba(56,189,248,0.14);
  border-top: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.sc-tab {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px; padding: 14px 8px;
  background: none; border: none;
  cursor: pointer;
  font-size: 0.72rem; font-weight: 600;
  color: rgba(148,200,255,0.50);
  border-right: 1px solid rgba(56,189,248,0.08);
  transition: background 0.2s, color 0.2s;
  position: relative;
}
.sc-tab:last-child { border-right: none; }
.sc-tab svg { width: 18px; height: 18px; transition: stroke 0.2s; }
.sc-tab span { font-size: 0.70rem; }
.sc-tab:hover { background: rgba(3,105,161,0.10); color: rgba(186,230,255,0.80); }
.sc-tab.active {
  background: rgba(3,105,161,0.16);
  color: #38bdf8;
}
.sc-tab.active::after {
  content: '';
  position: absolute; bottom: 0; left: 16%; right: 16%; height: 2px;
  background: linear-gradient(90deg, transparent, #38bdf8, transparent);
  border-radius: 2px 2px 0 0;
}

/* ── Progress bar ── */
.sc-progress-wrap {
  height: 3px;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.10);
  border-top: none;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}
.sc-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #0369A1 0%, #38bdf8 60%, #a78bfa 100%);
  box-shadow: 0 0 8px rgba(56,189,248,0.55);
  transition: width 0.1s linear;
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .hero-showcase { max-width: 100%; }
  .sc-panel { padding: 20px; }
  .sc-display { min-height: 240px; }
}
@media (max-width: 640px) {
  .hero-kicker { flex-wrap: wrap; gap: 6px; font-size: 0.80rem; }
  .sc-tabs { flex-wrap: wrap; }
  .sc-tab { flex: 1 1 48%; }
  .sc-tab:nth-child(2) { border-right: none; }
  .sc-dual { flex-direction: column; gap: 10px; }
  .sc-dual-or::before, .sc-dual-or::after { display: none; }
  .sc-dual-or { padding: 0; }
}

/* ═══════════════════════════════════════════════════
   HERO PHASE 4 — APPLE-STYLE DIASHOW
   Großzügig · Lesbar · Premium · Clean
═══════════════════════════════════════════════════ */

/* ── Override old showcase styles ── */
.hero-showcase, .sc-display, .sc-panel,
.sc-tabs, .sc-tab, .sc-progress-wrap, .sc-progress-bar { all: unset; }

/* ── Social Proof Row (left side, under CTA) ── */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  animation: fadeSlideUp 0.65s ease 0.50s both;
}
.hero-stars-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-star-icons {
  color: #FBBF24;
  font-size: 1.1rem;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 6px rgba(251,191,36,0.55));
  line-height: 1;
}
.hero-rating-val {
  font-size: 1rem;
  font-weight: 800;
  color: #e0f2fe;
  letter-spacing: -0.02em;
}
.hero-rating-count {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(148,200,255,0.60);
}
.hsp-sep {
  width: 1px;
  height: 18px;
  background: rgba(99,160,255,0.22);
  flex-shrink: 0;
}
.hero-avail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(148,200,255,0.65);
}
.hero-avail-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,0.70);
  flex-shrink: 0;
  animation: hsLivePulse 2.2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   HERO DIASHOW — Right Column
   Apple-stil: 1 Botschaft · Groß · Viel Luft
══════════════════════════════════════════════════ */
.hero-right {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-diashow {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  animation: fadeSlideUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.30s both;
}

/* ── Slide Container ── */
.hd-slides {
  position: relative;
  background: rgba(6, 16, 40, 0.76);
  border: 1px solid rgba(56,189,248,0.16);
  border-radius: 32px 32px 0 0;
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.55),
    0 0 0 1px rgba(56,189,248,0.05) inset,
    0 1px 0 rgba(255,255,255,0.07) inset;
  min-height: 360px;
  overflow: hidden;
}

/* ── Slides ── */
.hd-slide {
  position: absolute;
  inset: 0;
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: scale(0.97) translateY(10px);
  transition:
    opacity 0.70s cubic-bezier(0.22,1,0.36,1),
    transform 0.70s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.hd-slide.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  position: relative;
}

/* Shared slide inner layout */
.hd-slide-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.hd-slide-inner.hd-center {
  align-items: center;
  text-align: center;
}

/* Kicker label — small cap above */
.hd-kicker-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(56,189,248,0.65);
  margin-bottom: -8px;
}

/* ── Slide 0: Person ── */
.hd-icon {
  width: 88px; height: 88px; border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hd-icon-blue {
  background: linear-gradient(145deg, rgba(3,105,161,0.30) 0%, rgba(14,165,233,0.18) 100%);
  border: 1px solid rgba(56,189,248,0.28);
  box-shadow:
    0 0 0 8px rgba(3,105,161,0.08),
    0 16px 40px rgba(3,105,161,0.30);
}
.hd-icon svg { width: 46px; height: 46px; stroke: #38bdf8; }
.hd-slide-name {
  font-size: 1.7rem;
  font-weight: 800;
  color: #e8f4ff;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.hd-slide-sub {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(148,200,255,0.68);
  line-height: 1.65;
  max-width: 340px;
}
.hd-online-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: rgba(5,150,105,0.14);
  border: 1px solid rgba(52,211,153,0.28);
  border-radius: 999px;
  font-size: 0.88rem; font-weight: 700; color: #6ee7b7;
  margin-top: 4px;
}
.hd-online-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px rgba(52,211,153,0.80);
  flex-shrink: 0;
  animation: hsLivePulse 1.8s ease-in-out infinite;
}

/* ── Slide 1: Dual Vor Ort / Remote ── */
.hd-dual-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.hd-dual-card {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px; text-align: center;
  padding: 28px 16px;
  border-radius: 22px;
}
.hd-dual-blue {
  background: rgba(3,105,161,0.12);
  border: 1px solid rgba(56,189,248,0.20);
}
.hd-dual-purple {
  background: rgba(99,102,241,0.10);
  border: 1px solid rgba(139,92,246,0.20);
}
.hd-dual-icon {
  width: 60px; height: 60px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
}
.hd-dual-blue .hd-dual-icon {
  background: rgba(3,105,161,0.22);
  border: 1px solid rgba(56,189,248,0.25);
  box-shadow: 0 8px 24px rgba(3,105,161,0.22);
}
.hd-dual-purple .hd-dual-icon {
  background: rgba(99,102,241,0.18);
  border: 1px solid rgba(139,92,246,0.22);
  box-shadow: 0 8px 24px rgba(99,102,241,0.18);
}
.hd-dual-blue .hd-dual-icon svg  { width: 30px; height: 30px; stroke: #38bdf8; }
.hd-dual-purple .hd-dual-icon svg { width: 30px; height: 30px; stroke: #a78bfa; }
.hd-dual-title {
  font-size: 1.3rem; font-weight: 800; color: #e8f4ff;
  letter-spacing: -0.02em;
}
.hd-dual-region {
  font-size: 0.84rem; font-weight: 500;
  color: rgba(148,200,255,0.62); line-height: 1.55;
}
.hd-dual-or {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  font-size: 0.78rem; font-weight: 600;
  color: rgba(148,200,255,0.35); flex-shrink: 0;
}
.hd-dual-or::before, .hd-dual-or::after {
  content: '';
  width: 1px; height: 40px;
  background: rgba(99,160,255,0.15);
}

/* ── Slide 2: Speed stat ── */
.hd-stat-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}
.hd-stat-icon {
  width: 72px; height: 72px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,105,161,0.14);
  border: 1px solid rgba(56,189,248,0.22);
  box-shadow: 0 0 0 8px rgba(3,105,161,0.06), 0 12px 32px rgba(3,105,161,0.22);
}
.hd-stat-icon svg { width: 38px; height: 38px; stroke: #38bdf8; }
.hd-stat-number {
  font-size: 3.6rem;
  font-weight: 900;
  color: #e8f4ff;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(130deg, #e8f4ff 0%, #38bdf8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hd-sub-lg {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  max-width: 320px;
  margin: 0 auto;
}

/* ── Slide 3: Stars / Reviews ── */
.hd-stars {
  font-size: 2.8rem;
  color: #FBBF24;
  letter-spacing: 6px;
  filter: drop-shadow(0 0 14px rgba(251,191,36,0.55));
  line-height: 1;
}
.hd-rating-big {
  font-size: 4.4rem;
  font-weight: 900;
  color: #e8f4ff;
  letter-spacing: -0.05em;
  line-height: 1;
}
.hd-rating-big span {
  font-size: 1.8rem;
  font-weight: 500;
  color: rgba(148,200,255,0.45);
  letter-spacing: -0.02em;
}

/* ── Navigation dots ── */
.hd-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 0 14px;
  background: rgba(4,11,28,0.80);
  border: 1px solid rgba(56,189,248,0.12);
  border-top: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hd-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(99,160,255,0.22);
  border: none; padding: 0; cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22,1,0.36,1), background 0.3s;
}
.hd-dot.active {
  width: 28px;
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56,189,248,0.55);
}
.hd-dot:hover:not(.active) { background: rgba(99,160,255,0.45); }

/* ── Progress strip ── */
.hd-progress-wrap {
  height: 3px;
  background: rgba(56,189,248,0.07);
  border: 1px solid rgba(56,189,248,0.08);
  border-top: none;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}
.hd-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #0369A1 0%, #38bdf8 60%, #a78bfa 100%);
  box-shadow: 0 0 8px rgba(56,189,248,0.50);
  transition: width 0.12s linear;
}

/* ── Slide entrance for messages (stagger) ── */
.hd-slide.active .hd-kicker-label { animation: fadeSlideUp 0.5s ease both 0.05s; }
.hd-slide.active .hd-icon         { animation: fadeSlideUp 0.6s cubic-bezier(0.22,1,0.36,1) both 0.12s; }
.hd-slide.active .hd-slide-name   { animation: fadeSlideUp 0.55s ease both 0.20s; }
.hd-slide.active .hd-slide-sub    { animation: fadeSlideUp 0.55s ease both 0.28s; }
.hd-slide.active .hd-online-pill  { animation: fadeSlideUp 0.55s ease both 0.36s; }
.hd-slide.active .hd-dual-row     { animation: fadeSlideUp 0.60s ease both 0.15s; }
.hd-slide.active .hd-stat-wrap    { animation: fadeSlideUp 0.60s cubic-bezier(0.22,1,0.36,1) both 0.12s; }
.hd-slide.active .hd-stat-number  { animation: fadeSlideUp 0.55s ease both 0.18s; }
.hd-slide.active .hd-stars        { animation: fadeSlideUp 0.60s cubic-bezier(0.22,1,0.36,1) both 0.10s; }
.hd-slide.active .hd-rating-big   { animation: fadeSlideUp 0.60s cubic-bezier(0.22,1,0.36,1) both 0.18s; }

/* ── Mobile ── */
@media (max-width: 900px) {
  .hero-diashow { max-width: 100%; }
}
@media (max-width: 640px) {
  .hd-slide { padding: 32px 24px 28px; }
  .hd-slides { min-height: 300px; }
  .hd-icon { width: 68px; height: 68px; border-radius: 22px; }
  .hd-icon svg { width: 36px; height: 36px; }
  .hd-slide-name { font-size: 1.35rem; }
  .hd-stat-number { font-size: 2.8rem; }
  .hd-rating-big { font-size: 3.2rem; }
  .hd-stars { font-size: 2.1rem; }
  .hd-dual-row { gap: 8px; }
  .hd-dual-card { padding: 20px 10px; }
  .hd-dual-title { font-size: 1.05rem; }
  .hero-social-proof { gap: 10px; }
}
@media (max-width: 400px) {
  .hd-dual-row { flex-direction: column; }
  .hd-dual-or { flex-direction: row; }
  .hd-dual-or::before, .hd-dual-or::after { width: 40px; height: 1px; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO WOW — Phase 5
   Floating Card · Typewriter · Trust Badges · Rating Widget
   Apple-Niveau: viel Luft · grosse Schrift · hoher Kontrast
═══════════════════════════════════════════════════════════════ */

/* Reset old diashow/showcase styles */
.hero-diashow, .hd-slides, .hd-slide, .hd-nav, .hd-dot,
.hd-progress-wrap, .hd-progress-bar,
.hero-showcase, .sc-display, .sc-panel,
.sc-tabs, .sc-tab, .sc-progress-wrap { display: none !important; }

/* Hero Right: slide in from right on load */
.hero-right {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: hwSlideIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both !important;
}
@keyframes hwSlideIn {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: none; }
}

/* Wrapper */
.hw-wrap {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ═══════════════════════════
   FLOATING MOCKUP CARD
═══════════════════════════ */
.hw-card {
  background: rgba(6, 14, 38, 0.82);
  border: 1px solid rgba(56, 189, 248, 0.20);
  border-radius: 24px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow:
    0 48px 120px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(56, 189, 248, 0.07) inset,
    0 1px 0 rgba(255, 255, 255, 0.09) inset;
  overflow: hidden;
  animation: hwFloat 5s ease-in-out infinite;
}
@keyframes hwFloat {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-14px); }
}

/* Mac-style window chrome */
.hw-card-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hw-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.hw-dot-r { background: #FF5F57; box-shadow: 0 0 6px rgba(255,95,87,0.55); }
.hw-dot-y { background: #FFBD2E; box-shadow: 0 0 6px rgba(255,189,46,0.55); }
.hw-dot-g { background: #28C840; box-shadow: 0 0 6px rgba(40,200,64,0.55); }
.hw-chrome-title {
  font-size: 0.80rem;
  font-weight: 600;
  color: rgba(148, 200, 255, 0.45);
  letter-spacing: 0.06em;
  margin-left: 8px;
}

/* Card body */
.hw-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 40px;
  text-align: center;
}

/* Pulsing success ring */
.hw-success-ring {
  width: 100px; height: 100px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 105, 161, 0.10);
  border: 2px solid rgba(56, 189, 248, 0.22);
  animation: hwPulseRing 3.5s ease-in-out infinite;
}
@keyframes hwPulseRing {
  0%,100% { box-shadow: 0 0 0 10px rgba(3,105,161,0.06), 0 0 0 22px rgba(3,105,161,0.03), 0 18px 44px rgba(3,105,161,0.28); }
  50%     { box-shadow: 0 0 0 18px rgba(3,105,161,0.09), 0 0 0 34px rgba(3,105,161,0.04), 0 24px 54px rgba(3,105,161,0.40); }
}
.hw-success-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.hw-success-icon svg {
  width: 44px; height: 44px;
  stroke: #38bdf8;
  filter: drop-shadow(0 0 14px rgba(56,189,248,0.70));
}

/* Typewriter */
.hw-typewriter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
.hw-tw-text {
  font-size: 1.60rem;
  font-weight: 800;
  color: #e8f4ff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hw-cursor {
  font-size: 1.60rem;
  font-weight: 200;
  color: #38bdf8;
  margin-left: 2px;
  animation: hwBlink 1.1s step-end infinite;
}
@keyframes hwBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}
.hw-card-sub {
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(148, 200, 255, 0.50);
}

/* ═══════════════════════════
   TRUST BADGES
═══════════════════════════ */
.hw-trust-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hw-badge {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: rgba(8, 18, 46, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: default;
  transition: background 0.28s, border-color 0.28s, box-shadow 0.28s, transform 0.25s;
}
.hw-badge:hover {
  background: rgba(3, 105, 161, 0.15);
  border-color: rgba(56, 189, 248, 0.38);
  box-shadow: 0 0 32px rgba(56, 189, 248, 0.14), 0 8px 30px rgba(0,0,0,0.28);
  transform: translateX(5px);
}
.hw-badge-ico {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hw-badge-ico svg { width: 26px; height: 26px; }

.hw-ico-yellow {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.28);
  box-shadow: 0 6px 18px rgba(251,191,36,0.12);
}
.hw-ico-yellow svg { stroke: #FBBF24; }

.hw-ico-blue {
  background: rgba(3, 105, 161, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: 0 6px 18px rgba(3,105,161,0.16);
}
.hw-ico-blue svg { stroke: #38bdf8; }

.hw-ico-green {
  background: rgba(5, 150, 105, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.28);
  box-shadow: 0 6px 18px rgba(5,150,105,0.14);
}
.hw-ico-green svg { stroke: #34d399; }

.hw-badge-content { display: flex; flex-direction: column; gap: 3px; }
.hw-badge-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 200, 255, 0.50);
}
.hw-badge-val {
  font-size: 1.08rem;
  font-weight: 700;
  color: #e8f4ff;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════
   RATING WIDGET
═══════════════════════════ */
.hw-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 20px;
  background: rgba(8, 18, 46, 0.72);
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 22px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: center;
}
.hw-rating-stars {
  font-size: 2.4rem;
  color: #FBBF24;
  letter-spacing: 6px;
  filter: drop-shadow(0 0 16px rgba(251,191,36,0.65));
  line-height: 1;
}
.hw-rating-score {
  font-size: 2.8rem;
  font-weight: 900;
  color: #e8f4ff;
  letter-spacing: -0.05em;
  line-height: 1;
}
.hw-rating-max {
  font-size: 1.35rem;
  font-weight: 400;
  color: rgba(148, 200, 255, 0.38);
  letter-spacing: -0.01em;
}
.hw-rating-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(148, 200, 255, 0.50);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ═══════════════════════════
   RESPONSIVE
═══════════════════════════ */
@media (max-width: 900px) {
  .hw-wrap { max-width: 100%; }
}
@media (max-width: 640px) {
  .hw-card-body { padding: 34px 24px; gap: 20px; }
  .hw-tw-text, .hw-cursor { font-size: 1.25rem; }
  .hw-success-ring { width: 82px; height: 82px; }
  .hw-success-icon svg { width: 36px; height: 36px; }
  .hw-badge { padding: 14px 16px; gap: 14px; }
  .hw-badge-ico { width: 44px; height: 44px; border-radius: 13px; }
  .hw-badge-val { font-size: 0.98rem; }
  .hw-rating { padding: 20px 16px; }
  .hw-rating-stars { font-size: 1.9rem; letter-spacing: 4px; }
  .hw-rating-score { font-size: 2.2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO V5 — Service Cards  (Phase 5 refinement)
   Keine Chrome-Dots · Echte Service-Karten · Starfield-BG
   Glassmorphism · Float-Animation · Apple-Niveau
═══════════════════════════════════════════════════════════════ */

/* Kill old elements we removed */
.hw-card, .hw-card-chrome, .hw-card-body,
.hw-success-ring, .hw-success-icon,
.hw-typewriter-row, .hw-cursor, .hw-card-sub,
.hw-rating, .hero-avail, .hero-avail-dot,
.hsp-sep { display: none !important; }

/* ── Starfield background on the right column ── */
.hw-cards-area {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hw-cards-area::before {
  content: "";
  position: absolute;
  inset: -24px -20px;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(186,230,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px   at 28% 72%, rgba(186,230,255,0.40) 0%, transparent 100%),
    radial-gradient(2px 2px   at 45% 35%, rgba(186,230,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px   at 60% 82%, rgba(186,230,255,0.50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(186,230,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px   at 88% 55%, rgba(186,230,255,0.35) 0%, transparent 100%),
    radial-gradient(2px 2px   at 8%  60%, rgba(186,230,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px   at 92% 88%, rgba(186,230,255,0.40) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 95%, rgba(186,230,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px   at 52% 5%,  rgba(186,230,255,0.45) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════
   MAIN CARD — Digitale Ordnung
═══════════════════════════ */
.hw-main-card {
  position: relative; z-index: 1;
  background: rgba(6, 14, 40, 0.80);
  border: 1px solid rgba(56, 189, 248, 0.20);
  border-radius: 24px;
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(56,189,248,0.06) inset,
    0 1px 0 rgba(255,255,255,0.08) inset;
  padding: 28px 28px 24px;
  /* Float animation */
  animation: hwFloatMain 5.5s ease-in-out infinite;
}
@keyframes hwFloatMain {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

/* Header row inside main card */
.hw-mc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.hw-mc-icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(3,105,161,0.28) 0%, rgba(14,165,233,0.18) 100%);
  border: 1px solid rgba(56,189,248,0.28);
  box-shadow: 0 8px 22px rgba(3,105,161,0.28);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hw-mc-icon svg { width: 26px; height: 26px; stroke: #38bdf8; }
.hw-mc-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #e8f4ff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hw-mc-sub {
  font-size: 0.80rem;
  font-weight: 500;
  color: rgba(148,200,255,0.55);
  margin-top: 2px;
}

/* Checklist items */
.hw-mc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hw-mc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(56,189,248,0.10);
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(200,228,255,0.88);
  transition: background 0.2s, border-color 0.2s;
}
.hw-mc-item:hover {
  background: rgba(3,105,161,0.10);
  border-color: rgba(56,189,248,0.22);
}
.hw-mc-ico-sm {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ═══════════════════════════
   SMALL CARDS ROW
═══════════════════════════ */
.hw-small-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative; z-index: 1;
}

/* Base small card */
.hw-small-card {
  background: rgba(6, 14, 40, 0.80);
  border: 1px solid rgba(56,189,248,0.14);
  border-radius: 20px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 16px 44px rgba(0,0,0,0.45);
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
/* Staggered float animations */
.hw-sc-wlan    { animation: hwFloatA 5.0s ease-in-out 0.3s infinite; }
.hw-sc-devices { animation: hwFloatB 5.8s ease-in-out 0.8s infinite; }
.hw-sc-personal{ animation: hwFloatA 5.3s ease-in-out 0.5s infinite; }
@keyframes hwFloatA {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes hwFloatB {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.hw-sc-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e8f4ff;
  line-height: 1.3;
}

/* ── WLAN card: wifi wave animation ── */
.hw-sc-wifi {
  position: relative;
  width: 38px; height: 38px;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0; padding-bottom: 2px;
  flex-shrink: 0;
}
.hw-wa {
  position: absolute;
  bottom: 4px;
  left: 50%; transform: translateX(-50%);
  border-radius: 50%;
  border-style: solid;
  border-color: transparent;
  border-top-color: #38bdf8;
}
.hw-wa3 { width: 36px; height: 36px; border-width: 2.5px; opacity: 0.35; animation: wifiPulse 2s ease-in-out infinite 0s; }
.hw-wa2 { width: 24px; height: 24px; border-width: 2.5px; opacity: 0.60; animation: wifiPulse 2s ease-in-out infinite 0.25s; }
.hw-wa1 { width: 13px; height: 13px; border-width: 2.5px; opacity: 0.90; animation: wifiPulse 2s ease-in-out infinite 0.50s; }
.hw-wifi-dot { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 6px rgba(56,189,248,0.80); }
@keyframes wifiPulse {
  0%,100% { opacity: 0.25; }
  50%     { opacity: 1; }
}
.hw-sc-connected {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: rgba(5,150,105,0.14);
  border: 1px solid rgba(52,211,153,0.28);
  border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; color: #6ee7b7;
}
.hw-sc-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,0.70);
  animation: hsLivePulse 1.8s ease-in-out infinite;
}

/* ── Geräte card: device icon row ── */
.hw-dev-row {
  display: flex; gap: 8px; align-items: flex-end;
}
.hw-dev-item {
  position: relative;
  width: 28px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(148,200,255,0.60);
}
.hw-dev-item svg { width: 22px; height: 22px; stroke: rgba(148,200,255,0.65); }
.hw-dev-check {
  position: absolute;
  top: -6px; right: -6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #059669;
  color: #fff; font-size: 0.55rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(6,14,40,0.90);
}
.hw-sc-hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(148,200,255,0.50);
  line-height: 1.4;
}

/* ── Personal Help card: avatar + pills ── */
.hw-pers-avatar {
  position: relative;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
}
.hw-pers-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(3,105,161,0.40);
  animation: hwPulseRing 3s ease-in-out infinite;
}
.hw-pers-core {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(3,105,161,0.45);
}
.hw-pers-core svg { width: 20px; height: 20px; }
.hw-sc-pills {
  display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
}
.hw-sc-pill {
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
}
.hw-pill-green {
  background: rgba(5,150,105,0.14);
  border: 1px solid rgba(52,211,153,0.28);
  color: #6ee7b7;
}
.hw-pill-blue {
  background: rgba(3,105,161,0.16);
  border: 1px solid rgba(56,189,248,0.28);
  color: #7dd3fc;
}

/* ═══════════════════════════
   RESPONSIVE
═══════════════════════════ */
@media (max-width: 900px) {
  .hw-wrap { max-width: 100%; }
  .hw-small-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 560px) {
  .hw-main-card { padding: 20px 18px; }
  .hw-mc-title { font-size: 1.05rem; }
  .hw-mc-item { font-size: 0.85rem; padding: 9px 11px; }
  .hw-small-row { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .hw-small-card { padding: 14px 10px 12px; border-radius: 16px; }
  .hw-sc-name { font-size: 0.74rem; }
  .hw-sc-connected { font-size: 0.68rem; padding: 4px 8px; }
  .hw-dev-item svg { width: 18px; height: 18px; }
  .hw-sc-pill { font-size: 0.66rem; padding: 3px 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO CARDS — Light Theme
   Near-white glassmorphism to harmonise with the site's white palette.
   All rules use !important to override the previous dark-glass section.
═══════════════════════════════════════════════════════════════ */

/* ── Main card (Digitale Ordnung) ── */
.hw-main-card {
  background: rgba(255,255,255,0.93) !important;
  border: 1px solid rgba(186,218,255,0.62) !important;
  box-shadow:
    0 20px 54px rgba(3,105,161,0.13),
    0 4px 14px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.hw-mc-title { color: #0f172a !important; }
.hw-mc-sub   { color: #64748b !important; }

.hw-mc-icon {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border: 1px solid rgba(59,130,246,0.18) !important;
  box-shadow: 0 4px 12px rgba(3,105,161,0.12) !important;
}
.hw-mc-icon svg { stroke: #0369A1 !important; }

.hw-mc-item {
  background: rgba(239,246,255,0.75) !important;
  border: 1px solid rgba(186,218,255,0.48) !important;
  color: #1e293b !important;
}
.hw-mc-item:hover {
  background: rgba(219,234,254,0.65) !important;
  border-color: rgba(147,197,253,0.55) !important;
}

/* ── Small cards ── */
.hw-small-card {
  background: rgba(255,255,255,0.91) !important;
  border: 1px solid rgba(186,218,255,0.58) !important;
  box-shadow:
    0 12px 30px rgba(3,105,161,0.10),
    0 2px 8px rgba(0,0,0,0.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.hw-sc-name { color: #0f172a !important; }
.hw-sc-hint { color: #64748b !important; }

/* WLAN — connected status badge */
.hw-sc-connected {
  background: rgba(5,150,105,0.09) !important;
  border: 1px solid rgba(16,185,129,0.28) !important;
  color: #065f46 !important;
}

/* Device icons — slate on light background */
.hw-dev-item svg { stroke: #64748b !important; }
.hw-dev-check    { border-color: #ffffff !important; }

/* Personal help — pills */
.hw-pill-green {
  background: rgba(5,150,105,0.09) !important;
  border: 1px solid rgba(16,185,129,0.26) !important;
  color: #065f46 !important;
}
.hw-pill-blue {
  background: rgba(3,105,161,0.09) !important;
  border: 1px solid rgba(14,165,233,0.24) !important;
  color: #0369A1 !important;
}

/* ── Trust badges ── */
.hw-badge {
  background: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(186,218,255,0.55) !important;
  box-shadow: 0 8px 24px rgba(3,105,161,0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.hw-badge:hover {
  background: rgba(248,252,255,0.97) !important;
  border-color: rgba(147,197,253,0.60) !important;
  box-shadow: 0 14px 38px rgba(3,105,161,0.13) !important;
  transform: translateX(4px) !important;
}
.hw-badge-title { color: #64748b !important; }
.hw-badge-val   { color: #0f172a !important; }

/* ── Webdesign pricing card — "Nach Absprache" ── */
.pricing-consult {
  font-size: 1.45rem !important;
  color: #0369A1 !important;
  letter-spacing: -0.01em;
}
.pricing-card-web {
  border: 1px solid rgba(3,105,161,0.25) !important;
  background: linear-gradient(160deg, #f0f9ff 0%, #e0f2fe 100%) !important;
}

/* ── Webdesign section: extra bottom spacing before Praktische Hilfe ── */
.portfolio-section-web {
  padding-bottom: 80px !important;
  margin-bottom: 56px !important;
}

/* ── Pricing grid: force 4 columns in one row ── */
.pricing-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  max-width: 1320px !important;
}
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr !important; }
}

/* ── Adjacent-sibling: guaranteed gap between Webdesign and Praktische Hilfe ── */
.portfolio-section-web + .portfolio-section-alt {
  margin-top: 72px !important;
  border-top: 1px solid #e8edf5;
  padding-top: 64px !important;
}

/* ── Service cards: 3 columns on home page ── */
.services-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 860px) {
  .services-cards { grid-template-columns: 1fr !important; }
}

/* ── Trust badges: dunkel-blau passend zum Hero-Hintergrund ── */
.hw-badge {
  background: rgba(6, 14, 40, 0.80) !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.hw-badge:hover {
  background: rgba(3, 20, 65, 0.90) !important;
  border-color: rgba(56, 189, 248, 0.38) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38) !important;
  transform: translateX(4px) !important;
}
.hw-badge-title { color: rgba(148, 200, 255, 0.55) !important; }
.hw-badge-val   { color: #e8f4ff !important; }

/* ── Hero cards: dunkel-blau (gleiche Farbe wie Trust Badges) ── */
.hw-main-card {
  background: rgba(6, 14, 40, 0.80) !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(36px) !important;
  -webkit-backdrop-filter: blur(36px) !important;
}
.hw-mc-title { color: #e8f4ff !important; }
.hw-mc-sub   { color: rgba(148, 200, 255, 0.55) !important; }

.hw-mc-icon {
  background: rgba(3, 105, 161, 0.20) !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  box-shadow: 0 4px 14px rgba(3,105,161,0.22) !important;
}
.hw-mc-icon svg { stroke: #38bdf8 !important; }

.hw-mc-item {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(56,189,248,0.12) !important;
  color: #cbd5e1 !important;
}
.hw-mc-item:hover {
  background: rgba(56,189,248,0.10) !important;
  border-color: rgba(56,189,248,0.28) !important;
}

.hw-small-card {
  background: rgba(6, 14, 40, 0.80) !important;
  border: 1px solid rgba(56, 189, 248, 0.14) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,0.40) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}
.hw-sc-name { color: #e8f4ff !important; }
.hw-sc-hint { color: rgba(148, 200, 255, 0.55) !important; }

.hw-sc-connected {
  background: rgba(5,150,105,0.15) !important;
  border: 1px solid rgba(52,211,153,0.30) !important;
  color: #6ee7b7 !important;
}

.hw-dev-item svg { stroke: #94a3b8 !important; }
.hw-dev-check    { border-color: rgba(56,189,248,0.35) !important; color: #38bdf8 !important; }

/* ── Portfolio sections: Außenabstand entfernen, direkt aneinanderSchließen ── */
.portfolio-section-web {
  margin-bottom: 0 !important;
}
.portfolio-section-web + .portfolio-section-alt {
  margin-top: 0 !important;
}

/* ── Hero Badges: kein Schweben, keine Häkchen, kein Signal-Badge ── */

/* 1. Alle Float-Animationen deaktivieren */
.hw-main-card,
.hw-sc-wlan,
.hw-sc-devices,
.hw-sc-personal {
  animation: none !important;
}

/* 2. "Gutes Signal"-Blase ausblenden */
.hw-sc-connected { display: none !important; }

/* 3. WLAN-Symbol zentrieren (ohne Signal-Blase darunter) */
.hw-sc-wlan {
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}
.hw-sc-wlan .hw-sc-wifi {
  margin: 0 auto !important;
}

/* 4. Grüne Häkchen ausblenden */
.hw-dev-check { display: none !important; }

/* 5. Geräte-Icons zentrieren */
.hw-dev-row {
  justify-content: center !important;
  width: 100% !important;
}

/* ── Geräte-Karte: Icons vertikal zentrieren ── */
.hw-dev-row {
  align-items: center !important;
}
.hw-sc-devices {
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════
   NEW HERO — Device wrap + Laptop visual + Bottom strip
═══════════════════════════════════════════════════ */

.hw-device-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  overflow: visible;
}

/* main card: fixed width in side-by-side layout */
.hw-device-wrap > .hw-main-card {
  flex-shrink: 0;
  width: 290px;
  animation: none !important;
  z-index: 2;
}

/* Tech screen */
.hw-laptop-visual {
  flex: 1;
  min-height: 280px;
  position: relative;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 30% 35%, rgba(59,130,246,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(16,32,96,0.22) 0%, transparent 50%),
    linear-gradient(145deg, #060c1a 0%, #0b1a3d 55%, #0f2050 100%);
  border: 1.5px solid rgba(56,189,248,0.28);
  box-shadow:
    0 0 60px rgba(56,189,248,0.15),
    0 0 120px rgba(56,189,248,0.06),
    0 24px 60px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hw-laptop-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(56,189,248,0.14) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.hw-laptop-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(56,189,248,0.65)) drop-shadow(0 0 36px rgba(56,189,248,0.28));
  position: relative;
  z-index: 1;
}
.hw-laptop-text {
  margin-top: 14px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(148,200,255,0.58);
  text-transform: uppercase;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
.hw-laptop-text strong {
  display: block;
  color: rgba(220,240,255,0.85);
  letter-spacing: 0.08em;
}

/* Floating orbit badges */
.hw-orbit {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(6,14,40,0.88);
  border: 1.5px solid rgba(56,189,248,0.30);
  box-shadow: 0 0 22px rgba(56,189,248,0.20), 0 8px 24px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hw-orbit svg { width: 26px; height: 26px; stroke: #38bdf8; }
.hw-orbit-wifi  { top: -24px;  right: -24px; }
.hw-orbit-tools { top: 50%;    right: -36px; transform: translateY(-50%); }
.hw-orbit-phone { bottom: -24px; right: -24px; }

.hero-right { overflow: visible !important; }

/* ── Bottom badges strip ── */
.hw-bottom-strip {
  max-width: 1320px;
  margin: 32px auto 0;
  padding: 0 28px;
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(56,189,248,0.10);
}
.hw-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  flex: 1;
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.hw-strip-item:last-child { border-right: none; }

.hw-si-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(6,14,40,0.80);
  border: 1.5px solid rgba(56,189,248,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hw-si-icon svg { width: 19px; height: 19px; stroke: #38bdf8; }

.hw-si-icon-yellow { background: rgba(251,191,36,0.08) !important; border-color: rgba(251,191,36,0.28) !important; }
.hw-si-icon-yellow svg { stroke: #fbbf24 !important; }
.hw-si-icon-blue   { background: rgba(56,189,248,0.08) !important; border-color: rgba(56,189,248,0.28) !important; }
.hw-si-icon-green  { background: rgba(52,211,153,0.08) !important; border-color: rgba(52,211,153,0.28) !important; }
.hw-si-icon-green svg { stroke: #34d399 !important; }

.hw-si-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-si-label {
  font-size: 0.70rem; font-weight: 600;
  color: rgba(148,200,255,0.50); letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hw-si-val {
  font-size: 0.85rem; font-weight: 700; color: #e8f4ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hw-si-single { font-size: 0.85rem; font-weight: 700; color: #e8f4ff; }
.hw-si-green  { color: #34d399 !important; }

@media (max-width: 900px) {
  .hw-laptop-visual, .hw-orbit { display: none !important; }
  .hw-bottom-strip { display: none !important; }
  .hw-device-wrap > .hw-main-card { width: 100%; }
}

/* ── Hero: laptop-hero.png image layout ── */
.hw-laptop-visual { display: none !important; }
.hw-orbit         { display: none !important; }

.hw-device-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: visible;
}
.hw-device-wrap > .hw-main-card {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 272px;
  margin-right: -18px;
  animation: none !important;
}
.hw-laptop-img {
  flex: 1;
  min-width: 0;
  height: auto;
  object-fit: contain;
  display: block;
  max-height: 420px;
}
@media (max-width: 900px) {
  .hw-laptop-img   { display: none !important; }
  .hw-bottom-strip { display: none !important; }
  .hw-device-wrap > .hw-main-card { width: 100%; margin-right: 0; }
}

/* ── Laptop hero: fill right half, bleed below ── */

/* Allow overflow so laptop can bleed below hero */
.hero        { overflow: visible !important; }
.hero-inner  { overflow: visible !important; }
.hero-right  { overflow: visible !important; align-self: stretch !important; }

/* Device wrap: full height block container */
.hw-device-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 400px !important;
}

/* Card: absolute top-left, fixed width */
.hw-device-wrap > .hw-main-card {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 50% !important;
  max-width: 310px !important;
  margin: 0 !important;
  z-index: 2 !important;
  animation: none !important;
}

/* Laptop image: absolute right side, bleeds 60px below */
.hw-laptop-img {
  position: absolute !important;
  right: -20px !important;
  bottom: -60px !important;
  width: 76% !important;
  height: auto !important;
  max-height: none !important;
  flex: unset !important;
  z-index: 1 !important;
  display: block !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  .hw-laptop-img   { display: none !important; }
  .hw-bottom-strip { display: none !important; }
  .hw-device-wrap > .hw-main-card {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════
   HERO LAYOUT FINAL — laptop absolute + blend + mask
══════════════════════════════════════════════════ */

/* Hero: relative + overflow hidden (clips decorative elements) */
.hero {
  position: relative !important;
  overflow: hidden !important;
}

/* Right column stretches to full hero-inner height */
.hero-right {
  align-self: stretch !important;
  overflow: visible !important;
}

/* Device wrap: flex row, vertically centered, fills right column */
.hw-device-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 380px !important;
}

/* Cards column: relative, z-index 2, in front of laptop */
.hw-device-wrap > .hw-main-card {
  position: relative !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: 310px !important;
  margin: 0 !important;
  animation: none !important;
}

/* Laptop: absolute, right side, vertically centered */
.hw-laptop-img {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 530px !important;
  height: auto !important;
  max-height: none !important;
  z-index: 1 !important;
  flex: unset !important;

  /* Dark background verschmilzt mit Hero-Hintergrund */
  mix-blend-mode: screen !important;

  /* Weicher Rand-Ausblend-Effekt */
  mask-image: radial-gradient(
    ellipse 85% 80% at 60% 50%,
    black 35%,
    rgba(0,0,0,0.7) 60%,
    transparent 100%
  ) !important;
  -webkit-mask-image: radial-gradient(
    ellipse 85% 80% at 60% 50%,
    black 35%,
    rgba(0,0,0,0.7) 60%,
    transparent 100%
  ) !important;
}

@media (max-width: 900px) {
  .hw-laptop-img   { display: none !important; }
  .hw-bottom-strip { display: none !important; }
  .hw-device-wrap > .hw-main-card { max-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════
   HERO BG IMAGE — hero-bg_final.png als Hintergrund
══════════════════════════════════════════════════════ */

/* Hintergrundbild, Gradient entfernt */
.hero {
  background: url('../img/hero-bg_final.png') center right / cover no-repeat !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Laptop-Bild-Element ausblenden – ist jetzt im Hintergrund */
.hw-laptop-img { display: none !important; }

/* Device wrap: flex, Karte zentriert in der rechten Spalte */
.hw-device-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 380px !important;
}

/* Karten-Spalte: relative, z-index 2, feste Breite */
.hw-device-wrap > .hw-main-card {
  position: relative !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
  width: 320px !important;
  max-width: 340px !important;
  margin: 0 !important;
  animation: none !important;
}

/* Rechte Spalte füllt volle Hero-Höhe */
.hero-right {
  align-self: stretch !important;
  overflow: visible !important;
}

/* Bottom strip: dunkles Overlay für Lesbarkeit über Hintergrundbild */
.hw-bottom-strip {
  background: rgba(4, 10, 30, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(56, 189, 248, 0.15) !important;
}

@media (max-width: 900px) {
  .hw-bottom-strip { display: none !important; }
  .hw-device-wrap > .hw-main-card { width: 100% !important; max-width: 100% !important; }
}

/* ── Hero strip update: icons semi-transparent, position relative, mobile wrap ── */
.hw-si-icon { opacity: 0.55; }
.hw-bottom-strip {
  position: relative !important;
  flex-wrap: wrap !important;
}
@media (max-width: 900px) {
  .hw-bottom-strip {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .hw-strip-item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════
   LAPTOP SCREEN DASHBOARD OVERLAY
══════════════════════════════════════════════════ */

/* Remove bottom strip entirely */
.hw-bottom-strip { display: none !important; }

/* Dashboard container: absolute, aligned to laptop screen area */
.hw-laptop-dashboard {
  position: absolute;
  top: 15%;
  right: 8%;
  width: 42%;
  height: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

/* 3-column grid */
.hw-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  padding: 0 6px;
}

/* Individual card */
.hw-dash-item {
  background: rgba(13, 30, 56, 0.82);
  border: 1px solid rgba(26, 159, 255, 0.22);
  border-radius: 10px;
  padding: 10px 8px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(26,159,255,0.08) inset;
  text-align: center;
}

/* Icon circle */
.hw-dash-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(26, 159, 255, 0.12);
  border: 1px solid rgba(26, 159, 255, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hw-dash-icon svg {
  width: 15px;
  height: 15px;
  stroke: #38bdf8;
}

/* Color variants */
.hw-dash-icon--yellow { background: rgba(251,191,36,0.10) !important; border-color: rgba(251,191,36,0.32) !important; }
.hw-dash-icon--yellow svg { stroke: #fbbf24 !important; }
.hw-dash-item--yellow { border-color: rgba(251,191,36,0.18) !important; }

.hw-dash-icon--blue { background: rgba(56,189,248,0.10) !important; border-color: rgba(56,189,248,0.32) !important; }
.hw-dash-icon--blue svg { stroke: #60c8ff !important; }
.hw-dash-item--blue { border-color: rgba(56,189,248,0.18) !important; }

.hw-dash-icon--green { background: rgba(52,211,153,0.10) !important; border-color: rgba(52,211,153,0.32) !important; }
.hw-dash-icon--green svg { stroke: #34d399 !important; }
.hw-dash-item--green { border-color: rgba(52,211,153,0.18) !important; }

/* Text */
.hw-dash-label {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(220, 240, 255, 0.92);
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.hw-dash-sub {
  font-size: 10px;
  font-weight: 500;
  color: rgba(148, 200, 255, 0.50);
  line-height: 1.2;
}

/* Hide on mobile */
@media (max-width: 900px) {
  .hw-laptop-dashboard { display: none !important; }
}

/* ── Dashboard position & grid fix: 2 cols, screen-aligned ── */
.hw-laptop-dashboard {
  top: 22% !important;
  right: 10% !important;
  width: 36% !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
.hw-dash-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Dashboard fine-tune: narrower, lower, fits laptop screen ── */
.hw-laptop-dashboard {
  top: 38% !important;
  right: 14% !important;
  width: 26% !important;
}
.hw-dash-grid {
  gap: 7px !important;
}
.hw-dash-item {
  padding: 8px 6px 7px !important;
  border-radius: 8px !important;
}
.hw-dash-icon {
  width: 26px !important;
  height: 26px !important;
}
.hw-dash-icon svg {
  width: 12px !important;
  height: 12px !important;
}
.hw-dash-label {
  font-size: 10.5px !important;
}
.hw-dash-sub {
  font-size: 9px !important;
}

/* ── Dashboard micro-adjust: shift left, stay inside screen frame ── */
.hw-laptop-dashboard {
  top: 36% !important;
  right: 18% !important;
  width: 26% !important;
}

/* ── Hero clean: nur hero-bg_final.png, alle anderen BG entfernt ── */
.hero {
  background: url('../img/hero-bg_final.png') center right / cover no-repeat !important;
}
.hero-aurora,
.hero-network,
.hero-beam,
.hero-accent-line { display: none !important; }

/* Alle internen Hero-Elemente: kein eigener Hintergrund */
.hero-inner,
.hero-left,
.hero-right,
.hw-device-wrap,
.hw-main-card,
.hw-laptop-dashboard,
.hw-dash-grid,
.hw-dash-item { background: none !important; }

/* Dashboard komplett ausblenden */
.hw-laptop-dashboard { display: none !important; }

/* ── Hero: alle Pseudo-Element-Hintergründe entfernen ── */
.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* ══════════════════════════════════════════════════
   MOBILE HERO (max-width: 768px)
══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Laptop-Hintergrundbild entfernen, Farbe setzen */
  .hero {
    background: #0a1628 !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* 2. Punkte/Sterne-Effekt wieder aktivieren */
  .hero::before {
    display: block !important;
    content:  !important;
    background-image: radial-gradient(circle, rgba(148,186,255,0.16) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    background-color: transparent !important;
  }

  /* 3. Dashboard-Karten ausblenden */
  .hw-laptop-dashboard { display: none !important; }

  /* 4. Text zentrieren, Button mittig */
  .hero-left {
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .hero-kicker {
    justify-content: center !important;
  }
  .hero-actions {
    justify-content: center !important;
    display: flex !important;
  }
  .hero-social-proof {
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero-stars-row {
    justify-content: center !important;
  }
}