*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#F0F7FA;--surface:#FFFFFF;--primary:#0D7C7C;--primary-dark:#095E5E;--primary-light:#E8F5F5;--accent:#2563EB;--accent-dark:#1D4ED8;--warm:#F59E0B;--text:#0F172A;--text-secondary:#475569;--text-muted:#94A3B8;--border:#E2E8F0;--success:#059669;--error:#DC2626;--shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 6px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.06);--shadow-lg:0 10px 25px rgba(0,0,0,0.08);--shadow-xl:0 20px 40px rgba(0,0,0,0.1);--radius:12px;--radius-lg:20px;--max-w:1200px;--nav-h:72px;--font-heading:'Playfair Display',Georgia,serif;--font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
html.dark{--bg:#0F172A;--surface:#1E293B;--primary:#14B8B8;--primary-dark:#0D7C7C;--primary-light:#0F2E2E;--text:#F1F5F9;--text-secondary:#94A3B8;--text-muted:#64748B;--border:#334155;--shadow:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 6px rgba(0,0,0,0.3);--shadow-lg:0 10px 25px rgba(0,0,0,0.4);--shadow-xl:0 20px 40px rgba(0,0,0,0.5)}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;font-size:1rem;transition:background .3s,color .3s}
.skip-link{position:absolute;top:-100px;left:8px;background:var(--primary);color:#fff;padding:8px 16px;z-index:10000;border-radius:0 0 var(--radius) var(--radius);font-weight:600;transition:top .2s}
.skip-link:focus{top:0}
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px}
@media(max-width:640px){.container{padding:0 16px}}
a{color:var(--primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary-dark)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-heading);line-height:1.2;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-0.02em}
h2{font-size:clamp(1.5rem,3.5vw,2.5rem);letter-spacing:-0.01em}
h3{font-size:clamp(1.125rem,2.5vw,1.5rem)}
p{color:var(--text-secondary);max-width:65ch}
.section{padding:clamp(60px,10vh,120px) 0}
.section-label{display:inline-block;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin-bottom:12px}
.section-title{margin-bottom:16px}
.section-desc{font-size:1.125rem;margin-bottom:48px;max-width:600px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--radius);font-weight:600;font-size:.9375rem;border:none;cursor:pointer;transition:all .25s ease;font-family:var(--font-body);line-height:1}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-dark);color:#fff;transform:translateY(-1px)}
.btn-warm{background:var(--warm);color:#fff}
.btn-warm:hover{background:#D97706;color:#fff;transform:translateY(-1px)}
.btn-sm{padding:8px 20px;font-size:.875rem}
.btn-lg{padding:16px 36px;font-size:1.0625rem}

/* Navigation */
.nav{position:sticky;top:0;z-index:1000;background:rgba(240,247,250,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:var(--nav-h);transition:background .3s,border-color .3s}
html.dark .nav{background:rgba(15,23,42,0.92)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.nav-logo{font-family:var(--font-heading);font-size:1.5rem;font-weight:900;color:var(--primary);letter-spacing:-0.02em}
.nav-logo span{color:var(--text)}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{color:var(--text-secondary);font-size:.9375rem;font-weight:500;padding:4px 0;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--primary);transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{background:none;border:1px solid var(--border);border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);font-size:1.125rem;transition:all .2s}
.theme-toggle:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary)}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--text)}
.mobile-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;transition:all .3s;border-radius:2px}
.mobile-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.mobile-toggle.open span:nth-child(2){opacity:0}
.mobile-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
@media(max-width:768px){.mobile-toggle{display:block}
.nav-links{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--bg);flex-direction:column;padding:24px;gap:16px;border-bottom:1px solid var(--border);transform:translateY(-100%);opacity:0;pointer-events:none;transition:all .3s ease;box-shadow:var(--shadow-lg)}
html.dark .nav-links{background:var(--bg)}
.nav-links.open{transform:translateY(0);opacity:1;pointer-events:all}
.nav-actions .btn{display:none}}

/* Hero */
.hero{padding:clamp(40px,8vh,80px) 0 0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-content h1{margin-bottom:20px;color:var(--text)}
.hero-content p{font-size:1.125rem;margin-bottom:32px;max-width:540px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:400px}
.hero-graphic{width:100%;max-width:500px;aspect-ratio:1;position:relative}
.hero-graphic .ring{position:absolute;border-radius:50%;border:2px solid var(--primary-light);animation:pulse-ring 3s ease-in-out infinite}
.hero-graphic .ring:nth-child(1){width:100%;height:100%;top:0;left:0;animation-delay:0s}
.hero-graphic .ring:nth-child(2){width:75%;height:75%;top:12.5%;left:12.5%;animation-delay:.5s}
.hero-graphic .ring:nth-child(3){width:50%;height:50%;top:25%;left:25%;animation-delay:1s}
.hero-graphic .icon-grid{position:absolute;width:100%;height:100%;top:0;left:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15%}
.hero-graphic .icon-item{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;font-size:.75rem;font-weight:600;color:var(--text-secondary);gap:6px;transition:transform .3s,box-shadow .3s}
.hero-graphic .icon-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.hero-graphic .icon-item .ico{font-size:1.5rem}
@keyframes pulse-ring{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.05);opacity:.7}}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px;padding:32px 0;border-top:1px solid var(--border)}
.hero-stat{text-align:center}
.hero-stat-number{font-family:var(--font-heading);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;color:var(--primary);display:block}
.hero-stat-label{font-size:.8125rem;color:var(--text-muted);font-weight:500;margin-top:4px}
@media(max-width:768px){.hero-grid{grid-template-columns:1fr;gap:40px}
.hero-visual{min-height:300px}
.hero-stats{grid-template-columns:repeat(2,1fr);gap:16px}}

/* Features section */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;transition:all .3s ease;position:relative;overflow:hidden}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.feature-card:hover::before{transform:scaleX(1)}
.feature-icon{width:48px;height:48px;background:var(--primary-light);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:16px;color:var(--primary)}
.feature-card h3{margin-bottom:8px}
.feature-card p{font-size:.9375rem;color:var(--text-secondary)}
@media(max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.features-grid{grid-template-columns:1fr}}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;position:relative}
.testimonial-card::before{content:'"';font-family:var(--font-heading);font-size:4rem;color:var(--primary-light);position:absolute;top:8px;right:24px;line-height:1;pointer-events:none}
.testimonial-text{font-size:.9375rem;font-style:italic;margin-bottom:20px;color:var(--text-secondary);line-height:1.8}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem}
.testimonial-name{font-weight:600;font-size:.9375rem;color:var(--text)}
.testimonial-role{font-size:.8125rem;color:var(--text-muted)}
@media(max-width:768px){.testimonials-grid{grid-template-columns:1fr}}

/* CTA section */
.cta-section{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:var(--radius-lg);padding:clamp(40px,6vh,80px) clamp(24px,4vw,60px);text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 50%,rgba(255,255,255,0.05),transparent 60%)}
.cta-section h2{color:#fff;margin-bottom:16px}
.cta-section p{color:rgba(255,255,255,0.85);margin:0 auto 32px;max-width:540px}
.cta-section .btn{background:#fff;color:var(--primary-dark)}
.cta-section .btn:hover{background:rgba(255,255,255,0.9);color:var(--primary-dark)}
.cta-section .btn-outline-light{background:transparent;border:2px solid rgba(255,255,255,0.5);color:#fff}
.cta-section .btn-outline-light:hover{background:rgba(255,255,255,0.1);border-color:#fff}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* Footer */
.footer{background:var(--surface);border-top:1px solid var(--border);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer-brand .nav-logo{margin-bottom:12px;display:inline-block}
.footer-brand p{font-size:.875rem;color:var(--text-muted);max-width:320px}
.footer h4{font-family:var(--font-body);font-weight:600;font-size:.9375rem;margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--text)}
.footer ul{list-style:none}
.footer li{margin-bottom:8px}
.footer a{font-size:.875rem;color:var(--text-secondary)}
.footer a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid var(--border);margin-top:40px;padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:.8125rem;color:var(--text-muted)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* Page header */
.page-header{padding:clamp(40px,6vh,80px) 0 0;text-align:center}
.page-header h1{margin-bottom:12px}
.page-header p{max-width:600px;margin:0 auto;font-size:1.125rem}

/* Features detail */
.feature-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:60px}
.feature-detail-grid.reverse{direction:rtl}
.feature-detail-grid.reverse>*{direction:ltr}
.feature-detail-content .section-label{margin-bottom:8px}
.feature-detail-content h2{margin-bottom:12px}
.feature-detail-content p{margin-bottom:16px}
.feature-detail-list{list-style:none;margin-top:16px}
.feature-detail-list li{padding:8px 0;display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;color:var(--text-secondary)}
.feature-detail-list li::before{content:'\2713';color:var(--success);font-weight:700}
.feature-detail-visual{background:var(--primary-light);border-radius:var(--radius-lg);min-height:300px;display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--primary)}
@media(max-width:768px){.feature-detail-grid{grid-template-columns:1fr;gap:24px}
.feature-detail-grid.reverse{direction:ltr}}

/* Pricing */
.pricing-toggles{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:48px}
.toggle-label{font-size:.9375rem;font-weight:500;color:var(--text-secondary);cursor:pointer}
.toggle-label.active{color:var(--text)}
.toggle-switch{position:relative;width:48px;height:26px;background:var(--border);border-radius:13px;cursor:pointer;transition:background .3s}
.toggle-switch.active{background:var(--primary)}
.toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .3s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.toggle-switch.active::after{transform:translateX(22px)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.pricing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 32px;position:relative;transition:all .3s}
.pricing-card:hover{box-shadow:var(--shadow-lg);border-color:var(--primary-light)}
.pricing-card.featured{border-color:var(--primary);border-width:2px;box-shadow:var(--shadow-lg)}
.pricing-card.featured .pricing-badge{background:var(--primary);color:#fff;padding:4px 14px;border-radius:20px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;position:absolute;top:-12px;left:50%;transform:translateX(-50%)}
.pricing-name{font-family:var(--font-body);font-weight:700;font-size:1.125rem;margin-bottom:8px}
.pricing-desc{font-size:.875rem;color:var(--text-muted);margin-bottom:24px}
.pricing-amount{font-family:var(--font-heading);font-size:clamp(2rem,3vw,2.75rem);font-weight:900;color:var(--text)}
.pricing-amount span{font-size:1rem;font-weight:400;color:var(--text-muted);font-family:var(--font-body)}
.pricing-period{font-size:.875rem;color:var(--text-muted);margin-bottom:24px}
.pricing-features{list-style:none;margin-bottom:32px}
.pricing-features li{padding:10px 0;font-size:.9375rem;color:var(--text-secondary);display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border)}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li::before{content:'\2713';color:var(--success);font-weight:700}
.pricing-features li.missing{color:var(--text-muted)}
.pricing-features li.missing::before{content:'\2717';color:var(--text-muted)}
.pricing-card .btn{width:100%;justify-content:center}
@media(max-width:768px){.pricing-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

/* FAQ */
.faq-grid{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border);padding:0}
.faq-question{width:100%;background:none;border:none;padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--font-body);font-size:1rem;font-weight:600;color:var(--text);text-align:left;gap:16px}
.faq-question:hover{color:var(--primary)}
.faq-question .icon{font-size:1.25rem;transition:transform .3s;color:var(--primary);flex-shrink:0}
.faq-item.open .faq-question .icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;padding:0}
.faq-item.open .faq-answer{max-height:300px;padding:0 0 20px}
.faq-answer p{font-size:.9375rem;color:var(--text-secondary);line-height:1.8}

/* About */
.about-story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:80px}
.about-story-visual{background:var(--primary-light);border-radius:var(--radius-lg);min-height:320px;display:flex;align-items:center;justify-content:center;font-size:4rem;color:var(--primary)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{text-align:center;padding:24px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .3s}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.team-avatar{width:80px;height:80px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.5rem;margin:0 auto 16px}
.team-name{font-weight:600;font-size:1rem;margin-bottom:4px}
.team-role{font-size:.8125rem;color:var(--text-muted);margin-bottom:8px}
.team-bio{font-size:.875rem;color:var(--text-secondary)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:80px}
.value-card{text-align:center;padding:32px 24px}
.value-icon{font-size:2rem;margin-bottom:12px}
.value-card h3{margin-bottom:8px}
.value-card p{font-size:.875rem;margin:0 auto}
@media(max-width:768px){.about-story{grid-template-columns:1fr;gap:24px}
.team-grid{grid-template-columns:repeat(2,1fr)}
.values-grid{grid-template-columns:1fr}}
@media(max-width:480px){.team-grid{grid-template-columns:1fr}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.875rem;font-weight:600;margin-bottom:6px;color:var(--text)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:8px;font-family:var(--font-body);font-size:.9375rem;background:var(--bg);color:var(--text);transition:border-color .2s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,124,124,0.12)}
.form-group textarea{resize:vertical;min-height:120px}
.contact-info{display:flex;flex-direction:column;gap:24px}
.contact-info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;display:flex;gap:16px;align-items:flex-start}
.contact-info-icon{width:44px;height:44px;background:var(--primary-light);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--primary);flex-shrink:0}
.contact-info-text h4{font-family:var(--font-body);font-weight:600;font-size:.9375rem;margin-bottom:4px}
.contact-info-text p{font-size:.875rem;color:var(--text-secondary)}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}

/* Privacy / Terms */
.legal-content{max-width:760px;margin:0 auto}
.legal-content h2{margin-top:48px;margin-bottom:16px;font-size:1.5rem}
.legal-content h3{margin-top:32px;margin-bottom:12px;font-size:1.1875rem;font-family:var(--font-body);font-weight:600}
.legal-content p{margin-bottom:16px;line-height:1.8}
.legal-content ul{margin-bottom:16px;padding-left:24px}
.legal-content li{margin-bottom:8px;color:var(--text-secondary);line-height:1.7}
.legal-content strong{color:var(--text)}
.last-updated{font-size:.875rem;color:var(--text-muted);font-style:italic;margin-top:8px}

/* 404 */
.error-page{text-align:center;padding:clamp(60px,15vh,120px) 0}
.error-code{font-family:var(--font-heading);font-size:clamp(6rem,15vw,12rem);font-weight:900;color:var(--primary-light);line-height:1;margin-bottom:8px}
.error-page h1{margin-bottom:12px}
.error-page p{margin:0 auto 32px;max-width:480px}

/* Animations */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Trust badges */
.trust-bar{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:24px 0;margin-top:48px}
.trust-item{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--text-secondary);font-weight:500}
.trust-item .ico{font-size:1.25rem}

/* Sub-nav */
.sub-nav{background:var(--surface);border-bottom:1px solid var(--border);padding:0;overflow-x:auto}
.sub-nav-inner{display:flex;gap:4px;padding:12px 0;list-style:none}
.sub-nav-inner a{padding:8px 16px;border-radius:8px;font-size:.875rem;font-weight:500;color:var(--text-secondary);white-space:nowrap;transition:all .2s}
.sub-nav-inner a:hover,.sub-nav-inner a.active{background:var(--primary-light);color:var(--primary)}

/* Demo badge */
.demo-badge{display:inline-flex;align-items:center;gap:6px;background:var(--warm);color:#fff;font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}

/* ==========================================================
   Qi-HMS Motion + Imagery Enhancements
   (design laws: custom easing, transform/opacity only,
    scroll reveals, hero choreography, parallax)
   ========================================================== */

/* --- Motion design tokens (adapted to Qi-HMS naming) --- */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
  --duration-hero: 700ms;
  --reveal-offset: 24px;
}

/* --- Hero entrance choreography --- */
.hero-anim {
  opacity: 0;
  transform: translateY(28px);
  animation: heroReveal var(--duration-hero) var(--ease-out-expo) forwards;
  animation-delay: var(--reveal-delay, 0s);
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Scroll reveal --- */
.animate-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Hero image figure --- */
.hero-figure {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transform: translateZ(0) translateY(var(--parallax, 0px));
  transition: transform var(--duration-slow) var(--ease-out-quart);
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-quart);
}

.hero-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 60%, rgba(15, 23, 42, 0.18) 100%);
  pointer-events: none;
}

.hero-visual:hover .hero-image {
  transform: scale(1.03);
}

/* --- Floating feature pills --- */
.hero-pill {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-md);
  animation: float 6s ease-in-out infinite;
}

.hero-visual .hero-pill:nth-child(2) { top: 8%; left: 6%; animation-delay: 0s; }
.hero-visual .hero-pill:nth-child(3) { top: 45%; right: -4%; animation-delay: 1.2s; }
.hero-visual .hero-pill:nth-child(4) { bottom: 12%; left: 12%; animation-delay: 2.4s; }
.hero-visual .hero-pill:nth-child(5) { bottom: 8%; right: 10%; animation-delay: 3.6s; }

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

/* --- Testimonial portrait avatars --- */
.testimonial-avatar {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--primary-light);
  flex-shrink: 0;
}

/* --- Clinical workflow section images --- */
.care-section {
  background: var(--surface);
}

.care-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.care-list {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
}

.care-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.care-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success);
  font-weight: 700;
}

.care-visual {
  position: relative;
  padding-bottom: 48px;
}

.care-figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateZ(0);
}

.care-figure--main {
  width: 100%;
}

.care-figure--side {
  position: absolute;
  width: 58%;
  right: -8%;
  bottom: 0;
  border: 6px solid var(--bg);
  box-shadow: var(--shadow-xl);
}

.care-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-quart);
}

.care-figure:hover .care-image {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .care-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .care-visual {
    padding-bottom: 0;
  }
  .care-figure--side {
    position: static;
    width: 100%;
    margin-top: 16px;
    border: 0;
  }
}

/* --- Button press feedback + hover uplift --- */
.btn {
  transition: transform var(--duration-fast) var(--ease-out-quart),
              box-shadow var(--duration-base) var(--ease-out-quart),
              background-color var(--duration-base) var(--ease-out-quart),
              border-color var(--duration-base) var(--ease-out-quart),
              color var(--duration-base) var(--ease-out-quart);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary:hover,
.btn-accent:hover,
.btn-warm:hover {
  box-shadow: var(--shadow-lg);
}

.btn:active {
  transform: scale(0.97);
}

/* --- Reduced motion: global override --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 3D Showcase (Phase 15) --- */
.w3d-showcase {
  overflow: hidden;
  background: var(--color-surface-alt, var(--color-bg, #fafafa));
  padding: var(--section-gap, 96px) 0;
}
.w3d-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.w3d-showcase__copy h2 {
  margin-bottom: 16px;
}
.w3d-showcase__copy p {
  color: var(--color-text-secondary, inherit);
  font-size: 1.05rem;
  max-width: 46ch;
}
.w3d-showcase__visual {
  position: relative;
  height: 380px;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 60%);
}
@media (max-width: 820px) {
  .w3d-showcase__grid { grid-template-columns: 1fr; gap: 32px; }
  .w3d-showcase__visual { height: 300px; min-height: 260px; }
}