/* ========================================= */
/* Theme Toggle Button - Light/Dark Variant  */
/* ========================================= */
#themeToggle.theme-toggle {
        position: relative;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #000000;
        border: 1px solid rgba(0,0,0,0.08);
        color: #fff;
        box-shadow: 0 2px 6px -2px rgba(0,0,0,0.15), 0 4px 14px -8px rgba(0,0,0,0.08);
        transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
        overflow: hidden;
}

/* Dark mode variant */
.dark #themeToggle.theme-toggle {
        background: white;
        border: 1px solid rgba(255,255,255,0.15);
        color: black;
        box-shadow: 0 2px 6px -2px rgba(0,0,0,0.6), 0 4px 14px -8px rgba(0,0,0,0.5);
}

/* Icon transition */
#themeToggle.theme-toggle svg { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease; }
#themeToggle.theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -8px rgba(0,0,0,0.2); }
.dark #themeToggle.theme-toggle:hover { box-shadow: 0 6px 18px -8px rgba(0,0,0,0.7); background-color: white; color:#000; }

#themeToggle.theme-toggle:active { transform: translateY(0); box-shadow: 0 3px 10px -4px rgba(0,0,0,0.25); }
.dark #themeToggle.theme-toggle:active { box-shadow: 0 3px 10px -4px rgba(0,0,0,0.65); }

/* Focus ring */
#themeToggle.theme-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; }

/* Subtle pulse on hover (reduced motion safe) */
@media (prefers-reduced-motion: no-preference) {
    #themeToggle.theme-toggle:hover svg { transform: rotate(18deg) scale(1.05); }
}

@media (max-width: 640px) {
    #themeToggle.theme-toggle { width: 32px; height: 32px; }
    #themeToggle.theme-toggle svg { width: 18px; height: 18px; }
}
/*
 * ZautoAI Landing Stylesheet
 * Extracted from inline styles in index.html on 2025-10-18
 * Structure: Base -> Components -> Sections -> Utilities -> Responsive
 */

/* ========================================================================== */
/* Base & Theme Settings                                                       */
/* ========================================================================== */
html{scroll-behavior:smooth;}
body{
	max-width:100vw;
	background:linear-gradient(180deg,rgba(244,249,255,0.98) 0%,rgba(255,255,255,0.96) 52%,rgba(244,249,255,0.98) 100%);
	position:relative;
	z-index:0;
	-webkit-overflow-scrolling:touch;
	scroll-behavior:smooth;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
    /* padding: 0 30px; */
 }
body::before{
	content:"";
	position:fixed;
	inset:0;
	background:
		radial-gradient(circle at 12% 18%,rgba(125,211,252,.18),transparent 58%),
		radial-gradient(circle at 88% 28%,rgba(167,243,208,.16),transparent 60%),
		radial-gradient(circle at 46% 85%,rgba(191,219,254,.18),transparent 62%);
	pointer-events:none;
	z-index:-1;
	opacity:.9;
}
*{box-sizing:border-box}
:root{
	--grad-accent:linear-gradient(135deg,#3b82f6 0%,#06b6d4 50%,#14b8a6 100%);
	--grad-accent-soft:linear-gradient(120deg,#e0f2ff,#f0fbff 55%,#ffffff);
	--grad-warm:linear-gradient(135deg,#f59e0b,#fbbf24,#fde047);
	--glass-light:linear-gradient(140deg,rgba(255,255,255,.78),rgba(255,255,255,.55));
	--glass-dark:linear-gradient(140deg,rgba(10,15,25,.8),rgba(8,12,20,0.7));
	--glass-dark-card:linear-gradient(145deg,rgba(20,28,40,0.75),rgba(10,15,25,0.7));
	--radius-card:20px;
	--shadow-soft:0 4px 14px -4px rgba(15,23,42,.15),0 8px 32px -12px rgba(15,23,42,.12);
	--shadow-hover:0 8px 26px -10px rgba(25,55,99,.35),0 18px 42px -14px rgba(15,23,42,.28);
	--shadow-dark:0 8px 28px -12px rgba(0,0,0,.45),0 16px 38px -16px rgba(0,0,0,0.35);
	--shadow-dark-hover:0 14px 42px -18px rgba(0,0,0,.65),0 24px 56px -20px rgba(0,0,0,0.45);
	--focus-ring:0 0 0 3px #ffffff,0 0 0 6px rgba(59,130,246,.45);
	--focus-ring-dark:0 0 0 3px rgba(15,23,42,0.5),0 0 0 6px rgba(96,165,250,.5);
	--mobile-header-offset:0px;
	--hero-overlap:clamp(82px,11.5vw,124px);

	--tag-bg: rgba(255,255,255,.75);
	--tag-text: #1f2937;
	--tag-border: rgba(148,163,184,.35);
	--tag-bg-dark: rgba(15,23,42,.7);
	--tag-text-dark: #e2e8f0;
	--tag-border-dark: rgba(100,116,139,.45);
	--tag-bg-purple: rgba(243,232,255,.75);
	--tag-text-purple: #6b21a8;
	--tag-border-purple: rgba(168,85,247,.35);
	--tag-bg-dark-purple: rgba(76,29,149,.65);
	--tag-text-dark-purple: #e9d5ff;
	--tag-border-dark-purple: rgba(216,180,254,.4);
	--tag-bg-cyan: rgba(224,251,255,.75);
	--tag-text-cyan: #0e7490;
	--tag-border-cyan: rgba(8,145,178,.35);
	--tag-bg-dark-cyan: rgba(8,51,68,.65);
	--tag-text-dark-cyan: #67e8f9;
	--tag-border-dark-cyan: rgba(34,211,238,.38);
	--tag-bg-pink: rgba(252,231,243,.75);
	--tag-text-pink: #be185d;
	--tag-border-pink: rgba(236,72,153,.35);
	--tag-bg-dark-pink: rgba(131,24,67,.65);
	--tag-text-dark-pink: #f9a8d4;
	--tag-border-dark-pink: rgba(244,114,182,.38);
	--tag-bg-indigo: rgba(232,233,255,.75);
	--tag-text-indigo: #3730a3;
	--tag-border-indigo: rgba(99,102,241,.35);
	--tag-bg-dark-indigo: rgba(55,48,163,.65);
	--tag-text-dark-indigo: #c7d2fe;
	--tag-border-dark-indigo: rgba(129,140,248,.38);
	--tag-bg-emerald: rgba(236,253,245,.75);
	--tag-text-emerald: #047857;
	--tag-border-emerald: rgba(16,185,129,.35);
	--tag-bg-dark-emerald: rgba(6,95,70,.65);
	--tag-text-dark-emerald: #6ee7b7;
	--tag-border-dark-emerald: rgba(52,211,153,.4);
	--tag-bg-blue: rgba(219,234,254,.75);
	--tag-text-blue: #1d4ed8;
	--tag-border-blue: rgba(59,130,246,.35);
	--tag-bg-dark-blue: rgba(23,37,84,.65);
	--tag-text-dark-blue: #93c5fd;
	--tag-border-dark-blue: rgba(96,165,250,.4);
	--tag-bg-gray: rgba(243,244,246,.75);
	--tag-text-gray: #1f2937;
	--tag-border-gray: rgba(148,163,184,.35);
	--tag-bg-dark-gray: rgba(31,41,55,.7);
	--tag-text-dark-gray: #e5e7eb;
	--tag-border-dark-gray: rgba(148,163,184,.4);
	--tag-bg-slate: rgba(244,247,255,.75);
	--tag-text-slate: #0f172a;
	--tag-border-slate: rgba(148,163,184,.32);
	--tag-bg-dark-slate: rgba(15,23,42,.7);
	--tag-text-dark-slate: #cbd5f5;
	--tag-border-dark-slate: rgba(148,163,184,.4);

}
@media (max-width:768px){
	:root{
		--hero-overlap:clamp(68px,18vw,102px);
	}
}
.dark:root{--shadow-soft:var(--shadow-dark);--shadow-hover:var(--shadow-dark-hover)}
.section-tag{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.45rem .95rem;border-radius:9999px;font-size:.78rem;font-weight:600;--chip-pulse-color:#3b82f6;line-height:1.2;letter-spacing:.01em;text-align:center;flex-wrap:wrap;vertical-align:middle;background:var(--tag-bg);color:var(--tag-text);border:1px solid var(--tag-border);box-shadow:0 14px 32px -20px rgba(15,23,42,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .35s ease,color .35s ease,box-shadow .35s ease;}
.section-tag svg{width:.8rem;height:.8rem;opacity:.88;flex-shrink:0;}
.section-tag .chip-pulse-ring{background:var(--chip-pulse-color);}
.section-tag .chip-pulse-dot{background:var(--chip-pulse-color);}
.dark .section-tag{background:var(--tag-bg-dark);color:var(--tag-text-dark);border-color:var(--tag-border-dark);box-shadow:0 18px 38px -22px rgba(0,0,0,.55);}
.section-tag:hover{box-shadow:0 18px 42px -20px rgba(59,130,246,.28);}
.section-tag[data-theme="purple"]{--tag-bg:var(--tag-bg-purple);--tag-text:var(--tag-text-purple);--tag-border:var(--tag-border-purple);--tag-bg-dark:var(--tag-bg-dark-purple);--tag-text-dark:var(--tag-text-dark-purple);--tag-border-dark:var(--tag-border-dark-purple);}
.section-tag[data-theme="cyan"]{--tag-bg:var(--tag-bg-cyan);--tag-text:var(--tag-text-cyan);--tag-border:var(--tag-border-cyan);--tag-bg-dark:var(--tag-bg-dark-cyan);--tag-text-dark:var(--tag-text-dark-cyan);--tag-border-dark:var(--tag-border-dark-cyan);}
.section-tag[data-theme="pink"]{--tag-bg:var(--tag-bg-pink);--tag-text:var(--tag-text-pink);--tag-border:var(--tag-border-pink);--tag-bg-dark:var(--tag-bg-dark-pink);--tag-text-dark:var(--tag-text-dark-pink);--tag-border-dark:var(--tag-border-dark-pink);}
.section-tag[data-theme="indigo"]{--tag-bg:var(--tag-bg-indigo);--tag-text:var(--tag-text-indigo);--tag-border:var(--tag-border-indigo);--tag-bg-dark:var(--tag-bg-dark-indigo);--tag-text-dark:var(--tag-text-dark-indigo);--tag-border-dark:var(--tag-border-dark-indigo);}
.section-tag[data-theme="emerald"]{--tag-bg:var(--tag-bg-emerald);--tag-text:var(--tag-text-emerald);--tag-border:var(--tag-border-emerald);--tag-bg-dark:var(--tag-bg-dark-emerald);--tag-text-dark:var(--tag-text-dark-emerald);--tag-border-dark:var(--tag-border-dark-emerald);}
.section-tag[data-theme="blue"]{--tag-bg:var(--tag-bg-blue);--tag-text:var(--tag-text-blue);--tag-border:var(--tag-border-blue);--tag-bg-dark:var(--tag-bg-dark-blue);--tag-text-dark:var(--tag-text-dark-blue);--tag-border-dark:var(--tag-border-dark-blue);}
.section-tag[data-theme="gray"]{--tag-bg:var(--tag-bg-gray);--tag-text:var(--tag-text-gray);--tag-border:var(--tag-border-gray);--tag-bg-dark:var(--tag-bg-dark-gray);--tag-text-dark:var(--tag-text-dark-gray);--tag-border-dark:var(--tag-border-dark-gray);}
.section-tag[data-theme="slate"]{--tag-bg:var(--tag-bg-slate);--tag-text:var(--tag-text-slate);--tag-border:var(--tag-border-slate);--tag-bg-dark:var(--tag-bg-dark-slate);--tag-text-dark:var(--tag-text-dark-slate);--tag-border-dark:var(--tag-border-dark-slate);}
.section-tag[data-theme="medical"]{--tag-bg:var(--tag-bg-emerald);--tag-text:var(--tag-text-emerald);--tag-border:var(--tag-border-emerald);--tag-bg-dark:var(--tag-bg-dark-emerald);--tag-text-dark:var(--tag-text-dark-emerald);--tag-border-dark:var(--tag-border-dark-emerald);}
.section-tag .tag-addon{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .55rem;border-radius:9999px;background:rgba(255,255,255,.9);color:inherit;font-size:.68em;font-weight:700;letter-spacing:.08em;}
.dark .section-tag .tag-addon{background:rgba(255,255,255,.15);color:#f8fafc;}

/* Responsive: Section Tags - iPad & Tablets */
@media (max-width:768px) and (min-width:481px) {
    .section-tag { font-size:.75rem; padding:.4rem .85rem; gap:.4rem; }
    .section-tag svg { width:.75rem; height:.75rem; }
}

/* Responsive: Section Tags - Mobile */
@media (max-width:480px) {
    .section-tag { font-size:.7rem; padding:.35rem .75rem; gap:.35rem; }
    .section-tag svg { width:.7rem; height:.7rem; }
}

.focus-outline:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.dark .focus-outline:focus-visible{box-shadow:var(--focus-ring-dark)}

*{-webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);-webkit-touch-callout:none;}
a, button, [role="button"]{-webkit-tap-highlight-color: rgba(59, 130, 246, 0.3);touch-action: manipulation;}
input, textarea, select{-webkit-tap-highlight-color: transparent;touch-action: manipulation;}

.dark body{
	background:linear-gradient(180deg,#0f172a 0%,#0a0f1a 50%,#0f1419 100%) !important;
	color:#e2e8f0;
	position:relative;
	z-index:0;
}
.dark body::before {
	content:"";
	position:fixed;
	inset:0;
	background:
		radial-gradient(circle at 16% 20%,rgba(14,165,233,.18),transparent 55%),
		radial-gradient(circle at 82% 32%,rgba(34,211,238,.14),transparent 58%),
		radial-gradient(circle at 48% 82%,rgba(56,189,248,.18),transparent 62%);
	pointer-events:none;
	z-index:-1;
	opacity:.75;
}

.gradient-bg { background: linear-gradient(135deg,#3b82f6 0%,#06b6d4 100%); }
.text-gradient { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: inherit; font-weight: 700; display: inline-block; filter:none; text-shadow:none; }
.dark .text-gradient { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: inherit; filter:none; text-shadow:none; }

.heading-accent{ --heading-accent-gradient: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #3b82f6 100%); background: var(--heading-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-weight: 700; }
#hero-title-highlight{--heading-accent-gradient:linear-gradient(135deg,#10b981 0%,#06b6d4 50%,#3b82f6 100%);display:block;font-size:inherit;line-height:inherit;font-weight:inherit;letter-spacing:inherit;}
#hero-title-highlight[data-theme="aqua"]{--heading-accent-gradient:linear-gradient(140deg,#14b8a6 0%,#06b6d4 45%,#3b82f6 100%);}
#hero-title-highlight[data-theme="violet"]{--heading-accent-gradient:linear-gradient(140deg,#a855f7 0%,#ec4899 55%,#6366f1 100%);}
#hero-title-highlight[data-theme="emerald"]{--heading-accent-gradient:linear-gradient(135deg,#10b981 0%,#22c55e 45%,#0ea5e9 100%);}
#hero-title-highlight[data-theme="indigo"]{--heading-accent-gradient:linear-gradient(135deg,#6366f1 0%,#4f46e5 55%,#38bdf8 100%);}
#hero-title-highlight[data-theme="rose"]{--heading-accent-gradient:linear-gradient(140deg,#f43f5e 0%,#ec4899 52%,#a855f7 100%);}
#hero-title-highlight[data-theme="teal"]{--heading-accent-gradient:linear-gradient(135deg,#0ea5e9 0%,#14b8a6 50%,#22d3ee 100%);}

.animate-on-scroll{opacity:0;transform:translateY(28px) translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity .65s cubic-bezier(.25,.46,.45,.94),transform .75s cubic-bezier(.25,.46,.45,.94);}
.animate-on-scroll.animate{opacity:1;transform:none}

/* Subtle, hospital‑friendly enhancements */
/* Scroll progress indicator (top of page) */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 0;background:#64748b;box-shadow:0 6px 18px -10px rgba(100,116,139,.35);transform:scaleX(0);z-index:60;pointer-events:none;transition:transform .18s ease-out}
@media (prefers-reduced-motion: reduce){.scroll-progress{transition:none}}

/* Hero visual - animations disabled */
@media (prefers-reduced-motion: no-preference){
  .hero-visual .svg-shape-effects{
    animation:none;
    will-change:auto;
  }
}

/* Micro-interactions: calm elevation and focus treatment */
@media (hover:hover){
  .card-pro, .presc-step, .voice-input-card, .medical-record-card, .step-card, .system-block{
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .card-pro:hover, .presc-step:hover, .voice-input-card:hover, .medical-record-card:hover, .step-card:hover, .system-block:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 42px -24px rgba(15,23,42,.25);
  }
}
.card-pro:focus-within, .presc-step:focus-within, .system-block:focus-within{outline:2px solid rgba(59,130,246,.35);outline-offset:2px}

/* Tone down ambient glows overall */
.ambient-glow{opacity:.045 !important}
.dark .ambient-glow{opacity:.07 !important}

/* ================================ */
/* Unified Care Cycle SVG Styling   */
/* ================================ */
.care-cycle-svg { overflow:visible; }
.care-cycle-svg .cycle-arc { stroke-dasharray: 565; stroke-dashoffset: 565; animation: cycle-draw 3.6s cubic-bezier(.65,.05,.36,1) forwards; filter: drop-shadow(0 2px 4px rgba(99,102,241,.25)) drop-shadow(0 0 6px rgba(168,85,247,.25)); }
.care-cycle-svg .cycle-arc:nth-child(3) { animation-delay:.35s; }
.care-cycle-svg .cycle-arc:nth-child(4) { animation-delay:.7s; }
.care-cycle-svg .cycle-arc:nth-child(5) { animation-delay:1.05s; }
@keyframes cycle-draw { to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .care-cycle-svg .cycle-arc { animation:none; stroke-dashoffset:0; } }
/* Dark mode subtle boost */
.dark .care-cycle-svg .cycle-arc { filter: drop-shadow(0 0 4px rgba(99,102,241,.35)); }
/* Mobile: scale down cycle */
@media (max-width:640px){ .care-cycle-svg { transform:scale(.9); } }

/* Cycle explanatory UI additions */
.cycle-badge { position:absolute; top:-32px; left:50%; transform:translateX(-50%); background:rgba(99,102,241,.12); color:#4338ca; font-size:.62rem; letter-spacing:.12em; font-weight:700; padding:.42rem .85rem .38rem; border-radius:999px; box-shadow:0 4px 14px -6px rgba(99,102,241,.25); text-transform:uppercase; z-index:5; border:1px solid rgba(99,102,241,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.dark .cycle-badge { background:rgba(99,102,241,.22); color:#c7d2fe; border-color:rgba(129,140,248,.45); box-shadow:0 6px 18px -8px rgba(0,0,0,.55); }
.cycle-badge { display:inline-flex; align-items:center; gap:.35rem; }
.cycle-badge-icon { stroke:currentColor; opacity:.85; animation:cycle-icon-spin 6s linear infinite; }
@keyframes cycle-icon-spin { from { transform:rotate(0deg);} to { transform:rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .cycle-badge-icon { animation:none; } }
.cycle-legend { position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); font-size:.6rem; letter-spacing:.05em; color:#475569; background:rgba(255,255,255,.85); padding:.4rem .75rem; border-radius:8px; border:1px solid rgba(148,163,184,.3); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); max-width:260px; text-align:center; line-height:1.25; box-shadow:0 10px 24px -10px rgba(15,23,42,.18); }
.dark .cycle-legend { background:rgba(15,23,42,.75); color:#cbd5e1; border-color:rgba(100,116,139,.35); box-shadow:0 14px 34px -12px rgba(0,0,0,.55); }
.cycle-center-subtext { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:.55rem; letter-spacing:.18em; font-weight:600; color:#6b21a8; text-transform:uppercase; width:120px; text-align:center; pointer-events:none; }
.dark .cycle-center-subtext { color:#d8b4fe; }
/* Directional arrow icons inside cycle */
.cycle-direction-icons path { transition:opacity .4s ease, transform .4s ease; }
@media (hover:hover){
    .cycle-direction-icons path:hover { opacity:1; transform:scale(1.15); }
}
/* Quadrant arrow points */
/* Midpoint arrow markers */
.cycle-mid-arrows path { opacity:.9; filter:drop-shadow(0 3px 6px rgba(99,102,241,.3)); transition:transform .35s ease, opacity .35s ease; }
@media (hover:hover){ .cycle-mid-arrows path:hover { transform:scale(1.25); opacity:1; } }
.dark .cycle-mid-arrows path { filter:drop-shadow(0 3px 6px rgba(129,140,248,.45)); }
.cycle-mid-arrows path { stroke:rgba(255,255,255,.9); stroke-width:.75; paint-order:stroke fill; }
@media (hover:hover){ .cycle-mid-arrows path:hover { stroke:rgba(255,255,255,1); filter:drop-shadow(0 4px 10px rgba(99,102,241,.45)) drop-shadow(0 0 4px rgba(168,85,247,.5)); } }
@media (max-width:640px){
    .cycle-badge { top:-28px; font-size:.58rem; }
    .cycle-legend { bottom:-26px; font-size:.55rem; max-width:220px; }
    .cycle-center-subtext { font-size:.5rem; letter-spacing:.15em; }
}


/* ========================================================================== */
/* Section: Voice Rx Prescription Experience                                  */
/* ========================================================================== */
.voice-rx-visual-container { display:grid; grid-template-columns:360px 1fr; gap:3rem; align-items:start; max-width:1200px; margin:0 auto; }
@media (max-width:1024px) { .voice-rx-visual-container { grid-template-columns:1fr; gap:2rem; } }

.voice-rx-steps { display:flex; flex-direction:column; gap:1.5rem; }
.presc-step { display:flex; align-items:flex-start; gap:.9rem; padding:.9rem 1.1rem; border:2px solid #dbeafe; background:linear-gradient(145deg,#f0f9ff,#e0f2fe); border-radius:14px; position:relative; box-shadow:0 4px 14px -6px rgba(59,130,246,.25); transition:background .4s, box-shadow .4s, transform .35s; }
.dark .presc-step { background:linear-gradient(145deg,#1e3a5f,#1e293b); border-color:rgba(96,165,250,.3); box-shadow:0 6px 18px -8px rgba(59,130,246,.45); }
.presc-step:hover { transform:translateY(-3px); box-shadow:0 8px 24px -10px rgba(59,130,246,.35); }
.presc-step-icon { flex-shrink:0; width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; letter-spacing:.5px; box-shadow:0 4px 14px -6px rgba(59,130,246,.5); position:relative; }
.presc-step[data-step="2"] .presc-step-icon { background:linear-gradient(135deg,#2563eb,#1d4ed8); }
.presc-step[data-step="3"] .presc-step-icon { background:linear-gradient(135deg,#1d4ed8,#1e40af); }
.presc-step-title { font-size:14.5px; font-weight:700; color:#1e40af; margin-bottom:2px; letter-spacing:.4px; }
.dark .presc-step-title { color:#93c5fd; }
.presc-step-desc { font-size:12.5px; line-height:1.55; color:#475569; }
.dark .presc-step-desc { color:#94a3b8; }

/* Voice Prescription Preview - Fixed Size */
.voice-rx-preview { position:relative; }
.prescription-fade-container { position:relative; margin-bottom:2rem; }
.prescription-fade-top { position:absolute; top:0; left:0; right:0; height:60px; background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0)); z-index:10; pointer-events:none; display:none; }
.dark .prescription-fade-top { background:linear-gradient(180deg, rgba(15,23,42,1), rgba(15,23,42,0)); }
.prescription-fade-bottom { position:absolute; bottom:0; left:0; right:0; height:100px; background:linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0)); z-index:10; pointer-events:none; display:none; }
.dark .prescription-fade-bottom { background:linear-gradient(0deg, rgba(15,23,42,1), rgba(15,23,42,0)); }

.prescription-sheet-large { background:#fdfcfb; border:3px solid #1e40af; border-radius:8px; padding:2rem 2.5rem; box-shadow:0 10px 35px -12px rgba(30,64,175,.25), 0 4px 15px rgba(0,0,0,.1); position:relative; overflow:visible; }
.dark .prescription-sheet-large { background:#1a1f2e; border-color:#3b82f6; box-shadow:0 12px 40px -15px rgba(59,130,246,.4),0 6px 20px rgba(0,0,0,.5); }
.prescription-sheet-large:before { content:""; position:absolute; top:0; left:0; right:0; height:10px; background:linear-gradient(90deg,#1e40af,#3b82f6,#1e40af); pointer-events:none; }

/* Responsive: iPad Pro & Large Tablets (769px - 1024px) */
@media (max-width:1024px) and (min-width:769px) {
    .voice-rx-visual-container { grid-template-columns:300px 1fr; gap:2rem; }
    .prescription-sheet-large { padding:1.8rem 2.2rem; }
}

/* Responsive: iPad & Small Tablets (481px - 768px) */
@media (max-width:768px) and (min-width:481px) {
    .voice-rx-visual-container { grid-template-columns:1fr; gap:1.5rem; }
    .voice-rx-steps { max-width:500px; margin:0 auto; }
    .prescription-sheet-large { padding:1.5rem 2rem; max-width:600px; margin:0 auto; }
}

/* Responsive: Mobile (up to 480px) */
@media (max-width:480px) {
    .voice-rx-visual-container { grid-template-columns:1fr; gap:1.5rem; }
    .prescription-fade-container { max-height:380px; overflow:hidden; }
    .prescription-fade-top { display:block; height:40px; }
    .prescription-fade-bottom { display:block; height:70px; }
    .prescription-sheet-large { padding:1rem 1.2rem; }

    /* Hide detailed doctor info on mobile */
    .doc-header-qualification { display:none !important; }
    .doc-header-reg { display:none !important; }
    .prescription-doc-header .text-right { display:none !important; }
    .doc-header-name { font-size:14px !important; margin-bottom:0 !important; }
    .prescription-doc-header { padding-bottom:.6rem !important; margin-bottom:.8rem !important; }

    /* Simplify patient info on mobile */
    .prescription-patient-info { padding:.6rem .8rem !important; margin-bottom:.8rem !important; }
    .patient-info-row { flex-direction:column !important; gap:.3rem !important; }
    .patient-info-row:last-child { display:none !important; }
    .patient-label { font-size:9.5px !important; }
    .patient-value { font-size:11px !important; }

    /* Hide clinical notes on mobile */
    .prescription-clinical-notes { display:none !important; }
    .prescription-divider-bottom { display:none !important; }

    /* Focus on medications - keep them visible */
    .rx-section { margin:.8rem 0 !important; }
    .rx-symbol { font-size:36px !important; }
    .med-name-indian { font-size:12.5px !important; }
    .strength-indian { font-size:11.5px !important; }
    .med-dosage-indian { font-size:10.5px !important; }
    .med-duration-indian { font-size:10px !important; }
    .med-note-indian { font-size:9.5px !important; }
    .prescription-meds li { margin:0 0 .9rem !important; }

    /* Simplify footer on mobile */
    .prescription-footer-indian { margin-top:.8rem !important; padding-top:.6rem !important; flex-direction:column !important; gap:.6rem !important; }
    .footer-left { display:none !important; }
    .footer-right { text-align:center !important; }
    .signature-block { align-items:center !important; }
    .signature-line { min-width:140px !important; padding-bottom:.2rem !important; }
    .signature-text { font-size:12px !important; }
    .signature-stamp { font-size:9px !important; gap:.4rem !important; }
}

.rx-actions-container { text-align:center; margin-top:1.5rem; }
.rx-btn-text { display:inline; }

.prescription-sheet { background:#fdfcfb; border:3px solid #1e40af; border-radius:8px; padding:1.8rem 2rem; box-shadow:0 8px 30px -10px rgba(30,64,175,.25), 0 2px 10px rgba(0,0,0,.08); position:relative; overflow:hidden; }
.dark .prescription-sheet { background:#1a1f2e; border-color:#3b82f6; box-shadow:0 10px 35px -12px rgba(59,130,246,.4),0 4px 15px rgba(0,0,0,.5); }
.prescription-sheet:before { content:""; position:absolute; top:0; left:0; right:0; height:8px; background:linear-gradient(90deg,#1e40af,#3b82f6,#1e40af); pointer-events:none; }
.prescription-header { display:flex; align-items:center; justify-content:space-between; }
.rx-brand-name { font-size:13px; font-weight:700; letter-spacing:.6px; color:#4c1d95; }
.dark .rx-brand-name { color:#d6bcfa; }
.prescription-patient .label { display:block; font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:#6b7280; }
.dark .prescription-patient .label { color:#94a3b8; }
.prescription-patient .value { display:block; font-weight:600; color:#312e81; font-size:12.5px; }
.dark .prescription-patient .value { color:#ede9fe; }
.prescription-divider { height:1px; background:repeating-linear-gradient(90deg,#e0d9f2, #e0d9f2 8px, transparent 8px, transparent 14px); margin:1rem 0 1.1rem; }
.dark .prescription-divider { background:repeating-linear-gradient(90deg,#3f2b5f,#3f2b5f 8px, transparent 8px, transparent 14px); }
.prescription-meds { list-style:decimal; list-style-position:inside; margin:0; padding:0; counter-reset:rx; }
.prescription-meds li { margin:0 0 .85rem; padding:0; }
.med-row { display:grid; grid-template-columns: minmax(140px,1fr) minmax(140px,1fr) minmax(100px,1fr); gap:.75rem; align-items:start; font-size:12px; }
.med-name { font-weight:600; color:#1e1b4b; }
.dark .med-name { color:#faf5ff; }
.strength { font-weight:600; color:#6d28d9; }
.dark .strength { color:#c4b5fd; }
.med-sig { color:#4c1d95; font-size:11.5px; font-weight:500; }
.dark .med-sig { color:#bda4ff; }
.med-flags { font-size:10.5px; font-weight:600; background:#ede9fe; color:#4c1d95; padding:2px 6px; border-radius:6px; display:inline-block; letter-spacing:.4px; }
.dark .med-flags { background:#2e1065; color:#d6bcfa; }
.prescription-notes { margin:1rem 0 .8rem; font-size:11.5px; line-height:1.55; }
.note-label { font-weight:700; color:#4c1d95; }
.dark .note-label { color:#c4b5fd; }
.note-line { color:#4b5563; margin-bottom:.4rem; }
.dark .note-line { color:#a1a1aa; }
.prescription-footer { display:flex; align-items:center; justify-content:space-between; margin-top:.6rem; padding-top:.75rem; border-top:1px dashed #d9d2eb; }
.dark .prescription-footer { border-top-color:#3f2b5f; }
.doc-avatar { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#7c3aed,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; box-shadow:0 4px 12px -6px rgba(124,58,237,.5); }
.doc-name { font-size:12.5px; font-weight:700; color:#1e1b4b; }
.dark .doc-name { color:#faf5ff; }
.doc-special { font-weight:600; color:#6d28d9; }
.dark .doc-special { color:#c4b5fd; }
.doc-reg { font-size:10.5px; color:#6b7280; }
.dark .doc-reg { color:#94a3b8; }
.digital-sign { font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:#6d28d9; background:#ede9fe; padding:4px 8px; border-radius:6px; box-shadow:0 2px 8px -4px rgba(124,58,237,.35); }
.dark .digital-sign { background:#2e1065; color:#d6bcfa; }
.qr-sim { width:42px; height:42px; border:2px solid #6d28d9; border-radius:10px; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; color:#4c1d95; background:#faf5ff; }
.dark .qr-sim { border-color:#c4b5fd; background:#1e1b4b; color:#d6bcfa; }
.rx-action-btn { background:linear-gradient(135deg,#2563eb,#1e40af); color:#fff; font-size:12px; font-weight:600; padding:.6rem .95rem; border-radius:999px; box-shadow:0 4px 14px -6px rgba(37,99,235,.4); transition:box-shadow .35s, transform .35s; }
.rx-action-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px -10px rgba(37,99,235,.5); }
.rx-action-btn.secondary { background:linear-gradient(135deg,#e0e7ff,#dbeafe); color:#1e40af; box-shadow:0 4px 14px -6px rgba(37,99,235,.25); }
.rx-action-btn.secondary:hover { box-shadow:0 8px 24px -10px rgba(37,99,235,.35); }

/* Dark Mode: Action Buttons */
.dark .rx-action-btn { background:linear-gradient(135deg,#3b82f6,#2563eb); box-shadow:0 4px 14px -6px rgba(59,130,246,.5); }
.dark .rx-action-btn:hover { box-shadow:0 8px 24px -10px rgba(59,130,246,.6); }
.dark .rx-action-btn.secondary { background:linear-gradient(135deg,rgba(30,58,138,.3),rgba(30,64,175,.25)); color:#93c5fd; box-shadow:0 4px 14px -6px rgba(59,130,246,.3); }
.dark .rx-action-btn.secondary:hover { box-shadow:0 8px 24px -10px rgba(59,130,246,.4); }

/* Responsive: Action Buttons - iPad & Tablets */
@media (max-width:768px) and (min-width:481px) {
    .rx-action-btn { font-size:11.5px; padding:.55rem .85rem; }
    .rx-actions-container .flex { justify-content:center; }
}

/* Responsive: Action Buttons - Mobile */
@media (max-width:480px) {
    .rx-action-btn { font-size:11px; padding:.65rem; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .rx-action-btn svg { width:20px; height:20px; margin:0; }
    .rx-btn-text { display:none; }
    .rx-actions-container .flex { flex-direction:row; gap:.8rem !important; justify-content:center; }
    .rx-actions-container .flex button { width:auto; max-width:none; margin:0; }
}

/* Indian Prescription Styles */
.prescription-doc-header { padding-bottom:1rem; border-bottom:2px solid #1e40af; margin-bottom:1.2rem; }
.dark .prescription-doc-header { border-bottom-color:#3b82f6; }
.doc-header-name { font-size:18px; font-weight:700; color:#1e40af; letter-spacing:.3px; margin-bottom:.3rem; }
.dark .doc-header-name { color:#60a5fa; }
.doc-header-qualification { font-size:13px; color:#475569; font-weight:600; margin-bottom:.2rem; }
.dark .doc-header-qualification { color:#94a3b8; }
.doc-header-reg { font-size:11px; color:#64748b; font-weight:500; }
.dark .doc-header-reg { color:#94a3b8; }
.clinic-name { font-size:14px; font-weight:700; color:#1e293b; margin-bottom:.15rem; }
.dark .clinic-name { color:#e2e8f0; }
.clinic-address { font-size:11.5px; color:#475569; margin-bottom:.1rem; }
.dark .clinic-address { color:#94a3b8; }
.clinic-contact { font-size:11.5px; color:#475569; }
.dark .clinic-contact { color:#94a3b8; }

.prescription-divider-top { height:2px; background:#1e40af; margin:1rem 0; opacity:.3; }
.dark .prescription-divider-top { background:#3b82f6; opacity:.4; }

.prescription-patient-info { background:#eff6ff; padding:.9rem 1rem; border-radius:6px; border-left:4px solid #1e40af; margin-bottom:1.2rem; }
.dark .prescription-patient-info { background:rgba(59,130,246,.1); border-left-color:#3b82f6; }
.patient-info-row { display:flex; gap:1.5rem; flex-wrap:wrap; }
.patient-info-item { display:flex; gap:.4rem; align-items:baseline; }
.patient-label { font-size:11.5px; font-weight:600; color:#475569; }
.dark .patient-label { color:#94a3b8; }
.patient-value { font-size:12.5px; font-weight:700; color:#1e293b; }
.dark .patient-value { color:#e2e8f0; }

.rx-section { margin:1.2rem 0; }
.rx-symbol-container { margin-bottom:.8rem; }
.rx-symbol { font-size:42px; font-weight:700; color:#1e40af; display:block; line-height:1; font-family:Georgia, serif; }
.dark .rx-symbol { color:#60a5fa; }

.prescription-meds { list-style:decimal; list-style-position:outside; margin:0; padding:0 0 0 1.8rem; counter-reset:rx; }
.prescription-meds li { margin:0 0 1.1rem; padding:0; }
.med-line { display:block; }
.med-name-indian { font-size:14px; font-weight:700; color:#1e293b; margin-bottom:.3rem; display:block; }
.dark .med-name-indian { color:#e2e8f0; }
.strength-indian { font-weight:700; color:#1e40af; margin-left:.2rem; }
.dark .strength-indian { color:#60a5fa; }
.med-dosage-indian { font-size:12px; color:#475569; margin-bottom:.2rem; display:block; font-weight:500; }
.dark .med-dosage-indian { color:#94a3b8; }
.med-duration-indian { font-size:11.5px; color:#64748b; margin-bottom:.2rem; display:block; }
.dark .med-duration-indian { color:#94a3b8; }
.med-note-indian { font-size:10.5px; font-style:italic; color:#64748b; display:block; }
.dark .med-note-indian { color:#94a3b8; }

.prescription-clinical-notes { margin:1.2rem 0; padding:1rem; background:#fef3c7; border-left:4px solid #f59e0b; border-radius:4px; }
.dark .prescription-clinical-notes { background:rgba(245,158,11,.15); border-left-color:#f59e0b; }
.clinical-note-item { margin-bottom:.5rem; display:block; }
.clinical-note-item:last-child { margin-bottom:0; }
.note-label-indian { font-size:12px; font-weight:700; color:#92400e; display:inline; }
.dark .note-label-indian { color:#fbbf24; }
.note-text-indian { font-size:11.5px; color:#78350f; display:inline; line-height:1.5; }
.dark .note-text-indian { color:#fde68a; }

.prescription-divider-bottom { height:2px; background:#1e40af; margin:1.2rem 0; opacity:.2; }
.dark .prescription-divider-bottom { background:#3b82f6; opacity:.3; }

.prescription-footer-indian { display:flex; align-items:flex-end; justify-content:space-between; margin-top:1.2rem; padding-top:1rem; }
.footer-left { display:flex; flex-direction:column; gap:.4rem; }
.ai-badge { display:flex; align-items:center; gap:.4rem; font-size:10.5px; color:#059669; font-weight:600; }
.dark .ai-badge { color:#34d399; }
.ai-icon { color:#059669; }
.dark .ai-icon { color:#34d399; }
.verification-badge { display:flex; align-items:center; gap:.35rem; font-size:10px; color:#059669; font-weight:600; }
.dark .verification-badge { color:#34d399; }
.verification-badge svg { color:#059669; }
.dark .verification-badge svg { color:#34d399; }

.footer-right { text-align:right; }
.signature-block { display:flex; flex-direction:column; gap:.4rem; align-items:flex-end; }
.signature-line { border-bottom:2px solid #1e293b; padding-bottom:.3rem; min-width:180px; }
.dark .signature-line { border-bottom-color:#e2e8f0; }
.signature-text { font-size:13px; font-weight:700; color:#1e40af; font-family:cursive; display:block; }
.dark .signature-text { color:#60a5fa; }
.signature-stamp { display:flex; gap:.6rem; align-items:center; font-size:10px; color:#64748b; font-weight:600; }
.dark .signature-stamp { color:#94a3b8; }
.stamp-text { text-transform:uppercase; letter-spacing:.5px; }
.stamp-date { font-weight:700; color:#1e40af; }
.dark .stamp-date { color:#60a5fa; }

@media (max-width:640px){
	.med-row { grid-template-columns: 1fr 1fr; }
	.med-flags{ margin-top:4px; }
	.prescription-sheet{ padding:1.2rem 1.2rem 1.4rem; }
	.prescription-footer-indian { flex-direction:column; align-items:flex-start; gap:1rem; }
	.footer-right { text-align:left; }
	.signature-block { align-items:flex-start; }
}

/* ========================================================================== */
/* Section: Operational Efficiency Hub                                         */
/* ========================================================================== */
/* ========================================================================== */
/* Operational Efficiency - Compact Workflow                                 */
/* ========================================================================== */
.efficiency-visual-container { position:relative; min-height:auto; display:flex; align-items:flex-start; justify-content:center; padding:2.25rem; }
.efficiency-flow { position:relative; width:100%; max-width:860px; display:grid; grid-template-columns:minmax(240px, 320px) minmax(0, 1fr); gap:2.75rem; align-items:start; background:linear-gradient(135deg, rgba(6,182,212,.1), rgba(37,99,235,.08)); border-radius:28px; padding:2.4rem; box-shadow:0 22px 55px -30px rgba(15,23,42,.4); }
.dark .efficiency-flow { background:linear-gradient(135deg, rgba(6,182,212,.18), rgba(30,64,175,.22)); box-shadow:0 28px 60px -28px rgba(8,47,73,.72); border:1px solid rgba(148,163,184,.12); }

.flow-core-card { background:rgba(255,255,255,.92); border-radius:22px; padding:1.8rem 1.6rem; border:1px solid rgba(148,163,184,.22); box-shadow:0 18px 42px -28px rgba(14,116,144,.45); }
.dark .flow-core-card { background:rgba(15,23,42,.92); border-color:rgba(148,163,184,.28); box-shadow:0 18px 42px -28px rgba(8,47,73,.65); }
.core-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .95rem; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.75px; text-transform:uppercase; background:rgba(14,165,233,.15); color:#0f766e; border:1px solid rgba(13,148,136,.24); margin-bottom:.8rem; }
.dark .core-pill { background:rgba(13,148,136,.26); color:#5eead4; border-color:rgba(45,212,191,.34); }
.core-title { font-size:20px; font-weight:700; color:#0f172a; letter-spacing:-.01em; margin-bottom:.7rem; }
.dark .core-title { color:#e2e8f0; }
.core-subtext { font-size:13.5px; line-height:1.65; color:#475569; margin-bottom:1.4rem; }
.dark .core-subtext { color:#94a3b8; }
.core-metrics { display:flex; flex-wrap:wrap; gap:1.6rem; }
.core-metric { display:flex; flex-direction:column; gap:.25rem; }
.metric-value { font-size:24px; font-weight:700; color:#0369a1; letter-spacing:-.02em; }
.dark .metric-value { color:#38bdf8; }
.metric-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:#64748b; max-width:120px; }
.dark .metric-label { color:#cbd5f5; }

.flow-steps { position:relative; display:flex; flex-direction:column; gap:1.6rem; padding:.5rem 0; }
.flow-steps::before { content:""; position:absolute; top:1.4rem; bottom:1.4rem; left:20px; width:2px; background:linear-gradient(180deg, rgba(37,99,235,.55), rgba(6,182,212,.2)); border-radius:999px; }
.dark .flow-steps::before { background:linear-gradient(180deg, rgba(59,130,246,.7), rgba(56,189,248,.28)); }

.flow-step { display:flex; gap:1.4rem; position:relative; }
.step-marker { position:relative; width:40px; display:flex; flex-direction:column; align-items:center; gap:.35rem; flex-shrink:0; }
.marker-index { width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; letter-spacing:.55px; color:#0f172a; background:linear-gradient(135deg, rgba(6,182,212,.22), rgba(37,99,235,.26)); border:1px solid rgba(14,165,233,.26); box-shadow:0 12px 24px -16px rgba(14,116,144,.55); }
.dark .marker-index { color:#f8fafc; background:linear-gradient(135deg, rgba(6,182,212,.34), rgba(37,99,235,.4)); border-color:rgba(56,189,248,.44); box-shadow:0 12px 24px -16px rgba(8,47,73,.7); }
.marker-line { flex:1 1 auto; width:2px; background:linear-gradient(180deg, rgba(37,99,235,.55), rgba(6,182,212,.18)); border-radius:999px; }
.dark .marker-line { background:linear-gradient(180deg, rgba(59,130,246,.7), rgba(56,189,248,.26)); }

.step-card { background:#ffffff; border-radius:18px; padding:1.35rem 1.35rem 1.2rem; border:1px solid rgba(226,232,240,.85); box-shadow:0 18px 36px -28px rgba(15,23,42,.38); width:100%; transition:transform .25s ease, box-shadow .25s ease; }
.step-card:hover { transform:translateY(-4px); box-shadow:0 26px 46px -30px rgba(15,23,42,.45); }
.dark .step-card { background:rgba(15,23,42,.94); border-color:rgba(148,163,184,.32); box-shadow:0 18px 36px -28px rgba(8,47,73,.7); }
.dark .step-card:hover { box-shadow:0 28px 52px -30px rgba(8,47,73,.74); }

.flow-step-icon { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(6,182,212,.18), rgba(37,99,235,.16)); color:#0369a1; margin-bottom:.85rem; box-shadow:0 12px 28px -20px rgba(14,116,144,.5); }
.flow-step-icon svg { width:26px; height:26px; }
.dark .flow-step-icon { background:linear-gradient(135deg, rgba(6,182,212,.3), rgba(37,99,235,.28)); color:#bae6fd; box-shadow:0 12px 28px -20px rgba(8,47,73,.7); }

.flow-step-title { font-size:16px; font-weight:700; color:#0f172a; letter-spacing:-.01em; margin-bottom:.45rem; }
.dark .flow-step-title { color:#e2e8f0; }
.flow-step-copy { font-size:13px; line-height:1.6; color:#475569; margin-bottom:.9rem; }
.dark .flow-step-copy { color:#94a3b8; }
.flow-step-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.flow-step-chip { padding:.32rem .65rem; font-size:10.5px; font-weight:600; border-radius:999px; background:rgba(2,132,199,.1); color:#0369a1; border:1px solid rgba(14,165,233,.26); letter-spacing:.2px; }
.dark .flow-step-chip { background:rgba(12,74,110,.36); color:#bae6fd; border-color:rgba(56,189,248,.38); }

@media (max-width:900px) {
    .efficiency-visual-container { padding:2rem 1.5rem; }
    .efficiency-flow { grid-template-columns:1fr; gap:2rem; padding:2rem; }
    .flow-steps::before { left:18px; }
}

@media (max-width:640px) {
    .efficiency-visual-container { padding:1.75rem 1.1rem; }
    .efficiency-flow { padding:1.75rem 1.35rem; border-radius:24px; }
    .flow-core-card { padding:1.6rem 1.4rem; }
    .core-metrics { gap:1.2rem; }
    .metric-value { font-size:22px; }
    .flow-steps { gap:1.4rem; }
    .marker-index { width:36px; height:36px; font-size:13px; border-radius:12px; }
    .flow-step-icon { width:48px; height:48px; border-radius:14px; }
    .flow-step-icon svg { width:24px; height:24px; }
    .flow-step-title { font-size:15px; }
    .flow-step-copy { font-size:12.5px; }
}

@media (max-width:480px) {
    .efficiency-flow { padding:1.6rem 1.1rem; }
    .flow-steps::before { left:16px; }
    .flow-step { gap:1.1rem; }
}

/* ========================================================================== */
/* AUTOMATED WORKFLOW SECTION - Modern Flow Design                           */
/* ========================================================================== */

/* Main Container */
.workflow-flow-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: center;
    padding: 2rem 1rem;
}

/* Workflow Step Cards */
.workflow-step-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 8px 28px -10px rgba(15,23,42,.12);
}
.dark .workflow-step-card {
    background: #1a1f2e;
    border-color: #334155;
    box-shadow: 0 8px 28px -10px rgba(0,0,0,.5);
}

.workflow-step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px -15px rgba(15,23,42,.25);
    border-color: #cbd5e1;
}
.dark .workflow-step-card:hover {
    box-shadow: 0 16px 48px -15px rgba(0,0,0,.6);
    border-color: #475569;
}

/* Featured Card (Step 3) */
.workflow-step-card.featured {
    background: linear-gradient(145deg, #fff, #f0fdf4);
    border: 2px solid #10b981;
    box-shadow: 0 12px 40px -12px rgba(16,185,129,.3);
}
.dark .workflow-step-card.featured {
    background: linear-gradient(145deg, #1a1f2e, rgba(16,185,129,.08));
    border-color: #10b981;
    box-shadow: 0 12px 40px -12px rgba(16,185,129,.4);
}

.workflow-step-card.featured:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px -15px rgba(16,185,129,.4);
}
.dark .workflow-step-card.featured:hover {
    box-shadow: 0 20px 60px -15px rgba(16,185,129,.5);
}

/* Step Badge - Simple Variant */
.workflow-step-badge-simple {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 6px 20px -6px rgba(16,185,129,.5);
    border: 3px solid #fff;
}
.dark .workflow-step-badge-simple {
    border-color: #1a1f2e;
    box-shadow: 0 6px 20px -6px rgba(16,185,129,.6);
}

.workflow-step-badge-simple.teal {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    box-shadow: 0 6px 20px -6px rgba(20,184,166,.5);
}
.dark .workflow-step-badge-simple.teal {
    box-shadow: 0 6px 20px -6px rgba(20,184,166,.6);
}

.workflow-step-badge.gradient {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    box-shadow: 0 6px 20px -6px rgba(16,185,129,.6);
    animation: badgePulse 2s ease-in-out infinite;
}
.dark .workflow-step-badge.gradient {
    box-shadow: 0 6px 20px -6px rgba(16,185,129,.7);
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 6px 20px -6px rgba(16,185,129,.6); }
    50% { box-shadow: 0 8px 28px -8px rgba(16,185,129,.8); }
}

/* Step Icon */
.workflow-step-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px -6px rgba(16,185,129,.4);
}

.workflow-step-icon.emerald {
    background: linear-gradient(135deg, #10b981, #059669);
}
.workflow-step-icon.emerald svg {
    width: 32px;
    height: 32px;
    color: #fff;
    stroke-width: 2.5;
}

.workflow-step-icon.teal {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    box-shadow: 0 6px 20px -6px rgba(20,184,166,.4);
}
.workflow-step-icon.teal svg {
    width: 32px;
    height: 32px;
    color: #fff;
    stroke-width: 2.5;
}

.workflow-step-icon.gradient {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    box-shadow: 0 6px 20px -6px rgba(16,185,129,.5);
}
.workflow-step-icon.gradient svg {
    width: 32px;
    height: 32px;
    color: #fff;
    stroke-width: 2.5;
}

/* Step Title */
.workflow-step-title {
    font-size: 19px;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    margin-bottom: .85rem;
}
.dark .workflow-step-title {
    color: #e2e8f0;
}

.workflow-step-title.gradient {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dark .workflow-step-title.gradient {
    background: linear-gradient(135deg, #34d399, #2dd4bf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Step Description */
.workflow-step-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: #475569;
    text-align: center;
    margin-bottom: 1.25rem;
}
.dark .workflow-step-desc {
    color: #94a3b8;
}

/* Step Tags */
.workflow-step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

.workflow-tag {
    font-size: 11px;
    font-weight: 600;
    padding: .4rem .75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.workflow-tag.emerald {
    background: rgba(16,185,129,.1);
    color: #059669;
    border: 1px solid rgba(16,185,129,.3);
}
.dark .workflow-tag.emerald {
    background: rgba(16,185,129,.15);
    color: #34d399;
    border-color: rgba(16,185,129,.4);
}

.workflow-tag.teal {
    background: rgba(20,184,166,.1);
    color: #0d9488;
    border: 1px solid rgba(20,184,166,.3);
}
.dark .workflow-tag.teal {
    background: rgba(20,184,166,.15);
    color: #2dd4bf;
    border-color: rgba(20,184,166,.4);
}

.workflow-tag.gradient {
    background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(20,184,166,.15));
    color: #059669;
    border: 1px solid rgba(16,185,129,.3);
}
.dark .workflow-tag.gradient {
    background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(20,184,166,.2));
    color: #34d399;
    border-color: rgba(16,185,129,.4);
}

/* Flow Arrows */
.workflow-flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 0 1rem;
}

.workflow-arrow-svg {
    width: 100px;
    height: 60px;
}

.flow-label {
    font-size: 11px;
    font-weight: 600;
    color: #10b981;
    text-transform: uppercase;
    /* Always glass – light theme */
    background: linear-gradient(140deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(203,213,225,.55);
    box-shadow: 0 12px 36px -18px rgba(15,23,42,.18), 0 4px 16px -8px rgba(15,23,42,.12);
}
.dark .flow-label {
    color: #34d399;
    background: rgba(16,185,129,.15);
    border-color: rgba(16,185,129,.35);
}

/* Result Banner */
.workflow-result-banner {
    /* Always glass – dark theme */
    background: linear-gradient(140deg, rgba(15,23,42,.88), rgba(17,28,46,.74));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 16px 48px -24px rgba(0,0,0,.65), 0 4px 20px -10px rgba(15,23,42,.5);
    background: linear-gradient(135deg, #10b981, #14b8a6);
    padding: 3rem 2rem;
    box-shadow: 0 20px 60px -15px rgba(16,185,129,.4);
}
.dark .workflow-result-banner {
    background: linear-gradient(135deg, #059669, #0d9488);
    box-shadow: 0 20px 60px -15px rgba(16,185,129,.5);
}

.result-banner-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,.15), transparent);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.result-banner-glow.bottom {
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(20,184,166,.3), transparent);
}

.result-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.result-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,.3);
}

.result-badge svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.result-badge span {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.result-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: .85rem;
    line-height: 1.3;
}

.result-desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.9);
    max-width: 700px;
    margin: 0 auto;
}

/* Responsive: iPad & Tablets (481px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .workflow-flow-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 600px;
    }

    .workflow-flow-arrow {
        transform: rotate(90deg);
        margin: 1rem 0;
    }

    .flow-label {
        transform: rotate(-90deg);
    }

    .workflow-step-card {
        padding: 1.75rem;
    }

    .workflow-step-icon {
        width: 58px;
        height: 58px;
    }

    .workflow-step-icon svg {
        width: 28px;
        height: 28px;
    }

    .result-title {
        font-size: 26px;
    }

    .result-desc {
        font-size: 14.5px;
    }
}

/* Responsive: iPad (481px - 768px) */
@media (max-width: 768px) and (min-width: 481px) {
    .workflow-flow-container {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        max-width: 540px;
    }

    .workflow-flow-arrow {
        transform: rotate(90deg);
        margin: .75rem 0;
    }

    .flow-label {
        transform: rotate(-90deg);
        font-size: 10px;
    }

    .workflow-step-card {
        padding: 1.5rem;
    }

    .workflow-step-icon {
        width: 54px;
        height: 54px;
        border-radius: 14px;
    }

    .workflow-step-icon svg {
        width: 26px;
        height: 26px;
    }

    .workflow-step-badge {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .workflow-step-title {
        font-size: 17px;
    }

    .workflow-step-desc {
        font-size: 12.5px;
    }

    .workflow-tag {
        font-size: 10.5px;
        padding: .35rem .65rem;
    }

    .workflow-result-banner {
        padding: 2.5rem 1.75rem;
        border-radius: 20px;
    }

    .result-title {
        font-size: 24px;
    }

    .result-desc {
        font-size: 14px;
    }
}

/* Responsive: Mobile (up to 480px) */
@media (max-width: 480px) {
    .workflow-flow-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem .5rem;
    }

    .workflow-flow-arrow {
        transform: rotate(90deg);
        margin: .5rem 0;
    }

    .flow-label {
        transform: rotate(-90deg);
        font-size: 9.5px;
        padding: .25rem .5rem;
    }

    .workflow-arrow-svg {
        width: 80px;
        height: 50px;
    }

    .workflow-step-card {
        padding: 1.3rem;
        border-radius: 16px;
        border-width: 1.5px;
    }

    .workflow-step-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    .workflow-step-icon svg {
        width: 24px;
        height: 24px;
    }

    .workflow-step-badge {
        width: 32px;
        height: 32px;
        font-size: 14px;
        top: -12px;
    }

    .workflow-step-title {
        font-size: 16px;
        margin-bottom: .7rem;
    }

    .workflow-step-desc {
        font-size: 12px;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .workflow-tag {
        font-size: 10px;
        padding: .3rem .55rem;
    }

    .workflow-result-banner {
        padding: 2rem 1.5rem;
        border-radius: 18px;
        margin-top: 2.5rem;
    }

    .result-badge {
        padding: .4rem .8rem;
        margin-bottom: .8rem;
    }

    .result-badge svg {
        width: 18px;
        height: 18px;
    }

    .result-badge span {
        font-size: 12px;
    }

    .result-title {
        font-size: 22px;
        margin-bottom: .75rem;
    }

    .result-desc {
        font-size: 13px;
        line-height: 1.55;
    }
}

/* ========================================================================== */
/* AI THAT FITS YOUR HOSPITAL - Layered Architecture Design                  */
/* ========================================================================== */

/* Main Container */
.hospital-layers-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2rem 1rem;
    min-height: 600px;
}

/* Layer Container */
.layer-container {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

/* Layer Labels */
.layer-label {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.layer-number {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 12px -4px rgba(14,165,233,.5);
}
.dark .layer-number {
    background: linear-gradient(135deg, #38bdf8, #22d3ee);
}

.layer-title {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.dark .layer-title {
    color: #94a3b8;
}

/* Foundation Blocks */
.foundation-blocks {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.system-block {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    transition: all .3s ease;
    cursor: pointer;
    position: relative;
}
.dark .system-block {
    background: #1a1f2e;
    border-color: #334155;
}

.system-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -10px rgba(15,23,42,.2);
}
.dark .system-block:hover {
    box-shadow: 0 12px 32px -10px rgba(0,0,0,.4);
}

.block-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.block-icon svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.system-block[data-color="blue"] .block-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.system-block[data-color="purple"] .block-icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.system-block[data-color="green"] .block-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.system-block[data-color="orange"] .block-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.system-block[data-color="pink"] .block-icon {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.system-block[data-color="cyan"] .block-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.block-name {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
}
.dark .block-name {
    color: #e2e8f0;
}

/* Layer Connector */
.layer-connector {
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .5rem 0;
}

.flow-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(14,165,233,.3), rgba(14,165,233,.6), rgba(14,165,233,.3));
}

.flow-line:nth-child(1) {
    left: 20%;
}

.flow-line:nth-child(2) {
    left: 50%;
}

.flow-line:nth-child(3) {
    left: 80%;
}

.flow-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #0ea5e9;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(14,165,233,.6);
    animation: flowDown 2s ease-in-out infinite;
}

.flow-particle.reverse {
    animation: flowUp 2s ease-in-out infinite;
}

@keyframes flowDown {
    0% { top: 0%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes flowUp {
    0% { bottom: 0%; opacity: 0; }
    50% { opacity: 1; }
    100% { bottom: 100%; opacity: 0; }
}

.flow-particle:nth-child(4) {
    left: 20%;
}

.flow-particle:nth-child(5) {
    left: 50%;
}

.flow-particle:nth-child(6) {
    left: 80%;
}

/* AI Orchestration Card */
.ai-orchestration-card {
    position: relative;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    border-radius: 20px;
    padding: 2rem;
    overflow: hidden;
    box-shadow: 0 20px 60px -15px rgba(14,165,233,.4);
}
.dark .ai-orchestration-card {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 20px 60px -15px rgba(14,165,233,.5);
}

.ai-glow-effect {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,.15), transparent);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.orchestration-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.ai-logo-badge {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 2px solid rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.ai-logo-badge svg {
    width: 32px;
    height: 32px;
    color: #fff;
}

.ai-layer-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.ai-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.ai-feature-pill {
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: .4rem .85rem;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.ai-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 12px rgba(16,185,129,.8);
}

.status-indicator.active {
    animation: statusBlink 2s ease-in-out infinite;
}

@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.9);
}

/* Output Metrics */
.output-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.output-metric {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all .3s ease;
}
.dark .output-metric {
    background: #1a1f2e;
    border-color: #334155;
}

.output-metric:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -10px rgba(16,185,129,.3);
    border-color: #10b981;
}
.dark .output-metric:hover {
    box-shadow: 0 12px 32px -10px rgba(16,185,129,.4);
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon.success {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 20px -6px rgba(16,185,129,.4);
}

.metric-icon svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.metric-info {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.metric-value {
    font-size: 22px;
    font-weight: 700;
    color: #0ea5e9;
    line-height: 1;
}
.dark .metric-value {
    color: #38bdf8;
}

.metric-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.dark .metric-label {
    color: #94a3b8;
}

/* Responsive: iPad & Large Tablets (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .foundation-blocks {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .system-block {
        padding: .9rem .7rem;
    }

    .block-icon {
        width: 44px;
        height: 44px;
    }

    .block-icon svg {
        width: 22px;
        height: 22px;
    }

    .ai-orchestration-card {
        padding: 1.75rem;
    }

    .ai-logo-badge {
        width: 56px;
        height: 56px;
    }

    .ai-logo-badge svg {
        width: 28px;
        height: 28px;
    }

    .ai-layer-title {
        font-size: 18px;
    }

    .output-metrics {
        gap: 1rem;
    }

    .output-metric {
        padding: 1rem;
    }

    .metric-value {
        font-size: 20px;
    }
}

/* Responsive: iPad (481px - 768px) */
@media (max-width: 768px) and (min-width: 481px) {
    .hospital-layers-visual {
        padding: 1.5rem .75rem;
    }

    .foundation-blocks {
        grid-template-columns: repeat(3, 1fr);
        gap: .9rem;
    }

    .system-block {
        padding: .85rem .65rem;
    }

    .block-icon {
        width: 42px;
        height: 42px;
    }

    .block-icon svg {
        width: 20px;
        height: 20px;
    }

    .block-name {
        font-size: 11px;
    }

    .layer-connector {
        height: 40px;
    }

    .ai-orchestration-card {
        padding: 1.5rem;
        border-radius: 18px;
    }

    .ai-logo-badge {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .ai-logo-badge svg {
        width: 26px;
        height: 26px;
    }

    .ai-layer-title {
        font-size: 17px;
    }

    .ai-feature-pill {
        font-size: 10.5px;
        padding: .35rem .75rem;
    }

    .status-label {
        font-size: 11px;
    }

    .output-metrics {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .output-metric {
        padding: 1rem;
    }

    .metric-icon {
        width: 44px;
        height: 44px;
    }

    .metric-icon svg {
        width: 22px;
        height: 22px;
    }

    .metric-value {
        font-size: 18px;
    }

    .metric-label {
        font-size: 10.5px;
    }
}

/* Responsive: Mobile (up to 480px) */
@media (max-width: 480px) {
    .hospital-layers-visual {
        padding: 1rem .5rem;
        min-height: auto;
    }

    .layer-label {
        gap: .6rem;
        margin-bottom: 1rem;
    }

    .layer-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .layer-title {
        font-size: 12px;
    }

    .foundation-blocks {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }

    .system-block {
        padding: .75rem .55rem;
        border-radius: 12px;
        border-width: 1.5px;
    }

    .block-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .block-icon svg {
        width: 18px;
        height: 18px;
    }

    .block-name {
        font-size: 10.5px;
    }

    .layer-connector {
        height: 35px;
        margin: .25rem 0;
    }

    .flow-particle {
        width: 6px;
        height: 6px;
    }

    .ai-orchestration-card {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .ai-logo-badge {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        margin-bottom: .85rem;
    }

    .ai-logo-badge svg {
        width: 24px;
        height: 24px;
    }

    .ai-layer-title {
        font-size: 16px;
        margin-bottom: .85rem;
    }

    .ai-features {
        gap: .5rem;
        margin-bottom: 1rem;
    }

    .ai-feature-pill {
        font-size: 10px;
        padding: .3rem .65rem;
    }

    .status-indicator {
        width: 8px;
        height: 8px;
    }

    .status-label {
        font-size: 10px;
    }

    .output-metrics {
        grid-template-columns: 1fr;
        gap: .85rem;
    }

    .output-metric {
        padding: .9rem;
        border-radius: 14px;
        border-width: 1.5px;
    }

    .metric-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .metric-icon svg {
        width: 20px;
        height: 20px;
    }

    .metric-value {
        font-size: 16px;
    }

    .metric-label {
        font-size: 10px;
    }
}


/* ========================================================================== */
/* Section: Patient Trust & Social Proof                                     */
/* ========================================================================== */

.patient-journey-band {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(236,253,245,.92));
	border: 1px solid rgba(110, 231, 183, .35);
	box-shadow: 0 18px 48px -24px rgba(16,185,129,.35);
}
.dark .patient-journey-band {
	background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(6,78,59,.85));
	border-color: rgba(45,212,191,.35);
	box-shadow: 0 28px 60px -28px rgba(6,78,59,.65);
}
.journey-step {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: .5rem .35rem;
}
.journey-icon {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: rgba(16,185,129,.12);
	border: 1px solid rgba(56,189,248,.25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.journey-icon svg {
	color: #0f766e;
}
.dark .journey-icon {
	background: rgba(56,189,248,.18);
	border-color: rgba(45,212,191,.4);
}
.dark .journey-icon svg {
	color: #5eead4;
}
.journey-label {
	font-size: .92rem;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: .15rem;
}
.dark .journey-label {
	color: #e2e8f0;
}
.journey-desc {
	font-size: .78rem;
	line-height: 1.5;
	color: #475569;
	margin: 0;
}
.dark .journey-desc {
	color: #cbd5f5;
}
.journey-highlight {
	color: #0f766e;
	font-weight: 600;
}
.dark .journey-highlight {
	color: #34d399;
}

.testimonial-card.spotlight {
	padding: 1.75rem;
	border-radius: 20px;
}
.testimonial-quote {
	font-size: .92rem;
	line-height: 1.55;
	color: #1f2937;
	font-weight: 500;
	font-style: italic;
}
.dark .testimonial-quote {
	color: #e2e8f0;
}
.testimonial-tags {
	margin-top: 1.1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}
.testimonial-tags span {
	display: inline-flex;
	align-items: center;
	font-size: .7rem;
	font-weight: 600;
	padding: .35rem .65rem;
	border-radius: 9999px;
	background: rgba(236,72,153,.12);
	color: #be185d;
}
.dark .testimonial-tags span {
	background: rgba(244,114,182,.24);
	color: #f9a8d4;
}

.metric-card {
	background: linear-gradient(140deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
	border-radius: 22px;
	border: 1px solid rgba(148,163,184,.25);
	box-shadow: 0 18px 44px -20px rgba(15,23,42,.3);
	padding: 1.65rem 1.75rem;
}
.dark .metric-card {
	background: linear-gradient(140deg, rgba(17,24,39,.94), rgba(15,23,42,.88));
	border-color: rgba(148,163,184,.35);
	box-shadow: 0 22px 48px -22px rgba(15,23,42,.7);
}
.metric-card-header {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 1.25rem;
}
.metric-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
	padding: .45rem .95rem;
	border-radius: 9999px;
	background: rgba(59,130,246,.14);
	color: #1e3a8a;
}
.dark .metric-pill {
	background: rgba(59,130,246,.24);
	color: #bfdbfe;
}
.metric-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
}
.metric-item {
	padding: 1rem 1rem .9rem;
	border-radius: 18px;
	background: rgba(59,130,246,.08);
	border: 1px solid rgba(148,163,184,.25);
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.dark .metric-item {
	background: rgba(59,130,246,.16);
	border-color: rgba(59,130,246,.28);
}
.metric-value {
	font-size: 1.8rem;
	font-weight: 700;
	color: #1d4ed8;
	line-height: 1.1;
}
.dark .metric-value {
	color: #60a5fa;
}
.metric-sub {
	font-size: .85rem;
	font-weight: 600;
	color: #1f2937;
}
.dark .metric-sub {
	color: #e2e8f0;
}
.metric-caption {
	font-size: .7rem;
	color: #475569;
	margin: 0;
}
.dark .metric-caption {
	color: #cbd5f5;
}

.experience-feature {
	position: relative;
	border-radius: 24px;
	border: 1px solid rgba(59,130,246,.25);
	background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(236,243,254,.92));
	box-shadow: 0 24px 56px -24px rgba(59,130,246,.35);
	padding: 1.9rem 2rem 2.1rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.dark .experience-feature {
	background: linear-gradient(150deg, rgba(17,24,39,.95), rgba(30,41,59,.9));
	border-color: rgba(96,165,250,.35);
	box-shadow: 0 28px 60px -24px rgba(15,23,42,.85);
}
.feature-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	padding: .45rem;
	border-radius: 9999px;
	background: rgba(59,130,246,.06);
}
.dark .feature-pill-group {
	background: rgba(59,130,246,.18);
}
.feature-pill {
	padding: .45rem .95rem;
	border-radius: 9999px;
	font-size: .78rem;
	font-weight: 600;
	color: #1d4ed8;
	background: transparent;
	border: 1px solid transparent;
	transition: all .3s ease;
	cursor: pointer;
}
.feature-pill.is-active {
	background: linear-gradient(135deg, #2563eb, #7c3aed);
	color: #fff;
	border-color: rgba(79,70,229,.8);
	box-shadow: 0 12px 26px -12px rgba(79,70,229,.6);
}
.feature-pill:focus-visible {
	outline: 2px solid rgba(79,70,229,.7);
	outline-offset: 2px;
}
.dark .feature-pill {
	color: #bfdbfe;
}
.feature-panels {
	position: relative;
}
.feature-panel {
	display: none;
	flex-direction: column;
	gap: .75rem;
	animation: fadeInFeature .35s ease forwards;
}
.feature-panel.is-active {
	display: flex;
}
.feature-panel[aria-hidden="true"] {
	display: none !important;
}
.feature-panel-header {
	display: flex;
	align-items: center;
	gap: .85rem;
}
.feature-title {
	font-size: 1rem;
	font-weight: 600;
	color: #0f172a;
	margin: 0;
}
.dark .feature-title {
	color: #f8fafc;
}
.feature-summary {
	font-size: .82rem;
	line-height: 1.55;
	color: #475569;
	margin: 0;
}
.dark .feature-summary {
	color: #cbd5f5;
}
.feature-points {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .45rem;
}
.feature-points li {
	position: relative;
	padding-left: 1.1rem;
	font-size: .75rem;
	font-weight: 500;
	color: #1f2937;
}
.feature-points li::before {
	content: '';
	position: absolute;
	left: .3rem;
	top: .45rem;
	width: .35rem;
	height: .35rem;
	border-radius: 9999px;
	background: #2563eb;
	box-shadow: 0 0 0 2px rgba(37,99,235,.18);
}
.dark .feature-points li {
	color: #e2e8f0;
}
.dark .feature-points li::before {
	background: #60a5fa;
	box-shadow: 0 0 0 2px rgba(96,165,250,.25);
}
.feature-stat {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .4rem .75rem;
	border-radius: 9999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	background: rgba(59,130,246,.12);
	color: #1e3a8a;
	margin-top: .25rem;
}
.feature-stat::before {
	content: '↗';
	font-size: .75rem;
}
.dark .feature-stat {
	background: rgba(59,130,246,.22);
	color: #bfdbfe;
}

.experience-cta {
	padding: .85rem 1.85rem;
	border-radius: 9999px;
	font-size: .85rem;
	font-weight: 600;
	background: linear-gradient(135deg, #0891b2, #2563eb);
	color: #fff;
	box-shadow: 0 18px 34px -16px rgba(14,165,233,.55);
	transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.experience-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 24px 44px -18px rgba(37,99,235,.5);
	filter: brightness(1.02);
}
.experience-cta:focus-visible {
	outline: 2px solid rgba(59,130,246,.8);
	outline-offset: 3px;
}
.experience-cta svg {
	transition: transform .3s ease;
}
.experience-cta.group:hover svg {
	transform: translateX(4px);
}

@keyframes fadeInFeature {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 768px) {
	.patient-journey-band {
		padding: 1.2rem;
		margin-bottom: 1.25rem;
	}
	.metric-card {
		padding: 1.45rem 1.5rem;
	}
	.experience-feature {
		padding: 1.6rem 1.55rem 1.8rem;
	}
	.feature-pill-group {
		gap: .45rem;
	}
}

@media (max-width: 480px) {
	.journey-step {
		align-items: center;
	}
	.journey-desc {
		font-size: .74rem;
	}
	.metric-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.feature-pill {
		flex: 1 1 calc(50% - .4rem);
		text-align: center;
	}
	.feature-points li {
		font-size: .72rem;
	}
	.experience-cta {
		width: 100%;
		justify-content: center;
	}
}

.icon-pro.whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); }
.icon-pro.personalized { background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%); }
.icon-pro.automated { background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%); }

.logo-marquee-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding: 1.5rem 0;
}
.logo-marquee {
	display: flex;
	width: max-content;
	animation: marquee-scroll 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.logo-marquee { animation: none; justify-content: center; flex-wrap: wrap; }
}
@keyframes marquee-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.logo-marquee-track {
	display: flex;
	gap: 3rem;
	align-items: center;
}
.logo-item {
	flex-shrink: 0;
	width: 140px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: grayscale(1) opacity(0.5);
	transition: all 0.3s ease;
}
.logo-item:hover {
	filter: grayscale(0) opacity(1);
	transform: scale(1.1);
}
.logo-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.partners-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .partners-row {
        flex-wrap: nowrap;
        gap: 3rem;
    }
}

.doctor-testimonial-card {
	background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(249,250,251,.9) 100%);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(209,213,219,.3);
	border-radius: 20px;
	padding: 1.75rem;
	box-shadow: 0 8px 32px -4px rgba(0,0,0,.08);
	transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.doctor-testimonial-card:hover {
	box-shadow: 0 16px 48px -4px rgba(0,0,0,.15);
	transform: translateY(-6px);
}
.dark .doctor-testimonial-card {
	background: linear-gradient(135deg, rgba(31,41,55,.9) 0%, rgba(17,24,39,.85) 100%);
	border-color: rgba(75,85,99,.4);
	box-shadow: 0 8px 32px -4px rgba(0,0,0,.25);
}
.dark .doctor-testimonial-card:hover {
	box-shadow: 0 16px 48px -4px rgba(0,0,0,.4);
}

/* Tech credibility partner badges */
.partner-badge {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	background: rgba(255,255,255,.8);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(209,213,219,.4);
	border-radius: 12px;
	transition: all 0.3s ease;
}
.partner-badge:hover {
	box-shadow: 0 8px 24px -4px rgba(0,0,0,.12);
	transform: translateY(-3px);
}
.dark .partner-badge {
	background: rgba(31,41,55,.8);
	border-color: rgba(75,85,99,.5);
}
.partner-badge-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: linear-gradient(135deg, #76B900 0%, #5A8C00 100%);
	color: white;
}
.partner-badge-icon.aws { background: linear-gradient(135deg, #FF9900 0%, #EC7211 100%); }
.partner-badge-icon.microsoft { background: linear-gradient(135deg, #00A4EF 0%, #0078D4 100%); }
.partner-badge-icon.google { background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 75%, #EA4335 100%); }

/* ========================================================================== */
/* Section: Structural Utilities & Decorative Elements                        */
/* ========================================================================== */
.section-blend{position:relative}
.section-blend::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;z-index:1;-webkit-backdrop-filter:blur(12px) saturate(110%);backdrop-filter:blur(12px) saturate(110%);mask-image:linear-gradient(to bottom,transparent 0%,#000 32%,#000 82%,transparent 100%);opacity:.18}
.section-blend::before{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;z-index:1;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.08) 50%,rgba(255,255,255,0));opacity:.25}
.dark .section-blend::after{opacity:.35}
.dark .section-blend::before{background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.08) 50%,rgba(0,0,0,0));opacity:.6}
@media (max-width:640px){.section-blend::after,.section-blend::before{height:48px}.section-blend::after{opacity:.3}.section-blend::before{opacity:.5}}

.section-blend-top{position:relative}
.section-blend-top::after{content:"";position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;z-index:1;-webkit-backdrop-filter:blur(10px) saturate(110%);backdrop-filter:blur(10px) saturate(110%);mask-image:linear-gradient(to bottom,transparent 0%,#000 25%,#000 72%,transparent 100%);opacity:.16}
.section-blend-top::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;z-index:1;background:linear-gradient(to top,rgba(255,255,255,0),rgba(255,255,255,.06) 50%,rgba(255,255,255,0));opacity:.28}
.dark .section-blend-top::after{opacity:.28}
.dark .section-blend-top::before{background:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,.06) 50%,rgba(0,0,0,0));opacity:.55}
@media (max-width:640px){.section-blend-top::after,.section-blend-top::before{height:44px}}

.section-blend::before,.section-blend::after,.section-blend-top::before,.section-blend-top::after{content:none !important;display:none !important}

/* Reveal animations */
[data-reveal]{--rx:0;--ry:22px;--rs:.985;--rb:0px;--reveal-delay:0ms;opacity:0;transform:translate3d(var(--rx),var(--ry),0) scale(var(--rs));filter:blur(var(--rb));will-change:opacity,transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:opacity .75s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay),transform .9s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay),filter .9s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay)}
[data-reveal].in{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);will-change:auto}
[data-reveal="fade"]{--ry:0}
[data-reveal="fade-left"]{--rx:-28px;--ry:0}
[data-reveal="fade-right"]{--rx:28px;--ry:0}
[data-reveal="scale"]{--ry:0;--rs:.92}
[data-reveal="blur-up"]{--rb:8px;--ry:24px}
[data-delay="1"]{--reveal-delay:100ms}[data-delay="2"]{--reveal-delay:200ms}[data-delay="3"]{--reveal-delay:300ms}[data-delay="4"]{--reveal-delay:400ms}
[data-reveal-stagger]{--stagger:80ms}
@media (max-width:640px){[data-reveal]{--ry:10px;transition:opacity .45s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay),transform .55s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay)}[data-reveal="fade-left"]{--rx:-16px}[data-reveal="fade-right"]{--rx:16px}[data-reveal="blur-up"]{--rb:2px;--ry:10px}}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}}

.card-hover{transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1),box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1),background .3s cubic-bezier(0.4, 0, 0.2, 1);will-change:transform}
.card-hover:hover{transform:translateY(-6px) translateZ(0);box-shadow:0 16px 40px -10px rgba(0,0,0,.18)}
@media (max-width:768px){.card-hover:hover{transform:translateY(-4px) translateZ(0);box-shadow:0 12px 32px -8px rgba(0,0,0,.15)}}

.section-title{font-family:Manrope,Inter,sans-serif;letter-spacing:-.01em}
.font-heading-unique{font-family:'Space Grotesk',Manrope,Inter,sans-serif;letter-spacing:-.02em;font-weight:700;}
.font-heading-unique .text-gradient-animated,.font-heading-unique .text-gradient,.font-heading-unique .heading-accent{font-weight:700}
.section-subtitle{letter-spacing:.01em}
.body-small{font-size:13px;line-height:1.3}
.glass{background:linear-gradient(140deg,rgba(255,255,255,.78),rgba(255,255,255,.55));backdrop-filter:blur(10px)}
.dark .glass{background:var(--glass-dark);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(148,163,184,0.1);}
.grid-bg{position:relative}
.grid-bg:before{content:none !important}
.dark .grid-bg:before{content:none !important}
.gradient-animated{background:var(--grad-accent);background-size:300% 100%;animation:gradientMove 8s ease infinite}

.shadow-3xl{box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);}
.dark .shadow-3xl{box-shadow:0 32px 64px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(96, 165, 250, 0.15), 0 8px 20px -6px rgba(59, 130, 246, 0.2);}

.svg-render-optimized{shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.svg-shape-effects{
    shape-rendering:geometricPrecision;
    text-rendering:geometricPrecision;
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    border-radius:0;
    filter:none;
    transition:none;
    transform-style:flat;
    perspective:none;
}
.dark .svg-shape-effects{
    filter:none;
}
.group:hover .svg-shape-effects{
    transform:none;
    filter:none;
}
.dark .group:hover .svg-shape-effects{
    filter:none;
}
.hero-visual .group:hover .svg-render-optimized{filter:none;}
.dark .hero-visual .group:hover .svg-render-optimized{filter:none;}

#top .hero-visual{
	min-height:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	padding-inline:clamp(0rem,2vw,1.5rem);
	margin-bottom:0;
}
@media (min-width:1024px){
	#top .hero-visual{justify-content:flex-end;}
}
#top .hero-visual > *{
	width:100%;
	max-width:100%;
}
#top .hero-visual img{
	display:block;
	width:auto;
	height:auto;
	max-width:min(600px, 100%);
	object-fit:contain;
	position:relative;
	z-index:1;
	margin:0 auto;
}

/* Responsive image sizing */
@media (max-width:480px){
	#top .hero-visual img{
		max-width:min(100%, 600px);
	}
}
@media (min-width:481px) and (max-width:768px){
	#top .hero-visual img{
		max-width:min(500px, 100%);
	}
}
@media (min-width:769px) and (max-width:1024px){
	#top .hero-visual img{
		max-width:min(550px, 100%);
	}
}
@media (min-width:1025px) and (max-width:1440px){
	#top .hero-visual img{
		max-width:min(600px, 100%);
	}
}
@media (min-width:1441px){
	#top .hero-visual img{
		max-width:min(650px, 100%);
	}
}
#top{
	position:relative;
	overflow:hidden;
	background:
		radial-gradient(circle at 18% 12%,rgba(224,243,255,.88) 0%,rgba(255,255,255,0) 60%),
		linear-gradient(180deg,rgba(244,249,255,0.98) 0%,rgba(255,255,255,0.96) 56%,rgba(236,244,255,0.99) 100%);
	min-height:clamp(540px,85vh,720px);
	margin-top:calc(-1 * max(var(--hero-overlap),var(--mobile-header-offset,0px)));
	padding-top:calc(max(var(--hero-overlap),var(--mobile-header-offset,0px)) + clamp(0.5rem,4vw,0.35rem));
	padding-bottom:clamp(1.5rem,3vw,2.5rem);
	display:flex;
	align-items:center;
}
#top > .container{
	min-height:inherit;
	display:flex;
	align-items:center;
}
#top > .container > .grid{
	min-height:inherit;
	display:flex;
	align-items:center;
}
#top > .container > .grid > *{
	height:100%;
}
@media (max-width:1024px){
	#top{
		min-height:clamp(500px,88vh,680px);
		padding-bottom:clamp(1.25rem,4vw,2rem);
	}
}
@media (max-width:768px){
	#top{
		min-height:clamp(480px,92vh,640px);
		padding-top:calc(max(var(--hero-overlap),var(--mobile-header-offset,0px)) + clamp(1rem,5vw,2rem));
		padding-bottom:clamp(1rem,4vw,1.5rem);
	}
	#top > .container,
	#top > .container > .grid{
		flex-direction:column;
		align-items:stretch;
	}
	#top > .container > .grid > *{
		height:auto;
		width:100%;
	}
}
@media (max-width:480px){
	#top{
		min-height:clamp(420px,85vh,580px);
		padding-bottom:clamp(0.75rem,3vw,1.25rem);
	}
}

/* Enhanced Responsive Breakpoints for All Devices */

/* Small Mobile (320px - 375px) */
@media (min-width:320px) and (max-width:375px){
	#top{
		min-height:clamp(400px,90vh,550px);
		padding-top:calc(max(var(--hero-overlap),var(--mobile-header-offset,0px)) + 1rem);
		padding-bottom:0.75rem;
	}
	#top .hero-visual{
		padding-inline:0;
		margin-top:1rem;
	}
}

/* Medium Mobile (376px - 480px) */
@media (min-width:376px) and (max-width:480px){
	#top{
		padding-bottom:1rem;
	}
	#top .hero-visual{
		margin-top:1.25rem;
	}
}

/* Large Mobile / Small Tablets (481px - 640px) */
@media (min-width:481px) and (max-width:640px){
	#top{
		min-height:clamp(460px,88vh,620px);
		padding-bottom:1.25rem;
	}
}

/* Tablets / iPad 10" (641px - 834px) */
@media (min-width:641px) and (max-width:834px){
	#top{
		min-height:clamp(500px,85vh,660px);
		padding-bottom:1.5rem;
	}
	#top .hero-visual{
		padding-inline:clamp(1rem,3vw,2rem);
	}
}

/* iPad 11" (835px - 1024px) */
@media (min-width:835px) and (max-width:1024px){
	#top{
		min-height:clamp(520px,82vh,680px);
		padding-bottom:1.75rem;
	}
}

/* Small Laptops / iPad 13" (1025px - 1280px) */
@media (min-width:1025px) and (max-width:1280px){
	#top{
		min-height:clamp(540px,80vh,700px);
		padding-bottom:2rem;
	}
	#top .hero-visual{
		max-width:90%;
	}
}

/* 13-14" Laptops (1281px - 1440px) */
@media (min-width:1281px) and (max-width:1440px){
	#top{
		min-height:clamp(560px,78vh,720px);
		padding-bottom:2.25rem;
	}
	#top .hero-visual{
		max-width:85%;
	}
}

/* 15.6" Laptops (1441px - 1680px) */
@media (min-width:1441px) and (max-width:1680px){
	#top{
		min-height:clamp(580px,75vh,740px);
		padding-bottom:2.5rem;
	}
}

/* 16"+ Laptops and larger displays (1681px+) */
@media (min-width:1681px){
	#top{
		min-height:clamp(600px,72vh,760px);
		padding-bottom:2.5rem;
	}
	#top .hero-visual{
		max-width:80%;
	}
}

#top::before{
	content:"";
	position:absolute;
	inset:-18% -12% -14% -12%;
	background:
		radial-gradient(closest-side at 16% 24%,rgba(59,130,246,.26),transparent 70%),
		radial-gradient(closest-side at 84% 18%,rgba(6,182,212,.28),transparent 72%),
		radial-gradient(closest-side at 58% 86%,rgba(16,185,129,.22),transparent 74%);
	pointer-events:none;
	z-index:-2;
	opacity:.85;
}
#top::after{
	content:"";
	position:absolute;
	inset:-28% -40% 28% -40%;
	background:linear-gradient(120deg,rgba(244,249,255,.72) 10%,rgba(191,219,254,.42) 45%,rgba(59,130,246,.18) 68%,rgba(255,255,255,0) 82%);
	filter:blur(48px);
	opacity:.8;
	pointer-events:none;
	z-index:-3;
}
.dark #top{
	background:
		radial-gradient(circle at 16% 12%,rgba(59,130,246,.55) 0%,rgba(30,64,175,.25) 35%,rgba(8,15,24,0) 65%),
		radial-gradient(circle at 85% 18%,rgba(14,165,233,.45) 0%,rgba(6,182,212,.20) 40%,rgba(8,15,24,0) 70%),
		linear-gradient(180deg,#1e3a8a 0%,#1e293b 45%,#0f172a 100%);
}
.dark #top::before{
	background:
		radial-gradient(closest-side at 18% 24%,rgba(96,165,250,.52),transparent 68%),
		radial-gradient(closest-side at 82% 20%,rgba(34,211,238,.48),transparent 70%),
		radial-gradient(closest-side at 60% 82%,rgba(45,212,191,.42),transparent 75%);
	opacity:.88;
}
.dark #top::after{
	background:linear-gradient(120deg,rgba(20,31,55,.9) 12%,rgba(30,64,175,.45) 46%,rgba(14,116,144,.38) 68%,rgba(6,11,19,.95) 82%);
	opacity:.8;
	filter:blur(60px);
}
#top .hero-badges{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;padding:0 1rem;z-index:5}
#top .hero-badge{font-size:13px;letter-spacing:.2px;padding:.45rem .85rem;border-radius:9999px;background:rgba(255,255,255,.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(148,163,184,.25);color:#334155;font-weight:500;line-height:1;box-shadow:none;display:inline-flex;align-items:center}
.dark #top .hero-badge{background:rgba(15,23,42,.6);color:#cbd5e1;border-color:#334155}
#top .hero-badge svg{width:12px;height:12px;margin-right:4px;opacity:.7}

.nav-cta{
	padding:.5rem .95rem;
	min-height:0;
	font-size:.8rem;
	line-height:1.2;
	display:flex;
	align-items:center;
}
.nav-cta,
.nav-cta:hover,
.nav-cta:active{transform:none;}
.nav-cta .btn-gradient-border{border-radius:.9rem;}
.nav-cta .btn-content{
	padding:.55rem 1.1rem;
	border-radius:.85rem;
	background:rgba(255,255,255,.75);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	display:flex;
	align-items:center;
	transition:background .3s ease;
}
.nav-cta .btn-inner{gap:.45rem;}
.nav-cta .btn-icon{width:1.1rem;height:1.1rem;}
.nav-cta .btn-text{font-weight:600;font-size:.85rem;color:#1e40af;}
.nav-cta:hover .btn-content{background:rgba(255,255,255,.85);}
.dark .nav-cta{background:transparent;}
.dark .nav-cta .btn-content{background:rgba(15,23,42,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.dark .nav-cta .btn-text{color:black;}
.dark .nav-cta:hover .btn-content{background:rgba(15,23,42,.85);}
.dark .nav-cta .btn-gradient-border{opacity:.6;}
.nav-cta:hover .btn-text,
.nav-cta:hover .btn-icon{transform:none;color:inherit;}
.nav-cta:hover .btn-gradient-border{opacity:.85;}

.mobile-nav-link{
	display:block;
	padding:.65rem .85rem;
	border-radius:.9rem;
	font-size:.95rem;
	font-weight:500;
	transition:background .2s ease,color .2s ease;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible{
	background:rgba(148,163,184,.14);
	color:#0f172a;
	outline:none;
}
.dark .mobile-nav-link:hover,
.dark .mobile-nav-link:focus-visible{
	background:rgba(59,130,246,.18);
	color:#f8fafc;
}
.hero-visual img,
.solution-visual-hero img,
.prescription-image-wrapper .prescription-image{
	background:transparent;
	border-radius:0;
	filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.08))
	        drop-shadow(0 8px 15px rgba(0, 0, 0, 0.05))
	        drop-shadow(0 3px 6px rgba(0, 0, 0, 0.04));
	backdrop-filter:none;
	-webkit-backdrop-filter:none;
}
.hero-visual img{
	border-radius:0;
	mix-blend-mode:normal;
	background:transparent;
	border:none;
}
.dark .hero-visual img,
.dark .solution-visual-hero img,
.dark .prescription-image-wrapper .prescription-image{
	background:transparent;
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2))
	        drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15))
	        drop-shadow(0 5px 10px rgba(0, 0, 0, 0.12));
	border-radius:0;
}
.dark .hero-visual img{
	mix-blend-mode:normal;
	opacity:1;
	border:none;
}

.hero-visual-frame{
    position:relative;
    overflow:visible;
    isolation:auto;
    background:transparent;
    border:none;
    box-shadow:none;
}
.hero-visual-frame::before{
    content:none;
}
.hero-visual-frame::after{
    content:none;
}
.dark .hero-visual-frame::before{
    content:none;
}
.dark .hero-visual-frame::after{
    content:none;
}

.hero-aurora{
    display:none;
}
.hero-aurora--primary{
    display:none;
}
.hero-aurora--secondary{
    display:none;
}
.dark .hero-aurora--primary{
    display:none;
}
.dark .hero-aurora--secondary{
    display:none;
}

.hero-grid{
    display:none;
}
.dark .hero-grid{
    display:none;
}

.hero-device{
    position:relative;
    z-index:1;
    padding:0;
    border-radius:0;
    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    overflow:visible;
    margin:0 auto;
    max-width:100%;
    transition:none;
}
.hero-device::before{
    content:none;
}
.hero-device::after{
    content:none;
}
.dark .hero-device{
    background:transparent;
    border:none;
    box-shadow:none;
}
.dark .hero-device::before{
    content:none;
}
.dark .hero-device::after{
    content:none;
}

.hero-visual-floor{
    position:absolute;
    bottom:0;
    left:clamp(6%,9vw,12%);
    right:clamp(6%,9vw,12%);
    height:clamp(60px,12vw,120px);
    background:radial-gradient(ellipse at center,rgba(59,130,246,.32) 0%,rgba(14,165,233,.26) 42%,rgba(45,212,191,.22) 58%,transparent 76%);
    filter:blur(clamp(20px,4vw,32px));
    opacity:.68;
    z-index:0;
    pointer-events:none;
}
.dark .hero-visual-floor{
    background:radial-gradient(ellipse at center,rgba(96,165,250,.46) 0%,rgba(14,165,233,.34) 46%,rgba(45,212,191,.3) 64%,transparent 80%);
    opacity:.6;
}

/* Responsive adjustments for hero-visual-floor */
@media (max-width:480px){
    .hero-visual-floor{
        height:clamp(40px,10vw,60px);
        filter:blur(16px);
        left:8%;
        right:8%;
    }
}
@media (min-width:481px) and (max-width:768px){
    .hero-visual-floor{
        height:clamp(50px,11vw,80px);
        filter:blur(20px);
    }
}
@media (min-width:1441px){
    .hero-visual-floor{
        height:100px;
        filter:blur(28px);
    }
}

.hero-visual .hero-visual-image{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    border-radius:0;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.08))
            drop-shadow(0 8px 15px rgba(0, 0, 0, 0.05))
            drop-shadow(0 3px 6px rgba(0, 0, 0, 0.04));
    background:transparent;
    border:none;
    z-index:2;
    transition:filter 0.3s ease;
}
.hero-visual .hero-visual-image::before,
.hero-visual .hero-visual-image::after{
    content:none;
}
.hero-visual .hero-visual-image:hover{
    transform:none;
    filter: drop-shadow(0 18px 35px rgba(0, 0, 0, 0.1))
            drop-shadow(0 10px 18px rgba(0, 0, 0, 0.07))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
}
.dark .hero-visual .hero-visual-image{
    background:transparent;
    border:none;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2))
            drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15))
            drop-shadow(0 5px 10px rgba(0, 0, 0, 0.12));
}
.dark .hero-visual .hero-visual-image:hover{
    filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.25))
            drop-shadow(0 12px 25px rgba(0, 0, 0, 0.18))
            drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}

.hero-stat{
    display:none;
}
.hero-stat__value{
    display:none;
}
.hero-stat__label{
    display:none;
}
.hero-stat__badge{
    display:none;
}
.hero-stat__meta{
    display:none;
}
.hero-stat--top{
    display:none;
}
.hero-stat--bottom{
    display:none;
}
.dark .hero-stat{
    display:none;
}
.dark .hero-stat__label{
    display:none;
}
.dark .hero-stat__badge{
    display:none;
}

@media (max-width:1024px){
    .hero-stat{
        display:none;
    }
    .hero-stat--top{
        display:none;
    }
    .hero-stat--bottom{
        display:none;
    }
}
@media (max-width:768px){
    .hero-stat{
        display:none;
    }
    .hero-stat--top{
        display:none;
    }
    .hero-stat--bottom{
        display:none;
    }
}
@media (max-width:640px){
    .hero-stat{
        display:none;
    }
    .hero-stat--top{
        display:none;
    }
    .hero-stat--bottom{
        display:none;
    }
}

header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,#4d82ff,#4fd3c4);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}
header nav a:hover::after{transform:scaleX(.65)}
header a.nav-active{color:#1f2937 !important}
.dark header a.nav-active{color:#f3f4f6 !important}
header a.nav-active::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){header nav a::after{transition:none}}
@media (prefers-reduced-motion: reduce){header a.nav-active{transition:none}}

.section-quote{position:relative;max-width:60rem;margin:0 auto;padding:1.5rem 2.75rem;font-size:0.9375rem;line-height:1.8;font-weight:600;font-style:italic;color:#4b5563;text-align:center;letter-spacing:0.01em;overflow:visible}
@media (min-width:640px){.section-quote{font-size:1.0625rem;padding:2rem 3.75rem;line-height:1.85}}
@media (min-width:768px){.section-quote{font-size:1.1875rem;padding:2.25rem 4.5rem}}
@media (min-width:1024px){.section-quote{font-size:1.375rem;line-height:1.9;padding:2.5rem 5.25rem}}
.dark .section-quote{color:#9ca3af}
.section-quote::before,.section-quote::after{content:'"';position:absolute;font-size:2.5rem;opacity:.25;font-family:Georgia,serif;color:#60a5fa;line-height:1;font-weight:400}
@media (min-width:640px){.section-quote::before,.section-quote::after{font-size:3.5rem;opacity:.28}}
@media (min-width:1024px){.section-quote::before,.section-quote::after{font-size:4.5rem;opacity:.3}}
.dark .section-quote::before,.dark .section-quote::after{color:#3b82f6;opacity:.25}
.section-quote::before{top:0.35rem;left:1.25rem;transform:translate(-38%,-42%)}
@media (min-width:640px){.section-quote::before{top:0.5rem;left:1.5rem;transform:translate(-40%,-45%)}}
@media (min-width:1024px){.section-quote::before{top:0.65rem;left:1.85rem;transform:translate(-42%,-48%)}}
.section-quote::after{bottom:0.35rem;right:1.25rem;transform:rotate(180deg) translate(-38%,-42%)}
@media (min-width:640px){.section-quote::after{bottom:0.5rem;right:1.5rem;transform:rotate(180deg) translate(-40%,-45%)}}
@media (min-width:1024px){.section-quote::after{bottom:0.65rem;right:1.85rem;transform:rotate(180deg) translate(-42%,-48%)}}

/* Removed mobile menu hamburger-line styling (no longer used on index) */
@media (max-width:640px){header{padding-top:.85rem;padding-bottom:.85rem}body{font-size:15px;line-height:1.55;overflow-x:hidden}h1,h2,h3{letter-spacing:-.015em}h1{font-size:clamp(2.05rem,7.2vw,2.55rem)}h2{font-size:clamp(1.5rem,6vw,2.05rem)}h3{font-size:clamp(1.18rem,5vw,1.45rem)}.section-title{font-size:clamp(1.65rem,6.2vw,2.25rem)}section[id]{padding-left:1rem!important;padding-right:1rem!important}.container{padding-left:1rem!important;padding-right:1rem!important;max-width:100%}.grid-bg{background-size:56px 56px}#platform .plat-header{text-align:center}#platform .plat-header p{max-width:540px;margin-left:auto;margin-right:auto}#why .benefits-grid{display:grid;gap:1rem}#why .benefit-item{min-height:unset}.card-pro{margin-left:0;margin-right:0}html,body{width:100%;max-width:100vw;overflow-x:hidden}}
@media (max-width:420px){h1{font-size:clamp(1.9rem,8vw,2.2rem)}.section-title{font-size:1.5rem}#why .radial-cluster{transform:scale(.85);transform-origin:top center}}

@keyframes gradientMove{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;top:-150%;left:-150%;width:120%;height:300%;background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.4,0,.2,1)}
.sheen:hover::after{transform:translateX(150%)}
.tilt-hover{transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.tilt-hover:hover{transform:translateY(-6px) rotateZ(-.4deg)}
.tilt-wrap{perspective:1000px}
.tilt-target{transform-style:preserve-3d;will-change:transform;transition:transform .18s ease-out}
.connector-path{stroke-dasharray:10 8;animation:moveDash 9s linear infinite}
@keyframes moveDash{to{stroke-dashoffset:-200}}
.blob{position:absolute;filter:blur(40px);opacity:.35;pointer-events:none}
.blob-a{background:radial-gradient(closest-side,rgba(77,130,255,.6),transparent);width:360px;height:360px;border-radius:50%;animation:blobDrift 22s ease-in-out infinite}
.blob-b{background:radial-gradient(closest-side,rgba(79,211,196,.55),transparent);width:280px;height:280px;border-radius:50%;animation:blobDrift 26s ease-in-out infinite reverse}
@keyframes blobDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-20px,0) scale(1.08)}100%{transform:translate3d(0,0,0) scale(1)}}
.particle{position:absolute;width:6px;height:6px;border-radius:9999px;background:rgba(72,143,177,.3);animation:floatSlow 18s linear infinite}
@keyframes floatSlow{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(-25px) translateX(10px)}100%{transform:translateY(0) translateX(0)}}
@media (prefers-reduced-motion: reduce){.animate-on-scroll{opacity:1;transform:none}.connector-path{animation:none}.blob-a,.blob-b,.particle{animation:none}}

.title-underline{height:2px;width:64px;border-radius:9999px;background:#94a3b8;opacity:.8;transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.4,0,.2,1)}
.title-underline.animate{transform:scaleX(1)}

.text-gradient-animated{position:relative;display:inline-block;font-weight:800;color:inherit;background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:initial;text-shadow:none;filter:none;animation:none;transition:none}
.text-gradient-animated:hover{filter:none;text-shadow:none}
.dark .text-gradient-animated{color:inherit;background:none;text-shadow:none;filter:none;-webkit-text-stroke:0}
@supports not (-webkit-background-clip:text){
	.text-gradient-animated{background-image:none;animation:none;color:#0ea5e9;-webkit-text-fill-color:#0ea5e9;}
	.dark .text-gradient-animated{color:#67e8f9;-webkit-text-fill-color:#67e8f9;}
}
@media (prefers-reduced-motion: reduce){.text-gradient-animated{animation:none;background-position:50% 50%;}}

.heading-glow{position:relative}
.heading-glow::after{content:"";position:absolute;left:50%;bottom:-6px;width:120px;height:20px;background:radial-gradient(closest-side,rgba(77,130,255,.12),transparent 70%);filter:blur(10px);z-index:-1;opacity:.6;transform:translateX(-50%)}
@media (max-width:640px){.heading-glow::after{filter:blur(8px);opacity:.4;width:100px}}

.loss-bar{height:10px;border-radius:9999px;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.04));}
.dark .loss-bar{background:linear-gradient(90deg,rgba(96,165,250,.12),rgba(59,130,246,.05));}
.loss-bar-fill{position:absolute;inset:0;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#ff5f56,#ffb347,#ffe27a);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.loss-badge{font-size:13px;line-height:1;padding:4px 8px;border-radius:9999px;display:inline-flex;align-items:center;gap:4px;font-weight:600;background:linear-gradient(90deg,#fff,#f3f3f3);color:#c21d1d;border:1px solid #ffd2d2}
.dark .loss-badge{background:linear-gradient(90deg,#1f2937,#111827);color:#ff9f9f;border-color:#4b1f1f}
.stacked-card{--offset:0;transform:translateY(var(--offset));transition:transform .5s cubic-bezier(.4,0,.2,1), box-shadow .4s}
.stacked-card:hover{transform:translateY(calc(var(--offset) - 6px));box-shadow:0 18px 40px -12px rgba(0,0,0,.25)}
.stacked-gradient{background:linear-gradient(140deg,rgba(255,255,255,.7),rgba(255,255,255,.35));backdrop-filter:blur(6px)}
.dark .stacked-gradient{background:linear-gradient(140deg,rgba(30,41,59,.85),rgba(15,23,42,.7));backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(148,163,184,0.1);}
.chip{font-size:13px;padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.04);color:#374151;display:inline-flex;align-items:center;gap:4px}
.dark .chip{background:rgba(255,255,255,.06);color:#d1d5db}
.chip-danger{background:rgba(255,98,98,.12);color:#b91c1c}
.dark .chip-danger{background:rgba(185,28,28,.25);color:#fecaca}
.metric-mini{font-size:13px;font-weight:600;letter-spacing:.5px;color:#111827}
.dark .metric-mini{color:#f9fafb}
.issue-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff8a5c,#ff543e);color:#fff;font-size:13px;box-shadow:0 4px 10px -2px rgba(255,90,60,.4)}
.issue-icon.yellow{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 4px 10px -2px rgba(251,191,36,.4)}
.issue-icon.pink{background:linear-gradient(135deg,#ec4899,#db2777);box-shadow:0 4px 10px -2px rgba(236,72,153,.45)}
.issue-icon.red{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 10px -2px rgba(239,68,68,.5)}
.counter-display{display:inline-flex;align-items:baseline;gap:.12em;--counter-gradient:var(--grad-accent)}
.counter-display .counter,
.counter-display .unit{background:var(--counter-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.counter-display .unit{font-size:.58em;font-weight:600;letter-spacing:0;line-height:1}

#results .counter-display{--counter-gradient:linear-gradient(92deg,#bfdbfe 0%,#60a5fa 38%,#5eead4 100%)}

.page-loader{position:fixed;inset:0;width:100vw;width:100dvw;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;max-height:100vh;max-height:100dvh;display:grid;place-items:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;pointer-events:none;overflow:hidden;background:linear-gradient(160deg,rgba(244,249,255,1),rgba(250,255,254,1))}
.dark .page-loader{background:linear-gradient(160deg,rgba(13,21,34,1),rgba(10,19,30,1))}
.page-loader.visible{opacity:1;visibility:visible;pointer-events:auto}
.page-loader.fade-out{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s}
html.loading, body.loading{overflow:hidden;height:100%;}
.page-loader .loader{--size:250px;--duration:2.5s;--logo-color:grey;--background:linear-gradient(0deg,rgba(50,50,50,.2) 0%,rgba(100,100,100,.2) 100%);height:var(--size);aspect-ratio:1;position:relative;display:grid;place-items:center;transform:scale(.95);opacity:0;transition:transform 1s cubic-bezier(.25,.1,.25,1),opacity .8s cubic-bezier(.4,0,.2,1)}
@media(max-width:640px){.page-loader .loader{--size:230px}}
@media(max-width:420px){.page-loader .loader{--size:210px}}
.page-loader.visible .loader{opacity:1;transform:scale(1)}
.page-loader.fade-out .loader{transform:scale(1.1);opacity:0;transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .5s ease-out}
.page-loader .loader .box{position:absolute;background:rgba(100,100,100,.15);background:var(--background);border-radius:50%;border-top:1px solid rgba(100,100,100,1);box-shadow:rgba(0,0,0,.3) 0 10px 10px 0;backdrop-filter:blur(5px);animation:ripple var(--duration) cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite}
.dark .page-loader .loader .box{background:var(--background);border-top-color:rgba(100,100,100,1);box-shadow:rgba(0,0,0,.3) 0 10px 10px 0}
.page-loader.fade-out .loader .box{animation-play-state:paused;opacity:0;transition:opacity .4s ease-out}
.page-loader .loader .box:nth-child(1){inset:40%;z-index:99}
.page-loader .loader .box:nth-child(2){inset:30%;z-index:98;border-color:rgba(100,100,100,.8);animation-delay:.15s}
.page-loader .loader .box:nth-child(3){inset:20%;z-index:97;border-color:rgba(100,100,100,.6);animation-delay:.3s}
.page-loader .loader .box:nth-child(4){inset:10%;z-index:96;border-color:rgba(100,100,100,.4);animation-delay:.45s}
.page-loader .loader .box:nth-child(5){inset:0;z-index:95;border-color:rgba(100,100,100,.2);animation-delay:.6s}
@keyframes ripple{0%{transform:scale(1);box-shadow:rgba(0,0,0,.3) 0 10px 10px 0;opacity:1}50%{transform:scale(1.3);box-shadow:rgba(0,0,0,.3) 0 30px 20px 0;opacity:.7}100%{transform:scale(1);box-shadow:rgba(0,0,0,.3) 0 10px 10px 0;opacity:1}}

.card-pro{position:relative;border:1px solid rgba(96,165,250,.25);background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(245,247,250,0.9));backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:18px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .35s,transform .35s;box-shadow:0 8px 28px -12px rgba(59,130,246,.15), 0 0 0 1px rgba(96,165,250,.08) inset}
.dark .card-pro{background:linear-gradient(145deg,rgba(15,20,30,0.95),rgba(8,12,20,0.92));border:1.5px solid rgba(96,165,250,.25);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 16px 48px -16px rgba(0,0,0,.8),0 0 0 1px rgba(59,130,246,.15) inset,0 8px 24px -8px rgba(59,130,246,.08);}
.card-pro:hover{box-shadow:0 12px 40px -14px rgba(59,130,246,.35), 0 0 0 1.5px rgba(96,165,250,.2) inset, 0 8px 32px -8px rgba(59,130,246,.3);transform:translateY(-4px)}
.dark .card-pro:hover{box-shadow:0 24px 64px -18px rgba(0,0,0,.9),0 0 0 2px rgba(96,165,250,.45) inset,0 12px 40px -12px rgba(59,130,246,.35);transform:translateY(-6px);border-color:rgba(96,165,250,.35);}
.icon-pro{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e0ecff,#f5fbff);border:1px solid #d4e2f7}
.dark .icon-pro{background:linear-gradient(135deg,rgba(59,130,246,0.15),rgba(30,58,138,0.12));border:1.5px solid rgba(96,165,250,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 20px -6px rgba(59,130,246,.2), 0 0 0 1px rgba(59,130,246,.1) inset;}
.icon-pro svg{stroke:#2463eb}
.dark .icon-pro svg{stroke:#60a5fa}
.icon-pro.warn{background:linear-gradient(135deg,#fff4e5,#fff8ed);border-color:#fde0b2}
.icon-pro.warn svg{stroke:#d97706}
.dark .icon-pro.warn{background:linear-gradient(135deg,#3d2e14,#2a1f0a);border-color:#92400e}
.icon-pro.linked{background:linear-gradient(135deg,#fce7f3,#fdf2f8);border-color:#f9a8d4}
.icon-pro.linked svg{stroke:#be185d}
.dark .icon-pro.linked{background:linear-gradient(135deg,#3f1f33,#311626);border-color:#db2777}
.icon-pro.leak{background:linear-gradient(135deg,#ffe4e6,#fff1f2);border-color:#fecdd3}
.icon-pro.leak svg{stroke:#dc2626}
.dark .icon-pro.leak{background:linear-gradient(135deg,#3c1f1f,#2b1414);border-color:#f87171}
.badge-mini{font-size:13px;line-height:1;padding:4px 7px;border-radius:7px;font-weight:600;background:rgba(36,99,235,.08);color:#1e3a8a}
.dark .badge-mini{background:rgba(96,165,250,.18);color:#93c5fd}
.badge-mini.danger{background:rgba(220,38,38,.12);color:#991b1b}
.dark .badge-mini.danger{background:rgba(239,68,68,.22);color:#fecaca}
.badge-mini.warn{background:rgba(217,119,6,.15);color:#92400e}
.dark .badge-mini.warn{background:rgba(245,158,11,.25);color:#fcd34d}
.badge-mini.neutral{background:rgba(107,114,128,.15);color:#374151}
.dark .badge-mini.neutral{background:rgba(156,163,175,.2);color:#d1d5db}

/* Integration Logo Badges */
.integration-logo-badge{display:inline-flex;align-items:center;justify-content:flex-start;gap:.5rem;padding:.5rem .75rem;font-size:13px;font-weight:600;border-radius:.5rem;background:rgba(255,255,255,.95);border:1px solid rgba(148,163,184,.25);color:#475569;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px -4px rgba(0,0,0,.08)}
.dark .integration-logo-badge{background:rgba(30,41,59,.7);border-color:rgba(100,116,139,.35);color:#cbd5e1;box-shadow:0 2px 8px -4px rgba(0,0,0,.3)}
.integration-logo-badge:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 16px -6px rgba(59,130,246,.4);border-color:rgba(59,130,246,.5);background:rgba(255,255,255,1)}
.dark .integration-logo-badge:hover{box-shadow:0 6px 16px -6px rgba(96,165,250,.5);border-color:rgba(96,165,250,.6);background:rgba(30,41,59,.85)}
.badge-logo{width:18px;height:18px;flex-shrink:0;border-radius:4px;object-fit:contain}
.badge-logo svg{width:100%;height:100%;display:block}

/* Integration Hub Modern Layout */
.integration-hub-wrapper{position:relative;display:grid;grid-template-columns:1fr;gap:2rem;padding:3rem 0;margin-bottom:2rem}
@media (min-width:1024px){.integration-hub-wrapper{grid-template-columns:1fr 420px 1fr;align-items:center;gap:3rem}}

/* Central Hub */
.integration-hub-center{position:relative;display:flex;align-items:center;justify-content:center;grid-column:1/-1;z-index:10}
@media (min-width:1024px){.integration-hub-center{grid-column:2;grid-row:1}}

.hub-glow-effect{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(59,130,246,.25) 0%,rgba(34,211,238,.15) 40%,transparent 70%);filter:blur(60px);animation:pulse-glow 4s ease-in-out infinite;z-index:1}
@keyframes pulse-glow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.dark .hub-glow-effect{background:radial-gradient(circle at center,rgba(96,165,250,.4) 0%,rgba(59,130,246,.25) 40%,transparent 70%)}

.hub-center-card{position:relative;z-index:2;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(249,250,251,.9));backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:2px solid rgba(59,130,246,.2);border-radius:24px;padding:2.5rem 2rem;text-align:center;box-shadow:0 20px 60px -20px rgba(59,130,246,.35),0 0 0 1px rgba(255,255,255,.5) inset;transition:all .4s cubic-bezier(.4,0,.2,1);min-width:280px}
.dark .hub-center-card{background:linear-gradient(145deg,rgba(15,23,42,.95),rgba(8,15,30,.92));border-color:rgba(96,165,250,.35);box-shadow:0 28px 80px -24px rgba(0,0,0,.9),0 0 0 1px rgba(59,130,246,.2) inset,0 12px 48px -12px rgba(59,130,246,.4)}
.hub-center-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 32px 80px -28px rgba(59,130,246,.5),0 0 0 2px rgba(96,165,250,.4) inset}
.dark .hub-center-card:hover{box-shadow:0 40px 100px -32px rgba(0,0,0,.95),0 0 0 2px rgba(96,165,250,.6) inset,0 16px 64px -16px rgba(59,130,246,.6)}

.hub-logo-ring{position:relative;width:80px;height:80px;margin:0 auto;animation:rotate-ring 20s linear infinite}
@keyframes rotate-ring{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hub-logo-ring::before{content:'';position:absolute;inset:-3px;background:linear-gradient(135deg,#3b82f6,#06b6d4,#8b5cf6,#3b82f6);border-radius:50%;animation:rotate-gradient 3s linear infinite}
@keyframes rotate-gradient{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hub-logo-ring::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.95) 60%,transparent 60%);border-radius:50%}
.dark .hub-logo-ring::after{background:radial-gradient(circle,rgba(15,23,42,.98) 60%,transparent 60%)}

.hub-logo{position:relative;z-index:2;width:100%;height:100%;background:linear-gradient(135deg,#3b82f6,#06b6d4);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px -8px rgba(59,130,246,.6);transform:scale(.88)}

.hub-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);border-radius:9999px;font-size:13px;font-weight:600;color:#0e7490}
.dark .hub-badge{background:rgba(6,182,212,.15);border-color:rgba(34,211,238,.3);color:#67e8f9}

/* Connection Cards Grid */
.integration-connection-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;grid-column:1/-1}
@media (min-width:1024px){.integration-connection-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-column:1/-1;gap:2rem}}

.integration-connection-card{position:relative;opacity:0;animation:fade-in-up .6s ease-out forwards}
@keyframes fade-in-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.integration-connection-card:nth-child(1){animation-delay:.2s}
.integration-connection-card:nth-child(2){animation-delay:.4s}
.integration-connection-card:nth-child(3){animation-delay:.6s}

@media (min-width:1024px){
.integration-connection-card[data-position="left"]{grid-column:1;grid-row:1}
.integration-connection-card[data-position="top"]{grid-column:2;grid-row:1}
.integration-connection-card[data-position="right"]{grid-column:1/3;grid-row:2;max-width:600px;margin:0 auto;width:100%}
}

/* Connection Lines */
.connection-line{display:none}
@media (min-width:1024px){
.connection-line{display:block;position:absolute;background:linear-gradient(90deg,transparent,rgba(59,130,246,.3),transparent);height:2px;z-index:1}
.dark .connection-line{background:linear-gradient(90deg,transparent,rgba(96,165,250,.4),transparent)}
.integration-connection-card[data-position="left"] .connection-line{width:140px;right:-140px;top:50%;transform:translateY(-50%)}
.integration-connection-card[data-position="top"] .connection-line{width:120px;left:-120px;top:50%;transform:translateY(-50%)}
.integration-connection-card[data-position="right"] .connection-line{width:2px;height:100px;left:50%;top:-100px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(59,130,246,.3),transparent)}
.dark .integration-connection-card[data-position="right"] .connection-line{background:linear-gradient(180deg,transparent,rgba(96,165,250,.4),transparent)}
}

.connection-card-inner{position:relative;z-index:2;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(249,250,251,.88));backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1.5px solid rgba(203,213,225,.4);border-radius:20px;padding:1.75rem 1.5rem;box-shadow:0 8px 32px -12px rgba(0,0,0,.1);transition:all .35s cubic-bezier(.4,0,.2,1)}
.dark .connection-card-inner{background:linear-gradient(145deg,rgba(30,41,59,.88),rgba(15,23,42,.85));border-color:rgba(100,116,139,.35);box-shadow:0 12px 40px -16px rgba(0,0,0,.7)}
.integration-connection-card:hover .connection-card-inner{transform:translateY(-6px);border-color:rgba(59,130,246,.5);box-shadow:0 16px 48px -16px rgba(59,130,246,.3)}
.dark .integration-connection-card:hover .connection-card-inner{border-color:rgba(96,165,250,.5);box-shadow:0 20px 56px -20px rgba(0,0,0,.85),0 0 0 1px rgba(96,165,250,.2) inset}

.connection-icon-wrapper{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.25);margin-bottom:1rem}

.revenue-kpi-card{position:relative;padding:1.25rem;border-radius:1rem;background:linear-gradient(145deg,#ffffff,#f8fafc);border:1px solid rgba(0,0,0,.06);overflow:hidden;transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s,border-color .4s}
.revenue-kpi-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -12px rgba(0,0,0,.15);border-color:rgba(16,185,129,.3)}
.dark .revenue-kpi-card{background:linear-gradient(145deg,rgba(17,24,39,0.95),rgba(15,23,42,0.92));border:1.5px solid rgba(16,185,129,.2);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 12px 36px -12px rgba(0,0,0,.8),0 0 0 1px rgba(16,185,129,.12) inset}
.dark .revenue-kpi-card:hover{border-color:rgba(16,185,129,.4);box-shadow:0 20px 50px -12px rgba(0,0,0,.9),0 0 0 1px rgba(16,185,129,.25) inset}
.text-gradient-animated{background:linear-gradient(135deg,#10b981,#14b8a6);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Enhanced Revenue Workflow Cards */
.revenue-workflow-card {
    position: relative;
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1.5px solid rgba(148, 163, 184, 0.15);
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.08), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.revenue-workflow-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 20px 40px -12px rgba(16, 185, 129, 0.15), 0 8px 24px -8px rgba(0, 0, 0, 0.12);
}
.dark .revenue-workflow-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(8, 12, 20, 0.75));
    border-color: rgba(96, 165, 250, 0.15);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.08) inset;
    backdrop-filter: blur(12px);
}
.dark .revenue-workflow-card:hover {
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(16, 185, 129, 0.2) inset;
}

/* Workflow Step Badge */
.workflow-step-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.6), 0 0 0 3px #fff;
    z-index: 20;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    filter: blur(2px);
}
.workflow-step-badge[data-step="2"] {
    background: linear-gradient(135deg, #0d9488, #0891b2);
}
.workflow-step-badge[data-step="3"] {
    background: linear-gradient(135deg, #059669, #0d9488);
}
.workflow-step-badge.in {
    opacity: 1;
    filter: blur(0);
    animation: badgePop 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes badgePop {
    0% { transform: translate(-50%, -30%) scale(0.6); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); }
}
.revenue-workflow-card:hover .workflow-step-badge {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 12px 32px -8px rgba(16, 185, 129, 0.7), 0 0 0 4px rgba(255, 255, 255, 0.8);
}
.dark .workflow-step-badge {
    box-shadow: 0 8px 24px -8px rgba(16, 185, 129, 0.5), 0 0 0 3px rgba(15, 23, 42, 0.9);
}
.dark .revenue-workflow-card:hover .workflow-step-badge {
    box-shadow: 0 14px 36px -10px rgba(16, 185, 129, 0.6), 0 0 0 4px rgba(15, 23, 42, 0.8);
}

/* Mobile Badge Styles */
@media (max-width: 640px) {
    .workflow-step-badge {
        left: 1rem;
        transform: translate(0, -50%);
        width: 2rem;
        height: 2rem;
        font-size: 0.8rem;
    }
    .workflow-step-badge.in {
        animation: badgePopMobile 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    @keyframes badgePopMobile {
        0% { transform: translate(0, -30%) scale(0.6); opacity: 0; }
        60% { opacity: 1; }
        100% { transform: translate(0, -50%) scale(1); }
    }
    .revenue-workflow-card:hover .workflow-step-badge {
        transform: translate(0, -50%) scale(1.05);
    }
}

/* Enhanced Workflow Connector */
.workflow-connector {
    position: absolute;
    top: 1.25rem;
    left: 0;
    right: 0;
    height: 3px;
    pointer-events: none;
    display: none;
    z-index: 1;
}
@media (min-width: 768px) {
    .workflow-connector {
        display: block;
    }
}
.workflow-connector svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.workflow-connector path {
    stroke: url(#wfGrad);
    stroke-width: 3;
    stroke-dasharray: 8 6;
    stroke-linecap: round;
    fill: none;
    opacity: 0.7;
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2));
}
.workflow-connector.in path {
    animation: dashFlow 8s linear infinite;
}
@keyframes dashFlow {
    to { stroke-dashoffset: -140; }
}

/* Workflow Icon Wrapper */
.workflow-icon-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.25rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.revenue-workflow-card:hover .workflow-icon-wrapper {
    transform: scale(1.12) translateY(-2px);
    box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.4);
}

/* Badge Mini Enhanced */
.badge-mini-enhanced {
    font-size: 11px;
    line-height: 1.2;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 700;
    border: 1px solid;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.badge-mini-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.25);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .revenue-workflow-card {
        padding: 1.5rem 1.25rem;
    }
    .workflow-icon-wrapper {
        width: 3rem;
        height: 3rem;
    }
}

/* Integration hub visuals */
.integration-shell{position:relative;}
.integration-hub{position:relative;height:340px;isolation:isolate}
.integration-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:130px;height:130px;border-radius:50%;background:linear-gradient(135deg,#4d82ff,#4fd3c4);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;letter-spacing:.5px;box-shadow:0 10px 28px -6px rgba(51,102,153,.45);}
.integration-core::before{content:"";position:absolute;inset:-6px;border-radius:inherit;background:linear-gradient(135deg,#4d82ff33,#4fd3c433);filter:blur(12px);z-index:-1}
.integration-core::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(255,255,255,.4);mix-blend-mode:overlay}
.dark .integration-core{box-shadow:0 10px 28px -6px rgba(0,0,0,.55)}
.integration-node{position:absolute;width:92px;height:92px;border-radius:22px;padding:10px;background:linear-gradient(150deg,#ffffff,#f3f7fa);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 14px -4px rgba(0,0,0,.12);font-size:13px;font-weight:500;color:#374151;text-align:center;transition:transform .55s cubic-bezier(.4,0,.2,1),box-shadow .45s,filter .45s}
.integration-node svg{width:22px;height:22px;stroke-width:1.6}
.integration-node:hover{transform:translate(var(--dx,0),var(--dy,0)) scale(1.08);box-shadow:0 14px 32px -10px rgba(0,0,0,.25);z-index:2}
.dark .integration-node{background:linear-gradient(150deg,rgba(15,20,30,0.95),rgba(8,12,20,0.92));border:1.5px solid rgba(96,165,250,.25);color:#e5e7eb;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 8px 24px -8px rgba(0,0,0,.8), 0 0 0 1px rgba(59,130,246,.12) inset;}
.integration-node.badge-pill{font-size:13px;letter-spacing:.5px}
.integration-hub .halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(77,130,255,.15),transparent 70%);filter:blur(18px);opacity:.9}
.hub-lines{position:absolute;inset:0;pointer-events:none}
.hub-toggle{display:inline-flex;align-items:center;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,.08);border-radius:9999px;padding:4px;gap:2px}
.hub-toggle button{font-size:13px;font-weight:600;padding:4px 10px;border-radius:9999px;line-height:1;transition:background .35s,color .35s}
.hub-toggle button.active{background:linear-gradient(90deg,#4d82ff,#4fd3c4);color:#fff;box-shadow:0 4px 12px -4px rgba(77,130,255,.5)}
.dark .hub-toggle{background:rgba(31,41,55,.75);border-color:rgba(255,255,255,.08)}
.map-layer{position:absolute;inset:0;transition:opacity .6s ease,transform .7s cubic-bezier(.4,0,.2,1)}
.map-layer.after{opacity:0;pointer-events:none}
.map-layer.show-after .after{opacity:1;pointer-events:auto}
.map-active-before .map-layer.before{opacity:1}
.map-active-after .map-layer.before{opacity:0;pointer-events:none}
.map-active-after .map-layer.after{opacity:1;pointer-events:auto}
.integration-badge-stack{display:flex;flex-wrap:wrap;gap:6px}
.integration-badge{font-size:13px;padding:4px 8px;border-radius:8px;font-weight:600;background:rgba(77,130,255,.08);color:#1e3a8a;display:inline-flex;align-items:center;gap:4px}
.dark .integration-badge{background:rgba(77,130,255,.18);color:#93c5fd}
.integration-badge svg{width:10px;height:10px}
@media (max-width:768px){.integration-hub{height:420px}.integration-node{width:86px;height:86px}}
.before .integration-node{filter:grayscale(.5) brightness(.9);}
.map-active-after .after .integration-node{animation:nodePop .7s cubic-bezier(.4,0,.2,1) both;}
@keyframes nodePop{0%{transform:scale(.6) translate(var(--dx,0),var(--dy,0));opacity:0}70%{opacity:1}100%{transform:scale(1) translate(var(--dx,0),var(--dy,0));opacity:1}}
.integration-core-pulse{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%);animation:corePulse 4.5s ease-in-out infinite;mix-blend-mode:overlay;}
@keyframes corePulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.08);opacity:.85}}
.prefers-reduced-motion .integration-core-pulse{animation:none}
.legend{font-size:13px;display:flex;align-items:center;gap:6px;color:#475569}
.legend span{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,#4d82ff,#4fd3c4)}
.dark .legend{color:#94a3b8}

.op-panel{transition:all .55s cubic-bezier(.4,0,.2,1);}
.op-panel.inactive{opacity:1;filter:none;transform:none}
.op-panel-wrap{position:relative;padding-top:16px}
.op-panel-badge{position:absolute;top:0;left:20px;transform:translateY(-50%);font-size:13px;font-weight:600;line-height:1;padding:6px 12px;border-radius:9999px;letter-spacing:.3px;display:inline-flex;align-items:center;gap:4px;box-shadow:0 4px 12px -4px rgba(0,0,0,.15);backdrop-filter:blur(6px)}
.badge-before{background:linear-gradient(90deg,#ffe2e5,#fecdd3);color:#991b1b;border:1px solid #fda4af}
.dark .badge-before{background:linear-gradient(90deg,#432336,#311d1f);color:#fecaca;border-color:#7f1d1d}
.badge-after{background:linear-gradient(90deg,#d1fae5,#a7f3d0);color:#065f46;border:1px solid #6ee7b7}
.dark .badge-after{background:linear-gradient(90deg,#123329,#102a23);color:#6ee7b7;border-color:#065f46}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.kpi-card{position:relative;border:1px solid rgba(0,0,0,.06);background:linear-gradient(145deg,#ffffff,#f5f9fb);border-radius:14px;padding:10px 12px;overflow:hidden}
.kpi-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,rgba(77,130,255,.18),transparent 70%);opacity:.35}
.dark .kpi-card{background:linear-gradient(145deg,rgba(15,20,30,0.95),rgba(8,12,20,0.92));border:1.5px solid rgba(96,165,250,.25);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 12px 36px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(59,130,246,.15) inset;}
.kpi-value{font-size:14px;font-weight:600;letter-spacing:.5px}
.kpi-label{font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin-top:2px;color:#64748b}
.dark .kpi-label{color:#94a3b8}
.kpi-accent{position:absolute;right:8px;top:8px;width:6px;height:6px;border-radius:50%;background:linear-gradient(90deg,#4d82ff,#4fd3c4)}
.arrow-pulse{animation:corePulse 5s ease-in-out infinite}

section{position:relative}
section::before{content:none !important}
section > *{position:relative;z-index:1}
.dark section::before{content:none !important}
.dark .card-pro::after,
.dark .metric-card::after,
.dark #results .result-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%, rgba(96, 165, 250, 0.08), transparent 60%);pointer-events:none;z-index:0;border-radius:inherit;}

/* Glassy header system */
.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    isolation: isolate;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background .5s cubic-bezier(.4, 0, .2, 1), box-shadow .5s cubic-bezier(.4, 0, .2, 1), border-color .5s cubic-bezier(.4, 0, .2, 1), backdrop-filter .5s cubic-bezier(.4, 0, .2, 1), -webkit-backdrop-filter .5s cubic-bezier(.4, 0, .2, 1);
    border-radius: 26px;
    max-width: 80rem;
    width: calc(100% - 32px);
    margin: calc(env(safe-area-inset-top, 0px) + 12px) auto 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.site-header .container {
    width: 100%;
    margin: 0 auto;
    padding-left: clamp(1rem, 4vw, 1.75rem) !important;
    padding-right: clamp(1rem, 4vw, 1.75rem) !important;
}
.dark .site-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid transparent;
    box-shadow: none;
}
/* .glassy-header{overflow:hidden} */
.glassy-header:before{content:"";position:absolute;inset:0;padding:1px;border-radius:0;background:none;animation:none;opacity:0}
@keyframes rotateRing{to{transform:rotate(360deg)}}
.dark .glassy-header:before{display:none}
@media (prefers-reduced-motion: reduce){.glassy-header:before{animation:none}}
.no-conic .glassy-header:before{animation:none;background:linear-gradient(130deg,rgba(77,130,255,.75),rgba(79,211,196,.55),rgba(255,255,255,.4));}
.site-header.fixed{
    position:fixed!important;
    top:calc(env(safe-area-inset-top, 0px) + 12px);
    left:50%;
    right:auto;
    transform:translateX(-50%);
}
.glassy-header:hover:before{opacity:1}
.glassy-header:after{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;background:none;animation:none;opacity:0}
.dark .glassy-header:after{display:none}
@keyframes headerShine{0%{left:-140%}48%{left:110%}52%{left:110%}100%{left:110%}}
.site-header.scrolled{-webkit-backdrop-filter:blur(25px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:0 18px 48px -20px rgba(15,23,42,.32),0 10px 24px -16px rgba(15,23,42,.22);border-color:rgba(203,213,225,.90);border-radius:20px}
.dark .site-header.scrolled{-webkit-backdrop-filter:blur(25px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border-color:rgba(255,255,255,.15);box-shadow:0 20px 56px -22px rgba(0,0,0,.7),0 8px 22px -14px rgba(15,23,42,.55)}
.site-header.on-challenge{border:1px solid rgba(59,130,246,.12)}
.dark .site-header.on-challenge{border:1px solid rgba(59,130,246,.24)}
.site-header.on-results{border:1px solid rgba(16,185,129,.12)}
.dark .site-header.on-results{border:1px solid rgba(16,185,129,.24)}
.site-header.on-how{border:1px solid rgba(139,92,246,.12)}
.dark .site-header.on-how{border:1px solid rgba(139,92,246,.24)}
/* Contextual accent by section (gentle, clinical palette) */
/* on-top now inherits base glass styles; keep subtle border tint */
.site-header.on-top{border-color:rgba(148,163,184,.35);}
.dark .site-header.on-top{border-color:rgba(59,130,246,.35);}
/* Explicit pre-scroll (before .scrolled class) glass styling */
.site-header.on-top:not(.scrolled) {
    background: linear-gradient(140deg, rgba(255,255,255,.80), rgba(255,255,255,.62));
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 10px 30px -16px rgba(15,23,42,.15), 0 4px 16px -8px rgba(15,23,42,.10);
}
.dark .site-header.on-top:not(.scrolled) {
    background: linear-gradient(140deg, rgba(15,23,42,.88), rgba(17,28,46,.72));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 14px 40px -20px rgba(0,0,0,.6), 0 4px 18px -10px rgba(0,0,0,.45);
}
/* Hero scrolled state - white glass morphism while scrolling in hero */
/* Hero scrolled state now just slightly intensifies shadow */
.site-header.on-top.scrolled-in-hero{box-shadow:0 16px 44px -18px rgba(15,23,42,.25),0 6px 20px -10px rgba(15,23,42,.15);}
.dark .site-header.on-top.scrolled-in-hero{box-shadow:0 20px 56px -24px rgba(0,0,0,.7),0 8px 26px -14px rgba(15,23,42,.55);}
.site-header.on-solutions{border:1px solid rgba(59,130,246,.18)}
.site-header.on-voice-structured-records{border:1px solid rgba(59,130,246,.18)}
.site-header.on-voice-prescription{border:1px solid rgba(37,99,235,.18)}
.site-header.on-revenue-recovery{border:1px solid rgba(16,185,129,.18)}
.site-header.on-documentation-automation{border:1px solid rgba(59,130,246,.18)}
.site-header.on-prescription-automation{border:1px solid rgba(37,99,235,.18)}
.site-header.on-revenue-integrity{border:1px solid rgba(16,185,129,.18)}
.site-header.on-integrations{border:1px solid rgba(6,182,212,.18)}
.site-header.on-case-studies{border:1px solid rgba(100,116,139,.22)}
.site-header.on-trust-security{border:1px solid rgba(99,102,241,.18)}
.site-header.on-cta{border:1px solid rgba(16,185,129,.22)}
.dark .site-header.on-documentation-automation{border-color:rgba(59,130,246,.32)}
.dark .site-header.on-prescription-automation{border-color:rgba(37,99,235,.32)}
.dark .site-header.on-revenue-integrity{border-color:rgba(16,185,129,.32)}
.dark .site-header.on-integrations{border-color:rgba(6,182,212,.32)}
.dark .site-header.on-case-studies{border-color:rgba(100,116,139,.32)}
.dark .site-header.on-trust-security{border-color:rgba(99,102,241,.32)}
.dark .site-header.on-cta{border-color:rgba(16,185,129,.36)}
/* All sections except hero - navbar gets opaque background */
/* Contextual sections: reuse base glass, only adjust border tint */
.site-header.on-solutions,
.site-header.on-voice-structured-records,
.site-header.on-voice-prescription,
.site-header.on-revenue-recovery,
.site-header.on-documentation-automation,
.site-header.on-prescription-automation,
.site-header.on-revenue-integrity,
.site-header.on-integrations,
.site-header.on-case-studies,
.site-header.on-trust-security,
.site-header.on-cta{box-shadow:0 16px 44px -18px rgba(15,23,42,.25),0 6px 20px -10px rgba(15,23,42,.15);}
.dark .site-header.on-solutions,
.dark .site-header.on-voice-structured-records,
.dark .site-header.on-voice-prescription,
.dark .site-header.on-revenue-recovery,
.dark .site-header.on-documentation-automation,
.dark .site-header.on-prescription-automation,
.dark .site-header.on-revenue-integrity,
.dark .site-header.on-integrations,
.dark .site-header.on-case-studies,
.dark .site-header.on-trust-security,
.dark .site-header.on-cta{box-shadow:0 20px 56px -24px rgba(0,0,0,.7),0 8px 26px -14px rgba(15,23,42,.55);}
.dark .site-header.on-voice-structured-records{border-color:rgba(59,130,246,.32)}
.dark .site-header.on-voice-prescription{border-color:rgba(37,99,235,.32)}
.dark .site-header.on-revenue-recovery{border-color:rgba(16,185,129,.32)}

.solution-spotlight{
	position:relative;
	background:linear-gradient(180deg,rgba(240,248,255,.92) 0%,rgba(247,252,255,.78) 100%);
}
.solution-spotlight:before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(circle at 18% 22%,rgba(96,165,250,.18),transparent 58%),
		radial-gradient(circle at 80% 28%,rgba(129,230,217,.16),transparent 60%);
	pointer-events:none;
	opacity:.85;
}
.dark .solution-spotlight{
	background:linear-gradient(180deg,rgba(12,18,31,.92) 0%,rgba(9,14,23,.82) 100%);
}
.dark .solution-spotlight:before{
	background:
		radial-gradient(circle at 18% 22%,rgba(59,130,246,.22),transparent 58%),
		radial-gradient(circle at 80% 28%,rgba(45,212,191,.2),transparent 60%);
	opacity:.6;
}
.solution-spotlight > div{position:relative;z-index:1}

.solution-list{display:grid;gap:.6rem;margin-top:1.2rem;padding-left:0;list-style:none}
.solution-list li{display:flex;align-items:center;gap:.6rem;font-size:13px;color:#334155}
.dark .solution-list li{color:#cbd5e1}
.solution-list li:before{content:"";width:8px;height:8px;border-radius:999px;background:linear-gradient(90deg,#06b6d4,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.18);display:inline-block}
.dark .solution-list li:before{box-shadow:0 0 0 3px rgba(59,130,246,.25)}

.solution-card{background:rgba(255,255,255,.9);border:1px solid rgba(148,163,184,.35);border-radius:24px;box-shadow:0 18px 48px -20px rgba(59,130,246,.25);padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:1.4rem}
.dark .solution-card{background:rgba(15,23,42,.75);border-color:rgba(51,65,85,.55);box-shadow:0 18px 48px -24px rgba(15,23,42,.6)}
.solution-card .card-header{display:flex;justify-content:space-between;align-items:center}
.solution-card .card-label{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#64748b}
.dark .solution-card .card-label{color:#94a3b8}
.solution-card .card-body{display:grid;gap:1.2rem}
.solution-card .card-metric{font-size:1.85rem;font-weight:700;color:#0f172a}
.dark .solution-card .card-metric{color:#e2e8f0}
.solution-card .card-caption{font-size:12.5px;color:#475569}
.dark .solution-card .card-caption{color:#cbd5e1}

.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.6rem;border-radius:999px;background:#0f172a;color:#fff;font-size:13px;font-weight:600;transition:transform .2s ease, box-shadow .2s ease}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 22px -12px rgba(15,23,42,.6)}
.dark .btn-primary{background:linear-gradient(90deg,rgba(59,130,246,.9),rgba(14,165,233,.9))}
.btn-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.6rem;border-radius:999px;border:1px solid rgba(148,163,184,.5);color:#1f2937;font-size:13px;font-weight:600;transition:transform .2s ease}
.btn-secondary:hover{transform:translateY(-1px)}
.dark .btn-secondary{border-color:rgba(148,163,184,.45);color:#e2e8f0}

/* CTA Button Variants with Gradient Borders */
.btn-cta-blue, .btn-cta-cyan, .btn-cta-purple, .btn-cta-emerald {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.btn-cta-blue:hover, .btn-cta-cyan:hover, .btn-cta-purple:hover, .btn-cta-emerald:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-cta-blue .btn-gradient-border,
.btn-cta-cyan .btn-gradient-border,
.btn-cta-purple .btn-gradient-border,
.btn-cta-emerald .btn-gradient-border {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Blue variant - Hero and general sections */
.btn-cta-blue .btn-gradient-border {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Cyan variant - Voice → Structured Medical Records */
.btn-cta-cyan .btn-gradient-border {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}

/* Purple variant - Voice → Prescription */
.btn-cta-purple .btn-gradient-border {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #6366f1 100%);
}

/* Emerald variant - Revenue Recovery */
.btn-cta-emerald .btn-gradient-border {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
}

.btn-cta-blue .btn-content,
.btn-cta-cyan .btn-content,
.btn-cta-purple .btn-content,
.btn-cta-emerald .btn-content {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.3s ease;
}

.btn-cta-blue:hover .btn-content,
.btn-cta-cyan:hover .btn-content,
.btn-cta-purple:hover .btn-content,
.btn-cta-emerald:hover .btn-content {
    background: rgba(255, 255, 255, 0.85);
}

/* Dark mode */
.dark .btn-cta-blue .btn-content,
.dark .btn-cta-cyan .btn-content,
.dark .btn-cta-purple .btn-content,
.dark .btn-cta-emerald .btn-content {
    background: rgba(15, 23, 42, 0.7);
}

.dark .btn-cta-blue:hover .btn-content,
.dark .btn-cta-cyan:hover .btn-content,
.dark .btn-cta-purple:hover .btn-content,
.dark .btn-cta-emerald:hover .btn-content {
    background: rgba(15, 23, 42, 0.85);
}

.btn-cta-blue .btn-inner,
.btn-cta-cyan .btn-inner,
.btn-cta-purple .btn-inner,
.btn-cta-emerald .btn-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cta-blue .btn-text,
.btn-cta-cyan .btn-text,
.btn-cta-purple .btn-text,
.btn-cta-emerald .btn-text {
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}

/* Text colors matching gradients */
.btn-cta-blue .btn-text { color: #2563eb; }
.btn-cta-cyan .btn-text { color: #0891b2; }
.btn-cta-purple .btn-text { color: #9333ea; }
.btn-cta-emerald .btn-text { color: #059669; }

.dark .btn-cta-blue .btn-text { color: #60a5fa; }
.dark .btn-cta-cyan .btn-text { color: #22d3ee; }
.dark .btn-cta-purple .btn-text { color: #c084fc; }
.dark .btn-cta-emerald .btn-text { color: #34d399; }

.btn-cta-blue .btn-icon,
.btn-cta-cyan .btn-icon,
.btn-cta-purple .btn-icon,
.btn-cta-emerald .btn-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.btn-cta-blue:hover .btn-text,
.btn-cta-cyan:hover .btn-text,
.btn-cta-purple:hover .btn-text,
.btn-cta-emerald:hover .btn-text {
    transform: translateX(2px);
}

.btn-cta-blue:hover .btn-icon,
.btn-cta-cyan:hover .btn-icon,
.btn-cta-purple:hover .btn-icon,
.btn-cta-emerald:hover .btn-icon {
    transform: translateX(4px);
}

/* Navbar specific adjustments */
.nav-cta.btn-cta-blue .btn-gradient-border,
.nav-cta.btn-cta-cyan .btn-gradient-border,
.nav-cta.btn-cta-purple .btn-gradient-border,
.nav-cta.btn-cta-emerald .btn-gradient-border {
    border-radius: 0.9rem;
}

@media (max-width:768px){
    .solution-card{margin-top:2rem;padding:1.4rem;border-radius:18px}
    .solution-list li{font-size:12.5px}
}

.integration-card{width:100%;border:1px solid rgba(148,163,184,.35);border-radius:20px;background:rgba(255,255,255,.9);padding:1.6rem 1.4rem;box-shadow:0 16px 42px -24px rgba(15,23,42,.25);transition:transform .2s ease, box-shadow .2s ease;display:flex;flex-direction:column;gap:0.85rem;overflow:hidden}
.integration-card:hover{transform:translateY(-2px);box-shadow:0 22px 48px -22px rgba(15,23,42,.28)}
.dark .integration-card{background:rgba(15,23,42,.75);border-color:rgba(51,65,85,.55);box-shadow:0 18px 44px -24px rgba(15,23,42,.6)}
.solution-steps{counter-reset:step;margin:0;padding-left:0;display:grid;gap:.65rem}
.solution-steps li{list-style:none;font-size:13px;color:#475569;padding-left:1.8rem;position:relative;line-height:1.6}
.solution-steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:1.3rem;height:1.3rem;border-radius:999px;background:linear-gradient(120deg,#0ea5e9,#22d3ee);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dark .solution-steps li{color:#cbd5e1}
.dark .solution-steps li:before{background:linear-gradient(120deg,#38bdf8,#22d3ee)}
@media (prefers-reduced-motion: reduce){.glassy-header:after{animation:none;display:none}}
.site-header nav a{color:#334155}
.site-header nav a:hover{color:#0f172a}
.dark .site-header nav a{color:#e5e7eb;font-weight:500}
.dark .site-header nav a:hover{color:#ffffff}
.site-header > div{position:relative}
.site-header > div:before{content:none}
.dark .site-header > div:before{content:none}
@media (hover:hover){.site-header:hover{box-shadow:0 14px 46px -16px rgba(25,55,99,.35),0 4px 14px -4px rgba(15,23,42,.15)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header{background:rgba(255,255,255,.92)}.dark .site-header{background:rgba(255,255,255,.92)}}

@media (max-width:1024px){
    .site-header{width:calc(100% - 28px);}
}

@media (max-width:768px){
    .site-header{
        width:calc(100% - 24px);
        top:calc(env(safe-area-inset-top, 0px) + 10px);
        margin-top:calc(env(safe-area-inset-top, 0px) + 10px);
    }
    .site-header .container{
        padding-left:clamp(.85rem,6vw,1.2rem) !important;
        padding-right:clamp(.85rem,6vw,1.2rem) !important;
    }
    .site-header.fixed{top:calc(env(safe-area-inset-top, 0px) + 10px);}
}

@media (max-width:480px){
    .site-header{
        width:calc(100% - 16px);
        top:calc(env(safe-area-inset-top, 0px) + 8px);
        margin-top:calc(env(safe-area-inset-top, 0px) + 8px);
    }
    .site-header .container{
        padding-left:clamp(.75rem,7vw,1rem) !important;
        padding-right:clamp(.75rem,7vw,1rem) !important;
    }
    .site-header.fixed{top:calc(env(safe-area-inset-top, 0px) + 8px);}
}

@media (max-width:768px){
	.glass,
	.stacked-gradient,
	.hub-toggle,
	.op-panel-badge,
	#top .hero-badge,
	.badge-before,
	.badge-after{
		backdrop-filter:none!important;
		-webkit-backdrop-filter:none!important;
		background:rgba(255,255,255,.88);
		transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.dark .glass,
	.dark .stacked-gradient,
	.dark .hub-toggle,
	.dark .op-panel-badge,
	.dark #top .hero-badge,
	.dark .badge-before,
	.dark .badge-after{
		background:rgba(0,0,0,.8);
	}
	.site-header{
		position:fixed !important;
		top:calc(env(safe-area-inset-top, 0px) + 0px) !important;
		/* left:clamp(8px,4vw,16px) !important;
		right:clamp(8px,4vw,16px) !important; */
		/* margin:0 auto !important; */
		background:rgba(244,249,255,.75);
		-webkit-backdrop-filter:blur(16px) saturate(150%) !important;
		backdrop-filter:blur(16px) saturate(150%) !important;
		border:1px solid rgba(203,213,225,.6);
		box-shadow:0 8px 32px -8px rgba(15,23,42,.12);
		z-index:60;
        margin-left:8px;
	}
	.dark .site-header{
		background:rgba(10,15,25,.92);
		-webkit-backdrop-filter:blur(16px) saturate(150%);
		backdrop-filter:blur(16px) saturate(150%);
		border:1px solid rgba(255,255,255,.18);
		box-shadow:0 8px 32px -8px rgba(0,0,0,.5);
	}
	.site-header.scrolled{
		background:rgba(255,255,255,.95);
		-webkit-backdrop-filter:blur(16px) saturate(180%);
		backdrop-filter:blur(16px) saturate(180%);
		box-shadow:0 14px 36px -18px rgba(15,23,42,.24),0 8px 20px -16px rgba(15,23,42,.16);
	}
	.dark .site-header.scrolled{
		background:rgba(15,23,42,.92);
		-webkit-backdrop-filter:blur(16px) saturate(180%);
		backdrop-filter:blur(16px) saturate(180%);
		box-shadow:0 20px 48px -22px rgba(0,0,0,.55),0 10px 22px -18px rgba(15,23,42,.4);
	}
	/* Hero section - semi-transparent */
	.site-header.on-top{
		background:rgba(244,249,255,.75);
		-webkit-backdrop-filter:blur(16px) saturate(150%);
		backdrop-filter:blur(16px) saturate(150%);
	}
	.dark .site-header.on-top{
		background:rgba(15,23,42,.5);
		-webkit-backdrop-filter:blur(16px) saturate(150%);
		backdrop-filter:blur(16px) saturate(150%);
	}
	/* All other sections - opaque */
	.site-header.on-solutions,
	.site-header.on-voice-structured-records,
	.site-header.on-voice-prescription,
	.site-header.on-revenue-recovery,
	.site-header.on-documentation-automation,
	.site-header.on-prescription-automation,
	.site-header.on-revenue-integrity,
	.site-header.on-integrations,
	.site-header.on-case-studies,
	.site-header.on-trust-security,
	.site-header.on-cta{
		background:transparent;
		-webkit-backdrop-filter:none;
		backdrop-filter:none;
	}
	.dark .site-header.on-solutions,
	.dark .site-header.on-voice-structured-records,
	.dark .site-header.on-voice-prescription,
	.dark .site-header.on-revenue-recovery,
	.dark .site-header.on-documentation-automation,
	.dark .site-header.on-prescription-automation,
	.dark .site-header.on-revenue-integrity,
	.dark .site-header.on-integrations,
	.dark .site-header.on-case-studies,
	.dark .site-header.on-trust-security,
	.dark .site-header.on-cta{
		background:transparent;
		-webkit-backdrop-filter:none;
		backdrop-filter:none;
	}
	
	#top .hero-badge{border-color:rgba(148,163,184,.25)}
	.dark #top .hero-badge{border-color:rgba(51,65,85,.55)}
	.page-loader .loader .box{
		background:rgba(100,100,100,.15);
		background:var(--background);
		border-top:1px solid rgba(100,100,100,1);
		box-shadow:rgba(0,0,0,.3) 0 10px 10px 0px;
	}
	.dark .page-loader .loader .box{
		background:linear-gradient(0deg,rgba(50,50,50,.2) 0%,rgba(100,100,100,.2) 100%);
		border-top-color:rgba(100,100,100,1);
		box-shadow:rgba(0,0,0,.3) 0 10px 10px 0px;
	}
	.page-loader .loader{--duration:2s}
	.card-hover,
	.card-pro,
	.benefit-item,
	.result-card{
		transition:all .4s cubic-bezier(0.4, 0, 0.2, 1)!important;
	}
	.blob,
	.particle{display:none}
	.glassy-header:before{display:none!important}
	.glassy-header:after,
	.integration-core-pulse,
	.connector-path{
		animation-duration:16s!important;
		animation-timing-function:linear!important;
	}
	.glassy-header:after{opacity:0}
	.gradient-animated,
	.text-gradient-animated{
		animation-duration:14s;
		animation-timing-function:ease-in-out;
	}
	[data-reveal]{filter:none;transition-duration:.5s!important}
	.tilt-hover:hover,
	.card-hover:hover{
		transform:translateY(-3px)!important;
	}
}

@media (max-width:520px){
	.blob{display:none}
	.glassy-header:before,
	.glassy-header:after{animation:none;opacity:.35}
	.text-gradient-animated{animation:none;background-size:140% 100%;background-position:50% 50%}
}

/* ========================================================================== */
/* Modal & Form Enhancements                                                 */
/* ========================================================================== */
@media (max-width: 640px) {
	#demoModal .modal-panel { max-width: 100vw; }
	#demoModal .modal-panel .rounded-\[26px\] { border-radius: 20px; }
	#demoModal aside { padding: 18px 18px; }
	#demoModal #demoModalBody { padding: 16px 16px; }
	#demoModal #demoModalTitle { font-size: 1.45rem; }
	#demoModal .field-label { font-size: 10px; }
	#demoModal .field-input { padding: 0.9rem 0.95rem; font-size: 14px; }
	#demoModal .field-input.pad-adjust { padding-left: 2.4rem; }
	#demoModal .grid.gap-3 { gap: 10px; }
	#demoModal .grid.gap-4 { gap: 12px; }
	#demoModal .rounded-2xl { border-radius: 16px; }
	#demoModal .rounded-full.p-1 { padding: 0.25rem; }
	#demoModal .btn-loading .loader { --d: 14px !important; }
}

html.modal-open, body.modal-open { overflow: hidden; overscroll-behavior: none; height: 100%; }
body.modal-open { position: fixed; width: 100%; }
#demoModal { overscroll-behavior: contain; touch-action: pan-y; }
#demoModal .modal-panel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#demoModal > [data-modal-close] { touch-action: none; }

.header-blur-overlay {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	height: var(--header-blur-h, 120px);
}

.site-header > div::before { content: none !important; }

/* Removed duplicate hamburger-line block (mobile menu deprecated) */

#contact-demo-form .field-input{line-height:1.4;transition:all .25s cubic-bezier(.4,0,.2,1)}
#contact-demo-form .field-input::placeholder{color:rgba(100,116,139,.65);font-weight:400}
.dark #contact-demo-form .field-input::placeholder{color:rgba(148,163,175,.55)}
#contact-demo-form .field-input.pad-adjust{padding-left:2.75rem}
#contact-demo-form .field-input:hover{border-color:rgba(37,99,235,.35);box-shadow:0 0 0 3px rgba(37,99,235,.07)}
#contact-demo-form .field-input:focus{transform:translateY(-1px);border-color:#2563eb;box-shadow:0 10px 30px -12px rgba(37,99,235,.45),0 0 0 4px rgba(37,99,235,.15)}
#contact-demo-form .group:focus-within .field-label{color:#1d4ed8}
.dark #contact-demo-form .group:focus-within .field-label{color:#38bdf8}
@media (max-width:360px){#contact-demo-form .field-input.pad-adjust{padding-left:2.5rem}}
@media (max-width:640px){#demoModalBody form .grid{grid-template-columns:1fr!important}#demoModalBody input,#demoModalBody textarea{font-size:15px;padding:1rem .95rem}#demoModalBody label{font-size:13px}}

/* ========================================================================== */
/* Voice to Record Transformation                                             */
/* ========================================================================== */
.voice-record-transformation { max-width:1200px; margin:0 auto; }
.transformation-container { display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; margin-bottom:3rem; }
@media (max-width:1024px) { .transformation-container { grid-template-columns:1fr; gap:1.5rem; } }

.voice-input-card, .medical-record-card { background:#fff; border:2px solid #e2e8f0; border-radius:16px; padding:1.5rem; box-shadow:0 8px 30px -10px rgba(0,0,0,.12); transition:transform .3s, box-shadow .3s; }
.dark .voice-input-card, .dark .medical-record-card { background:#1a1f2e; border-color:#334155; box-shadow:0 10px 35px -12px rgba(0,0,0,.5); }
.voice-input-card:hover, .medical-record-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px -15px rgba(0,0,0,.2); }
.dark .voice-input-card:hover, .dark .medical-record-card:hover { box-shadow:0 14px 45px -15px rgba(0,0,0,.6); }

.voice-card-header, .record-card-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1.2rem; padding-bottom:.8rem; border-bottom:2px solid #e2e8f0; }
.dark .voice-card-header, .dark .record-card-header { border-bottom-color:#334155; }

.voice-icon-wrapper { position:relative; width:48px; height:48px; background:linear-gradient(135deg,#06b6d4,#0ea5e9); border-radius:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px -4px rgba(6,182,212,.5); }
.dark .voice-icon-wrapper { background:linear-gradient(135deg,#0ea5e9,#06b6d4); box-shadow:0 4px 14px -4px rgba(14,165,233,.6); }
.voice-icon { color:#fff; }
.recording-pulse { position:absolute; top:-4px; right:-4px; width:12px; height:12px; background:#ef4444; border-radius:50%; animation:pulse 1.5s ease-in-out infinite; border:2px solid #fff; }
.dark .recording-pulse { border-color:#1a1f2e; }
@keyframes pulse { 0%, 100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.2); opacity:.7; } }

.record-icon-wrapper { width:48px; height:48px; background:linear-gradient(135deg,#3b82f6,#2563eb); border-radius:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px -4px rgba(59,130,246,.5); }
.dark .record-icon-wrapper { background:linear-gradient(135deg,#60a5fa,#3b82f6); box-shadow:0 4px 14px -4px rgba(59,130,246,.6); }
.record-icon { color:#fff; }

.voice-card-title, .record-card-title { font-size:16px; font-weight:700; color:#1e293b; }
.dark .voice-card-title, .dark .record-card-title { color:#e2e8f0; }

.voice-transcript-box { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:1rem; margin-bottom:1rem; min-height:180px; }
.dark .voice-transcript-box { background:#0f172a; border-color:#334155; }

.transcript-item { font-size:13px; line-height:1.6; color:#475569; margin-bottom:.7rem; }
.transcript-item:last-child { margin-bottom:0; }
.transcript-item.fade { opacity:.4; }
.dark .transcript-item { color:#94a3b8; }
.speaker { font-weight:700; color:#0ea5e9; }
.dark .speaker { color:#38bdf8; }

.voice-stats { display:flex; gap:1.5rem; padding-top:.8rem; border-top:1px solid #e2e8f0; }
.dark .voice-stats { border-top-color:#334155; }
.stat-item { display:flex; flex-direction:column; gap:.2rem; }
.stat-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#64748b; font-weight:600; }
.dark .stat-label { color:#94a3b8; }
.stat-value { font-size:14px; font-weight:700; color:#1e293b; }
.dark .stat-value { color:#e2e8f0; }
.stat-value.recording { color:#ef4444; }

.transformation-arrow { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
@media (max-width:1024px) { .transformation-arrow { transform:rotate(90deg); margin:1rem 0; } }
.arrow-svg { color:#06b6d4; animation:arrowPulse 2s ease-in-out infinite; }
.dark .arrow-svg { color:#38bdf8; }
@keyframes arrowPulse { 0%, 100% { transform:translateX(0); opacity:.7; } 50% { transform:translateX(8px); opacity:1; } }
.arrow-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#0ea5e9; background:#e0f2fe; padding:.3rem .6rem; border-radius:999px; }
.dark .arrow-label { color:#38bdf8; background:rgba(6,182,212,.15); }
@media (max-width:1024px) { .arrow-label { transform:rotate(-90deg); } }

.soap-output-box { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:1rem; margin-bottom:1rem; min-height:180px; }
.dark .soap-output-box { background:#0f172a; border-color:#334155; }
.soap-section { display:flex; gap:.6rem; margin-bottom:.8rem; font-size:13px; line-height:1.6; }
.soap-section:last-child { margin-bottom:0; }
.soap-label { font-weight:700; color:#2563eb; flex-shrink:0; }
.dark .soap-label { color:#60a5fa; }
.soap-text { color:#475569; }
.dark .soap-text { color:#94a3b8; }

.record-badge-group { display:flex; gap:.6rem; flex-wrap:wrap; }
.record-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:10.5px; font-weight:600; padding:.35rem .6rem; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; }
.record-badge.success { background:#d1fae5; color:#065f46; }
.dark .record-badge.success { background:rgba(16,185,129,.2); color:#6ee7b7; }
.record-badge.time { background:#e0e7ff; color:#3730a3; }
.dark .record-badge.time { background:rgba(99,102,241,.2); color:#a5b4fc; }

.voice-record-features { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin-top:2rem; }
@media (max-width:768px) { .voice-record-features { gap:1rem; } }
@media (max-width:480px) { .voice-record-features { gap:.8rem; } }
.feature-highlight { text-align:center; }
.feature-icon-box { width:56px; height:56px; margin:0 auto 1rem; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.feature-icon-box.cyan { background:linear-gradient(135deg,#06b6d4,#0ea5e9); box-shadow:0 6px 20px -6px rgba(6,182,212,.4); }
.dark .feature-icon-box.cyan { background:linear-gradient(135deg,#0ea5e9,#06b6d4); box-shadow:0 6px 20px -6px rgba(14,165,233,.6); }
.feature-icon-box.blue { background:linear-gradient(135deg,#3b82f6,#2563eb); box-shadow:0 6px 20px -6px rgba(59,130,246,.4); }
.dark .feature-icon-box.blue { background:linear-gradient(135deg,#60a5fa,#3b82f6); box-shadow:0 6px 20px -6px rgba(59,130,246,.6); }
.feature-icon-box.indigo { background:linear-gradient(135deg,#6366f1,#4f46e5); box-shadow:0 6px 20px -6px rgba(99,102,241,.4); }
.dark .feature-icon-box.indigo { background:linear-gradient(135deg,#818cf8,#6366f1); box-shadow:0 6px 20px -6px rgba(99,102,241,.6); }
.feature-icon-box svg { color:#fff; }
.feature-highlight-title { font-size:15px; font-weight:700; color:#1e293b; margin-bottom:.4rem; }
.dark .feature-highlight-title { color:#e2e8f0; }
.feature-highlight-desc { font-size:12.5px; color:#64748b; line-height:1.5; }
.dark .feature-highlight-desc { color:#94a3b8; }

/* Responsive: Voice to Record Section - iPad Pro & Large Tablets (769px - 1024px) */
@media (max-width:1024px) and (min-width:769px) {
    .transformation-container { grid-template-columns:1fr; gap:2rem; }
    .transformation-arrow { transform:rotate(90deg); margin:1rem 0; }
    .arrow-label { transform:rotate(-90deg); }
    .voice-input-card, .medical-record-card { max-width:600px; margin:0 auto; }
}

/* Responsive: Voice to Record Section - iPad & Tablets (481px - 768px) */
@media (max-width:768px) and (min-width:481px) {
    .voice-input-card, .medical-record-card { padding:1.3rem; max-width:520px; margin:0 auto; }
    .voice-card-title, .record-card-title { font-size:15px; }
    .voice-transcript-box, .soap-output-box { min-height:160px; padding:.9rem; }
    .transcript-item, .soap-text { font-size:12.5px; }
}

/* Responsive: Voice to Record Section - Mobile (up to 480px) */
@media (max-width:480px) {
    .transformation-container { gap:1.2rem; }
    .voice-input-card, .medical-record-card { padding:1.2rem; border-width:1.5px; }
    .voice-icon-wrapper, .record-icon-wrapper { width:42px; height:42px; }
    .voice-icon-wrapper svg, .record-icon-wrapper svg { width:20px; height:20px; }
    .voice-card-title, .record-card-title { font-size:14px; }
    .voice-transcript-box, .soap-output-box { min-height:140px; padding:.8rem; }
    .transcript-item { font-size:12px; margin-bottom:.6rem; }
    .soap-section { font-size:12px; margin-bottom:.7rem; }
    .soap-label { font-size:12px; }
    .soap-text { font-size:11.5px; }
    .voice-stats { gap:1rem; }
    .stat-label { font-size:10px; }
    .stat-value { font-size:13px; }
    .record-badge { font-size:9.5px; padding:.3rem .5rem; }
    .transformation-arrow svg { width:50px; height:50px; }
    .arrow-label { font-size:10px; padding:.25rem .5rem; }
    .feature-icon-box { width:44px; height:44px; margin:0 auto .6rem; }
    .feature-icon-box svg { width:18px; height:18px; }
    .feature-highlight-title { font-size:12px; margin-bottom:.3rem; }
    .feature-highlight-desc { font-size:10.5px; line-height:1.4; }
}

/* ========================================================================== */
/* Voice Records Flow Animation (LEGACY)                                      */
/* ========================================================================== */
:is(#voice-records,#documentation-automation) .voice-flow-container{max-width:520px;min-height:420px;margin:0 auto;background:linear-gradient(145deg,#ffffff,#f5f9fb);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:2rem 1.5rem;box-shadow:0 6px 18px -8px rgba(15,23,42,.18);position:relative;overflow:hidden}
.dark :is(#voice-records,#documentation-automation) .voice-flow-container{background:linear-gradient(145deg,rgba(18,24,34,.96),rgba(10,15,22,.94));border:1px solid rgba(96,165,250,.22);box-shadow:0 8px 26px -12px rgba(0,0,0,.65)}
:is(#voice-records,#documentation-automation) .stage-label{font-size:13px;font-weight:600;letter-spacing:.5px;color:#334155;text-align:center;margin-bottom:1.25rem;transition:all .6s cubic-bezier(.4,0,.2,1)}
.dark :is(#voice-records,#documentation-automation) .stage-label{color:#cbd5e1}
:is(#voice-records,#documentation-automation) .stage{position:absolute;inset:0;padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:scale(.92);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);pointer-events:none}
:is(#voice-records,#documentation-automation) .stage.active{opacity:1;transform:scale(1);pointer-events:auto}
:is(#voice-records,#documentation-automation) .spinner{background-image:linear-gradient(135deg,#4d82ff 25%,#4fd3c4);width:92px;height:92px;border-radius:50%;animation:voiceSpin 1.9s linear infinite;filter:blur(.5px);box-shadow:0 -4px 14px -4px rgba(77,130,255,.6),0 6px 18px -6px rgba(79,211,196,.45);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-bottom:1.5rem}
:is(#voice-records,#documentation-automation) .spinner-core{background:#1e293b;width:86px;height:86px;border-radius:50%;filter:blur(8px);opacity:.85;position:absolute;inset:3px}
.dark :is(#voice-records,#documentation-automation) .spinner-core{background:#0f172a}
@keyframes voiceSpin{to{transform:rotate(360deg)}}
:is(#voice-records,#documentation-automation) .transcript{width:100%;text-align:left;font-size:12px;line-height:1.5;background:#ffffff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:.75rem .9rem;margin-top:1rem}
.dark :is(#voice-records,#documentation-automation) .transcript{background:rgba(18,26,38,.85);border-color:rgba(96,165,250,.22)}
@keyframes transLineIn{to{opacity:1;transform:translateX(0)}}
:is(#voice-records,#documentation-automation) .transcript-line{opacity:0;transform:translateX(-6px)}
:is(#voice-records,#documentation-automation) .transcript-line.play{animation:transLineIn .55s cubic-bezier(.4,0,.2,1) forwards}
:is(#voice-records,#documentation-automation) .proc-bars{display:flex;align-items:flex-end;gap:5px;height:64px;justify-content:center;margin-bottom:1.5rem}
:is(#voice-records,#documentation-automation) .proc-bars span{width:10px;background:linear-gradient(180deg,#06b6d4,#3b82f6);border-radius:8px;animation:procWave 1.4s ease-in-out infinite}
:is(#voice-records,#documentation-automation) .proc-bars span:nth-child(2){animation-delay:.15s}
:is(#voice-records,#documentation-automation) .proc-bars span:nth-child(3){animation-delay:.3s}
:is(#voice-records,#documentation-automation) .proc-bars span:nth-child(4){animation-delay:.45s}
:is(#voice-records,#documentation-automation) .proc-bars span:nth-child(5){animation-delay:.6s}
:is(#voice-records,#documentation-automation) .proc-bars span:nth-child(6){animation-delay:.75s}
@keyframes procWave{0%,100%{height:12px;opacity:.55}50%{height:56px;opacity:1}}
:is(#voice-records,#documentation-automation) .proc-note{font-size:12px;color:#64748b;text-align:center;margin-top:1rem}
.dark :is(#voice-records,#documentation-automation) .proc-note{color:#94a3b8}
:is(#voice-records,#documentation-automation) .soap-block{width:100%;text-align:left;font-size:12px;line-height:1.5;background:#ffffff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:.85rem 1rem;position:relative}
.dark :is(#voice-records,#documentation-automation) .soap-block{background:rgba(15,23,42,.85);border-color:rgba(96,165,250,.25)}
:is(#voice-records,#documentation-automation) .soap-block:before{content:"SOAP";position:absolute;top:8px;right:12px;font-size:10px;font-weight:600;letter-spacing:.7px;padding:4px 7px;border-radius:6px;background:linear-gradient(90deg,#4d82ff,#4fd3c4);color:#fff}
@keyframes lineIn{to{opacity:1;transform:translateY(0)}}
:is(#voice-records,#documentation-automation) .soap-line{opacity:0;transform:translateY(6px)}
:is(#voice-records,#documentation-automation) .soap-line.play{animation:lineIn .8s cubic-bezier(.4,0,.2,1) forwards}
:is(#voice-records,#documentation-automation) .vf-fade{position:absolute;inset:0;background:linear-gradient(145deg,#ffffff,#f5f9fb);opacity:0;pointer-events:none;transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.dark :is(#voice-records,#documentation-automation) .vf-fade{background:linear-gradient(145deg,rgba(20,28,40,.94),rgba(12,18,28,.94))}
:is(#voice-records,#documentation-automation) .vf-fade.active{opacity:.85}
:is(#voice-records,#documentation-automation) .vf-progress{position:absolute;left:16px;right:16px;bottom:12px;height:4px;background:rgba(148,163,184,.25);border-radius:9999px;overflow:hidden}
.dark :is(#voice-records,#documentation-automation) .vf-progress{background:rgba(51,65,85,.55)}
:is(#voice-records,#documentation-automation) .vf-progress-fill{width:0%;height:100%;background:linear-gradient(90deg,#4d82ff,#4fd3c4);transition:width linear}
.dark :is(#voice-records,#documentation-automation) .vf-progress-fill{background:linear-gradient(90deg,#3b82f6,#06b6d4)}
:is(#voice-records,#documentation-automation) .vf-indicators{position:absolute;left:16px;right:16px;bottom:24px;display:flex;justify-content:center;gap:8px;pointer-events:none}
:is(#voice-records,#documentation-automation) .vf-indicators span{width:8px;height:8px;border-radius:50%;background:rgba(148,163,184,.45);transition:transform .45s cubic-bezier(.4,0,.2,1),background .45s,opacity .45s;opacity:.55}
.dark :is(#voice-records,#documentation-automation) .vf-indicators span{background:rgba(51,65,85,.55)}
:is(#voice-records,#documentation-automation) .vf-indicators span.active{background:linear-gradient(90deg,#4d82ff,#4fd3c4);opacity:1;transform:scale(1.4)}
.dark :is(#voice-records,#documentation-automation) .vf-indicators span.active{background:linear-gradient(90deg,#3b82f6,#06b6d4)}
@media (max-width:768px){:is(#voice-records,#documentation-automation) .voice-flow-container{min-height:360px;padding:1.5rem 1rem}}
@media (prefers-reduced-motion: reduce){:is(#voice-records,#documentation-automation) .spinner,:is(#voice-records,#documentation-automation) .proc-bars span{animation:none}:is(#voice-records,#documentation-automation) .soap-line,:is(#voice-records,#documentation-automation) .transcript-line{opacity:1;transform:none;animation:none}:is(#voice-records,#documentation-automation) .stage{transition:none}}

.tilt-shift{position:absolute;inset:0;background:radial-gradient(circle at 65% 30%,rgba(255,255,255,.55),transparent 70%);mix-blend-mode:overlay;pointer-events:none;opacity:.6}
@media (max-width:768px){.stacked-col{display:flex;overflow-x:auto;gap:16px;padding-bottom:6px;-webkit-overflow-scrolling:touch}.stacked-card{min-width:240px}}

/* ========================================================================== */
/* Section: Why Hospitals Choose GenEMR (extracted from index.html)           */
/* ========================================================================== */
#why .layout{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:1280px){#why .layout{gap:3.5rem;grid-template-columns:repeat(12,minmax(0,1fr))}}
@media (min-width:1280px){#why .col-left{grid-column:span 5 / span 5}#why .col-middle{grid-column:span 7 / span 7}#why .col-right{grid-column:span 12 / span 12;order:3;flex-direction:row;flex-wrap:wrap}}
#why .radial-cluster{position:relative;width:100%;aspect-ratio:1/1;max-width:360px;margin:auto;display:grid;place-items:center;--ring-inner-r:0.63;--ring-outer-r:1;--ring-mid-r:calc((var(--ring-inner-r) + var(--ring-outer-r)) * 0.5)}
#why .radial-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--c1) var(--p),#e2e8f0 var(--p));mask:radial-gradient(circle at 50% 50%,#0000 63%,#000 64%);z-index:1}
.dark #why .radial-ring{background:conic-gradient(from 0deg,var(--c1) var(--p),#1e293b var(--p))}
#why .radial-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56%;height:56%;border-radius:50%;background:linear-gradient(140deg,#ffffffdd,#f1f5f9ee);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;border:1px solid rgba(148,163,184,.35);box-shadow:0 8px 28px -12px rgba(15,23,42,.22);z-index:2}
.dark #why .radial-core{background:linear-gradient(140deg,rgba(15,15,15,0.85),rgba(10,10,10,0.75));border-color:rgba(255,255,255,.1)}
#why .radial-core h3{font-size:13px;letter-spacing:.5px;font-weight:600;color:#475569;margin-bottom:.25rem;text-transform:uppercase}
.dark #why .radial-core h3{color:#94a3b8}
#why .radial-core .core-number{display:inline-flex;align-items:baseline;gap:.12em;font-size:38px;font-weight:700;line-height:1;letter-spacing:-1px}
#why .radial-core .core-number .counter,#why .radial-core .core-number .unit{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
#why .radial-core .core-number .unit{font-size:.52em;font-weight:600;letter-spacing:0}
#why .stat-orb{position:absolute;top:50%;left:50%;width:clamp(80px,13.2vw,96px);height:clamp(80px,13.2vw,96px);border-radius:50%;background:linear-gradient(150deg,#ffffffee,#f1f5f9d9);backdrop-filter:blur(6px);border:1px solid rgba(148,163,184,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;font-size:13px;text-align:center;font-weight:500;line-height:1.15;box-shadow:0 8px 22px -8px rgba(15,23,42,.18);transition:.4s cubic-bezier(.4,.2,.2,1);cursor:default;padding:.4rem;z-index:3;--orb-radius-fallback:calc(var(--ring-mid-r) * 100%);--orb-radius:var(--orb-radius-px,var(--orb-radius-fallback))}
.dark #why .stat-orb{background:linear-gradient(150deg,rgba(20,20,20,0.85),rgba(10,10,10,0.75));border-color:rgba(255,255,255,.1)}
#why .stat-orb .val{display:inline-flex;align-items:baseline;gap:.1em;font-size:22px;font-weight:700;letter-spacing:-.5px}
#why .stat-orb .val .counter,#why .stat-orb .val .unit{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
#why .stat-orb .val .unit{font-size:.6em;font-weight:600;letter-spacing:0}
#why .stat-orb[data-pos="a"]{transform:translate(-50%, calc(-50% - var(--orb-radius)))}
#why .stat-orb[data-pos="b"]{transform:translate(calc(-50% - var(--orb-radius)), -50%)}
#why .stat-orb[data-pos="c"]{transform:translate(calc(-50% + var(--orb-radius)), -50%)}
#why .stat-orb[data-pos="d"]{transform:translate(-50%, calc(-50% + var(--orb-radius)))}
#why .stat-orb[data-pos="a"]:hover{transform:translate(-50%, calc(-50% - var(--orb-radius) - 6px))}
#why .stat-orb[data-pos="b"]:hover{transform:translate(calc(-50% - var(--orb-radius) - 6px), -50%)}
#why .stat-orb[data-pos="c"]:hover{transform:translate(calc(-50% + var(--orb-radius) + 6px), -50%)}
#why .stat-orb[data-pos="d"]:hover{transform:translate(-50%, calc(-50% + var(--orb-radius) + 6px))}
@media (max-width:640px){.radial-core .core-number{font-size:26px}}
@media (max-width:420px){#why .radial-cluster{transform:scale(.9);transform-origin:top center}}
#why .benefit-list{display:flex;flex-direction:column;gap:.8rem}
#why .benefit-item{position:relative;border:1px solid rgba(148,163,184,.3);background:linear-gradient(140deg,#ffffff,#f1f5f9);border-radius:18px;overflow:hidden;transition:.55s cubic-bezier(.4,.2,.2,1);cursor:pointer;padding:1rem 1rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem}
.dark #why .benefit-item{background:linear-gradient(140deg,rgba(15,20,30,0.95),rgba(8,12,20,0.92));border:1.5px solid rgba(96,165,250,.25);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
#why .benefit-item:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%);opacity:0;transition:opacity .8s;pointer-events:none;z-index:0}
#why .benefit-item > *{position:relative;z-index:1}
#why .benefit-item:hover:before,#why .benefit-item:focus-visible:before{opacity:.5}
.dark #why .benefit-item:before{background:linear-gradient(120deg,rgba(96,165,250,.15),rgba(255,255,255,0) 55%)}
.dark #why .benefit-item:hover:before,.dark #why .benefit-item:focus-visible:before{opacity:.3}
#why .benefit-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
@media (pointer:coarse){#why .benefit-item:hover{transform:none;box-shadow:var(--shadow-soft)}}
#why .benefit-item[aria-expanded="true"]{transform:translateY(-2px);box-shadow:0 10px 28px -12px rgba(15,23,42,.18)}
#why .benefit-head{display:flex;align-items:center;gap:.75rem;position:relative;z-index:2}
#why .benefit-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4d82ff,#06b2f2,#4fd3c4);color:#fff;font-size:14px;box-shadow:0 4px 14px -4px rgba(0,0,0,.35);flex-shrink:0;position:relative;z-index:2}
#why .benefit-item[data-theme="emerald"] .benefit-icon{background:linear-gradient(135deg,#10b981,#06b2f2)}
#why .benefit-item[data-theme="amber"] .benefit-icon{background:linear-gradient(135deg,#f59e0b,#f43f5e)}
#why .benefit-item[data-theme="violet"] .benefit-icon{background:linear-gradient(135deg,#8b5cf6,#6366f1,#4d82ff)}
#why .benefit-item[data-theme="cyan"] .benefit-icon{background:linear-gradient(135deg,#0891b2,#06b2f2,#4fd3c4)}
#why .benefit-icon svg{position:relative;z-index:1}
#why .benefit-title{font-size:13px;font-weight:600;letter-spacing:.3px;color:#0f172a;position:relative;z-index:2}
.dark #why .benefit-title{color:#f3f4f6;font-weight:600}
#why .benefit-text{font-size:13px;color:#475569;line-height:1.4;position:relative;z-index:2}
.dark #why .benefit-text{color:#d1d5db}
#why .benefit-extra{font-size:13px;line-height:1.4;color:#475569;max-height:0;overflow:hidden;opacity:0;transition:max-height .7s ease,opacity .6s ease .05s;border-top:1px dashed rgba(148,163,184,.35);padding-top:0;margin-top:0;position:relative;z-index:2}
.dark #why .benefit-extra{color:#d1d5db;border-top-color:rgba(96,165,250,.2)}
#why .benefit-item[aria-expanded="true"] .benefit-extra{max-height:120px;opacity:1;padding-top:.55rem;margin-top:.2rem}
#why .benefit-toggle{margin-left:auto;width:28px;height:28px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;color:#475569;background:transparent;border:1px solid #e2e8f0;box-shadow:0 1px 0 rgba(0,0,0,.02);transition:background .3s cubic-bezier(.25,.46,.45,.94),color .3s cubic-bezier(.25,.46,.45,.94),border-color .3s cubic-bezier(.25,.46,.45,.94);position:relative;z-index:2}
#why .benefit-toggle svg{width:14px;height:14px;transition:transform .35s cubic-bezier(.25,.46,.45,.94);transform:rotate(0deg);position:relative;z-index:1}
.dark #why .benefit-toggle{background:transparent;color:#94a3b8;border-color:#334155}
#why .benefit-item:hover .benefit-toggle{border-color:#94a3b8}
.dark #why .benefit-item:hover .benefit-toggle{border-color:#64748b}
#why .benefit-item[aria-expanded="true"] .benefit-toggle{background:var(--grad-accent);color:#fff;border-color:transparent}
#why .benefit-item[aria-expanded="true"] .benefit-toggle svg{transform:rotate(90deg)}
@media (max-width:640px){#why .benefit-toggle{display:none}}
#why .divider{height:1px;background:linear-gradient(90deg,transparent,#4d82ff,#06b2f2,#4fd3c4,transparent);opacity:.55;margin:1.75rem 0}
#why .micro-badges{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
#why .micro-badge{font-size:13px;padding:.28rem .55rem;border-radius:7px;background:#ffffffd5;border:1px solid rgba(148,163,184,.35);backdrop-filter:blur(4px);font-weight:500;letter-spacing:.3px;color:#475569;display:inline-flex;align-items:center;gap:4px}
.dark #why .micro-badge{background:#1e293bb0;color:#94a3b8;border-color:#334155}
#why .note{font-size:13px;color:#64748b}
.dark #why .note{color:#94a3b8}

/* ========================================================================== */
/* Section: How It Works Flow (extracted from index.html)                     */
/* ========================================================================== */
#how .how-layout{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:1024px){#how .how-layout{gap:3.5rem;grid-template-columns:repeat(12,minmax(0,1fr))}}
#how .how-intro{grid-column:span 1;display:flex;flex-direction:column;gap:1.5rem;position:relative;text-align:center}
@media (min-width:768px){#how .how-intro{text-align:left}}
@media (min-width:1024px){#how .how-intro{grid-column:span 5 / span 5}}
#how .how-steps-col{grid-column:span 1;position:relative}
@media (min-width:1024px){#how .how-steps-col{grid-column:span 7 / span 7}}
#how .tag{font-size:10px;font-weight:600;letter-spacing:.5px;background:linear-gradient(90deg,#eef4ff,#f1fbff);color:#1e3a8a;padding:6px 10px;border:1px solid #dbeafe;display:inline-flex;align-items:center;gap:6px;border-radius:9999px;width:fit-content}
.dark #how .tag{background:linear-gradient(90deg,#1e293b,#0f172a);color:#93c5fd;border-color:#334155}
#how .intro-card{background:linear-gradient(140deg,#ffffffcc,#f5f9ffcc);backdrop-filter:blur(8px);border:1px solid rgba(148,163,184,.3);padding:1.4rem 1.5rem;border-radius:22px;display:flex;flex-direction:column;gap:.85rem;box-shadow:0 8px 28px -12px rgba(15,23,42,.18)}
.dark #how .intro-card{background:linear-gradient(140deg,#1e293bcc,#0f172acc);border-color:#334155}
#how .intro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.85rem;margin-top:.5rem}
#how .intro-mini{font-size:10px;padding:.55rem .65rem;border:1px solid rgba(148,163,184,.35);border-radius:12px;background:#ffffffaa;font-weight:500;display:flex;align-items:center;gap:6px;line-height:1.2}
.dark #how .intro-mini{background:#1e293bbb;border-color:#334155;color:#94a3b8}
#how ol.how-steps{counter-reset:step;list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:1.75rem}
#how ol.how-steps:before{content:"";position:absolute;left:20px;top:4px;bottom:4px;width:2px;background:linear-gradient(to bottom,#4d82ff,#4fd3c4);opacity:.35}
#how .how-step{position:relative;padding-left:58px;padding-right:1rem}
#how .how-step:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:linear-gradient(135deg,#4d82ff,#06b2f2,#4fd3c4);color:#fff;box-shadow:0 6px 18px -8px rgba(77,130,255,.55);transition:transform .6s cubic-bezier(.4,0,.2,1), box-shadow .6s}
#how .how-step:after{content:"";position:absolute;left:20px;top:44px;width:2px;height:calc(100% - 44px);background:linear-gradient(to bottom,rgba(77,130,255,.55),transparent);opacity:.5}
#how .how-step:last-child:after{display:none}
#how .how-step h3{font-size:15px;font-weight:600;letter-spacing:.2px;margin:0 0 .35rem;color:#0f172a}
.dark #how .how-step h3{color:#e5e7eb}
#how .how-step p{font-size:12px;line-height:1.45;color:#475569;margin:0 0 .55rem}
.dark #how .how-step p{color:#9ca3af}
#how .hint{font-size:10px;letter-spacing:.4px;font-weight:600;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:7px;background:rgba(77,130,255,.08);color:#1e3a8a}
.dark #how .hint{background:rgba(77,130,255,.18);color:#93c5fd}
#how .how-step.animate-in:before{transform:scale(1.08);box-shadow:0 10px 28px -10px rgba(77,130,255,.65)}
#how .how-step.animate-in{animation:fadeInStep .7s ease forwards}
@keyframes fadeInStep{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}
@media (max-width:640px){#how .how-step{padding-left:52px}#how .how-step:before{width:34px;height:34px;font-size:12px;border-radius:12px}}


/* ========================================================================== */
/* Timeline Design for How It Works Section                                   */
/* ========================================================================== */

/* Timeline Progress Animation */
.timeline-progress {
    animation: timelineGrow 2s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes timelineGrow {
    from { height: 0; }
    to { height: 100%; }
}

/* Timeline Badge Animation */
.timeline-badge {
    animation: badgeAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    transform: scale(0);
}

.timeline-badge:nth-of-type(1) {
    animation-delay: 0.2s;
}

.timeline-badge:nth-of-type(2) {
    animation-delay: 0.6s;
}

.timeline-badge:nth-of-type(3) {
    animation-delay: 1s;
}

@keyframes badgeAppear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Mobile Timeline Adjustments */
@media (max-width: 768px) {
    .timeline-progress,
    .timeline-badge {
        display: block !important;
    }
}

/* Responsive spacing for mobile */
@media (max-width: 640px) {
    .md\:mb-20 {
        margin-bottom: 3rem !important;
    }
}


/* ========================================================================== */
/* Hub-and-Spoke Workflow Diagram - ZautoAI                                   */
/* ========================================================================== */

.zauto-workflow-hub {
    position: relative;
    width: 100%;
    height: 600px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.4), rgba(243, 244, 246, 0.3));
    border-radius: 24px;
    padding: 2rem;
    overflow: hidden;
}

.dark .zauto-workflow-hub {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.4));
}

/* SVG Connections */
.workflow-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.workflow-line {
    stroke-dasharray: 8 4;
    animation: flowAnimation 20s linear infinite;
    transition: stroke-width 0.3s ease;
}

@keyframes flowAnimation {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 240;
    }
}

.flow-dot {
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
}

/* Workflow Nodes */
.workflow-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.workflow-node:hover {
    transform: translateY(-4px);
}

.node-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.15);
    transition: all 0.3s ease;
}

.dark .node-icon {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.4);
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.3);
}

.node-icon svg {
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

.workflow-node:hover .node-icon {
    box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.25);
    transform: scale(1.05);
}

.dark .workflow-node:hover .node-icon {
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
}

.workflow-node:hover .node-icon svg {
    transform: scale(1.1);
}

/* Node Color Variations */
.node-icon[data-color="blue"] {
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    border-color: rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

.dark .node-icon[data-color="blue"] {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.node-icon[data-color="purple"] {
    background: linear-gradient(135deg, #ede9fe, #f5f3ff);
    border-color: rgba(139, 92, 246, 0.3);
    color: #7c3aed;
}

.dark .node-icon[data-color="purple"] {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(124, 58, 237, 0.2));
    border-color: rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
}

.node-icon[data-color="green"] {
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
    border-color: rgba(16, 185, 129, 0.3);
    color: #059669;
}

.dark .node-icon[data-color="green"] {
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.3), rgba(5, 150, 105, 0.2));
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.node-icon[data-color="pink"] {
    background: linear-gradient(135deg, #fce7f3, #fdf2f8);
    border-color: rgba(236, 72, 153, 0.3);
    color: #db2777;
}

.dark .node-icon[data-color="pink"] {
    background: linear-gradient(135deg, rgba(157, 23, 77, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.4);
    color: #f9a8d4;
}

.node-icon[data-color="orange"] {
    background: linear-gradient(135deg, #fed7aa, #ffedd5);
    border-color: rgba(249, 115, 22, 0.3);
    color: #ea580c;
}

.dark .node-icon[data-color="orange"] {
    background: linear-gradient(135deg, rgba(194, 65, 12, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.4);
    color: #fdba74;
}

.node-icon[data-color="cyan"] {
    background: linear-gradient(135deg, #cffafe, #ecfeff);
    border-color: rgba(6, 182, 212, 0.3);
    color: #0891b2;
}

.dark .node-icon[data-color="cyan"] {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.3), rgba(8, 145, 178, 0.2));
    border-color: rgba(6, 182, 212, 0.4);
    color: #67e8f9;
}

.node-icon[data-color="indigo"] {
    background: linear-gradient(135deg, #e0e7ff, #eef2ff);
    border-color: rgba(99, 102, 241, 0.3);
    color: #4f46e5;
}

.dark .node-icon[data-color="indigo"] {
    background: linear-gradient(135deg, rgba(55, 48, 163, 0.3), rgba(79, 70, 229, 0.2));
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

.node-icon[data-color="emerald"] {
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
    border-color: rgba(16, 185, 129, 0.3);
    color: #059669;
}

.dark .node-icon[data-color="emerald"] {
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.3), rgba(5, 150, 105, 0.2));
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.node-icon[data-color="violet"] {
    background: linear-gradient(135deg, #ede9fe, #f5f3ff);
    border-color: rgba(139, 92, 246, 0.3);
    color: #7c3aed;
}

.dark .node-icon[data-color="violet"] {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(124, 58, 237, 0.2));
    border-color: rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
}

.node-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.dark .node-label {
    color: #cbd5e1;
}

/* Center Hub */
.workflow-hub-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.hub-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);
    border-radius: 50%;
    z-index: -1;
    animation: hubGlow 3s ease-in-out infinite;
}

.dark .hub-glow {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.25), transparent 70%);
}

@keyframes hubGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

.hub-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    border: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: 50%;
    animation: hubPulse 2s ease-out infinite;
    z-index: -1;
}

@keyframes hubPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

.hub-logo {
    width: 96px;
    height: 96px;
    background: white;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 40px -12px rgba(15, 23, 42, 0.3);
    border: 3px solid rgba(59, 130, 246, 0.2);
    position: relative;
    overflow: hidden;
}

.dark .hub-logo {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5);
}

.zauto-icon-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.hub-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.hub-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.5px;
}

.dark .hub-title {
    color: #f1f5f9;
}

.hub-subtitle {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.3px;
}

.dark .hub-subtitle {
    color: #94a3b8;
}

.hub-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #2563eb;
}

.dark .hub-status {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1));
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .zauto-workflow-hub {
        height: 500px;
    }

    .workflow-node {
        font-size: 11px;
    }

    .node-icon {
        width: 48px;
        height: 48px;
    }

    .node-icon svg {
        width: 24px;
        height: 24px;
    }

    .hub-logo {
        width: 80px;
        height: 80px;
    }

    .zauto-icon-img {
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 768px) {
    .zauto-workflow-hub {
        height: 700px;
        padding: 1rem;
    }

    .workflow-node {
        position: static !important;
        margin: 0.5rem auto;
        width: fit-content;
    }

    .workflow-connections {
        display: none;
    }

    .workflow-hub-center {
        position: static;
        transform: none;
        margin: 2rem auto;
    }

    .hub-glow,
    .hub-pulse {
        display: none;
    }

    .node-label {
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .zauto-workflow-hub {
        height: auto;
        padding: 1.5rem 1rem;
    }

    .node-icon {
        width: 44px;
        height: 44px;
    }

    .node-icon svg {
        width: 22px;
        height: 22px;
    }

    .hub-logo {
        width: 72px;
        height: 72px;
    }

    .zauto-icon-img {
        width: 48px;
        height: 48px;
    }

    .hub-title {
        font-size: 16px;
    }

    .hub-subtitle {
        font-size: 11px;
    }
}


/* ========================================================================== */
/* Hub-and-Spoke Workflow Diagram V2 - Enhanced Professional Design          */
/* ========================================================================== */

.zauto-workflow-hub-v2 {
    position: relative;
    width: 100%;
    height: 700px;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    border-radius: 28px;
    padding: 3rem 2rem;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.15);
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dark .zauto-workflow-hub-v2 {
    background: linear-gradient(145deg, #0a0e1a 0%, #151b2e 50%, #0a0e1a 100%);
    border-color: rgba(59, 130, 246, 0.25);
}

/* Background Grid Pattern */
.workflow-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    z-index: 0;
}

/* SVG Connections V2 */
.workflow-connections-v2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Enhanced Workflow Nodes V2 */
.workflow-node-v2 {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.workflow-node-v2:hover {
    transform: translateY(-6px) scale(1.05);
}

.node-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-icon-v2 {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 8px 32px -8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
}

.dark .node-icon-v2 {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border-color: rgba(255, 255, 255, 0.1);
}

.node-icon-v2 svg {
    width: 32px;
    height: 32px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.workflow-node-v2:hover .node-icon-v2 {
    transform: rotate(5deg) scale(1.1);
    box-shadow: 
        0 12px 48px -10px rgba(59, 130, 246, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.workflow-node-v2:hover .node-icon-v2 svg {
    transform: scale(1.15) rotate(-5deg);
}

/* Pulsing Ring Animation */
.node-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 20px;
    border: 2px solid rgba(59, 130, 246, 0.6);
    animation: nodePulse 2.5s ease-out infinite;
    z-index: 1;
}

@keyframes nodePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Node Color Variations V2 */
.node-icon-v2[data-color="blue"] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.15));
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.node-icon-v2[data-color="purple"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(124, 58, 237, 0.15));
    border-color: rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
}

.node-icon-v2[data-color="green"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.15));
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.node-icon-v2[data-color="pink"] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(219, 39, 119, 0.15));
    border-color: rgba(236, 72, 153, 0.4);
    color: #f9a8d4;
}

.node-icon-v2[data-color="orange"] {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(234, 88, 12, 0.15));
    border-color: rgba(249, 115, 22, 0.4);
    color: #fdba74;
}

.node-icon-v2[data-color="cyan"] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(8, 145, 178, 0.15));
    border-color: rgba(6, 182, 212, 0.4);
    color: #67e8f9;
}

.node-icon-v2[data-color="indigo"] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(79, 70, 229, 0.15));
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

.node-icon-v2[data-color="emerald"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.15));
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.node-icon-v2[data-color="violet"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(124, 58, 237, 0.15));
    border-color: rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
}

/* Node Labels V2 */
.node-label-v2 {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Status Badges */
.node-status-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15));
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
}

.node-status-badge.bidirectional {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.15));
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}

/* Enhanced Center Hub V2 */
.workflow-hub-center-v2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Concentric Rings */
.hub-outer-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.2);
    animation: ringRotate 20s linear infinite;
    z-index: 1;
}

.hub-middle-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 2px solid rgba(139, 92, 246, 0.25);
    animation: ringRotate 15s linear infinite reverse;
    z-index: 2;
}

.hub-inner-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.15), transparent 70%);
    animation: glowPulse 3s ease-in-out infinite;
    z-index: 3;
}

@keyframes ringRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Hub Core */
.hub-core {
    width: 140px;
    height: 140px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    border: 3px solid rgba(59, 130, 246, 0.3);
    box-shadow: 
        0 20px 60px -15px rgba(59, 130, 246, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        0 0 80px rgba(59, 130, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 4;
    animation: hubFloat 4s ease-in-out infinite;
}

@keyframes hubFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.hub-logo-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.zauto-icon-v2 {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

/* Hub Information */
.hub-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    z-index: 5;
}

.hub-title-v2 {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0 2px 16px rgba(59, 130, 246, 0.8);
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hub-subtitle-v2 {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Hub Metrics */
.hub-metrics {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 999px;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
}

.metric-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2);
}

.metric-dot.active {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
    animation: metricPulse 2s ease-in-out infinite;
}

@keyframes metricPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

.metric-text {
    font-size: 11px;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: 0.3px;
}

/* Data Packets Animation */
.data-packet {
    animation: packetGlow 2s ease-in-out infinite;
}

@keyframes packetGlow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Responsive Design for V2 */
@media (max-width: 1024px) {
    .zauto-workflow-hub-v2 {
        height: 600px;
        padding: 2rem 1.5rem;
    }

    .workflow-node-v2 {
        gap: 0.5rem;
    }

    .node-icon-v2 {
        width: 56px;
        height: 56px;
    }

    .node-icon-v2 svg {
        width: 28px;
        height: 28px;
    }

    .node-label-v2 {
        font-size: 12px;
    }

    .hub-core {
        width: 120px;
        height: 120px;
    }

    .zauto-icon-v2 {
        width: 64px;
        height: 64px;
    }

    .hub-title-v2 {
        font-size: 20px;
    }

    .hub-outer-ring {
        width: 260px;
        height: 260px;
    }

    .hub-middle-ring {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .zauto-workflow-hub-v2 {
        height: auto;
        min-height: 800px;
        padding: 2rem 1rem;
    }

    .workflow-node-v2 {
        position: static !important;
        margin: 1.5rem auto;
        width: fit-content;
    }

    .workflow-connections-v2 {
        display: none;
    }

    .workflow-hub-center-v2 {
        position: static;
        transform: none;
        margin: 3rem auto;
        order: -1;
    }

    .hub-outer-ring,
    .hub-middle-ring {
        display: none;
    }

    .node-icon-v2 {
        width: 64px;
        height: 64px;
    }

    .node-icon-v2 svg {
        width: 30px;
        height: 30px;
    }

    .workflow-grid-bg {
        background-size: 30px 30px;
    }
}

@media (max-width: 640px) {
    .zauto-workflow-hub-v2 {
        padding: 1.5rem 0.75rem;
    }

    .node-icon-v2 {
        width: 56px;
        height: 56px;
    }

    .node-icon-v2 svg {
        width: 26px;
        height: 26px;
    }

    .hub-core {
        width: 100px;
        height: 100px;
    }

    .zauto-icon-v2 {
        width: 54px;
        height: 54px;
    }

    .hub-title-v2 {
        font-size: 18px;
    }

    .hub-subtitle-v2 {
        font-size: 11px;
    }

    .metric-item {
        padding: 0.375rem 0.625rem;
    }

    .metric-text {
        font-size: 10px;
    }

    .node-label-v2 {
        font-size: 11px;
    }

    .node-status-badge {
        font-size: 9px;
        padding: 0.2rem 0.5rem;
    }
}

/* ========================================
   INTEGRATION HUB — 2025 REFRESH
   ======================================== */

.integration-hub {
    position: relative;
    padding: clamp(1.75rem, 2vw + 1.25rem, 2.85rem);
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 45%, #ecfeff 100%);
    box-shadow: 0 24px 56px -30px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 2.3vw, 2.6rem);
    overflow: hidden;
}

.integration-hub::before {
    content: "";
    position: absolute;
    inset: -40% -10% 50% -10%;
    background: radial-gradient(circle at top right, rgba(6, 182, 212, 0.18), transparent 70%);
    pointer-events: none;
}

.integration-hub::after {
    content: "";
    position: absolute;
    inset: 40% -20% -35% -20%;
    background: radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.16), transparent 75%);
    pointer-events: none;
}

.dark .integration-hub {
    background: linear-gradient(135deg, #0f172a 0%, #1f2937 45%, #0f172a 100%);
    border-color: rgba(71, 85, 105, 0.55);
    box-shadow: 0 28px 60px -32px rgba(15, 23, 42, 0.8);
}

.dark .integration-hub::before {
    background: radial-gradient(circle at top right, rgba(6, 182, 212, 0.24), transparent 75%);
}

.dark .integration-hub::after {
    background: radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.24), transparent 80%);
}

.integration-hub__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 1.8vw, 1.9rem);
}

.integration-hub__lane {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.4rem 1.5rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.78);
    box-shadow: 0 24px 48px -32px rgba(14, 165, 233, 0.35);
}

.dark .integration-hub__lane {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(56, 189, 248, 0.28);
    box-shadow: 0 28px 54px -34px rgba(6, 182, 212, 0.48);
}

.integration-hub__lane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.integration-hub__lane-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #06b6d4, #38bdf8);
    box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.12);
    flex-shrink: 0;
}

.integration-hub__lane-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #0f172a;
}

.dark .integration-hub__lane-title {
    color: #e2e8f0;
}

.integration-hub__lane-caption {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
}

.dark .integration-hub__lane-caption {
    color: #94a3b8;
}

.integration-hub__lane--inputs .integration-hub__lane-dot {
    background: linear-gradient(135deg, #10b981, #22d3ee);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.16);
}

.integration-hub__lane--outputs .integration-hub__lane-dot {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.16);
}

.integration-hub__lane-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.integration-hub__lane-item {
    position: relative;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 253, 255, 0.65), rgba(255, 255, 255, 0.9));
    border: 1px solid rgba(203, 213, 225, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 32px -28px rgba(15, 23, 42, 0.45);
}

.dark .integration-hub__lane-item {
    background: linear-gradient(135deg, rgba(8, 47, 73, 0.75), rgba(15, 23, 42, 0.92));
    border-color: rgba(56, 189, 248, 0.28);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.2), 0 18px 36px -30px rgba(6, 182, 212, 0.45);
}

.integration-hub__lane-item::before {
    content: "";
    position: absolute;
    left: 0.7rem;
    top: 0.9rem;
    bottom: 0.9rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #06b6d4, #0ea5e9);
    opacity: 0.75;
}

.dark .integration-hub__lane-item::before {
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
    opacity: 0.9;
}

.lane-item-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0f172a;
}

.dark .lane-item-label {
    color: #f8fafc;
}

.lane-item-tag {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0369a1;
}

.dark .lane-item-tag {
    color: #38bdf8;
    opacity: 0.85;
}

.integration-hub__lane--inputs .lane-item-tag {
    color: #0f766e;
}

.integration-hub__lane--outputs .lane-item-tag {
    color: #4f46e5;
}

.dark .integration-hub__lane--outputs .lane-item-tag {
    color: #a5b4fc;
}

.dark .integration-hub__lane--inputs .lane-item-tag {
    color: #5eead4;
}

.integration-hub__core {
    position: relative;
    border-radius: 24px;
    padding: 1.5rem 1.65rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.97));
    border: 1px solid rgba(190, 227, 248, 0.6);
    box-shadow: 0 34px 64px -34px rgba(14, 165, 233, 0.45);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    overflow: hidden;
}

.dark .integration-hub__core {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.92));
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 38px 70px -36px rgba(6, 182, 212, 0.55);
}

.integration-hub__core-glow {
    position: absolute;
    inset: -35% -45% -35% -45%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.2), transparent 65%);
    pointer-events: none;
}

.dark .integration-hub__core-glow {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.32), transparent 70%);
}

.integration-hub__core-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    align-items: center;
    text-align: center;
}

.integration-hub__logo-wrap {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.22), transparent 70%);
    box-shadow: 0 20px 40px -26px rgba(6, 182, 212, 0.5);
}

.integration-hub__logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(6, 182, 212, 0.45));
}

.integration-hub__core-title {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.dark .integration-hub__core-title {
    color: #f8fafc;
}

.integration-hub__core-copy {
    font-size: 0.85rem;
    line-height: 1.65;
    color: #475569;
    max-width: 380px;
}

.dark .integration-hub__core-copy {
    color: #cbd5f5;
}

.integration-hub__core-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}

.core-metric {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: rgba(8, 145, 178, 0.12);
    border: 1px solid rgba(8, 145, 178, 0.22);
    color: #0f172a;
}

.dark .core-metric {
    background: rgba(6, 182, 212, 0.2);
    border-color: rgba(56, 189, 248, 0.35);
    color: #e0f2fe;
}

.integration-hub__stages-wrap {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.9);
    padding: 1.05rem 1.25rem;
}

.dark .integration-hub__stages-wrap {
    background: rgba(15, 23, 42, 0.76);
    border-color: rgba(71, 85, 105, 0.45);
}

.integration-hub__stages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.integration-hub__stages li {
    position: relative;
    padding-left: 2.35rem;
}

.integration-hub__stages li::before {
    content: "";
    position: absolute;
    left: 0.8rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(6, 182, 212, 0.32), rgba(56, 189, 248, 0.6));
    border-radius: 999px;
}

.integration-hub__stages li:last-child::before {
    bottom: 1.35rem;
}

.integration-hub__stages li::after {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.4rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #0ea5e9);
    box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.15);
}

.dark .integration-hub__stages li::before {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.28), rgba(125, 211, 252, 0.55));
}

.dark .integration-hub__stages li::after {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    box-shadow: 0 0 0 6px rgba(12, 74, 110, 0.32);
}

.stage-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #0891b2;
    margin-bottom: 0.2rem;
}

.dark .stage-label {
    color: #5eead4;
}

.stage-copy {
    display: block;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #475569;
}

.dark .stage-copy {
    color: #cbd5f5;
}

.integration-hub__foot {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 1.15rem 1.3rem;
    border-radius: 18px;
    border: 1px solid rgba(203, 213, 225, 0.7);
    background: rgba(255, 255, 255, 0.9);
}

.dark .integration-hub__foot {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(71, 85, 105, 0.55);
}

.integration-hub__foot-metric {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.foot-metric__value {
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.dark .foot-metric__value {
    color: #f8fafc;
}

.foot-metric__label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.dark .foot-metric__label {
    color: #cbd5f5;
    opacity: 0.8;
}

/* Responsive adjustments for the new integration hub */
@media (max-width: 1180px) {
    .integration-hub__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .integration-hub__core {
        grid-column: span 2;
    }
}

@media (max-width: 1024px) {
    .integration-hub {
        padding: clamp(1.5rem, 3vw + 1rem, 2.1rem);
    }

    .integration-hub__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.35rem;
    }

    .integration-hub__core {
        grid-column: auto;
    }

    .integration-hub__lane {
        padding: 1.25rem 1.3rem;
    }

    .integration-hub__foot {
        flex-direction: column;
        align-items: stretch;
    }

    .integration-hub__foot-metric {
        flex: 1 1 auto;
    }
}

@media (max-width: 768px) {
    .integration-hub {
        border-radius: 22px;
        gap: 1.6rem;
    }

    .integration-hub__lane {
        padding: 1.1rem 1.2rem;
        border-radius: 18px;
    }

    .integration-hub__lane-item {
        padding: 0.8rem 0.9rem 0.8rem 1.15rem;
    }

    .lane-item-label {
        font-size: 0.9rem;
    }

    .lane-item-tag {
        font-size: 0.68rem;
    }

    .integration-hub__core {
        padding: 1.35rem 1.4rem;
    }

    .integration-hub__core-title {
        font-size: 1.1rem;
    }

    .integration-hub__core-copy {
        font-size: 0.82rem;
    }

    .core-metric {
        font-size: 0.68rem;
        padding: 0.38rem 0.75rem;
    }

    .integration-hub__stages-wrap {
        padding: 0.95rem 1.05rem;
    }

    .integration-hub__stages li {
        padding-left: 2.1rem;
    }

    .integration-hub__stages li::after {
        width: 0.85rem;
        height: 0.85rem;
    }

    .integration-hub__foot {
        padding: 1rem 1.1rem;
        gap: 0.75rem;
    }
}

@media (max-width: 640px) {
    .integration-hub {
        padding: 1.4rem 1.35rem;
        border-radius: 20px;
    }

    .integration-hub__lane-head {
        gap: 0.6rem;
    }

    .integration-hub__lane-title {
        font-size: 0.7rem;
    }

    .integration-hub__lane-caption {
        font-size: 0.66rem;
        letter-spacing: 0.12em;
    }

    .integration-hub__lane-item::before {
        left: 0.6rem;
    }

    .integration-hub__core-title {
        font-size: 1.05rem;
    }

    .integration-hub__core-copy {
        font-size: 0.8rem;
    }

    .integration-hub__foot-metric {
        gap: 0.25rem;
    }

    .foot-metric__value {
        font-size: 1.18rem;
    }

    .foot-metric__label {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .integration-hub {
        padding: 1.3rem 1.1rem;
        border-radius: 18px;
    }

    .integration-hub__lane {
        padding: 1rem 1.05rem;
    }

    .integration-hub__lane-item {
        padding: 0.75rem 0.85rem 0.75rem 1.05rem;
        border-radius: 16px;
    }

    .lane-item-label {
        font-size: 0.86rem;
    }

    .lane-item-tag {
        font-size: 0.64rem;
        letter-spacing: 0.14em;
    }

    .integration-hub__logo-wrap {
        width: 72px;
        height: 72px;
    }

    .integration-hub__logo {
        width: 40px;
        height: 40px;
    }

    .integration-hub__core-title {
        font-size: 1rem;
    }

    .integration-hub__core-copy {
        font-size: 0.78rem;
    }

    .integration-hub__core-metrics {
        gap: 0.4rem;
    }

    .core-metric {
        font-size: 0.62rem;
        padding: 0.34rem 0.65rem;
    }

    .integration-hub__stages-wrap {
        padding: 0.85rem 0.95rem;
    }

    .integration-hub__stages li {
        padding-left: 1.85rem;
    }

    .integration-hub__stages li::after {
        left: 0.2rem;
    }

    .integration-hub__foot {
        padding: 0.9rem 0.95rem;
        border-radius: 16px;
    }

    .foot-metric__value {
        font-size: 1.1rem;
    }
}

/* ========================================
   SOLUTION IMAGE SHOWCASE — ANIMATED
   ======================================== */

.solution-image-showcase {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.85rem, 2vw, 1.85rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    perspective: 1200px;
}

.solution-image-showcase__item {
    position: relative;
    flex: 0 0 auto;
    width: clamp(220px, 28vw, 340px);
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(203, 213, 225, 0.6);
    box-shadow: 
        0 24px 48px -20px rgba(15, 23, 42, 0.35),
        0 12px 24px -12px rgba(59, 130, 246, 0.15);
    transition: all 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: showcaseReveal 0.85s cubic-bezier(0.34, 1.26, 0.64, 1) backwards;
}

.dark .solution-image-showcase__item {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(56, 189, 248, 0.28);
    box-shadow: 
        0 28px 56px -24px rgba(6, 182, 212, 0.45),
        0 14px 28px -14px rgba(0, 0, 0, 0.6);
}

.solution-image-showcase__item:nth-child(1) {
    animation-delay: 0.1s;
}

.solution-image-showcase__item:nth-child(2) {
    animation-delay: 0.3s;
    transform: scale(1.12) translateZ(50px);
    z-index: 2;
}

.solution-image-showcase__item:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes showcaseReveal {
    from {
        opacity: 0;
        transform: scale(0.75) translateY(50px) rotateX(25deg);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0deg);
    }
}

.solution-image-showcase__item:hover {
    transform: scale(1.08) translateY(-12px) translateZ(30px);
    box-shadow: 
        0 32px 64px -22px rgba(59, 130, 246, 0.55),
        0 16px 32px -14px rgba(15, 23, 42, 0.4);
    border-color: rgba(59, 130, 246, 0.45);
    z-index: 5;
}

.dark .solution-image-showcase__item:hover {
    box-shadow: 
        0 36px 72px -26px rgba(6, 182, 212, 0.65),
        0 18px 36px -16px rgba(56, 189, 248, 0.5);
    border-color: rgba(56, 189, 248, 0.55);
}

.solution-image-showcase__item:nth-child(2):hover {
    transform: scale(1.18) translateY(-18px) translateZ(60px);
}

.solution-image-showcase__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 50%, #ecfeff 100%);
}

.dark .solution-image-showcase__img-wrap {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0c4a6e 100%);
}

.solution-image-showcase__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.solution-image-showcase__item:hover .solution-image-showcase__img {
    transform: scale(1.08);
}

.solution-image-showcase__caption {
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    text-align: center;
}

.dark .solution-image-showcase__caption {
    background: rgba(15, 23, 42, 0.95);
    border-top-color: rgba(71, 85, 105, 0.6);
}

.solution-image-showcase__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #0ea5e9);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.15);
}

.solution-image-showcase__label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a;
    line-height: 1.35;
}

.dark .solution-image-showcase__label {
    color: #f8fafc;
}

.solution-image-showcase__sublabel {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
}

.dark .solution-image-showcase__sublabel {
    color: #94a3b8;
}

/* Connector arrow between images */
.solution-image-showcase__connector {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    pointer-events: none;
    z-index: 1;
}

.solution-image-showcase__connector svg {
    width: 100%;
    height: 100%;
}

.solution-image-showcase__connector path {
    stroke: url(#flowGradient);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawConnector 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

@keyframes drawConnector {
    to {
        stroke-dashoffset: 0;
    }
}

/* Flow particles on connector */
.solution-image-showcase__particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #06b6d4;
    border-radius: 50%;
    opacity: 0;
    animation: flowParticle 3.5s cubic-bezier(0.4, 0, 0.2, 1) 1.5s infinite;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.8);
}

.solution-image-showcase__particle:nth-child(2) {
    animation-delay: 2.2s;
}

.solution-image-showcase__particle:nth-child(3) {
    animation-delay: 2.9s;
}

@keyframes flowParticle {
    0% {
        left: 5%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 95%;
        opacity: 0;
    }
}

/* Glow effect overlay */
.solution-image-showcase::before {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background: radial-gradient(circle at center, rgba(6, 182, 212, 0.12), transparent 65%);
    pointer-events: none;
    animation: showcaseGlow 8s ease-in-out infinite;
}

.dark .solution-image-showcase::before {
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.18), transparent 70%);
}

@keyframes showcaseGlow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.15);
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .solution-image-showcase {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
    }

    .solution-image-showcase__item {
        width: 100%;
        max-width: 480px;
    }

    .solution-image-showcase__item:nth-child(2) {
        transform: scale(1.05);
    }

    .solution-image-showcase__item:hover {
        transform: scale(1.05) translateY(-8px);
    }

    .solution-image-showcase__item:nth-child(2):hover {
        transform: scale(1.08) translateY(-10px);
    }

    .solution-image-showcase__connector {
        display: none;
    }
}

@media (max-width: 768px) {
    .solution-image-showcase {
        gap: 1.25rem;
        padding: 1.5rem 1rem;
    }

    .solution-image-showcase__item {
        max-width: 100%;
    }

    .solution-image-showcase__item:nth-child(2) {
        transform: scale(1);
    }

    .solution-image-showcase__caption {
        padding: 0.85rem 1rem;
    }

    .solution-image-showcase__step {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    .solution-image-showcase__label {
        font-size: 0.78rem;
    }

    .solution-image-showcase__sublabel {
        font-size: 0.64rem;
    }
}

@media (max-width: 480px) {
    .solution-image-showcase {
        gap: 1rem;
        padding: 1.25rem 0.75rem;
    }

    .solution-image-showcase__item {
        border-radius: 16px;
    }

    .solution-image-showcase__caption {
        padding: 0.75rem 0.85rem;
    }
}

/* Responsive improvements for integration section */
@media (max-width: 1024px) {
    #integrations .lg\:col-span-5 {
        padding-bottom: 1.5rem;
    }

    #integrations .lg\:col-span-7 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #integrations {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    #integrations .section-title {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    #integrations .card-pro {
        padding: 0.875rem 1rem;
    }

    #integrations .card-pro h3 {
        font-size: 12px;
    }

    #integrations .card-pro p {
        font-size: 11.5px;
    }
}

@media (max-width: 640px) {
    #integrations {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    #integrations .section-title {
        font-size: 1.5rem;
    }

    #integrations .badge-mini {
        font-size: 10px;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 480px) {
    #integrations .section-tag {
        font-size: 11px;
        padding: 0.375rem 0.75rem;
    }

    #integrations .section-title {
        font-size: 1.35rem;
    }

    #integrations .card-pro {
        padding: 0.75rem 0.875rem;
        gap: 0.5rem;
    }

    #integrations .card-pro h3 {
        font-size: 11.5px;
        margin-bottom: 0.25rem;
    }

    #integrations .card-pro p {
        font-size: 11px;
        line-height: 1.45;
    }

    #integrations .badge-mini {
        font-size: 9px;
        padding: 0.2rem 0.45rem;
    }

    /* Integration cards below the workflow */
    .integration-card {
        padding: 1.25rem 1.125rem;
        gap: 0.75rem;
        border-radius: 16px;
    }

    .integration-card h3 {
        font-size: 11px;
        margin-bottom: 0.625rem;
    }

    .integration-list li {
        font-size: 11.5px;
        line-height: 1.5;
        margin-bottom: 0.375rem;
    }

    .solution-steps {
        font-size: 11.5px !important;
    }

    .solution-steps li {
        margin-bottom: 0.5rem;
    }

    /* Timeline section responsiveness */
    #integrations .rounded-3xl,
    #integrations .rounded-2xl {
        padding: 1rem 0.875rem;
    }
}

/* Desktop optimizations for integration cards */
@media (min-width: 1024px) {
    .integration-card {
        padding: 1.75rem 1.5rem;
    }

    .integration-card h3 {
        font-size: 13.5px;
        margin-bottom: 0.875rem;
    }

    .integration-list {
        padding-left: 1.35rem;
        gap: 0.625rem;
    }

    .integration-list li {
        font-size: 13.5px;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .solution-steps {
        gap: 0.75rem;
    }

    .solution-steps li {
        font-size: 13.5px;
        line-height: 1.65;
    }

    .solution-steps li:before {
        width: 1.4rem;
        height: 1.4rem;
        font-size: 11px;
    }

    .integration-card p.mt-3 {
        font-size: 12.5px;
    }
}

@media (min-width: 1280px) {
    .integration-card {
        padding: 2rem 1.75rem;
    }

    .integration-card h3 {
        font-size: 14px;
        margin-bottom: 1rem;
    }

    .integration-list {
        padding-left: 1.5rem;
        gap: 0.75rem;
    }

    .integration-list li {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 0;
    }

    .solution-steps {
        gap: 0.875rem;
    }

    .solution-steps li {
        font-size: 14px;
        line-height: 1.7;
        padding-left: 2rem;
    }

    .solution-steps li:before {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 11.5px;
    }

    .integration-card p.mt-3 {
        font-size: 13px;
        margin-top: 0.875rem;
    }
}

@media (min-width: 1536px) {
    .integration-card {
        padding: 2.25rem 2rem;
    }

    .integration-card h3 {
        font-size: 14.5px;
    }

    .integration-list {
        gap: 0.875rem;
    }

    .integration-list li {
        font-size: 14.5px;
        line-height: 1.75;
    }

    .solution-steps {
        gap: 1rem;
    }

    .solution-steps li {
        font-size: 14.5px;
        line-height: 1.75;
        padding-left: 2.25rem;
    }

    .solution-steps li:before {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 12px;
    }

    .integration-card p.mt-3 {
        font-size: 13.5px;
    }
}

/* Responsive fixes for integration cards */
@media (max-width: 768px) {
    .integration-card {
        padding: 1.5rem 1.25rem;
        border-radius: 18px;
        gap: 0.75rem;
    }

    .integration-card h3 {
        font-size: 12px;
        margin-bottom: 0.625rem;
    }

    .integration-list {
        gap: 0.5rem;
    }

    .integration-list li {
        font-size: 12px;
        line-height: 1.55;
        margin-bottom: 0.5rem;
    }

    .solution-steps {
        font-size: 12px !important;
        gap: 0.75rem;
    }

    .solution-steps li {
        font-size: 12px;
        padding-left: 1.65rem;
    }

    .solution-steps li:before {
        width: 1.2rem;
        height: 1.2rem;
        font-size: 10px;
    }

    .integration-card p.mt-3 {
        font-size: 11.5px;
        margin-top: 0.625rem;
    }

    /* Timeline section at tablet */
    #integrations .rounded-3xl h3,
    #integrations .rounded-2xl h3 {
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .integration-card {
        padding: 1.25rem 1.125rem;
        gap: 0.625rem;
        border-radius: 16px;
    }

    .integration-card h3 {
        font-size: 11.5px;
        margin-bottom: 0.625rem;
        letter-spacing: 0.15em;
    }

    .integration-list {
        padding-left: 1rem;
    }

    .integration-list li {
        font-size: 11.5px;
        margin-bottom: 0.5rem;
        line-height: 1.6;
    }

    .solution-steps {
        gap: 0.625rem;
    }

    .solution-steps li {
        font-size: 11.5px !important;
        margin-bottom: 0;
        padding-left: 1.5rem;
        line-height: 1.6;
    }

    .solution-steps li:before {
        width: 1.1rem;
        height: 1.1rem;
        font-size: 9px;
    }

    .integration-card p.mt-3 {
        font-size: 11px;
        margin-top: 0.5rem;
    }

    /* Timeline section at mobile */
    #integrations .rounded-3xl h3,
    #integrations .rounded-2xl h3 {
        font-size: 11px;
        letter-spacing: 0.15em;
    }

    #integrations .rounded-3xl .grid > div p:first-child,
    #integrations .rounded-2xl .grid > div p:first-child {
        font-size: 10px;
    }

    #integrations .rounded-3xl .grid > div p:last-child,
    #integrations .rounded-2xl .grid > div p:last-child {
        font-size: 11.5px;
        line-height: 1.5;
    }

    /* Section quote responsive */
    .section-quote {
        padding: 1.25rem 2rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .integration-card {
        padding: 1rem 0.875rem;
        gap: 0.5rem;
        border-radius: 14px;
    }

    .integration-card h3 {
        font-size: 11px;
        margin-bottom: 0.5rem;
        letter-spacing: 0.14em;
    }

    .integration-list {
        padding-left: 0.875rem;
    }

    .integration-list li {
        font-size: 11px;
        margin-bottom: 0.45rem;
        line-height: 1.55;
    }

    .solution-steps {
        gap: 0.5rem;
    }

    .solution-steps li {
        font-size: 11px !important;
        margin-bottom: 0;
        padding-left: 1.35rem;
        line-height: 1.55;
    }

    .solution-steps li:before {
        width: 1rem;
        height: 1rem;
        font-size: 8.5px;
    }

    .integration-card p.mt-3 {
        font-size: 10.5px;
        margin-top: 0.5rem;
        line-height: 1.5;
    }

    /* Timeline section at extra small mobile */
    #integrations .rounded-3xl h3,
    #integrations .rounded-2xl h3 {
        font-size: 10px;
    }

    #integrations .rounded-3xl .grid > div p,
    #integrations .rounded-2xl .grid > div p {
        font-size: 10.5px !important;
    }

    .section-quote {
        padding: 1rem 1.5rem;
        font-size: 0.8125rem;
        line-height: 1.65;
    }
}

.integration-list{margin:0;padding-left:1.25rem;list-style:disc;display:flex;flex-direction:column;gap:0.5rem}
.integration-list li{font-size:13px;color:#475569;line-height:1.65;margin-bottom:0}
.dark .integration-list li{color:#cbd5e1}

/* ========================================================================== */
/* Prescription Image with Fade Effect                                        */
/* ========================================================================== */

/* Wrapper for prescription image - no overflow hidden to preserve shadow effects */
.prescription-image-wrapper {
    position: relative;
    width: 100%;
    max-height: 450px;
    display: flex;
    align-items: flex-start;
}

/* Responsive image with clipping to constrain height while preserving effects */
.prescription-image-wrapper .prescription-image {
    width: 100%;
    height: auto;
    max-height: 450px;
    display: block;
    object-fit: cover;
    object-position: top;
    position: relative;
    clip-path: inset(0 0 0 0 round 16px);
}

/* Fade overlay at the bottom when image overflows */
.prescription-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.95) 100%);
    pointer-events: none;
    z-index: 20;
    border-radius: 0 0 16px 16px;
}

/* Dark mode fade overlay */
.dark .prescription-fade-overlay {
    background: linear-gradient(to bottom, transparent 0%, rgba(3, 7, 18, 0.95) 100%);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .prescription-image-wrapper {
        max-height: 400px;
    }

    .prescription-image-wrapper .prescription-image {
        max-height: 400px;
    }

    .prescription-fade-overlay {
        height: 80px;
    }
}

@media (max-width: 768px) {
    .prescription-image-wrapper {
        max-height: 350px;
    }

    .prescription-image-wrapper .prescription-image {
        max-height: 350px;
    }

    .prescription-fade-overlay {
        height: 70px;
    }
}

@media (max-width: 480px) {
    .prescription-image-wrapper {
        max-height: 280px;
    }

    .prescription-image-wrapper .prescription-image {
        max-height: 280px;
        clip-path: inset(0 0 0 0 round 12px);
    }

    .prescription-fade-overlay {
        height: 50px;
        border-radius: 0 0 12px 12px;
    }
}

/* Harmonized section backgrounds */
#patient-experience,
#integrations,
#testimonials,
#trust-security,
#roi-calculator {
    position: relative;
    background: linear-gradient(180deg, rgba(243, 249, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 52%, rgba(240, 247, 255, 0.98) 100%);
}

#patient-experience::before,
#integrations::before,
#testimonials::before,
#trust-security::before,
#roi-calculator::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 24%, rgba(96, 165, 250, 0.16), transparent 56%),
        radial-gradient(circle at 78% 30%, rgba(110, 231, 183, 0.12), transparent 60%),
        radial-gradient(circle at 52% 86%, rgba(191, 219, 254, 0.16), transparent 60%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.55;
}

.dark #patient-experience,
.dark #integrations,
.dark #testimonials,
.dark #trust-security,
.dark #roi-calculator {
    background: linear-gradient(180deg, rgba(10, 16, 26, 0.95) 0%, rgba(9, 14, 23, 0.88) 52%, rgba(11, 18, 30, 0.94) 100%);
}

.dark #patient-experience::before,
.dark #integrations::before,
.dark #testimonials::before,
.dark #trust-security::before,
.dark #roi-calculator::before {
    background:
        radial-gradient(circle at 18% 24%, rgba(59, 130, 246, 0.22), transparent 56%),
        radial-gradient(circle at 78% 30%, rgba(45, 212, 191, 0.18), transparent 60%),
        radial-gradient(circle at 52% 86%, rgba(56, 189, 248, 0.2), transparent 60%);
    opacity: 0.45;
}

.partner-logo-container {
    border-radius: 1.25rem;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.partner-logo-container img {
    filter: none;
}

.dark .partner-logo-container {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.dark .partner-logo-container img {
    filter: none;
}

/* ========================================
   WORKFLOW MINDMAP SECTION
   Interactive workflow visualization
   ======================================== */

/* Workflow Toggle Buttons */
.workflow-toggle-container {
    position: relative;
    z-index: 5;
}

.workflow-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(203, 213, 225, 0.5);
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
}

.workflow-toggle-btn:hover {
    color: #0ea5e9;
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(14, 165, 233, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px -4px rgba(14, 165, 233, 0.3);
}

.workflow-toggle-btn.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    border-color: transparent;
    box-shadow: 0 4px 16px -4px rgba(14, 165, 233, 0.5);
}

.workflow-toggle-btn svg {
    flex-shrink: 0;
}

.dark .workflow-toggle-btn {
    color: #94a3b8;
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(71, 85, 105, 0.5);
}

.dark .workflow-toggle-btn:hover {
    color: #38bdf8;
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(56, 189, 248, 0.4);
}

.dark .workflow-toggle-btn.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    border-color: transparent;
}

/* Workflow Mindmap Wrapper - No Padding */
.workflow-mindmap-wrapper {
    position: relative;
    padding: 0;
    min-height: 500px;
}

/* SVG Canvas for Connection Lines */
.workflow-connections-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Enhanced Workflow Grid Layout - No Padding */
.workflow-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    z-index: 2;
    padding: 0;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .workflow-grid {
        /* Perfectly balanced 25% 50% 25% layout for even visual distribution */
        grid-template-columns: 1fr 2fr 1fr;
        gap: 3rem;
        align-items: center;
        padding: 0;
    }
}

@media (min-width: 1280px) {
    .workflow-grid {
        gap: 4rem;
        padding: 0;
    }
}

/* Enhanced Workflow Columns - Perfect Alignment */
.workflow-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    padding: 0;
}

.workflow-inputs,
.workflow-outputs {
    justify-content: center;
    align-items: stretch;
}

.workflow-center {
    align-items: center;
    justify-content: center;
}

/* Column Headers Enhancement - Original Style */
.workflow-inputs > .mb-6,
.workflow-outputs > .mb-6 {
    position: relative;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(249,250,251,0.6));
    border: 1px solid rgba(6,182,212,0.2);
    border-radius: 12px;
    text-align: left;
    font-weight: 600;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px -8px rgba(6,182,212,0.15);
}

.dark .workflow-inputs > .mb-6,
.dark .workflow-outputs > .mb-6 {
    background: linear-gradient(135deg, rgba(15,23,42,0.8), rgba(30,41,59,0.6));
    border-color: rgba(6,182,212,0.3);
}

.workflow-inputs,
.workflow-outputs {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

.workflow-inputs {
    animation-delay: 0.2s;
}

.workflow-center {
    animation-delay: 0s;
    justify-content: center;
    position: relative;
}

.workflow-outputs {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Workflow Nodes */
.workflow-node {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(203, 213, 225, 0.5);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 24px -8px rgba(0, 0, 0, 0.12),
        0 4px 16px -4px rgba(59, 130, 246, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.workflow-node::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59,130,246,0.03), transparent, rgba(6,182,212,0.02));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.workflow-node:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 
        0 16px 40px -12px rgba(59, 130, 246, 0.3),
        0 8px 24px -8px rgba(6, 182, 212, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

.workflow-node:hover::before {
    opacity: 1;
}

.dark .workflow-node {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9));
    border-color: rgba(71, 85, 105, 0.6);
    box-shadow: 
        0 8px 24px -8px rgba(0, 0, 0, 0.6),
        0 4px 16px -4px rgba(59, 130, 246, 0.15),
        0 0 0 1px rgba(59, 130, 246, 0.1) inset;
}

.dark .workflow-node::before {
    background: linear-gradient(135deg, rgba(59,130,246,0.05), transparent, rgba(6,182,212,0.03));
}

.dark .workflow-node:hover {
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: 
        0 16px 40px -12px rgba(0, 0, 0, 0.8),
        0 8px 24px -8px rgba(59, 130, 246, 0.4),
        0 0 0 1px rgba(96, 165, 250, 0.3) inset;
}

/* Enhanced Workflow Node Header */
.workflow-node-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(226, 232, 240, 0.3);
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(248, 250, 252, 0.3));
}

.workflow-node-header:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(6, 182, 212, 0.02));
    border-bottom-color: rgba(59, 130, 246, 0.2);
}

.dark .workflow-node-header {
    border-bottom-color: rgba(71, 85, 105, 0.4);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.3));
}

.dark .workflow-node-header:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(6, 182, 212, 0.04));
    border-bottom-color: rgba(59, 130, 246, 0.3);
}

.workflow-node-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 
        0 8px 20px -8px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.workflow-node-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.workflow-node:hover .workflow-node-icon::before {
    opacity: 1;
}

.dark .workflow-node-icon {
    box-shadow: 
        0 8px 20px -8px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(59, 130, 246, 0.2) inset;
}

.workflow-node-title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.workflow-node-title h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1e293b, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.workflow-node-header:hover .workflow-node-title h4 {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark .workflow-node-title h4 {
    background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark .workflow-node-header:hover .workflow-node-title h4 {
    background: linear-gradient(135deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.workflow-expand-icon {
    width: 20px;
    height: 20px;
    color: #94a3b8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    border-radius: 6px;
    padding: 2px;
}

.workflow-expand-icon:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.workflow-node-header[aria-expanded="true"] .workflow-expand-icon {
    transform: rotate(180deg);
    color: #3b82f6;
}

.dark .workflow-expand-icon {
    color: #64748b;
}

.dark .workflow-expand-icon:hover {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

.dark .workflow-node-header[aria-expanded="true"] .workflow-expand-icon {
    color: #60a5fa;
}

/* Enhanced Workflow Node Content */
.workflow-node-content {
    padding: 1.5rem 2rem 2rem;
    overflow: visible;
    max-height: none;
    opacity: 1;
    transition: none;
    position: relative;
}

.workflow-node-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.5), transparent);
}

.dark .workflow-node-content::before {
    background: linear-gradient(90deg, transparent, rgba(71, 85, 105, 0.5), transparent);
}

/* Expansion logic disabled - content always visible */

.workflow-node-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.workflow-node-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #475569;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
}

.dark .workflow-node-list li {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.03);
}

.workflow-list-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.workflow-node-desc {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: #64748b;
    text-align: center;
    font-weight: 500;
}

.dark .workflow-node-desc {
    color: #94a3b8;
}

/* Workflow Logo Grid */
.workflow-logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.workflow-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    transition: all 0.2s;
}

.workflow-logo-item:hover {
    background: rgba(0, 0, 0, 0.04);
    transform: scale(1.02);
}

.dark .workflow-logo-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.dark .workflow-logo-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.workflow-logo-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
}

.workflow-logo-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-align: center;
}

.dark .workflow-logo-item span {
    color: #94a3b8;
}

/* Workflow Channel Grid */
.workflow-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.workflow-channel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    transition: all 0.2s;
}

.workflow-channel-item:hover {
    background: rgba(0, 0, 0, 0.04);
    transform: scale(1.02);
}

.dark .workflow-channel-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.dark .workflow-channel-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.workflow-channel-item svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.workflow-channel-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-align: center;
}

.dark .workflow-channel-item span {
    color: #94a3b8;
}

/* Workflow Platform Hub (Center) */
.workflow-platform-hub {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    animation: fadeInScale 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.workflow-platform-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.2) 0%, rgba(6, 182, 212, 0.1) 40%, transparent 70%);
    filter: blur(40px);
    animation: platformPulse 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes platformPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.dark .workflow-platform-glow {
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.3) 0%, rgba(6, 182, 212, 0.15) 40%, transparent 70%);
}

.workflow-platform-card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.75rem 2rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 2px solid rgba(14, 165, 233, 0.2);
    border-radius: 24px;
    box-shadow: 0 20px 60px -20px rgba(14, 165, 233, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    min-width: 340px;
    max-width: 380px;
    height: 100%;
}

/* Enhanced Section Styling */
.section-tag.enhanced {
    position: relative;
    background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(59,130,246,0.08));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(6,182,212,0.25);
    padding: 0.625rem 1.25rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0891b2;
    box-shadow: 0 8px 32px -8px rgba(6,182,212,0.3);
}

.dark .section-tag.enhanced {
    background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(59,130,246,0.12));
    border-color: rgba(6,182,212,0.3);
    color: #22d3ee;
}

.tag-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(6,182,212,0.4), rgba(59,130,246,0.3));
    border-radius: inherit;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
    z-index: -1;
}

.section-tag.enhanced:hover .tag-glow {
    opacity: 1;
}

/* Enhanced Title Styling */
.section-title.enhanced {
    position: relative;
}

.title-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: titleWordReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.title-word[data-word="1"] { animation-delay: 0.1s; }
.title-word[data-word="2"] { animation-delay: 0.2s; }
.title-word[data-word="3"] { animation-delay: 0.3s; }
.title-word[data-word="4"] { animation-delay: 0.4s; }

@keyframes titleWordReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.heading-accent.enhanced {
    background: linear-gradient(135deg, #0891b2, #3b82f6, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.title-underline.enhanced {
    height: 4px;
    background: linear-gradient(90deg, transparent, #0891b2, #3b82f6, #6366f1, transparent);
    border-radius: 2px;
    width: 120px;
}

/* Enhanced Workflow Container */
.workflow-mindmap-wrapper.enhanced {
    position: relative;
    padding: 2rem;
    background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(249,250,251,0.6));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 24px;
    box-shadow: 0 25px 80px -20px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.9) inset;
    overflow: hidden;
}

.dark .workflow-mindmap-wrapper.enhanced {
    background: linear-gradient(145deg, rgba(15,23,42,0.8), rgba(30,41,59,0.7));
    border-color: rgba(59,130,246,0.2);
    box-shadow: 0 25px 80px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,130,246,0.1) inset;
}

/* Decorative Elements */
.workflow-decoration-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.workflow-grid-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: 
        linear-gradient(rgba(59,130,246,0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,0.3) 1px, transparent 1px);
    background-size: 20px 20px;
}

.dark .workflow-grid-pattern {
    opacity: 0.05;
}

.workflow-glow-orbs {
    position: absolute;
    inset: 0;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

.glow-orb-1 {
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(6,182,212,0.15), transparent);
    top: 10%;
    left: 5%;
    animation: floatOrb1 8s ease-in-out infinite;
}

.glow-orb-2 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(168,85,247,0.12), transparent);
    top: 20%;
    right: 8%;
    animation: floatOrb2 6s ease-in-out infinite;
}

.glow-orb-3 {
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(16,185,129,0.1), transparent);
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    animation: floatOrb3 10s ease-in-out infinite;
}

@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -15px) scale(1.1); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-15px, 10px) scale(0.9); }
}

@keyframes floatOrb3 {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    50% { transform: translate(-50%, -20px) scale(1.05); }
}

/* Compact center hub - shorter height */
.workflow-platform-hub.clean {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    z-index: 2;
}

/* Compact Horizontal Flow Layout for 5 Connected Agents */
.workflow-ai-agents-horizontal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin: 1rem 0;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.workflow-ai-agent-horizontal {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1.5px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    position: relative;
    min-height: 60px;
}

.workflow-ai-agent-horizontal:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(59, 130, 246, 0.3);
}

.dark .workflow-ai-agent-horizontal {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(96, 165, 250, 0.3);
}

.dark .workflow-ai-agent-horizontal:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(96, 165, 250, 0.5);
}

/* Compact connection lines between agents */
.workflow-ai-agent-horizontal:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 0.5rem;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.6), rgba(59, 130, 246, 0.2));
    border-radius: 1px;
}

/* Horizontal Agent Content Styling */
.workflow-ai-agent-horizontal .agent-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: white;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.workflow-ai-agent-horizontal .agent-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
}

.workflow-ai-agent-horizontal .agent-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.025em;
    line-height: 1.2;
}

.workflow-ai-agent-horizontal .agent-desc {
    font-size: 0.625rem;
    font-weight: 400;
    color: #64748b;
    opacity: 0.9;
    line-height: 1.3;
}

.dark .workflow-ai-agent-horizontal .agent-name {
    color: #e2e8f0;
}

.dark .workflow-ai-agent-horizontal .agent-desc {
    color: #94a3b8;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .agents-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .workflow-ai-agent-clean {
        padding: 0.625rem 0.75rem;
        min-height: 50px;
    }
    
    .agent-number {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
}

.agent-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.agent-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.agent-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.025em;
}

.dark .agent-name {
    color: #e2e8f0;
}

/* Simplified Agent Layout - Compact Design */
.workflow-ai-agent-clean {
    background: rgba(255, 255, 255, 0.8);
    border: 1.5px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    padding: 1rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.workflow-ai-agent-clean:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.3);
}

.dark .workflow-ai-agent-clean {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(96, 165, 250, 0.3);
}

.dark .workflow-ai-agent-clean:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(96, 165, 250, 0.5);
}.dark .workflow-platform-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(96, 165, 250, 0.1) inset;
}

.workflow-platform-logo {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    box-shadow: 0 8px 24px -8px rgba(14, 165, 233, 0.5);
}

/* Fine-tune agent row spacing inside platform card */
.workflow-platform-card .workflow-ai-agents { width: 100%; justify-content: center; }
.workflow-platform-card .workflow-ai-agent {
    background: rgba(236, 245, 255, 0.7);
    padding: .55rem .65rem;
    border-radius: 14px;
    border: 1px solid rgba(14,165,233,0.18);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: .72rem;
    font-weight: 600;
}
.dark .workflow-platform-card .workflow-ai-agent { background: rgba(30,58,92,0.35); border-color: rgba(56,189,248,0.25); }
.workflow-platform-card .workflow-ai-agent span {font-size:.62rem; letter-spacing:.05em; text-transform:uppercase;}
.workflow-platform-card .workflow-ai-agent small {font-size:.58rem; font-weight:500; opacity:.72;}

/* Ensure input/output heading labels don't shift columns unevenly */
.workflow-inputs > .mb-4, .workflow-outputs > .mb-4 { margin-top: .25rem; }

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.workflow-platform-title {
    font-size: 1.625rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.375rem;
    text-align: center;
    letter-spacing: -0.025em;
}

.dark .workflow-platform-title {
    color: #f8fafc;
}

.workflow-platform-subtitle {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    margin: 0;
    text-align: center;
    opacity: 0.9;
}

.dark .workflow-platform-subtitle {
    color: #94a3b8;
}

/* AI Agents Inside Platform */
.workflow-ai-agents {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.workflow-ai-agent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(14, 165, 233, 0.15);
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
    transition: all 0.2s;
}

.workflow-ai-agent:hover {
    background: rgba(14, 165, 233, 0.1);
    transform: translateX(4px);
}

.dark .workflow-ai-agent {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.2);
    color: #e2e8f0;
}

.dark .workflow-ai-agent:hover {
    background: rgba(14, 165, 233, 0.12);
}

.workflow-ai-agent svg {
    flex-shrink: 0;
}

/* Platform Badge */
.workflow-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0e7490;
}

.dark .workflow-platform-badge {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(34, 211, 238, 0.3);
    color: #67e8f9;
}

.workflow-platform-badge svg {
    flex-shrink: 0;
    color: #06b6d4;
}

.dark .workflow-platform-badge svg {
    color: #22d3ee;
}

/* Workflow Active State */
.workflow-mindmap-wrapper.workflow-active .workflow-node:not(.workflow-node-active) {
    opacity: 0.3;
    filter: grayscale(0.8);
}

.workflow-mindmap-wrapper.workflow-active .workflow-node.workflow-node-active {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 12px 32px -12px rgba(59, 130, 246, 0.4), 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark .workflow-mindmap-wrapper.workflow-active .workflow-node.workflow-node-active {
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(96, 165, 250, 0.3);
}

/* Enhanced Connection Lines - Always Visible */
.workflow-connection-path {
    stroke-width: 3;
    fill: none;
    opacity: 0.9;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.3));
}

.workflow-connection-path.active {
    opacity: 1;
    stroke-width: 3.5;
    animation: enhancedDashFlow 3s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.5));
}

@keyframes enhancedDashFlow {
    0% {
        stroke-dashoffset: 0;
        opacity: 0.9;
    }
    50% {
        stroke-dashoffset: -15;
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -30;
        opacity: 0.9;
    }
}

.workflow-flow-dot {
    r: 5;
    fill: currentColor;
    opacity: 0.8;
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.4));
}

.workflow-flow-dot.animating {
    opacity: 1;
    animation: flowDotMove 2s ease-in-out infinite;
}

@keyframes flowDotMove {
    0%, 100% {
        opacity: 0;
    }
    20%, 80% {
        opacity: 1;
    }
}

/* Responsive Layout */
@media (max-width: 1023px) {
    .workflow-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .workflow-platform-hub {
        min-height: auto;
        order: -1;
    }

    .workflow-platform-card {
        min-width: auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .workflow-toggle-btn {
        font-size: 0.8125rem;
        padding: 0.5rem 0.875rem;
    }

    .workflow-toggle-btn span {
        display: none;
    }

    .workflow-toggle-btn svg {
        margin: 0;
    }

    .workflow-node-icon {
        width: 36px;
        height: 36px;
    }

    .workflow-platform-card {
        padding: 2rem 1.5rem;
    }

    .workflow-platform-logo {
        width: 64px;
        height: 64px;
    }

    .workflow-logo-grid,
    .workflow-channel-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .workflow-toggle-btn,
    .workflow-node,
    .workflow-expand-icon,
    .workflow-connection-path,
    .workflow-flow-dot,
    .workflow-ai-agent {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .workflow-platform-glow {
        animation: none !important;
        opacity: 0.6;
    }

    .workflow-platform-logo {
        animation: none !important;
    }
}

/* Focus States for Keyboard Navigation */
.workflow-toggle-btn:focus-visible,
.workflow-node-header:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

.dark .workflow-toggle-btn:focus-visible,
.dark .workflow-node-header:focus-visible {
    outline-color: #38bdf8;
}


/* ========================================
   MODAL STYLES
   ======================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modalFadeIn 0.2s ease-out;
}

.modal-overlay.hidden {
    display: none;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dark .modal-backdrop {
    background: rgba(0, 0, 0, 0.85);
}

.modal-container {
    position: relative;
    width: 100%;
    max-width: 42rem;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: modalSlideUp 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.dark .modal-container {
    background: #0f172a;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.dark .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.dark .modal-title {
    color: #f8fafc;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #1e293b;
    transform: scale(1.05);
}

.dark .modal-close {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
}

.dark .modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.modal-body {
    overflow-y: auto;
    padding: 2rem;
    flex: 1;
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.dark .modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.dark .modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.dark .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Modal Responsive */
@media (max-width: 640px) {
    .modal-container {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-header {
        padding: 1rem 1.5rem;
    }

    .modal-title {
        font-size: 1.125rem;
    }

    .modal-body {
        padding: 1.5rem;
    }
}


/* ========================================
   TESTIMONIALS SECTION
   ======================================== */

/* Testimonial Cards */
.testimonial-card {
    position: relative;
    padding: 2rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1.5px solid rgba(203, 213, 225, 0.4);
    border-radius: 24px;
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 20px 40px -16px rgba(139, 92, 246, 0.25);
}

.dark .testimonial-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9));
    border-color: rgba(71, 85, 105, 0.4);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}

.dark .testimonial-card:hover {
    border-color: rgba(167, 139, 250, 0.5);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.8);
}

/* Testimonial Avatar */
.testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(139, 92, 246, 0.2);
}

.dark .testimonial-avatar {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    border-color: rgba(167, 139, 250, 0.3);
}

/* Testimonial Quote */
.testimonial-quote {
    position: relative;
}

/* Testimonial Badge */
.testimonial-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
}

.dark .testimonial-badge {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

.testimonial-badge svg {
    flex-shrink: 0;
}

/* Testimonials Carousel */
.testimonials-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 1rem 0;
}

.testimonials-scroll-wrapper {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.testimonials-scroll-track {
    display: flex;
    gap: 1.5rem;
    animation: scrollTestimonials 40s linear infinite;
    width: max-content;
}

@keyframes scrollTestimonials {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.testimonials-carousel-container:hover .testimonials-scroll-track {
    animation-play-state: paused;
}

/* Testimonial Card in Carousel */
.testimonials-scroll-track .testimonial-card {
    min-width: 550px;
    max-width: 550px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .testimonials-scroll-track .testimonial-card {
        min-width: 380px;
        max-width: 380px;
    }
    
    .testimonials-scroll-track {
        gap: 1rem;
    }
}

/* Hospital Logos Carousel - Simple Healthcare Theme */
.hospital-logos-clean {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hospital-logos-track-clean {
    display: flex;
    gap: 2rem;
    animation: scrollLogosClean 40s linear infinite;
    width: max-content;
}

@keyframes scrollLogosClean {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.hospital-logos-clean:hover .hospital-logos-track-clean {
    animation-play-state: paused;
}

.hospital-logo-clean {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    max-width: 200px;
    padding: 1.75rem 1.25rem;
    text-align: center;
    flex-shrink: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, rgba(16, 185, 129, 0.02) 100%);
    border: 1.5px solid rgba(16, 185, 129, 0.1);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero logo banner overrides - no cards, clean transparent */
.hero-logo-banner .hospital-logo-clean {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    min-width: clamp(120px, 11vw, 180px) !important;
    max-width: clamp(120px, 11vw, 180px) !important;
}

.hero-logo-banner .hospital-logo-clean:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}


.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 80px;
    margin-bottom: 0.875rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.8) 0%, rgba(236, 254, 255, 0.6) 100%);
    border: 1px solid rgba(16, 185, 129, 0.08);
}

.logo-img {
    max-width: 100px;
    max-height: 65px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    transition: all 0.3s ease;
    filter: contrast(1.05) brightness(0.98);
}

.hospital-details {
    width: 100%;
}

.hospital-name-clean {
    font-size: 0.875rem;
    font-weight: 600;
    color: #047857;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.hospital-city {
    font-size: 0.75rem;
    font-weight: 500;
    color: #0891b2;
    letter-spacing: 0.02em;
}

/* Healthcare Hover Effects */
.hospital-logo-clean:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, #ffffff 0%, rgba(16, 185, 129, 0.05) 100%);
    box-shadow: 
        0 10px 25px -5px rgba(16, 185, 129, 0.15),
        0 4px 12px -2px rgba(6, 182, 212, 0.1);
}

.hospital-logo-clean:hover .logo-img {
    filter: contrast(1.1) brightness(1.02);
    transform: scale(1.03);
}

.hospital-logo-clean:hover .hospital-name-clean {
    color: #065f46;
    font-weight: 700;
}

.hospital-logo-clean:hover .hospital-city {
    color: #0e7490;
    font-weight: 600;
}

.hospital-logo-clean:hover .logo-wrapper {
    background: linear-gradient(135deg, rgba(240, 253, 250, 1) 0%, rgba(236, 254, 255, 0.8) 100%);
    border-color: rgba(16, 185, 129, 0.2);
    transform: scale(1.02);
}

/* Healthcare Dark Mode */
.dark .hospital-logo-clean {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(4, 120, 87, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

/* Dark mode override for hero banner */
.dark .hero-logo-banner .hospital-logo-clean {
    background: transparent !important;
    border: none !important;
}

.dark .hospital-logo-clean:hover {
    background: linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(4, 120, 87, 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 
        0 10px 25px -5px rgba(16, 185, 129, 0.2),
        0 4px 12px -2px rgba(6, 182, 212, 0.15);
}

.dark .logo-wrapper {
    background: #ffffff !important; /* Force white background for logos in dark mode */
    border-color: rgba(255,255,255,0.25) !important;
}

.dark .hospital-logo-clean:hover .logo-wrapper {
    background: #ffffff !important; /* Keep white on hover */
    border-color: rgba(255,255,255,0.35) !important;
    box-shadow: none !important; /* Neutralize any inherited hover shadow */
}

.dark .hospital-name-clean {
    color: #10b981;
}

.dark .hospital-city {
    color: #06b6d4;
}

.dark .hospital-logo-clean:hover .hospital-name-clean {
    color: #34d399;
    font-weight: 700;
}

.dark .hospital-logo-clean:hover .hospital-city {
    color: #22d3ee;
    font-weight: 600;
}

.dark .logo-img {
    filter: brightness(1.1) contrast(1.05);
}

.dark .hospital-logo-clean:hover .logo-img {
    filter: brightness(1.15) contrast(1.1);
}

/* Legacy Styles - Keep for backwards compatibility */
.hospital-logos-scroll {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.hospital-logos-track {
    display: flex;
    gap: 3rem;
    animation: scrollLogos 30s linear infinite;
    width: max-content;
}

@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.hospital-logos-scroll:hover .hospital-logos-track {
    animation-play-state: paused;
}

.hospital-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    padding: 1.4rem 1.6rem;
    text-align: center;
    flex-shrink: 0;
    border-radius: 1.75rem;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 24px 56px -28px rgba(15, 23, 42, 0.2);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hospital-logo-item::before {
    display: none;
}

.hospital-logo-item > * {
    position: relative;
    z-index: 1;
}

.hospital-logo-item img {
    max-width: 100%;
    max-height: 78px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.88;
    filter: drop-shadow(0 18px 32px rgba(15, 23, 42, 0.12));
}

.hospital-logo-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 64px -24px rgba(59, 130, 246, 0.3);
}

.hospital-logo-item:hover img {
    opacity: 1;
    transform: translateY(-2px);
}

.hospital-logo-item:hover div {
    color: #6366f1 !important;
}

.dark .hospital-logo-item {
    background: #ffffff;
    border-color: rgba(226, 232, 240, 0.75);
    box-shadow: 0 26px 60px -28px rgba(2, 6, 23, 0.65);
}

.dark .hospital-logo-item img {
    filter: drop-shadow(0 18px 32px rgba(15, 23, 42, 0.35));
    opacity: 0.95;
}

.dark .hospital-logo-item:hover div {
    color: #818cf8 !important;
}


/* Responsive */
@media (max-width: 768px) {
    .testimonial-card {
        padding: 1.5rem;
    }

    .testimonial-avatar {
        width: 48px;
        height: 48px;
    }

    /* Healthcare Mobile Styles */
    .hospital-logos-track-clean {
        gap: 1.5rem;
    }

    .hospital-logo-clean {
        min-width: 170px;
        max-width: 170px;
        padding: 1.5rem 1rem;
    }

    .logo-wrapper {
        width: 100px;
        height: 70px;
        margin-bottom: 0.75rem;
    }

    .logo-img {
        max-width: 85px;
        max-height: 55px;
    }

    .hospital-name-clean {
        font-size: 0.8rem;
    }

    .hospital-city {
        font-size: 0.7rem;
    }

    /* Legacy styles - Mobile */
    .hospital-logos-track {
        gap: 2rem;
    }

    .hospital-logo-item {
        min-width: 160px;
        padding: 0.75rem 1.5rem;
    }
}

/* Healthcare Extra Small Devices */
@media (max-width: 480px) {
    .hospital-logos-track-clean {
        gap: 1.25rem;
    }

    .hospital-logo-clean {
        min-width: 150px;
        max-width: 150px;
        padding: 1.25rem 0.875rem;
    }

    .logo-wrapper {
        width: 85px;
        height: 60px;
    }

    .logo-img {
        max-width: 70px;
        max-height: 45px;
    }

    .hospital-name-clean {
        font-size: 0.75rem;
    }

    .hospital-city {
        font-size: 0.65rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .testimonial-card,
    .hospital-logos-track {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================================================
   Patient Experience & Engagement Section
   ============================================================================= */

/* Patient Feature Cards */
.patient-feature-card {
    position: relative;
    padding: 2rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1.5px solid rgba(203, 213, 225, 0.4);
    border-radius: 24px;
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.patient-feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 24px 48px -16px rgba(139, 92, 246, 0.3);
}

.dark .patient-feature-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9));
    border-color: rgba(71, 85, 105, 0.4);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}

.dark .patient-feature-card:hover {
    border-color: rgba(167, 139, 250, 0.5);
    box-shadow: 0 28px 56px -20px rgba(139, 92, 246, 0.4);
}

/* Patient Feature Icon */
.patient-feature-icon-wrapper {
    display: flex;
    justify-content: center;
}

.patient-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.patient-feature-card:hover .patient-feature-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.3);
}

/* Patient Feature Text */
.patient-feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    line-height: 1.3;
}

.dark .patient-feature-title {
    color: #f9fafb;
}

.patient-feature-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    text-align: center;
}

.dark .patient-feature-desc {
    color: #d1d5db;
}

/* Patient Feature Stats */
.patient-feature-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: auto;
    border-top: 1px solid rgba(203, 213, 225, 0.3);
}

.dark .patient-feature-stats {
    border-top-color: rgba(71, 85, 105, 0.4);
}

.stat-item {
    flex: 1;
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.6875rem;
    color: #9ca3af;
    margin-top: 0.25rem;
    line-height: 1.3;
}

.dark .stat-label {
    color: #9ca3af;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(203, 213, 225, 0.5), transparent);
}

.dark .stat-divider {
    background: linear-gradient(to bottom, transparent, rgba(71, 85, 105, 0.5), transparent);
}

/* Patient Journey Visual */
.patient-journey-visual {
    position: relative;
    overflow: hidden;
}

.patient-journey-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.1), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(236, 72, 153, 0.1), transparent 60%);
    pointer-events: none;
}

/* Professional Patient Journey Section */
.professional-journey-section {
    padding: 3rem 2rem;
    border-radius: 24px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.7) 0%,
        rgba(249, 250, 251, 0.6) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 92, 246, 0.12);
    box-shadow: 0 4px 20px -4px rgba(139, 92, 246, 0.08);
    position: relative;
    overflow: hidden;
}

.dark .professional-journey-section {
    background: linear-gradient(135deg, 
        rgba(31, 41, 55, 0.5) 0%,
        rgba(17, 24, 39, 0.6) 100%);
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.3);
}

/* Subtle gradient overlays for depth */
.professional-journey-section::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.professional-journey-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Journey Header */
.journey-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

.journey-main-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.dark .journey-main-title {
    color: #f9fafb;
}

.journey-brand-accent {
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Timeline Wrapper */
.journey-timeline-wrapper {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    z-index: 2;
}

/* Connection Line */
.journey-connection-line {
    position: absolute;
    top: 42px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(139, 92, 246, 0.15) 0%,
        rgba(124, 58, 237, 0.25) 25%,
        rgba(99, 102, 241, 0.25) 50%,
        rgba(59, 130, 246, 0.25) 75%,
        rgba(59, 130, 246, 0.15) 100%);
    z-index: 1;
}

.dark .journey-connection-line {
    background: linear-gradient(90deg, 
        rgba(139, 92, 246, 0.3) 0%,
        rgba(124, 58, 237, 0.4) 25%,
        rgba(99, 102, 241, 0.4) 50%,
        rgba(59, 130, 246, 0.4) 75%,
        rgba(59, 130, 246, 0.3) 100%);
}

/* Journey Steps Container */
.journey-steps-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    position: relative;
    z-index: 2;
}

/* Individual Journey Step */
.journey-step-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Step Circle (Number Badge) */
.journey-step-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.08),
                0 6px 20px -4px rgba(139, 92, 246, 0.25);
    position: relative;
    z-index: 3;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 1.5rem;
}

.journey-step-item:hover .journey-step-circle {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.12),
                0 8px 24px -4px rgba(139, 92, 246, 0.35);
}

.step-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Step Card */
.journey-step-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%,
        rgba(249, 250, 251, 0.9) 100%);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    width: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px -2px rgba(139, 92, 246, 0.08);
    position: relative;
    overflow: hidden;
}

.dark .journey-step-card {
    background: linear-gradient(135deg, 
        rgba(31, 41, 55, 0.8) 0%,
        rgba(17, 24, 39, 0.9) 100%);
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.3);
}

.journey-step-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.03) 0%,
        rgba(59, 130, 246, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dark .journey-step-card::before {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.05) 0%,
        rgba(59, 130, 246, 0.05) 100%);
}

.journey-step-item:hover .journey-step-card {
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 6px 20px -4px rgba(139, 92, 246, 0.15);
    transform: translateY(-2px);
}

.dark .journey-step-item:hover .journey-step-card {
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 6px 20px -4px rgba(139, 92, 246, 0.25);
}

.journey-step-item:hover .journey-step-card::before {
    opacity: 1;
}

/* Step Icon */
.step-icon-wrapper {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.1) 0%,
        rgba(59, 130, 246, 0.08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.dark .step-icon-wrapper {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.15) 0%,
        rgba(59, 130, 246, 0.12) 100%);
}

.journey-step-item:hover .step-icon-wrapper {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.15) 0%,
        rgba(59, 130, 246, 0.12) 100%);
    transform: scale(1.05);
}

.dark .journey-step-item:hover .step-icon-wrapper {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.2) 0%,
        rgba(59, 130, 246, 0.16) 100%);
}

.step-icon {
    width: 28px;
    height: 28px;
    color: #8b5cf6;
}

.dark .step-icon {
    color: #c4b5fd;
}

/* Step Title */
.step-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.dark .step-title {
    color: #f1f5f9;
}

/* Step Description */
.step-description {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

.dark .step-description {
    color: #cbd5e1;
}

/* Arrow Connector */
.journey-arrow-connector {
    position: absolute;
    top: 28px;
    right: -0.75rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(139, 92, 246, 0.3);
    z-index: 2;
    transition: all 0.3s ease;
}

.dark .journey-arrow-connector {
    color: rgba(139, 92, 246, 0.4);
}

.journey-step-item:hover .journey-arrow-connector {
    color: rgba(139, 92, 246, 0.5);
    transform: translateX(2px);
}

.dark .journey-step-item:hover .journey-arrow-connector {
    color: rgba(139, 92, 246, 0.6);
}

.journey-arrow-connector svg {
    width: 20px;
    height: 20px;
}

.journey-step-item:last-child .journey-arrow-connector {
    display: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .journey-steps-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.25rem;
    }

    .journey-arrow-connector {
        display: none;
    }

    .journey-connection-line {
        display: none;
    }

    .journey-step-circle {
        width: 76px;
        height: 76px;
    }

    .step-number {
        font-size: 1.625rem;
    }
}

@media (max-width: 768px) {
    .patient-feature-card {
        padding: 1.5rem;
    }

    .patient-feature-icon {
        width: 56px;
        height: 56px;
    }

    .patient-feature-title {
        font-size: 1.125rem;
    }

    .patient-feature-desc {
        font-size: 0.8125rem;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .stat-label {
        font-size: 0.625rem;
    }

    .professional-journey-section {
        padding: 2rem 1.25rem;
        border-radius: 20px;
    }

    .journey-header {
        margin-bottom: 2rem;
    }

    .journey-main-title {
        font-size: 1.375rem;
    }

    .journey-steps-container {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .journey-connection-line {
        display: none;
    }

    .journey-arrow-connector {
        display: none;
    }

    .journey-step-circle {
        width: 64px;
        height: 64px;
        margin-bottom: 1.25rem;
        box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.08),
                    0 4px 16px -4px rgba(139, 92, 246, 0.2);
    }

    .step-number {
        font-size: 1.375rem;
    }

    .journey-step-card {
        padding: 1.25rem 1rem;
    }

    .step-icon-wrapper {
        width: 44px;
        height: 44px;
        margin-bottom: 0.875rem;
    }

    .step-icon {
        width: 24px;
        height: 24px;
    }

    .step-title {
        font-size: 1rem;
    }

    .step-description {
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .professional-journey-section {
        padding: 1.75rem 1rem;
    }

    .journey-main-title {
        font-size: 1.25rem;
    }

    .journey-step-circle {
        width: 60px;
        height: 60px;
    }

    .step-number {
        font-size: 1.25rem;
    }

    .journey-step-card {
        padding: 1rem 0.875rem;
    }

    .step-title {
        font-size: 0.9375rem;
    }

    .step-description {
        font-size: 0.8125rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .patient-feature-card,
    .patient-feature-icon,
    .journey-number {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}


/* ===== ROI Modal Enhancements ===== */
#roi-specialty-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(129, 140, 248, 0.55) transparent;
}

#roi-specialty-scroll::-webkit-scrollbar {
    width: 6px;
}

#roi-specialty-scroll::-webkit-scrollbar-track {
    background: transparent;
}

#roi-specialty-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.55), rgba(14, 165, 233, 0.45));
    border-radius: 9999px;
}

.dark #roi-specialty-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.6), rgba(6, 182, 212, 0.5));
}

.roi-specialty-card .specialty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.95rem;
    transition: transform 0.18s ease;
}

.roi-specialty-card .specialty-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.roi-specialty-card:hover .specialty-icon {
    transform: scale(1.07);
}

.roi-specialty-card .specialty-check {
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.roi-sidebar-card {
    border-radius: 18px;
    padding: 1rem 1.1rem;
    background: rgba(248, 250, 252, 0.95);
    border: 1.5px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

.dark .roi-sidebar-card {
    background: rgba(15, 23, 42, 0.68);
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 22px 42px rgba(2, 6, 23, 0.55);
    color: rgba(226, 232, 240, 0.92);
}

.roi-sidebar-card[data-accent="indigo"] { border-color: rgba(99, 102, 241, 0.28); }
.dark .roi-sidebar-card[data-accent="indigo"] { border-color: rgba(129, 140, 248, 0.42); }

.roi-sidebar-card[data-accent="emerald"] { border-color: rgba(16, 185, 129, 0.32); }
.dark .roi-sidebar-card[data-accent="emerald"] { border-color: rgba(52, 211, 153, 0.42); }


/* About Us: Our Journey Timeline (Horizontal) - Enhanced */
.timeline-container-horizontal {
    display: flex;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2rem 0;
    gap: 1rem;
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #dbeafe;
    -webkit-overflow-scrolling: touch;
}

.timeline-container-horizontal::-webkit-scrollbar {
    height: 8px;
}

.timeline-container-horizontal::-webkit-scrollbar-track {
    background: #e0e7ff;
    border-radius: 10px;
}

.timeline-container-horizontal::-webkit-scrollbar-thumb {
    background-color: #3b82f6;
    border-radius: 10px;
    border: 2px solid #e0e7ff;
}

.dark .timeline-container-horizontal {
    scrollbar-color: #60a5fa #1e293b;
}

.dark .timeline-container-horizontal::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark .timeline-container-horizontal::-webkit-scrollbar-thumb {
    background-color: #60a5fa;
    border-color: #1e293b;
}

.timeline-container-horizontal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #10b981 100%);
    transform: translateY(-50%);
    z-index: 0;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.dark .timeline-container-horizontal::before {
    background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #34d399 100%);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}

.timeline-item-horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 220px;
    flex-shrink: 0;
    padding: 0 1rem;
}

.timeline-item-horizontal:nth-child(odd) {
    padding-bottom: 40px;
}

.timeline-item-horizontal:nth-child(even) {
    padding-top: 40px;
}

.timeline-year-horizontal {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2;
    transition: all 0.3s ease;
}

.dark .timeline-year-horizontal {
    background: linear-gradient(135deg, #60a5fa, #818cf8);
    border-color: #0f172a;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.timeline-item-horizontal:hover .timeline-year-horizontal {
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.4), 0 6px 16px rgba(0, 0, 0, 0.2);
}

.dark .timeline-item-horizontal:hover .timeline-year-horizontal {
    box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.4), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.timeline-item-horizontal:nth-child(odd) .timeline-year-horizontal {
    top: calc(50% - 20px);
}

.timeline-item-horizontal:nth-child(even) .timeline-year-horizontal {
    top: calc(50% + 20px);
}

.timeline-content-horizontal {
    background-color: #fff;
    border-radius: 0.875rem;
    padding: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    position: relative;
    border: 1px solid rgba(59, 130, 246, 0.15);
    transition: all 0.3s ease;
    z-index: 1;
}

.dark .timeline-content-horizontal {
    background-color: rgba(30, 41, 59, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: rgba(96, 165, 250, 0.2);
}

.timeline-item-horizontal:hover .timeline-content-horizontal {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

.dark .timeline-item-horizontal:hover .timeline-content-horizontal {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(96, 165, 250, 0.35);
}

.timeline-item-horizontal:nth-child(odd) .timeline-content-horizontal {
    margin-top: 50px;
}

.timeline-item-horizontal:nth-child(even) .timeline-content-horizontal {
    margin-bottom: 50px;
}

.timeline-content-horizontal::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    transition: border-color 0.3s ease;
}

.timeline-item-horizontal:nth-child(odd) .timeline-content-horizontal::before {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fff transparent;
}

.dark .timeline-item-horizontal:nth-child(odd) .timeline-content-horizontal::before {
    border-color: transparent transparent rgba(30, 41, 59, 0.9) transparent;
}

.timeline-item-horizontal:nth-child(even) .timeline-content-horizontal::before {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;
    border-color: #fff transparent transparent transparent;
}

.dark .timeline-item-horizontal:nth-child(even) .timeline-content-horizontal::before {
    border-color: rgba(30, 41, 59, 0.9) transparent transparent transparent;
}

@media (max-width: 768px) {
    .timeline-container-horizontal {
        padding: 1.5rem 0;
    }

    .timeline-item-horizontal {
        min-width: 200px;
        padding: 0 0.75rem;
    }

    .timeline-year-horizontal {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
        border: 3px solid #fff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 3px 10px rgba(0, 0, 0, 0.12);
    }

    .dark .timeline-year-horizontal {
        border-color: #0f172a;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3), 0 3px 10px rgba(0, 0, 0, 0.25);
    }

    .timeline-item-horizontal:nth-child(odd) {
        padding-bottom: 35px;
    }

    .timeline-item-horizontal:nth-child(even) {
        padding-top: 35px;
    }

    .timeline-item-horizontal:nth-child(odd) .timeline-content-horizontal {
        margin-top: 45px;
    }

    .timeline-item-horizontal:nth-child(even) .timeline-content-horizontal {
        margin-bottom: 45px;
    }

    .timeline-content-horizontal {
        padding: 1rem;
    }

    .timeline-item-horizontal:nth-child(odd) .timeline-year-horizontal {
        top: calc(50% - 18px);
    }

    .timeline-item-horizontal:nth-child(even) .timeline-year-horizontal {
        top: calc(50% + 18px);
    }
}



.roi-sidebar-card[data-accent="cyan"] { border-color: rgba(14, 165, 233, 0.32); }
.dark .roi-sidebar-card[data-accent="cyan"] { border-color: rgba(56, 189, 248, 0.42); }

.roi-sidebar-card[data-accent="purple"] { border-color: rgba(168, 85, 247, 0.28); }
.dark .roi-sidebar-card[data-accent="purple"] { border-color: rgba(196, 181, 253, 0.4); }

.roi-sidebar-card[data-accent="orange"] { border-color: rgba(249, 115, 22, 0.28); }
.dark .roi-sidebar-card[data-accent="orange"] { border-color: rgba(251, 146, 60, 0.42); }

.roi-sidebar-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.35rem;
}
.dark .roi-sidebar-title { color: rgba(148, 163, 184, 0.85); }

.roi-sidebar-subtext {
    font-size: 0.86rem;
    line-height: 1.4;
    color: #334155;
}
.dark .roi-sidebar-subtext { color: rgba(226, 232, 240, 0.85); }

.roi-sidebar-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 650;
    padding: 0.35rem 0.7rem 0.3rem;
    border-radius: 9999px;
    background: linear-gradient(125deg, rgba(30, 64, 175, 0.15), rgba(59, 130, 246, 0.22));
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.45);
    margin-bottom: 0.6rem;
}

.roi-sidebar-title::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.9), rgba(59, 130, 246, 0.9));
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.45);
}

.dark .roi-sidebar-title {
    background: rgba(30, 64, 175, 0.22);
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, 0.5);
}

.dark .roi-sidebar-title::before {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.9), rgba(37, 99, 235, 0.9));
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.55);
}

.roi-sidebar-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

.roi-sidebar-list li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #475569;
}
.dark .roi-sidebar-list li { color: rgba(226, 232, 240, 0.88); }

.roi-sidebar-dot {
    margin-top: 0.35rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background: rgba(79, 70, 229, 0.85);
    box-shadow: 0 0 6px rgba(79, 70, 229, 0.5);
}

.roi-sidebar-dot[data-accent="emerald"] { background: rgba(16, 185, 129, 0.9); box-shadow: 0 0 6px rgba(16, 185, 129, 0.55); }
.roi-sidebar-dot[data-accent="cyan"] { background: rgba(14, 165, 233, 0.9); box-shadow: 0 0 6px rgba(14, 165, 233, 0.5); }
.roi-sidebar-dot[data-accent="orange"] { background: rgba(249, 115, 22, 0.9); box-shadow: 0 0 6px rgba(249, 115, 22, 0.5); }
.roi-sidebar-dot[data-accent="purple"] { background: rgba(168, 85, 247, 0.9); box-shadow: 0 0 6px rgba(168, 85, 247, 0.5); }
.roi-sidebar-dot[data-accent="indigo"] { background: rgba(79, 70, 229, 0.9); box-shadow: 0 0 6px rgba(79, 70, 229, 0.5); }

.roi-sidebar-list h5 {
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 0.15rem;
    color: #1f2937;
}
.dark .roi-sidebar-list h5 { color: rgba(241, 245, 249, 0.94); }

.roi-sidebar-list p {
    font-size: 0.78rem;
}

.roi-specialty-card .specialty-check {
    display: none;
    opacity: 0;
    transform: translateY(-4px);
}

.roi-specialty-card.is-selected .specialty-check {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.roi-sidebar-list strong {
    color: inherit;
}

.roi-specialty-card.is-selected {
    border-color: rgba(129, 140, 248, 0.65);
    background: linear-gradient(135deg, rgba(237, 242, 255, 0.92), rgba(240, 249, 255, 0.92));
    box-shadow: 0 18px 38px rgba(79, 70, 229, 0.18);
}

.dark .roi-specialty-card.is-selected {
    border-color: rgba(165, 180, 252, 0.58);
    background: linear-gradient(135deg, rgba(67, 56, 202, 0.35), rgba(8, 145, 178, 0.25));
    box-shadow: 0 18px 32px rgba(79, 70, 229, 0.45);
}

.roi-specialty-card[data-accent="rose"].is-selected { border-color: rgba(244, 63, 94, 0.55); }
.roi-specialty-card[data-accent="amber"].is-selected { border-color: rgba(251, 191, 36, 0.6); }
.roi-specialty-card[data-accent="emerald"].is-selected { border-color: rgba(16, 185, 129, 0.6); }
.roi-specialty-card[data-accent="cyan"].is-selected { border-color: rgba(14, 165, 233, 0.6); }
.roi-specialty-card[data-accent="blue"].is-selected { border-color: rgba(37, 99, 235, 0.58); }
.roi-specialty-card[data-accent="purple"].is-selected { border-color: rgba(168, 85, 247, 0.58); }
.roi-specialty-card[data-accent="pink"].is-selected { border-color: rgba(236, 72, 153, 0.58); }
.roi-specialty-card[data-accent="teal"].is-selected { border-color: rgba(45, 212, 191, 0.6); }
.roi-specialty-card[data-accent="lime"].is-selected { border-color: rgba(132, 204, 22, 0.55); }
.roi-specialty-card[data-accent="indigo"].is-selected { border-color: rgba(129, 140, 248, 0.7); }
.roi-specialty-card[data-accent="violet"].is-selected { border-color: rgba(139, 92, 246, 0.6); }
.roi-specialty-card[data-accent="slate"].is-selected { border-color: rgba(100, 116, 139, 0.6); }
.roi-specialty-card[data-accent="fuchsia"].is-selected { border-color: rgba(217, 70, 239, 0.6); }


/* ========================================
   MODERN SWIPEABLE TESTIMONIALS - COMPACT
   ======================================== */

/* Container & Wrapper */
.modern-testimonials-wrapper {
    position: relative;
    user-select: none;
}

.modern-testimonials-track-container {
    position: relative;
    overflow: hidden;
    cursor: grab;
    border-radius: 20px;
}

.modern-testimonials-track-container.is-dragging {
    cursor: grabbing;
}

.modern-testimonials-track {
    display: flex;
    will-change: transform;
    touch-action: pan-y;
}

/* Testimonial Slide - 2 slides per view on desktop */
.modern-testimonial-slide {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
    padding: 0 6px;
}

/* 2 slides per view on tablet */
@media (max-width: 1024px) {
    .modern-testimonial-slide {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

/* 1 slide per view on mobile */
@media (max-width: 640px) {
    .modern-testimonial-slide {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 8px;
    }
}

/* Compact Testimonial Card with Image */
.modern-testimonial-card-compact {
    position: relative;
    padding: 20px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(203, 213, 225, 0.5);
    border-radius: 18px;
    box-shadow: 
        0 4px 24px -6px rgba(0, 0, 0, 0.1),
        0 12px 32px -12px rgba(99, 102, 241, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: auto;
}

.modern-testimonial-card-compact:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 
        0 8px 32px -8px rgba(0, 0, 0, 0.15),
        0 16px 48px -16px rgba(139, 92, 246, 0.3);
}

.dark .modern-testimonial-card-compact {
    background: linear-gradient(135deg, 
        rgba(30, 41, 59, 0.98) 0%, 
        rgba(15, 23, 42, 0.95) 100%);
    border-color: rgba(71, 85, 105, 0.5);
    box-shadow: 
        0 4px 24px -6px rgba(0, 0, 0, 0.4),
        0 12px 32px -12px rgba(139, 92, 246, 0.2);
}

.dark .modern-testimonial-card-compact:hover {
    border-color: rgba(167, 139, 250, 0.6);
    box-shadow: 
        0 8px 32px -8px rgba(0, 0, 0, 0.6),
        0 16px 48px -16px rgba(139, 92, 246, 0.4);
}

/* Tags */
.modern-testimonial-card-compact .tag-purple,
.modern-testimonial-card-compact .tag-cyan,
.modern-testimonial-card-compact .tag-green,
.modern-testimonial-card-compact .tag-blue,
.modern-testimonial-card-compact .tag-pink {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.tag-purple {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
}

.dark .tag-purple {
    background: rgba(139, 92, 246, 0.25);
    color: #a78bfa;
}

.tag-cyan {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
}

.dark .tag-cyan {
    background: rgba(6, 182, 212, 0.25);
    color: #22d3ee;
}

.tag-pink {
    background: rgba(236, 72, 153, 0.15);
    color: #db2777;
}

.dark .tag-pink {
    background: rgba(236, 72, 153, 0.25);
    color: #f472b6;
}

.tag-green {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.dark .tag-green {
    background: rgba(16, 185, 129, 0.25);
    color: #34d399;
}

.tag-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.dark .tag-blue {
    background: rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}

.tag-amber {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.dark .tag-amber {
    background: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}

.tag-teal {
    background: rgba(20, 184, 166, 0.15);
    color: #0f766e;
}

.dark .tag-teal {
    background: rgba(20, 184, 166, 0.25);
    color: #5eead4;
}

.tag-indigo {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

.dark .tag-indigo {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
}

/* Navigation Buttons - Smaller */
.modern-nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(249, 250, 251, 0.9) 100%);
    border: 1.5px solid rgba(203, 213, 225, 0.5);
    box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.12);
    color: #6366f1;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.modern-nav-button:hover {
    transform: scale(1.1);
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 4px 16px -4px rgba(99, 102, 241, 0.3);
}

.modern-nav-button:active {
    transform: scale(0.95);
}

.dark .modern-nav-button {
    background: linear-gradient(135deg, 
        rgba(51, 65, 85, 0.95) 0%, 
        rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.6);
    color: #a78bfa;
}

.dark .modern-nav-button:hover {
    border-color: rgba(167, 139, 250, 0.7);
    box-shadow: 0 4px 16px -4px rgba(139, 92, 246, 0.4);
}

/* Dot Indicators - Smaller */
.modern-dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(203, 213, 225, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.modern-dot-indicator:hover {
    background: rgba(99, 102, 241, 0.4);
    transform: scale(1.2);
}

.modern-dot-indicator.active {
    width: 24px;
    border-radius: 4px;
    background: linear-gradient(90deg, 
        #6366f1 0%, 
        #8b5cf6 100%);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

.dark .modern-dot-indicator {
    background: rgba(71, 85, 105, 0.6);
}

.dark .modern-dot-indicator:hover {
    background: rgba(167, 139, 250, 0.5);
}

.dark .modern-dot-indicator.active {
    background: linear-gradient(90deg, 
        #8b5cf6 0%, 
        #a78bfa 100%);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.5);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .modern-testimonial-card-compact {
        padding: 16px;
    }

    .modern-nav-button {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 640px) {
    .modern-testimonial-card-compact {
        padding: 14px;
    }

    .modern-nav-button {
        width: 32px;
        height: 32px;
    }

    .modern-dot-indicator {
        width: 6px;
        height: 6px;
    }

    .modern-dot-indicator.active {
        width: 20px;
    }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .modern-testimonials-track {
        transition: none !important;
    }

    .modern-testimonial-card-compact,
    .modern-nav-button,
    .modern-dot-indicator {
        transition: none !important;
    }

    .modern-testimonial-card-compact:hover {
        transform: none !important;
    }
}

/* Touch Feedback */
@media (hover: none) and (pointer: coarse) {
    .modern-testimonial-card-compact:hover {
        transform: none;
    }

    .modern-testimonial-card-compact:active {
        transform: scale(0.98);
    }
}

/* ========================================
   ENHANCED TESTIMONIAL CARD DESIGN
   ======================================== */

/* Enhanced Card Container */
.testimonial-card-enhanced {
    position: relative;
    padding: 24px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(203, 213, 225, 0.5);
    border-radius: 20px;
    box-shadow: 
        0 4px 24px -6px rgba(0, 0, 0, 0.1),
        0 12px 32px -12px rgba(99, 102, 241, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: auto;
}

.testimonial-card-enhanced:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 
        0 8px 32px -8px rgba(0, 0, 0, 0.15),
        0 16px 48px -16px rgba(139, 92, 246, 0.3);
}

.dark .testimonial-card-enhanced {
    background: linear-gradient(135deg, 
        rgba(30, 41, 59, 0.98) 0%, 
        rgba(15, 23, 42, 0.95) 100%);
    border-color: rgba(71, 85, 105, 0.5);
    box-shadow: 
        0 4px 24px -6px rgba(0, 0, 0, 0.4),
        0 12px 32px -12px rgba(139, 92, 246, 0.2);
}

.dark .testimonial-card-enhanced:hover {
    border-color: rgba(167, 139, 250, 0.6);
    box-shadow: 
        0 8px 32px -8px rgba(0, 0, 0, 0.6),
        0 16px 48px -16px rgba(139, 92, 246, 0.4);
}

/* Testimonial Header */
.testimonial-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Avatar Wrapper with Verified Badge */
.testimonial-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.testimonial-avatar {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    border: 2.5px solid rgba(139, 92, 246, 0.2);
    object-fit: cover;
    transition: all 0.3s ease;
}

.testimonial-card-enhanced:hover .testimonial-avatar {
    border-color: rgba(139, 92, 246, 0.4);
    transform: scale(1.05);
}

.dark .testimonial-avatar {
    border-color: rgba(167, 139, 250, 0.3);
}

.dark .testimonial-card-enhanced:hover .testimonial-avatar {
    border-color: rgba(167, 139, 250, 0.5);
}

/* Verified Badge */
.testimonial-verified {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    border: 2.5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.dark .testimonial-verified {
    border-color: rgba(15, 23, 42, 1);
}

/* Testimonial Info */
.testimonial-info {
    flex: 1;
    min-width: 0;
}

.testimonial-name {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.dark .testimonial-name {
    color: #f9fafb;
}

.testimonial-position {
    font-size: 13px;
    font-weight: 600;
    color: #6366f1;
    margin: 0 0 3px 0;
    line-height: 1.3;
}

.dark .testimonial-position {
    color: #a78bfa;
}

.testimonial-hospital {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.dark .testimonial-hospital {
    color: #9ca3af;
}

/* Rating */
.testimonial-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rating-stars {
    font-size: 13px;
    line-height: 1;
}

.rating-text {
    font-size: 13px;
    font-weight: 700;
    color: #fbbf24;
    line-height: 1;
}

/* Quote Wrapper */
.testimonial-quote-wrapper {
    position: relative;
    padding-left: 32px;
}

.quote-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    color: rgba(139, 92, 246, 0.2);
    transition: color 0.3s ease;
}

.testimonial-card-enhanced:hover .quote-icon {
    color: rgba(139, 92, 246, 0.35);
}

.dark .quote-icon {
    color: rgba(167, 139, 250, 0.25);
}

.dark .testimonial-card-enhanced:hover .quote-icon {
    color: rgba(167, 139, 250, 0.4);
}

.testimonial-quote {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    margin: 0;
    font-weight: 500;
}

.dark .testimonial-quote {
    color: #d1d5db;
}

/* Enhanced Tags */
.testimonial-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-enhanced {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 12px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tag-enhanced:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Tag Icon */
.tag-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Tag Color Variants - Enhanced */
.tag-enhanced.tag-purple {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.dark .tag-enhanced.tag-purple {
    background: rgba(139, 92, 246, 0.25);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

.tag-enhanced.tag-cyan {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.dark .tag-enhanced.tag-cyan {
    background: rgba(6, 182, 212, 0.25);
    color: #22d3ee;
    border-color: rgba(6, 182, 212, 0.3);
}

.tag-enhanced.tag-pink {
    background: rgba(236, 72, 153, 0.15);
    color: #db2777;
    border: 1px solid rgba(236, 72, 153, 0.2);
}

.dark .tag-enhanced.tag-pink {
    background: rgba(236, 72, 153, 0.25);
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.3);
}

.tag-enhanced.tag-green {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.dark .tag-enhanced.tag-green {
    background: rgba(16, 185, 129, 0.25);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.tag-enhanced.tag-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.dark .tag-enhanced.tag-blue {
    background: rgba(59, 130, 246, 0.25);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.tag-enhanced.tag-amber {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.dark .tag-enhanced.tag-amber {
    background: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

.tag-enhanced.tag-teal {
    background: rgba(20, 184, 166, 0.15);
    color: #0f766e;
    border: 1px solid rgba(20, 184, 166, 0.2);
}

.dark .tag-enhanced.tag-teal {
    background: rgba(20, 184, 166, 0.25);
    color: #5eead4;
    border-color: rgba(20, 184, 166, 0.3);
}

.tag-enhanced.tag-indigo {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.dark .tag-enhanced.tag-indigo {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.3);
}

/* Responsive Adjustments for Enhanced Cards */
@media (max-width: 768px) {
    .testimonial-card-enhanced {
        padding: 20px;
        gap: 16px;
    }

    .testimonial-avatar {
        width: 64px;
        height: 64px;
        border-radius: 14px;
    }

    .testimonial-verified {
        width: 20px;
        height: 20px;
    }

    .testimonial-name {
        font-size: 16px;
    }

    .testimonial-position {
        font-size: 12px;
    }

    .testimonial-hospital {
        font-size: 11px;
    }

    .testimonial-quote {
        font-size: 13px;
    }

    .testimonial-quote-wrapper {
        padding-left: 28px;
    }

    .quote-icon {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 640px) {
    .testimonial-card-enhanced {
        padding: 18px;
        gap: 14px;
    }

    .testimonial-avatar {
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }

    .testimonial-verified {
        width: 18px;
        height: 18px;
    }

    .testimonial-name {
        font-size: 15px;
    }

    .testimonial-position {
        font-size: 11px;
    }

    .testimonial-hospital {
        font-size: 10px;
    }

    .rating-stars,
    .rating-text {
        font-size: 12px;
    }

    .testimonial-quote {
        font-size: 12px;
    }

    .testimonial-quote-wrapper {
        padding-left: 24px;
    }

    .quote-icon {
        width: 20px;
        height: 20px;
    }

    .tag-enhanced {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* Accessibility for Enhanced Cards */
@media (prefers-reduced-motion: reduce) {
    .testimonial-card-enhanced,
    .testimonial-avatar,
    .quote-icon,
    .tag-enhanced {
        transition: none !important;
    }

    .testimonial-card-enhanced:hover {
        transform: none !important;
    }

    .testimonial-card-enhanced:hover .testimonial-avatar {
        transform: none !important;
    }
}

/* Touch Feedback for Enhanced Cards */
@media (hover: none) and (pointer: coarse) {
    .testimonial-card-enhanced:hover {
        transform: none;
    }

    .testimonial-card-enhanced:active {
        transform: scale(0.98);
    }

    .tag-enhanced:hover {
        transform: none;
    }
}

/* =============================================================
     Premium Feature Cards (extracted component)
     ============================================================= */
.premium-features {position:relative;}
.premium-card {position:relative; display:flex; flex-direction:column; height:100%; border-radius:1.25rem; padding:1.5rem; isolation:isolate; overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,0.75),rgba(255,255,255,0.55)) border-box; backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); box-shadow:0 2px 6px -2px rgba(0,0,0,0.08),0 8px 24px -8px rgba(0,0,0,0.15); transition:box-shadow .6s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); cursor:default;}
html.dark .premium-card {background:linear-gradient(145deg,rgba(17,24,39,0.85),rgba(17,24,39,0.6)); box-shadow:0 2px 6px -2px rgba(0,0,0,.6),0 8px 28px -8px rgba(0,0,0,.65);} 
.premium-card:focus-visible {outline:2px solid var(--pc-accent, #2563eb); outline-offset:2px;}
.premium-card:hover {transform:translateY(-10px) scale(1.015); box-shadow:0 4px 14px -4px rgba(0,0,0,0.12),0 22px 48px -12px rgba(0,0,0,0.28);} 
@media (prefers-reduced-motion: reduce){.premium-card,.premium-card:hover{transform:none;}}
.premium-card-bg,.premium-noise,.premium-border,.premium-shine {position:absolute; inset:0; pointer-events:none;}
.premium-card-bg {background:radial-gradient(circle at 120% 140%, rgba(255,255,255,0.65), rgba(255,255,255,0) 60%), linear-gradient(160deg, rgba(255,255,255,0.4),rgba(255,255,255,0)); opacity:.85; mix-blend-mode:overlay; transition:opacity .8s ease;}
html.dark .premium-card-bg {background:radial-gradient(circle at 125% 145%, rgba(255,255,255,0.08), rgba(255,255,255,0) 65%), linear-gradient(160deg, rgba(255,255,255,0.05),rgba(255,255,255,0)); opacity:.55; mix-blend-mode:normal;}
.premium-card:hover .premium-card-bg {opacity:1;}
.premium-noise {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); opacity:.18; mix-blend-mode:overlay;}
html.dark .premium-noise {opacity:.12;}
.premium-border {padding:1px; border-radius:inherit; background:linear-gradient(130deg, rgba(255,255,255,.55), rgba(255,255,255,.15)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.9; transition:opacity .6s ease;}
html.dark .premium-border {background:linear-gradient(130deg, rgba(255,255,255,.25), rgba(255,255,255,.05)); opacity:.6;}
.premium-card:hover .premium-border {opacity:1;}
.premium-shine {background:linear-gradient(65deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 45%,rgba(255,255,255,0) 60%); transform:translateX(-120%); animation:premium-shine 4.5s cubic-bezier(.65,.05,.36,1) infinite; mix-blend-mode:overlay; opacity:.35;}
@media (prefers-reduced-motion: reduce){.premium-shine{animation:none;display:none;}}
.premium-card:hover .premium-shine {animation-duration:3.2s; opacity:.55;}
@keyframes premium-shine {to {transform:translateX(120%);}}
.premium-inner {position:relative; z-index:2; display:flex; flex-direction:column; height:100%;}
.premium-top {display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.2rem; position:relative;}
.premium-icon-wrap {display:flex; align-items:center; gap:.75rem; position:relative;}
.premium-icon {width:3.25rem; height:3.25rem; display:flex; align-items:center; justify-content:center; border-radius:1rem; position:relative; color:#fff; font-size:1.25rem; font-weight:600; letter-spacing:.5px; background:linear-gradient(135deg,var(--pc-g1),var(--pc-g2) 40%,var(--pc-g3)); box-shadow:0 4px 14px -4px var(--pc-glow,rgba(37,99,235,.55)); overflow:hidden;}
.premium-icon:before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%); opacity:.5; mix-blend-mode:overlay; transition:opacity .6s ease;}
.premium-card:hover .premium-icon:before {opacity:.8;}
.premium-icon svg {filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.premium-pill {display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .7rem .4rem; font-size:.7rem; font-weight:600; line-height:1; letter-spacing:.5px; background:linear-gradient(135deg,var(--pc-pill1),var(--pc-pill2)); color:var(--pc-pillText,#1e293b); border-radius:.75rem; position:relative; border:1px solid var(--pc-pillBorder,rgba(255,255,255,.35)); box-shadow:0 2px 4px -2px var(--pc-pillShadow,rgba(0,0,0,.15));}
html.dark .premium-pill {color:var(--pc-pillTextDark,#fff); border-color:rgba(255,255,255,.15);}
.premium-orb {position:absolute; top:55%; right:-15%; width:7rem; height:7rem; background:radial-gradient(circle at 30% 30%, var(--pc-orb1) 0%, var(--pc-orb2) 70%); filter:blur(40px) saturate(150%); opacity:0; transform:translateY(10px) scale(.85); transition:opacity 1s ease, transform 1s ease;}
.premium-card:hover .premium-orb {opacity:.9; transform:translateY(0) scale(1);}
html.dark .premium-orb {filter:blur(46px) saturate(180%);}
.premium-title {font-size:1.15rem; font-weight:700; line-height:1.25; margin:0 0 .55rem; background:linear-gradient(120deg,#0f172a,#334155); -webkit-background-clip:text; background-clip:text; color:transparent; transition:background .65s ease, letter-spacing .65s ease;}
html.dark .premium-title {color:white;} 
.premium-desc {font-size:.8rem; line-height:1.55; color:#475569; margin:0 0 1rem; max-width:32ch;}
html.dark .premium-desc {color:#94a3b8;}
.premium-stats {margin-top:auto; display:flex; align-items:stretch; gap:1.15rem; padding-top:1rem; position:relative;}
.premium-stats:before {content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.12),rgba(0,0,0,0)); opacity:.35;}
html.dark .premium-stats:before {background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.25),rgba(255,255,255,0)); opacity:.3;}
.stat {flex:1 1 0; min-width:0; display:flex; flex-direction:column;}
.stat-value {font-size:1.55rem; font-weight:700; letter-spacing:.5px; background:linear-gradient(90deg,var(--pc-g1),var(--pc-g3)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 6px var(--pc-shadow,rgba(0,0,0,.08)));}
.stat-label {margin-top:.15rem; font-size:.62rem; font-weight:500; letter-spacing:.75px; text-transform:uppercase; color:#64748b;}
html.dark .stat-label {color:#94a3b8;}
.stat-sep {width:1px; background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.15),rgba(0,0,0,0));}
html.dark .stat-sep {background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.25),rgba(255,255,255,0));}
.premium-card[data-accent=blue] {--pc-g1:#2563eb; --pc-g2:#3b82f6; --pc-g3:#6366f1; --pc-glow:rgba(59,130,246,.55); --pc-orb1:rgba(59,130,246,.55); --pc-orb2:rgba(99,102,241,.15); --pc-pill1:rgba(219,234,254,.85); --pc-pill2:rgba(224,231,255,.85); --pc-pillText:#1e3a8a; --pc-pillBorder:rgba(30,64,175,.25); --pc-pillShadow:rgba(30,58,138,.25);} 
html.dark .premium-card[data-accent=blue] {--pc-pill1:rgba(37,99,235,.25); --pc-pill2:rgba(99,102,241,.25); --pc-pillTextDark:#fff; --pc-pillBorder:rgba(255,255,255,.15);}
.premium-card[data-accent=teal] {--pc-g1:#0d9488; --pc-g2:#14b8a6; --pc-g3:#10b981; --pc-glow:rgba(20,184,166,.55); --pc-orb1:rgba(20,184,166,.55); --pc-orb2:rgba(16,185,129,.18); --pc-pill1:rgba(204,251,241,.85); --pc-pill2:rgba(209,250,229,.85); --pc-pillText:#064e3b; --pc-pillBorder:rgba(4,120,87,.25); --pc-pillShadow:rgba(6,95,70,.25);} 
html.dark .premium-card[data-accent=teal] {--pc-pill1:rgba(13,148,136,.25); --pc-pill2:rgba(16,185,129,.25); --pc-pillTextDark:#fff;}
.premium-card[data-accent=cyan] {--pc-g1:#0891b2; --pc-g2:#06b6d4; --pc-g3:#0ea5e9; --pc-glow:rgba(6,182,212,.55); --pc-orb1:rgba(6,182,212,.55); --pc-orb2:rgba(14,165,233,.18); --pc-pill1:rgba(207,250,254,.85); --pc-pill2:rgba(219,234,254,.85); --pc-pillText:#083344; --pc-pillBorder:rgba(8,51,68,.25); --pc-pillShadow:rgba(8,51,68,.25);} 
html.dark .premium-card[data-accent=cyan] {--pc-pill1:rgba(6,182,212,.25); --pc-pill2:rgba(14,165,233,.25); --pc-pillTextDark:#fff;}
.premium-card:before {content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 70% 120%, var(--pc-g1) 0%, transparent 70%); opacity:0; filter:blur(62px) saturate(180%); transition:opacity 1s ease; z-index:0;}
.premium-card:hover:before {opacity:.7;}
.premium-card {--rx:0deg; --ry:0deg; --t:translateY(0); transform:var(--t) rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; perspective:1200px;}
@media (prefers-reduced-motion: reduce){.premium-card{transform:translateY(0)!important;}}
.premium-card:focus-visible {box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--pc-g2);}
@media (max-width:640px){
    .premium-card {padding:1.15rem; border-radius:1rem;}
    .premium-icon {width:2.9rem; height:2.9rem; border-radius:.9rem;}
    .premium-title {font-size:1.05rem;}
    .premium-desc {font-size:.78rem;}
    .stat-value {font-size:1.35rem;}
}

/* Animation Delay Utility Classes */
.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-1000 {
    animation-delay: 1s;
}

.animation-delay-500 {
    animation-delay: 0.5s;
}

/* Hospital Logo Clean Animations */
.hospital-logo-clean:nth-child(1) {
    transition-delay: 0.05s;
}

.hospital-logo-clean:nth-child(2) {
    transition-delay: 0.1s;
}

.hospital-logo-clean:nth-child(3) {
    transition-delay: 0.15s;
}

.hospital-logo-clean:nth-child(4) {
    transition-delay: 0.2s;
}

.hospital-logo-clean:nth-child(5) {
    transition-delay: 0.25s;
}

.hospital-logo-clean:nth-child(6) {
    transition-delay: 0.05s;
}

.hospital-logo-clean:nth-child(7) {
    transition-delay: 0.1s;
}

.hospital-logo-clean:nth-child(8) {
    transition-delay: 0.15s;
}

.hospital-logo-clean:nth-child(9) {
    transition-delay: 0.2s;
}

.hospital-logo-clean:nth-child(10) {
    transition-delay: 0.25s;
}

@media (forced-colors: active){
    .premium-card,.premium-card-bg,.premium-border,.premium-icon,.premium-pill {all:unset; display:block; border:1px solid CanvasText; padding:1rem; background:Canvas; color:CanvasText;}
        .premium-title, .premium-desc, .stat-value, .stat-label {color:CanvasText !important; background:none!important;-webkit-background-clip:initial!important; background-clip:initial!important;}
    .premium-stats:before,.stat-sep,.premium-orb,.premium-noise,.premium-shine {display:none!important;}
}
@media print { .premium-card {box-shadow:none; background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact;} }