@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Nunito:wght@700;800;900&display=swap');

  * { box-sizing: border-box; margin: 0; padding: 0; }

  .hd {
    font-family: 'Inter', sans-serif;
    background: #f0f7ff;
    color: #0d1f4e;
    min-height: 100vh;
    overflow: visible;
    position: relative;
  }

  /* ─── BACKGROUND ─── */
  .hd-bg {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  }
  .hd-bg-circles {
    position: absolute; inset: 0;
  }
  .hd-circle {
    position: absolute; border-radius: 50%;
    animation: floatCircle 14s ease-in-out infinite;
  }
  .hd-c1 { width:500px;height:500px; background:rgba(56,189,248,0.08); top:-150px; right:-100px; animation-delay:0s; }
  .hd-c2 { width:350px;height:350px; background:rgba(45,212,191,0.07); bottom:0; left:-80px; animation-delay:5s; }
  .hd-c3 { width:200px;height:200px; background:rgba(99,102,241,0.06); top:40%; left:60%; animation-delay:9s; }
  @keyframes floatCircle {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.04); }
  }
  /* Subtle dot grid */
  .hd-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(13,31,78,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  /* ─── NAV ─── */
  .hd-nav {
    position: relative; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 32px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(13,31,78,0.08);
    box-shadow: 0 1px 20px rgba(13,31,78,0.06);
    animation: navSlide 0.6s ease both;
  }
  @keyframes navSlide { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:translateY(0)} }

  /* REAL LOGO as SVG inline */
  .hd-logo-wrap {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
  }
  .hd-logo-icon {
    width: 40px; height: 40px;
    animation: logoBreath 4s ease-in-out infinite;
  }
  @keyframes logoBreath {
    0%,100% { filter: drop-shadow(0 0 4px rgba(56,189,248,0.3)); }
    50% { filter: drop-shadow(0 0 12px rgba(56,189,248,0.7)); }
  }
  .hd-logo-text {
    font-family: 'Nunito', sans-serif;
    font-size: 22px; font-weight: 900;
    display: flex; align-items: baseline;
  }
  .hd-logo-heyyy { color: #0d2169; }
  .hd-logo-Doc   {
    background: linear-gradient(135deg, #38bdf8, #2dd4bf);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hd-nav-links { display: flex; gap: 22px; align-items: center; }
  .hd-nav-links a {
    color: rgba(13,31,78,0.55); text-decoration: none; font-size: 13px; font-weight: 500;
    transition: color .2s;
  }
  .hd-nav-links a:hover { color: #0d2169; }
  .hd-btn-nav {
    background: linear-gradient(135deg, #2563eb, #0891b2);
    color: #fff; border: none; padding: 9px 20px; border-radius: 10px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 3px 14px rgba(37,99,235,0.3);
  }
  .hd-btn-nav:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(37,99,235,0.45); }

  /* ─── HERO ─── */
  .hd-hero {
    position: relative; z-index: 5;
    display: flex; align-items: center; gap: 48px;
    padding: 56px 40px 48px;
    max-width: 960px; margin: 0 auto;
    animation: heroFadeUp 0.8s 0.2s ease both;
  }
  @keyframes heroFadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
  .hd-hero-text { flex: 1; }
  .hd-hero-visual { flex: 0 0 280px; display: flex; justify-content: center; }

  .hd-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(45,212,191,0.1); border: 1px solid rgba(45,212,191,0.3);
    color: #0891b2; padding: 5px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 600; margin-bottom: 20px;
  }
  .hd-badge-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #2dd4bf;
    animation: bdot 2s ease-in-out infinite;
  }
  @keyframes bdot { 0%,100%{opacity:1} 50%{opacity:.2} }

  .hd-h1 {
    font-family: 'Nunito', sans-serif;
    font-size: 40px; font-weight: 900; line-height: 1.12;
    color: #0d2169; margin-bottom: 16px;
  }
  .hd-h1 em {
    font-style: normal;
    background: linear-gradient(135deg, #2563eb, #2dd4bf);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hd-sub {
    font-size: 15px; color: rgba(13,31,78,0.55); line-height: 1.7; margin-bottom: 24px;
  }

  .hd-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 28px; }
  .hd-pill {
    background: #fff; border: 1px solid rgba(13,31,78,0.1);
    color: rgba(13,31,78,0.6); font-size: 11px; font-weight: 500;
    padding: 4px 12px; border-radius: 999px;
    display: flex; align-items: center; gap: 5px;
    box-shadow: 0 1px 4px rgba(13,31,78,0.06);
  }
  .hd-pill-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

  .hd-btns { display: flex; gap: 10px; flex-wrap: wrap; }
  .hd-btn-primary {
    background: linear-gradient(135deg, #2563eb, #0891b2);
    color: #fff; padding: 13px 28px; border-radius: 12px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    border: none; cursor: pointer; display: inline-block;
    box-shadow: 0 4px 20px rgba(37,99,235,0.35);
    transition: transform .2s, box-shadow .2s;
  }
  .hd-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,0.5); }
  .hd-btn-ghost {
    background: #fff; border: 1.5px solid rgba(13,31,78,0.15);
    color: #0d2169; padding: 12px 24px; border-radius: 12px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  .hd-btn-ghost:hover { border-color: #2563eb; background: #f0f7ff; }

  /* HERO VISUAL — big logo + ECG */
  .hd-hero-logo-big {
    width: 220px; height: 220px;
    animation: heroLogoFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 16px 40px rgba(37,99,235,0.2));
  }
  @keyframes heroLogoFloat {
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-14px) rotate(1deg); }
  }

  /* ─── STATS ─── */
  .hd-stats {
    position: relative; z-index: 5;
    padding: 0 40px 48px; max-width: 960px; margin: 0 auto;
    animation: heroFadeUp 0.8s 0.5s ease both;
  }
  .hd-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
  .hd-stat {
    background: #fff; border: 1px solid rgba(13,31,78,0.08);
    border-radius: 16px; padding: 20px 14px; text-align: center;
    box-shadow: 0 2px 12px rgba(13,31,78,0.06);
    transition: transform .3s, box-shadow .3s;
  }
  .hd-stat:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(37,99,235,0.15); }
  .hd-stat-num {
    font-family: 'Nunito', sans-serif; font-size: 30px; font-weight: 900;
    background: linear-gradient(135deg, #2563eb, #0891b2);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hd-stat-lbl { font-size: 11px; color: rgba(13,31,78,0.45); margin-top: 4px; }

  /* ─── HOW IT WORKS ─── */
  .hd-how {
    position: relative; z-index: 5;
    background: #fff; border-top: 1px solid rgba(13,31,78,0.07); border-bottom: 1px solid rgba(13,31,78,0.07);
    padding: 48px 40px;
    animation: heroFadeUp 0.8s 0.7s ease both;
  }
  .hd-section-lbl {
    text-align: center; font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: #0891b2; margin-bottom: 8px;
  }
  .hd-section-h2 {
    font-family: 'Nunito', sans-serif;
    text-align: center; font-size: 26px; font-weight: 900; color: #0d2169; margin-bottom: 36px;
  }
  .hd-flow { display: flex; align-items: flex-start; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
  .hd-fstep {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex: 0 0 130px; padding: 14px 8px; border-radius: 16px;
    transition: background .3s;
  }
  .hd-fstep.active { background: rgba(37,99,235,0.05); }
  .hd-ficon {
    width: 54px; height: 54px; border-radius: 16px;
    background: #f0f7ff; border: 1.5px solid rgba(37,99,235,0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; transition: all .4s;
  }
  .hd-fstep.active .hd-ficon {
    background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(8,145,178,0.12));
    border-color: #2563eb; box-shadow: 0 0 20px rgba(37,99,235,0.25);
    transform: scale(1.12);
  }
  .hd-fname { font-size: 12px; font-weight: 700; color: #0d2169; }
  .hd-fstep.active .hd-fname { color: #2563eb; }
  .hd-fdesc { font-size: 10px; color: rgba(13,31,78,0.4); text-align: center; line-height: 1.4; }
  .hd-farrow {
    flex: 0 0 28px; height: 2px; margin-top: 41px;
    background: linear-gradient(90deg, rgba(37,99,235,0.4), rgba(8,145,178,0.2));
    position: relative;
  }
  .hd-farrow::after {
    content: ''; position: absolute; right: -3px; top: -4px;
    border: 5px solid transparent; border-left-color: rgba(37,99,235,0.4);
  }

  /* ─── FEATURES ─── */
  .hd-features {
    position: relative; z-index: 5;
    padding: 48px 40px; max-width: 960px; margin: 0 auto;
    animation: heroFadeUp 0.8s 0.9s ease both;
  }
  .hd-feat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
  .hd-feat {
    background: #fff; border: 1px solid rgba(13,31,78,0.08);
    border-radius: 18px; padding: 24px 22px;
    box-shadow: 0 2px 12px rgba(13,31,78,0.05);
    transition: all .3s; position: relative; overflow: hidden;
  }
  .hd-feat::after {
    content: ''; position: absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, #2563eb, #2dd4bf);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s;
  }
  .hd-feat:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(37,99,235,0.12); }
  .hd-feat:hover::after { transform: scaleX(1); }
  .hd-feat-ico { font-size: 26px; margin-bottom: 10px; display: block; }
  .hd-feat-name { font-size: 15px; font-weight: 700; color: #0d2169; margin-bottom: 7px; }
  .hd-feat-desc { font-size: 12px; color: rgba(13,31,78,0.5); line-height: 1.65; margin-bottom: 10px; }
  .hd-feat-tag {
    background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.18);
    color: #2563eb; font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 5px;
  }

  /* ─── CTA ─── */
  .hd-cta {
    position: relative; z-index: 5;
    margin: 0 40px 48px;
    background: linear-gradient(135deg, #2563eb, #0891b2, #2dd4bf);
    border-radius: 22px; padding: 44px; text-align: center;
    animation: heroFadeUp 0.8s 1.1s ease both;
    overflow: hidden;
  }
  .hd-cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
  }
  .hd-cta-logo { width: 60px; height: 60px; margin: 0 auto 16px; filter: brightness(0) invert(1) opacity(0.9); }
  .hd-cta h3 {
    font-family: 'Nunito', sans-serif; font-size: 24px; font-weight: 900;
    color: #fff; margin-bottom: 8px;
  }
  .hd-cta p { font-size: 14px; color: rgba(255,255,255,0.75); margin-bottom: 24px; }
  .hd-cta-btn {
    background: #fff; color: #2563eb; border: none;
    padding: 13px 32px; border-radius: 12px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
  }
  .hd-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.2); }

  /* ─── FOOTER ─── */
  .hd-footer {
    position: relative; z-index: 5;
    text-align: center; padding: 24px 40px;
    border-top: 1px solid rgba(13,31,78,0.08);
    font-size: 12px; color: rgba(13,31,78,0.35);
  }

  /* ─── TAGLINE SECTION ─── */
  .hd-tagline {
    position: relative; z-index: 5;
    text-align: center; padding: 0 40px 44px;
    animation: heroFadeUp 0.8s 0.35s ease both;
  }
  .hd-tagline-text {
    display: inline-flex; align-items: center; gap: 12px;
    color: rgba(13,31,78,0.45); font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
  }
  .hd-tagline-line { width: 40px; height: 2px; background: linear-gradient(90deg,#2dd4bf,transparent); }
  .hd-tagline-line-r { width: 40px; height: 2px; background: linear-gradient(270deg,#2dd4bf,transparent); }
</style>

  /* ─── SUBPAGE HERO (Features / Pricing) ─── */
  .hd-page-hero {
    position: relative; z-index: 5;
    padding: 64px 40px 40px; max-width: 900px; margin: 0 auto; text-align: center;
    animation: heroFadeUp 0.7s ease both;
  }
  .hd-page-hero .hd-badge { margin-left: auto; margin-right: auto; }
  .hd-page-hero h1 {
    font-family: 'Nunito', sans-serif; font-size: 36px; font-weight: 900;
    color: #0d2169; margin-bottom: 14px; line-height: 1.2;
  }
  .hd-page-hero p {
    font-size: 15px; color: rgba(13,31,78,0.55); line-height: 1.7;
    max-width: 620px; margin: 0 auto;
  }
  .hd-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #2563eb; text-decoration: none;
    margin-bottom: 18px;
  }
  .hd-back-link:hover { text-decoration: underline; }

  /* ─── DETAILED FEATURE CARDS ─── */
  .hd-detail-grid {
    display: grid; grid-template-columns: repeat(2,1fr); gap: 18px;
    max-width: 960px; margin: 0 auto; padding: 8px 40px 48px;
    position: relative; z-index: 5;
  }
  .hd-detail-card {
    background: #fff; border: 1px solid rgba(13,31,78,0.08);
    border-radius: 20px; padding: 26px 24px;
    box-shadow: 0 2px 14px rgba(13,31,78,0.05);
    transition: all .3s; position: relative; overflow: hidden;
  }
  .hd-detail-card::after {
    content: ''; position: absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, #2563eb, #2dd4bf);
    transform: scaleX(0); transform-origin: left; transition: transform .3s;
  }
  .hd-detail-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(37,99,235,0.12); }
  .hd-detail-card:hover::after { transform: scaleX(1); }
  .hd-detail-icowrap {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(45,212,191,0.12));
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 14px;
  }
  .hd-detail-name { font-size: 16px; font-weight: 800; color: #0d2169; margin-bottom: 8px; font-family: 'Nunito', sans-serif; }
  .hd-detail-desc { font-size: 13px; color: rgba(13,31,78,0.55); line-height: 1.7; margin-bottom: 12px; }
  .hd-detail-list { list-style: none; }
  .hd-detail-list li {
    font-size: 12.5px; color: rgba(13,31,78,0.65); padding-left: 18px; position: relative; margin-bottom: 6px; line-height: 1.5;
  }
  .hd-detail-list li::before {
    content: '✓'; position: absolute; left: 0; color: #2dd4bf; font-weight: 800;
  }
  .hd-detail-badge {
    display: inline-block; background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.18);
    color: #2563eb; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 6px;
    letter-spacing: .03em; text-transform: uppercase;
  }

  /* ─── ROADMAP ─── */
  .hd-roadmap {
    position: relative; z-index: 5;
    background: #fff; border-top: 1px solid rgba(13,31,78,0.07); border-bottom: 1px solid rgba(13,31,78,0.07);
    padding: 48px 40px; margin-top: 8px;
  }
  .hd-roadmap-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
    max-width: 900px; margin: 0 auto;
  }
  .hd-roadmap-item {
    background: #f0f7ff; border: 1px dashed rgba(37,99,235,0.3); border-radius: 16px;
    padding: 20px 18px; text-align: center;
  }
  .hd-roadmap-item .hd-ficon-sm { font-size: 24px; margin-bottom: 8px; }
  .hd-roadmap-item h4 { font-size: 13px; font-weight: 700; color: #0d2169; margin-bottom: 6px; }
  .hd-roadmap-item p { font-size: 11.5px; color: rgba(13,31,78,0.5); line-height: 1.55; }
  .hd-roadmap-tag {
    display: inline-block; margin-top: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #0891b2; background: rgba(45,212,191,0.12);
    padding: 2px 8px; border-radius: 999px;
  }

  /* ─── PRICING CARD ─── */
  .hd-pricing-wrap {
    position: relative; z-index: 5; max-width: 640px; margin: 0 auto; padding: 8px 40px 56px;
  }
  .hd-pricing-card {
    background: #fff; border: 1.5px solid rgba(37,99,235,0.18); border-radius: 24px;
    padding: 44px 36px; text-align: center;
    box-shadow: 0 8px 32px rgba(13,31,78,0.08);
  }
  .hd-pricing-icon { font-size: 40px; margin-bottom: 14px; }
  .hd-pricing-card h2 {
    font-family: 'Nunito', sans-serif; font-size: 24px; font-weight: 900; color: #0d2169; margin-bottom: 12px;
  }
  .hd-pricing-card p {
    font-size: 14px; color: rgba(13,31,78,0.6); line-height: 1.75; margin-bottom: 10px;
  }
  .hd-pricing-divider { height: 1px; background: rgba(13,31,78,0.08); margin: 24px 0; }
  .hd-faq { max-width: 640px; margin: 0 auto; padding: 0 40px 56px; position: relative; z-index: 5; }
  .hd-faq-item {
    background: #fff; border: 1px solid rgba(13,31,78,0.08); border-radius: 14px;
    padding: 18px 20px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(13,31,78,0.04);
  }
  .hd-faq-q { font-size: 13.5px; font-weight: 700; color: #0d2169; margin-bottom: 6px; }
  .hd-faq-a { font-size: 13px; color: rgba(13,31,78,0.55); line-height: 1.7; }

  @media (max-width: 720px) {
    .hd-detail-grid, .hd-roadmap-grid { grid-template-columns: 1fr; }
  }

  /* ─── LIVE DEMO WIDGET (self-looping product demo) ─── */
  .hd-live-demo {
    position: relative; z-index: 5;
    background: #fff; border-top: 1px solid rgba(13,31,78,0.07); border-bottom: 1px solid rgba(13,31,78,0.07);
    padding: 48px 40px 56px;
    animation: heroFadeUp 0.8s 0.7s ease both;
  }
  .hd-demo-card {
    max-width: 480px; margin: 0 auto;
    background: #f8fbff; border: 1px solid rgba(13,31,78,0.08); border-radius: 20px;
    padding: 22px 24px 20px;
    box-shadow: 0 8px 28px rgba(13,31,78,0.07);
  }
  .hd-demo-status {
    position: relative; height: 20px; margin-bottom: 14px;
  }
  .hd-demo-status-item {
    position: absolute; left: 0; top: 0; right: 0;
    font-size: 13px; font-weight: 700; color: #2563eb;
    opacity: 0; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
  }
  .hd-demo-s1 { animation-name: demoStatus1; }
  .hd-demo-s2 { animation-name: demoStatus2; }
  .hd-demo-s3 { animation-name: demoStatus3; }
  .hd-demo-s4 { animation-name: demoStatus4; color: #0891b2; }
  @keyframes demoStatus1 { 0%{opacity:0} 2%{opacity:1} 26%{opacity:1} 30%{opacity:0} 100%{opacity:0} }
  @keyframes demoStatus2 { 0%,28%{opacity:0} 32%{opacity:1} 54%{opacity:1} 58%{opacity:0} 100%{opacity:0} }
  @keyframes demoStatus3 { 0%,56%{opacity:0} 60%{opacity:1} 82%{opacity:1} 86%{opacity:0} 100%{opacity:0} }
  @keyframes demoStatus4 { 0%,86%{opacity:0} 89%{opacity:1} 96%{opacity:1} 99%{opacity:0} 100%{opacity:0} }

  .hd-demo-wave {
    display: flex; align-items: flex-end; gap: 4px; height: 24px; margin-bottom: 16px;
    opacity: 0; animation: demoWaveVisibility 12s ease-in-out infinite;
  }
  @keyframes demoWaveVisibility { 0%,2%{opacity:0} 5%{opacity:1} 26%{opacity:1} 30%{opacity:0} 100%{opacity:0} }
  .hd-demo-wave span {
    width: 4px; border-radius: 2px;
    background: linear-gradient(180deg, #2563eb, #2dd4bf);
    animation: demoWaveBounce 0.9s ease-in-out infinite;
  }
  .hd-demo-wave span:nth-child(2) { animation-delay: -0.15s; }
  .hd-demo-wave span:nth-child(3) { animation-delay: -0.3s; }
  .hd-demo-wave span:nth-child(4) { animation-delay: -0.45s; }
  .hd-demo-wave span:nth-child(5) { animation-delay: -0.6s; }
  @keyframes demoWaveBounce { 0%,100%{height:6px} 50%{height:22px} }

  .hd-demo-transcript { margin-bottom: 12px; }
  .hd-demo-line {
    font-size: 12.5px; color: rgba(13,31,78,0.72); line-height: 1.6;
    background: #eef5ff; border-radius: 8px; padding: 7px 11px; margin-bottom: 6px;
    opacity: 0; transform: translateY(8px);
    animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
  }
  .hd-demo-line b { color: #0d2169; }
  .hd-demo-line1 { animation-name: demoLine1; }
  .hd-demo-line2 { animation-name: demoLine2; }
  .hd-demo-line3 { animation-name: demoLine3; }
  @keyframes demoLine1 { 0%,6%{opacity:0;transform:translateY(8px)} 10%{opacity:1;transform:translateY(0)} 84%{opacity:1} 90%{opacity:0} 100%{opacity:0} }
  @keyframes demoLine2 { 0%,14%{opacity:0;transform:translateY(8px)} 18%{opacity:1;transform:translateY(0)} 84%{opacity:1} 90%{opacity:0} 100%{opacity:0} }
  @keyframes demoLine3 { 0%,22%{opacity:0;transform:translateY(8px)} 26%{opacity:1;transform:translateY(0)} 84%{opacity:1} 90%{opacity:0} 100%{opacity:0} }

  .hd-demo-soap { margin-bottom: 12px; }
  .hd-demo-field {
    font-size: 12.5px; color: rgba(13,31,78,0.78);
    background: #fff; border: 1px solid rgba(37,99,235,0.15); border-radius: 8px;
    padding: 8px 11px; margin-bottom: 6px;
    opacity: 0; transform: translateY(8px);
    animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
  }
  .hd-demo-tag-mini {
    display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #0891b2; margin-bottom: 3px;
  }
  .hd-demo-soap1 { animation-name: demoSoap1; }
  .hd-demo-soap2 { animation-name: demoSoap2; }
  .hd-demo-soap3 { animation-name: demoSoap3; }
  @keyframes demoSoap1 { 0%,34%{opacity:0;transform:translateY(8px)} 38%{opacity:1;transform:translateY(0)} 84%{opacity:1} 90%{opacity:0} 100%{opacity:0} }
  @keyframes demoSoap2 { 0%,42%{opacity:0;transform:translateY(8px)} 46%{opacity:1;transform:translateY(0)} 84%{opacity:1} 90%{opacity:0} 100%{opacity:0} }
  @keyframes demoSoap3 { 0%,50%{opacity:0;transform:translateY(8px)} 54%{opacity:1;transform:translateY(0)} 84%{opacity:1} 90%{opacity:0} 100%{opacity:0} }

  .hd-demo-badges {
    display: flex; gap: 8px; flex-wrap: wrap;
    opacity: 0; transform: scale(0.9);
    animation: demoBadges 12s ease-in-out infinite;
  }
  @keyframes demoBadges { 0%,60%{opacity:0;transform:scale(.9)} 64%{opacity:1;transform:scale(1)} 84%{opacity:1} 90%{opacity:0} 100%{opacity:0} }
  .hd-badge-mini {
    background: rgba(45,212,191,0.12); border: 1px solid rgba(45,212,191,0.35);
    color: #0891b2; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  }

  @media (prefers-reduced-motion: reduce) {
    .hd-demo-line, .hd-demo-field, .hd-demo-badges, .hd-demo-status-item, .hd-demo-wave, .hd-demo-wave span {
      animation: none !important; opacity: 1 !important; transform: none !important;
    }
  }

  /* ─── HEARTBEAT LINE behind hero logo ─── */
  .hd-ecg-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: -1; }
  .hd-ecg-path {
    stroke-dasharray: 340; stroke-dashoffset: 340;
    animation: ecgDraw 3.2s ease-in-out infinite;
  }
  @keyframes ecgDraw {
    0% { stroke-dashoffset: 340; opacity: 0; }
    8% { opacity: 0.55; }
    55% { stroke-dashoffset: 0; opacity: 0.55; }
    75% { opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }