/*
 * DrBuddy — Main Stylesheet
 * Version: 1.0.0
 * Description: Global styles for DrBuddy homepage (index.html).
 * Sections:
 *   1. Reset & Variables
 *   2. Base
 *   3. Navigation
 *   4. Hero
 *   5. Stat Row
 *   6. Section Commons
 *   7. Demo Video
 *   8. Features
 *   9. Workflow
 *  10. Brand Positioning
 *  11. Pricing
 *  12. Quote
 *  13. Trust Banner
 *  14. EMR Features
 *  15. Reviews
 *  16. Footer
 *  17. Animations & Keyframes
 *  18. Scroll Reveal
 *  19. Responsive Overrides
 */

/* ==========================================================================
   1. Reset & CSS Variables
   ========================================================================== */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   :root {
     --ink:        #0f172a;
     --ink-2:      #1e293b;
     --ink-3:      #334155;
     --muted:      #64748b;
     --muted-2:    #94a3b8;
     --border:     #e2e8f0;
     --border-2:   #cbd5e1;
     --surface:    #ffffff;
     --surface-2:  #f8fafc;
     --surface-3:  #f1f5f9;
     --blue:       #2563eb;
     --blue-mid:   #3b82f6;
     --blue-light: #60a5fa;
     --blue-pale:  #dbeafe;
     --blue-faint: #eff6ff;
     --green:      #10b981;
     --steel:      #475569;
   }
   
   /* ==========================================================================
      2. Base
      ========================================================================== */
   html {
     scroll-behavior: smooth;
   }
   
   body {
     font-family: 'Inter', sans-serif;
     background: var(--surface);
     color: var(--ink);
     min-height: 100vh;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
   }
   
   /* ==========================================================================
      3. Navigation
      ========================================================================== */
   nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     height: 72px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 6%;
     background: rgba(255, 255, 255, 0.88);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     transition: height 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
   }
   
   nav.scrolled {
     height: 58px;
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
     background: rgba(255, 255, 255, 0.97);
   }
   
   .nav-logo {
     display: flex;
     align-items: center;
     text-decoration: none;
     position: absolute;
     left: 6%;
   }
   
   .nav-logo-text {
     font-family: 'Outfit', sans-serif;
     font-size: 20px;
     font-weight: 700;
     color: var(--ink);
     letter-spacing: -0.3px;
   }
   
   .nav-logo-text span {
     color: var(--blue);
   }
   
   .mobile-toggle {
     display: none;
     position: absolute;
     right: 6%;
     background: none;
     border: none;
     font-size: 24px;
     color: var(--ink);
     cursor: pointer;
     z-index: 1001;
   }
   
   .nav-links {
     display: flex;
     align-items: center;
     gap: 34px;
   }
   
   .nav-links a {
     position: relative;
     text-decoration: none;
     color: var(--muted);
     font-size: 14px;
     font-weight: 500;
     transition: color 0.18s;
   }
   
   .nav-links a:hover {
     color: var(--ink);
   }
   
   /* Animated underline on hover (desktop only) */
   .nav-links a:not(.nav-login)::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -3px;
     width: 0;
     height: 2px;
     background: var(--blue);
     border-radius: 2px;
     transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .nav-links a:not(.nav-login):hover::after {
     width: 100%;
   }
   
   .nav-login {
     background: var(--ink) !important;
     color: #fff !important;
     padding: 9px 22px;
     border-radius: 8px;
     font-size: 13px !important;
     font-weight: 600 !important;
     transition: background 0.18s, transform 0.18s !important;
   }
   
   .nav-login:hover {
     background: #1e293b !important;
     color: #fff !important;
     transform: translateY(-1px);
   }
   
   /* Mobile menu */
   @media (max-width: 1024px) {
     nav {
       justify-content: flex-start;
     }
   
     .mobile-toggle {
       display: block;
     }
   
     .nav-links {
       position: fixed;
       top: 0;
       right: -100%;
       width: 80%;
       max-width: 300px;
       height: 100vh;
       background: var(--surface);
       flex-direction: column;
       justify-content: center;
       gap: 40px;
       box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
       transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
       z-index: 1000;
     }
   
     .nav-links.active {
       right: 0;
     }
   
     .nav-links a {
       font-size: 18px;
     }
   
     /* Disable underline animation on mobile (no hover) */
     .nav-links a:not(.nav-login)::after {
       display: none;
     }
   }
   
   /* ==========================================================================
      4. Hero
      ========================================================================== */
   .hero {
     padding: 160px 6% 100px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     background: var(--surface);
     position: relative;
   }
   
   /* Dot-grid background texture */
   .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: radial-gradient(var(--border) 1px, transparent 1px);
     background-size: 28px 28px;
     -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 60%, transparent 100%);
     mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 60%, transparent 100%);
     pointer-events: none;
   }
   
   /* Animated glow orb */
   .hero::after {
     content: '';
     position: absolute;
     width: 700px;
     height: 700px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
     top: -100px;
     left: 50%;
     transform: translateX(-50%);
     animation: heroOrb 8s ease-in-out infinite alternate;
     pointer-events: none;
   }
   
   .hero-badge {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: var(--blue-faint);
     border: 1px solid var(--blue-pale);
     border-radius: 100px;
     padding: 5px 15px;
     font-size: 12px;
     font-weight: 600;
     color: var(--blue);
     letter-spacing: 0.4px;
     margin-bottom: 28px;
     animation: fadeUp 0.6s ease both;
   }
   
   .badge-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--blue-mid);
     animation: blink 2s infinite;
   }
   
   .hero-title {
     position: relative;
     font-family: 'Outfit', sans-serif;
     font-size: clamp(36px, 5.5vw, 64px);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -2px;
     color: var(--ink);
     max-width: 820px;
     margin-bottom: 22px;
     animation: fadeUp 0.6s 0.08s ease both;
   }
   
   .hero-title .blue {
     color: var(--blue);
   }
   
   .hero-sub {
     position: relative;
     font-size: clamp(15px, 2vw, 18px);
     color: var(--muted);
     max-width: 560px;
     line-height: 1.75;
     margin-bottom: 40px;
     animation: fadeUp 0.6s 0.15s ease both;
   }
   
   .hero-ctas {
     position: relative;
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     justify-content: center;
     animation: fadeUp 0.6s 0.22s ease both;
   }
   
   /* Buttons */
   .btn-ink,
   .btn-ghost,
   .pcard-btn {
     position: relative;
     overflow: hidden;
   }
   
   .btn-ink {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--ink);
     color: #fff;
     font-size: 14px;
     font-weight: 600;
     padding: 13px 28px;
     border-radius: 9px;
     text-decoration: none;
     transition: background 0.18s, transform 0.18s;
   }
   
   .btn-ink:hover {
     background: var(--ink-2);
     transform: translateY(-1px);
   }
   
   .btn-ghost {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: transparent;
     border: 1.5px solid var(--border-2);
     color: var(--ink-3);
     font-size: 14px;
     font-weight: 500;
     padding: 13px 28px;
     border-radius: 9px;
     text-decoration: none;
     transition: border-color 0.18s, color 0.18s, transform 0.18s;
   }
   
   .btn-ghost:hover {
     border-color: var(--blue);
     color: var(--blue);
     transform: translateY(-1px);
   }
   
   /* ==========================================================================
      5. Stat Row
      ========================================================================== */
   .stat-row {
     padding: 0 6% 100px;
   }
   
   .stat-row-inner {
     max-width: 600px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     border: 1px solid var(--border);
     border-radius: 16px;
     overflow: hidden;
     background: var(--surface);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 24px rgba(0, 0, 0, 0.04);
   }
   
   .stat-item {
     padding: 32px 28px;
     text-align: center;
     border-right: 1px solid var(--border);
   }
   
   .stat-item:last-child {
     border-right: none;
   }
   
   .stat-value {
     font-family: 'Outfit', sans-serif;
     font-size: 36px;
     font-weight: 800;
     color: var(--blue);
     line-height: 1;
     transition: transform 0.3s ease;
   }
   
   .stat-value:hover {
     transform: scale(1.08);
   }
   
   .stat-label {
     font-size: 12.5px;
     color: var(--muted);
     margin-top: 8px;
     line-height: 1.5;
   }
   
   /* ==========================================================================
      6. Section Commons
      ========================================================================== */
   section {
     padding: 100px 6%;
   }
   
   .sec-tag {
     display: block;
     text-align: center;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     color: var(--blue);
     margin-bottom: 12px;
   }
   
   .sec-title {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(26px, 3.5vw, 40px);
     font-weight: 700;
     text-align: center;
     color: var(--ink);
     letter-spacing: -1px;
     margin-bottom: 14px;
   }
   
   .sec-sub {
     text-align: center;
     font-size: 15px;
     color: var(--muted);
     max-width: 500px;
     margin: 0 auto 56px;
     line-height: 1.75;
   }
   
   /* ==========================================================================
      7. Demo Video
      ========================================================================== */
   .demo-section {
     padding: 0 6% 100px;
     background: var(--surface);
   }
   
   .demo-video-wrap {
     max-width: 860px;
     margin: 0 auto;
   }
   
   .demo-embed {
     position: relative;
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
     border-radius: 16px;
     overflow: hidden;
     border: 1px solid var(--border);
     box-shadow: 0 4px 32px rgba(0, 0, 0, 0.07);
     background: var(--surface-3);
   }
   
   .demo-embed iframe {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: none;
   }
   
   .demo-placeholder {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 16px;
     background: var(--surface-2);
   }
   
   .demo-placeholder-icon {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--blue), #38bdf8);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     box-shadow: 0 4px 24px rgba(37, 99, 235, 0.25);
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
   }
   
   .demo-placeholder-icon:hover {
     transform: scale(1.08);
     box-shadow: 0 8px 32px rgba(37, 99, 235, 0.32);
   }
   
   .demo-placeholder-text {
     font-family: 'Outfit', sans-serif;
     font-size: 15px;
     font-weight: 600;
     color: var(--muted);
   }
   
   /* ==========================================================================
      8. Features
      ========================================================================== */
   .features-bg {
     background: var(--surface-2);
   }
   
   .features-grid {
     max-width: 1080px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
   }
   
   .fcard {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 30px 28px;
     transition: box-shadow 0.22s, transform 0.22s, border-color 0.22s;
     cursor: default;
     transform-style: preserve-3d;
   }
   
   .fcard:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 32px rgba(37, 99, 235, 0.08);
     border-color: #bfdbfe;
   }
   
   .fcard.wide {
     grid-column: span 2;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 28px;
     align-items: center;
   }
   
   .fcard-icon {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     margin-bottom: 18px;
     flex-shrink: 0;
   }
   
   .fi-blue   { background: var(--blue-faint); }
   .fi-slate  { background: var(--surface-3); }
   .fi-red    { background: #fff1f2; }
   .fi-indigo { background: #eef2ff; }
   
   .fcard-tag {
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--muted-2);
     margin-bottom: 8px;
     display: block;
   }
   
   .fcard-tag.accent { color: var(--blue); }
   .fcard-tag.danger { color: #ef4444; }
   
   .fcard-title {
     font-family: 'Outfit', sans-serif;
     font-size: 17px;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 10px;
     letter-spacing: -0.3px;
   }
   
   .fcard-desc {
     font-size: 13.5px;
     color: var(--muted);
     line-height: 1.75;
   }
   
   .fcard-chip {
     display: inline-flex;
     margin-top: 16px;
     background: var(--blue-faint);
     color: var(--blue);
     font-size: 11.5px;
     font-weight: 600;
     padding: 4px 12px;
     border-radius: 100px;
     border: 1px solid var(--blue-pale);
   }
   
   .fcard-chip.red {
     background: #fff1f2;
     color: #ef4444;
     border-color: #fecaca;
   }
   
   .fcard-visual {
     background: var(--surface-2);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 24px 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   
   .fcard-visual-row {
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   .vr-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     flex-shrink: 0;
   }
   
   .vr-label {
     font-size: 12px;
     color: var(--muted);
     flex: 1;
   }
   
   .vr-bar {
     height: 5px;
     border-radius: 100px;
     background: var(--blue-pale);
     position: relative;
     overflow: hidden;
   }
   
   .vr-bar-fill {
     position: absolute;
     inset-block: 0;
     left: 0;
     background: var(--blue);
     border-radius: 100px;
   }
   
   /* ==========================================================================
      9. Workflow
      ========================================================================== */
   .workflow-bg {
     background: var(--surface);
   }
   
   .steps {
     max-width: 780px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     border: 1px solid var(--border);
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   }
   
   .step-row {
     display: flex;
     align-items: flex-start;
     gap: 22px;
     padding: 28px 32px;
     border-bottom: 1px solid var(--border);
     transition: background 0.18s;
   }
   
   .step-row:last-child {
     border-bottom: none;
   }
   
   .step-row:hover {
     background: var(--surface-2);
   }
   
   .step-n {
     flex-shrink: 0;
     width: 34px;
     height: 34px;
     border-radius: 10px;
     background: var(--blue-faint);
     border: 1px solid var(--blue-pale);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Outfit', sans-serif;
     font-size: 13px;
     font-weight: 700;
     color: var(--blue);
     margin-top: 2px;
   }
   
   .step-body {
     flex: 1;
   }
   
   .step-title {
     font-family: 'Outfit', sans-serif;
     font-size: 16px;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 5px;
     letter-spacing: -0.2px;
   }
   
   .step-desc {
     font-size: 13.5px;
     color: var(--muted);
     line-height: 1.7;
   }
   
   .step-badge {
     flex-shrink: 0;
     align-self: center;
     background: var(--surface-3);
     border: 1px solid var(--border-2);
     color: var(--steel);
     font-size: 11px;
     font-weight: 600;
     padding: 4px 12px;
     border-radius: 100px;
     white-space: nowrap;
   }
   
   /* ==========================================================================
      10. Brand Positioning
      ========================================================================== */
   .brand-section {
     background: var(--ink);
     padding: 100px 6%;
     position: relative;
     overflow: hidden;
   }
   
   .brand-section::before,
   .brand-section::after {
     content: '';
     position: absolute;
     border-radius: 50%;
     border: 1.5px solid rgba(255, 255, 255, 0.06);
     pointer-events: none;
   }
   
   .brand-section::before {
     width: 640px;
     height: 640px;
     top: -220px;
     right: -160px;
   }
   
   .brand-section::after {
     width: 420px;
     height: 420px;
     bottom: -180px;
     left: -100px;
   }
   
   .brand-inner {
     max-width: 1080px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
   }
   
   .brand-left {
     position: relative;
   }
   
   .brand-kicker {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.4);
     margin-bottom: 20px;
     display: block;
   }
   
   .brand-headline {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(34px, 4vw, 56px);
     font-weight: 800;
     line-height: 1.08;
     letter-spacing: -1.5px;
     color: #fff;
     margin-bottom: 0;
   }
   
   .brand-headline .brand-highlight {
     display: block;
     background: linear-gradient(90deg, #60a5fa, #a78bfa);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   .brand-divider {
     width: 48px;
     height: 3px;
     background: linear-gradient(90deg, var(--blue-mid), #a78bfa);
     border-radius: 3px;
     margin: 32px 0;
   }
   
   .brand-body {
     font-size: 15.5px;
     color: rgba(255, 255, 255, 0.55);
     line-height: 1.8;
     max-width: 420px;
   }
   
   .brand-pillars {
     display: flex;
     flex-direction: column;
     gap: 20px;
   }
   
   .brand-pillar {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     padding: 20px 24px;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 14px;
     transition: background 0.25s, border-color 0.25s, transform 0.25s;
   }
   
   .brand-pillar:hover {
     background: rgba(255, 255, 255, 0.07);
     border-color: rgba(96, 165, 250, 0.3);
     transform: translateX(6px);
   }
   
   .brand-pillar-icon {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: rgba(96, 165, 250, 0.12);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     flex-shrink: 0;
     margin-top: 2px;
   }
   
   .brand-pillar-text h4 {
     font-family: 'Outfit', sans-serif;
     font-size: 16px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 4px;
   }
   
   .brand-pillar-text p {
     font-size: 13.5px;
     color: rgba(255, 255, 255, 0.45);
     line-height: 1.6;
   }
   
   /* ==========================================================================
      11. Pricing
      ========================================================================== */
   .pricing-section {
     background: var(--surface-2);
     padding: 100px 6%;
   }
   
   .pricing-grid {
     max-width: 1100px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     align-items: stretch;
   }
   
   .pcard {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 20px;
     padding: 40px 32px;
     display: flex;
     flex-direction: column;
     position: relative;
     transform-style: preserve-3d;
     transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
   }
   
   .pcard:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
   }
   
   .pcard.popular {
     border: 2px solid var(--blue);
     box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1);
     transform: scale(1.03);
     z-index: 10;
   }
   
   .pcard.popular:hover {
     transform: scale(1.03) translateY(-8px);
   }
   
   .popular-badge {
     position: absolute;
     top: -14px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--blue);
     color: white;
     padding: 6px 16px;
     border-radius: 100px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.5px;
     white-space: nowrap;
     animation: popBadge 2.4s ease infinite;
   }
   
   .pcard-header {
     margin-bottom: 24px;
   }
   
   .pcard-name {
     font-family: 'Outfit', sans-serif;
     font-size: 20px;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 8px;
   }
   
   .pcard-desc {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.5;
   }
   
   .pcard-price-wrap {
     margin-bottom: 32px;
   }
   
   .pcard-price-row {
     display: flex;
     align-items: baseline;
     gap: 6px;
   }
   
   .pcard-currency {
     font-size: 18px;
     font-weight: 600;
     color: var(--ink);
   }
   
   .pcard-price {
     font-family: 'Outfit', sans-serif;
     font-size: 44px;
     font-weight: 800;
     color: var(--ink);
     letter-spacing: -1px;
   }
   
   .pcard-period {
     font-size: 14px;
     color: var(--muted);
     font-weight: 500;
   }
   
   .pcard-regular {
     font-size: 14px;
     color: var(--muted-2);
     text-decoration: line-through;
     margin-bottom: 4px;
     display: block;
   }
   
   .pcard-features {
     list-style: none;
     margin-bottom: 40px;
     flex-grow: 1;
   }
   
   .pcard-feature {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     font-size: 14.5px;
     color: var(--ink-2);
     margin-bottom: 14px;
     line-height: 1.4;
   }
   
   .pcard-feature i {
     color: var(--green);
     font-size: 16px;
     margin-top: 2px;
   }
   
   .pcard-btn {
     display: block;
     text-align: center;
     background: var(--ink);
     color: white;
     text-decoration: none;
     padding: 16px;
     border-radius: 12px;
     font-size: 15px;
     font-weight: 600;
     transition: background 0.2s, transform 0.2s;
   }
   
   .pcard-btn:hover {
     background: var(--ink-2);
     transform: translateY(-2px);
   }
   
   .pcard.popular .pcard-btn {
     background: var(--blue);
   }
   
   .pcard.popular .pcard-btn:hover {
     background: #1d4ed8;
   }
   
   /* ==========================================================================
      12. Quote
      ========================================================================== */
   .quote-section {
     background: var(--surface-2);
   }
   
   .quote-box {
     max-width: 680px;
     margin: 0 auto;
     text-align: center;
   }
   
   .quote-mark {
     font-size: 56px;
     color: var(--blue-pale);
     font-family: Georgia, serif;
     line-height: 1;
     margin-bottom: 12px;
   }
   
   .quote-text {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(17px, 2vw, 22px);
     font-weight: 500;
     color: var(--ink-2);
     line-height: 1.65;
     margin-bottom: 24px;
   }
   
   .quote-author {
     font-size: 13px;
     color: var(--muted-2);
   }
   
   .quote-author strong {
     color: var(--blue);
     font-weight: 600;
   }
   
   /* ==========================================================================
      13. Trust Banner
      ========================================================================== */
   .trust-section {
     background: var(--surface);
     padding: 40px 6%;
     border-bottom: 1px solid var(--border);
     text-align: center;
   }
   
   .trust-content {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
   }
   
   .trust-avatars {
     display: flex;
     align-items: center;
   }
   
   .trust-avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: 2px solid #fff;
     margin-right: -12px;
     background: var(--surface-3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
   }
   
   .trust-text {
     font-size: 15px;
     font-weight: 600;
     color: var(--ink-2);
     font-family: 'Outfit', sans-serif;
   }
   
   .trust-text span {
     color: var(--blue);
   }
   
   /* ==========================================================================
      14. EMR Features
      ========================================================================== */
   .emr-bg {
     background: var(--surface);
   }
   
   .emr-grid {
     max-width: 1080px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
   }
   
   .ecard {
     padding: 40px 0;
     text-align: center;
   }
   
   .ecard-icon {
     width: 64px;
     height: 64px;
     border-radius: 18px;
     background: var(--blue-faint);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     margin: 0 auto 24px;
     color: var(--blue);
     transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
     animation: float 4s ease-in-out infinite;
   }
   
   .ecard:nth-child(2) .ecard-icon { animation-delay: 0.8s; }
   .ecard:nth-child(3) .ecard-icon { animation-delay: 1.6s; }
   
   .ecard:hover .ecard-icon {
     transform: scale(1.1) rotate(5deg);
   }
   
   .ecard-title {
     font-family: 'Outfit', sans-serif;
     font-size: 20px;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 14px;
   }
   
   .ecard-desc {
     font-size: 14.5px;
     color: var(--muted);
     line-height: 1.7;
   }
   
   /* ==========================================================================
      15. Reviews
      ========================================================================== */
   .reviews-section {
     background: var(--surface-2);
   }
   
   .reviews-grid {
     max-width: 1080px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
   }
   
   .rcard {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 32px;
     display: flex;
     flex-direction: column;
     gap: 16px;
     transform-style: preserve-3d;
   }
   
   .rcard-rating {
     color: #f59e0b;
     font-size: 14px;
     letter-spacing: 2px;
   }
   
   .rcard-text {
     font-size: 14px;
     line-height: 1.6;
     color: var(--ink-2);
     font-style: italic;
   }
   
   .rcard-author {
     margin-top: auto;
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .rcard-avatar {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: var(--surface-3);
   }
   
   .rcard-info h4 {
     font-size: 14px;
     font-weight: 700;
     color: var(--ink);
   }
   
   .rcard-info p {
     font-size: 12px;
     color: var(--muted);
   }
   
   /* ==========================================================================
      16. Footer
      ========================================================================== */
   footer {
     border-top: 1px solid var(--border);
     padding: 36px 6%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 16px;
   }
   
   .footer-brand {
     font-family: 'Outfit', sans-serif;
     font-size: 17px;
     font-weight: 700;
     color: var(--ink);
   }
   
   .footer-brand span {
     color: var(--blue);
   }
   
   .footer-copy {
     font-size: 13px;
     color: var(--muted-2);
   }
   
   .footer-links {
     display: flex;
     gap: 20px;
   }
   
   .footer-links a {
     font-size: 13px;
     color: var(--muted);
     text-decoration: none;
     transition: color 0.18s;
   }
   
   .footer-links a:hover {
     color: var(--ink);
   }
   
   /* ==========================================================================
      17. Animations & Keyframes
      ========================================================================== */
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(14px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeIn {
     from { opacity: 0; }
     to   { opacity: 1; }
   }
   
   @keyframes blink {
     0%, 100% { opacity: 1; }
     50%       { opacity: 0.35; }
   }
   
   @keyframes heroOrb {
     from { transform: translateX(-50%) scale(1); }
     to   { transform: translateX(-50%) scale(1.25); }
   }
   
   @keyframes float {
     0%, 100% { transform: translateY(0); }
     50%       { transform: translateY(-10px); }
   }
   
   @keyframes popBadge {
     0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
     70%  { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
     100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
   }
   
   @keyframes rippleAnim {
     to { transform: scale(4); opacity: 0; }
   }
   
   /* Ripple element injected by JS */
   .ripple {
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.35);
     transform: scale(0);
     animation: rippleAnim 0.55s linear;
     pointer-events: none;
   }
   
   /* ==========================================================================
      18. Scroll Reveal
      ========================================================================== */
   .reveal {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                 transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .reveal.visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   .reveal-left {
     opacity: 0;
     transform: translateX(-28px);
     transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                 transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .reveal-left.visible {
     opacity: 1;
     transform: translateX(0);
   }
   
   .reveal-scale {
     opacity: 0;
     transform: scale(0.9);
     transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                 transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .reveal-scale.visible {
     opacity: 1;
     transform: scale(1);
   }
   
   /* Stagger delay helpers */
   .d1 { transition-delay: 0.08s !important; }
   .d2 { transition-delay: 0.18s !important; }
   .d3 { transition-delay: 0.28s !important; }
   .d4 { transition-delay: 0.38s !important; }
   
   /* ==========================================================================
      19. Responsive Overrides
      ========================================================================== */
   
   /* ── 1024px ── */
   @media (max-width: 1024px) {
     .features-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   
     .pricing-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
     }
   
     .pcard.popular {
       transform: none;
     }
   
     .pcard.popular:hover {
       transform: translateY(-8px);
     }
   
     .emr-grid,
     .reviews-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   
   /* ── 900px ── */
   @media (max-width: 900px) {
     .brand-inner {
       grid-template-columns: 1fr;
       gap: 48px;
     }
   
     .brand-body {
       max-width: 100%;
     }
   
     .fcard.wide {
       grid-column: span 2;
       grid-template-columns: 1fr;
     }
   }
   
   /* ── 768px ── */
   @media (max-width: 768px) {
     section {
       padding: 60px 6%;
     }
   
     .hero {
       padding: 120px 5% 60px;
     }
   
     .stat-row {
       padding-bottom: 60px;
     }
   
     .stat-row-inner {
       grid-template-columns: 1fr;
     }
   
     .stat-item {
       border-right: none;
       border-bottom: 1px solid var(--border);
     }
   
     .stat-item:last-child {
       border-bottom: none;
     }
   
     .demo-section {
       padding-bottom: 60px;
     }
   
     .features-grid {
       grid-template-columns: 1fr;
     }
   
     .pricing-grid {
       grid-template-columns: 1fr;
       max-width: 400px;
     }
   
     .emr-grid,
     .reviews-grid {
       grid-template-columns: 1fr;
     }
   
     .step-row {
       padding: 22px 20px;
     }
   }
   
   /* ── 560px ── */
   @media (max-width: 560px) {
     .fcard.wide {
       grid-column: span 1;
     }
   }