:root {
    --medup-primary: #97d5ff;
    --medup-primary-dark: #5bb8ff;
    --medup-primary-darker: #0284c7;
    --medup-primary-light: #e0f2fe;
    --medup-bg-light: #f4fbff;
    --medup-text-dark: #0f172a;
    --medup-text-muted: #64748b;
    --medup-icon-color: #042938;
    --medup-card-shadow: 0 20px 40px -15px rgba(2, 132, 199, 0.08), 0 10px 20px -10px rgba(2, 132, 199, 0.04);
    --medup-card-shadow-active: 0 30px 60px -15px rgba(2, 132, 199, 0.2), 0 15px 25px -10px rgba(2, 132, 199, 0.1);
    --medup-card-width: 370px;
}
@media (max-width: 1024px) {
    :root { --medup-card-width: 320px; }
}
@media (max-width: 768px) {
    :root { --medup-card-width: 82vw; } 
}
.medup-box-sizing * { box-sizing: border-box; }
.medup-scroll-section { position: relative; height: 350vh; background: transparent; }
.medup-sticky-area { position: sticky; top: 0px; height: 100vh; height: 100dvh; width: 100%; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 10em; }
.medup-header { text-align: center; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); padding: 0 1.5rem; z-index: 20; position: relative; max-width: 80em; margin-left: auto; margin-right: auto; }
.medup-header h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 800; color: var(--medup-icon-color); margin: 0 0 clamp(0.5rem, 2vh, 1rem) 0; line-height: 1.2; letter-spacing: -0.03em; }
.medup-header p { font-size: clamp(0.95rem, 2vw, 1.125rem); color: var(--medup-text-muted); max-width: 800px; margin: 0 auto; line-height: 1.6; font-weight: 500; }
.medup-carousel-container { width: 100%; max-width: 80em; margin: 0 auto; position: relative; padding: 2rem 0; }
.medup-track { display: flex; gap: clamp(1.5rem, 4vw, 3rem); width: max-content; padding: 0 calc(50% - (var(--medup-card-width) / 2)); will-change: transform; }
.medup-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); width: var(--medup-card-width); min-width: var(--medup-card-width); max-width: var(--medup-card-width); padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem); border-radius: 2rem; box-shadow: var(--medup-card-shadow); border: 1px solid rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; align-items: center; text-align: center; flex-shrink: 0; position: relative; will-change: transform, opacity; transition: box-shadow 0.4s ease, border-color 0.4s ease; transform-origin: center center; }
.medup-card.is-active { box-shadow: var(--medup-card-shadow-active); border-color: rgba(2, 132, 199, 0.2); background: #ffffff; }
.medup-icon-wrapper { position: relative; width: 6.5rem; height: 6.5rem; margin-bottom: 2.5rem; display: flex; align-items: center; justify-content: center; }
.medup-pulse-ring { position: absolute; inset: -6px; background: var(--medup-primary); border-radius: 50%; animation: medup-pulse 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; z-index: 0; opacity: 0.4; }
.medup-icon-circle { width: 100%; height: 100%; background: linear-gradient(135deg, var(--medup-primary-light) 0%, var(--medup-primary-dark) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; border: 5px solid #ffffff; box-shadow: 0 12px 25px -5px rgba(2, 132, 199, 0.25), inset 0 -4px 10px rgba(0,0,0,0.05); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.medup-card.is-active .medup-icon-circle { transform: scale(1.1) rotate(-3deg); }
.medup-icon-circle i { color: var(--medup-icon-color); display: flex; }
.medup-card-title { font-size: clamp(1.2rem, 3vw, 1.4rem); font-weight: 800; color: var(--medup-text-dark); margin: 0 0 1rem 0; line-height: 1.3; letter-spacing: -0.02em; }
.medup-card-desc { font-size: clamp(0.9rem, 2vw, 1rem); color: var(--medup-text-muted); line-height: 1.65; margin: 0; font-weight: 500; }
@keyframes medup-pulse { 0% { transform: scale(0.85); opacity: 0.5; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } }
@media (max-height: 800px) { .medup-icon-wrapper { width: 5rem; height: 5rem; margin-bottom: 1.5rem; } .medup-icon-circle i { transform: scale(0.85); } }
@media (max-height: 650px) { .medup-header p { display: none; } .medup-icon-wrapper { width: 4rem; height: 4rem; margin-bottom: 1rem; } .medup-icon-circle i { transform: scale(0.7); } .medup-card-title { margin-bottom: 0.5rem; } .medup-card-desc { font-size: 0.85rem; line-height: 1.4; } }