/* Refined Evergreen Healthtech brand and photographic caregiving hero */
:root { --ink: #123f36; --green: #076452; --deep: #06483f; --body: #3f665d; --line: #b8d8c9; }
.topbar { background: rgba(250, 250, 245, .88); }
body { background: #dcebe2; }
.hero { background: linear-gradient(115deg, #f9f5eb 0%, #eef6ef 66%, #d7ecdf 100%); border-radius: 0 0 26px 26px; }
.hero { display: block; min-height: 0; padding-top: 28px; padding-bottom: 34px; }
.hero-copy { max-width: none; }
.hero-visual { width: 100%; height: min(43vw, 560px); min-height: 450px; margin-top: 0; border-radius: 16px; }
.hero-photo { object-position: center 42%; }
.intro { margin-top: 0; padding-top: 46px; background: #f4e9da; border-radius: 18px; }
.name-card { background: #eef8f1; border-radius: 18px; }
.workflow { margin-top: 26px; margin-bottom: 26px; padding-top: 86px; padding-bottom: 86px; background: #cce6d9; border-radius: 18px; }
.audience { padding-top: 32px; padding-bottom: 32px; background: #e4f1e8; border-radius: 18px; }.closing { border-radius: 18px 18px 0 0; background: #b9dccb; }footer { background: #ece6d9; max-width: none; padding-left: max(40px, calc((100vw - 1200px)/2)); padding-right: max(40px, calc((100vw - 1200px)/2)); }
.feature-grid article { background: #fffdf8; box-shadow: 0 9px 20px rgba(39, 91, 75, .05); }
.brand-mark {
  width: 31px;
  height: 31px;
  display: block;
  flex: 0 0 31px;
  object-fit: contain;
  border-radius: 9px;
}

@media (max-width: 560px) {
  .topbar > .brand span { display: none; }
}

.hero-visual { background: #dcefe7; }

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.photo-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 54, 46, .91) 0%, rgba(10, 67, 56, .77) 39%, rgba(12, 68, 57, .25) 67%, rgba(12, 68, 57, 0) 100%);
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(28px, 5vw, 70px);
  width: min(555px, calc(100% - 56px));
  transform: translateY(-50%);
  color: #fff;
  padding: 8px 0;
}

.hero-overlay h1 {
  max-width: 530px;
  margin: 0 0 19px;
  color: #fff;
  font-size: clamp(34px, 3.8vw, 54px);
  text-shadow: 0 2px 16px rgba(4, 42, 34, .26);
}

.hero-overlay h1 em { color: #a4ebcb; }
.hero-overlay .hero-description { max-width: 505px; margin: 0 0 27px; color: #f1fff8; text-shadow: 0 1px 9px rgba(4, 42, 34, .4); }
.hero-overlay .button { background: #fff; border-color: #fff; color: #115648; box-shadow: 0 9px 22px rgba(0, 33, 26, .22); }
.hero-overlay .button:hover { background: #dff5e9; }
.hero-overlay .text-link { color: #fff; text-shadow: 0 1px 8px rgba(4, 42, 34, .5); }
.hero-overlay .text-link:hover { color: #b8f0d5; }
.hero-overlay .trust-row { margin-top: 31px; }
.hero-overlay .trust-row p { color: #e8f8ef; text-shadow: 0 1px 7px rgba(4, 42, 34, .45); }
.hero-overlay .avatars span { border-color: #174b40; }

.hero-visual .floating-card {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, .94);
}

/* Keep live status cards clear of the left-side hero message. */
.hero-visual .activity-card { top: 30px; right: 30px; left: auto; }
.hero-visual .visit-card { right: 36px; bottom: 38px; left: auto; }

.tag-scan { position: absolute; z-index: 2; left: 69.5%; top: 46%; width: 33px; height: 33px; transform: translate(-50%,-50%); pointer-events: none; }
.tag-scan i { position: absolute; inset: 0; border: 1.5px solid rgba(74, 213, 151, .85); border-radius: 50%; animation: tagWave 2.5s ease-out infinite; }
.tag-scan i:nth-child(2) { animation-delay: 1.25s; }.tag-scan b { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #42c690; transform: translate(-50%,-50%); box-shadow: 0 0 0 3px rgba(66,198,144,.25); }
@keyframes tagWave { 0% { transform: scale(.35); opacity: .95; } 100% { transform: scale(3.1); opacity: 0; } }

@media (max-width: 480px) {
  .hero-photo { object-position: 64% center; }
  .photo-wash { background: linear-gradient(90deg, rgba(226, 242, 233, .16), rgba(226, 242, 233, 0) 70%); }
}

.name-card { padding-top: 100px; padding-bottom: 100px; }
.name-card-heading, .reports-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.name-card-heading h2, .reports-heading h2 { font: 800 clamp(34px,4vw,49px)/1.1 "Manrope",sans-serif; letter-spacing: -2.8px; margin: 0; }
.name-card-heading h2 em, .reports-heading h2 em { font-family: Georgia,serif; font-weight: 400; color: #42a27f; }
.name-card-heading > p, .reports-heading > p { max-width: 415px; color: var(--body); line-height: 1.7; margin: 0; }
.card-experience { display: grid; grid-template-columns: .9fr 1.1fr; margin-top: 53px; border-radius: 14px; overflow: hidden; background: #e4f1ea; }
.card-product { min-height: 500px; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 52% 43%, #fbfffd 0 9%, #d2e9de 9.3% 27%, #bcdccc 27.3% 27.8%, transparent 28.2%); overflow: hidden; }
.card-halo { position: absolute; width: 520px; height: 520px; border: 1px solid #aed6c4; border-radius: 50%; }
.evergreen-card-device { position: relative; z-index: 1; width: 226px; min-height: 310px; padding: 17px 17px 14px; border-radius: 17px; background: linear-gradient(145deg,#fff,#e6f2ec); box-shadow: 0 25px 45px rgba(26,91,75,.2), inset 0 1px #fff; text-align: center; color: var(--ink); transform: rotate(-4deg); }
.evergreen-card-device { animation: deviceFloat 4.8s ease-in-out infinite; }
.evergreen-card-top i { animation: statusPulse 1.8s ease-in-out infinite; }
@keyframes deviceFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }
@keyframes statusPulse { 0%,100% { box-shadow: 0 0 0 4px #d1f0e1; } 50% { box-shadow: 0 0 0 8px rgba(209,240,225,0); } }
.card-scan { position: absolute; z-index: 0; width: 230px; height: 230px; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; }.card-scan i { position: absolute; inset: 0; border: 1px solid rgba(72, 179, 137, .8); border-radius: 50%; animation: cardWave 3.2s ease-out infinite; }.card-scan i:nth-child(2) { animation-delay: 1.6s; }.card-scan b { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #4fbc90; border: 3px solid #f4fff8; box-shadow: 0 0 0 6px rgba(79,188,144,.18); transform: translate(-50%,-50%); }.card-scan::after { content: ""; position: absolute; inset: 26px; border: 1px dashed rgba(70, 155, 119, .36); border-radius: 50%; animation: spinHalo 18s linear infinite; }
@keyframes cardWave { 0% { transform: scale(.18); opacity: .92; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes spinHalo { to { transform: rotate(360deg); } }
.evergreen-card-top { display: flex; align-items: center; gap: 6px; color: #5c8378; font: 800 9px "Manrope"; letter-spacing: 1.6px; text-align: left; }
.evergreen-card-top svg,.evergreen-card-top img { width: 20px; height: 20px; object-fit: contain; mix-blend-mode: multiply; }.evergreen-card-top i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #55c194; box-shadow: 0 0 0 4px #d1f0e1; }
.card-avatar { width: 84px; height: 84px; display: grid; place-items: center; margin: 30px auto 11px; border: 5px solid #f9fdfa; border-radius: 50%; background: #beded0; color: #397561; font: 700 24px "Manrope"; }
.evergreen-card-device b { display: block; font: 800 17px "Manrope"; }.evergreen-card-device small { display: block; margin-top: 3px; color: #68857d; font-size: 11px; }.card-active { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; padding: 6px 10px; border-radius: 20px; background: #e0f5ea; color: #27785d; font-size: 10px; font-weight: 700; }.card-active i { width: 6px; height: 6px; border-radius: 50%; background: #43b987; }.card-metrics { display: flex; justify-content: space-around; margin-top: 19px; padding-top: 11px; border-top: 1px solid #dbe9e2; color: #4b9179; font-size: 17px; }
.wear-callout { position: absolute; z-index: 2; bottom: 50px; left: 38px; max-width: 130px; color: #43746a; font-size: 12px; line-height: 1.5; }.wear-callout span { font-size: 24px; color: var(--coral); }.wear-callout p { margin: 4px 0 0; }
.experience-copy { padding: 37px 42px; background: #f9faf5; }.experience-copy article { display: grid; grid-template-columns: 45px 1fr; gap: 17px; padding: 19px 0; border-bottom: 1px solid #dce8e1; }.experience-copy article:last-child { border-bottom: 0; }.experience-number { color: #5ead90; font: 800 12px "Manrope"; }.experience-copy h3 { margin: 0 0 8px; font-size: 17px; }.experience-copy p { max-width: 500px; margin: 0; color: var(--body); font-size: 14px; line-height: 1.65; }
.name-card-statuses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.name-card-status { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px; border: 1px solid #dbe9e2; border-radius: 10px; background: #fff; box-shadow: 0 7px 15px rgba(36, 88, 75, .06); }
.name-card-status small { display: block; color: #77938b; font-size: 8px; font-weight: 800; letter-spacing: .7px; }
.name-card-status strong { display: block; margin-top: 2px; color: var(--ink); font-size: 11px; }
.name-card-status .card-icon,.name-card-status .check { flex: 0 0 auto; }
.name-card-status .pulse { flex: 0 0 auto; margin-left: auto; }
.reports { padding: 97px 0 105px; background: #deeee3; }.reports-heading { align-items: end; }.reports-heading > p { margin-bottom: 3px; }.report-showcase { display: grid; gap: 30px; margin-top: 53px; }.report-display { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 32px; min-height: 370px; padding: 28px 29px 28px 38px; border-radius: 14px; overflow: hidden; }.client-report { background: #cbe7d9; }.staff-report { background: #f4dfcc; }.report-label { display: inline-block; margin-bottom: 16px; color: #306f5d; font: 800 10px "Manrope"; letter-spacing: 1.15px; }.staff-report .report-label { color: #8d5941; }.report-copy h3 { margin: 0 0 12px; font-size: 25px; letter-spacing: -1px; }.report-copy p { margin: 0 0 16px; color: var(--body); line-height: 1.6; font-size: 14px; }.report-copy ul { list-style: none; padding: 0; margin: 0; }.report-copy li { margin: 7px 0; color: #2e5f54; font-size: 13px; font-weight: 600; }.report-copy li::before { content: "✓"; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 8px; border-radius: 50%; background: #429b78; color: #fff; font-size: 10px; }.staff-report .report-copy li::before { background: #c96f4f; }.report-display img { width: 100%; border-radius: 9px; box-shadow: 0 18px 33px rgba(37,77,64,.18); }

@media (max-width: 800px) { .hero,.intro,.workflow,.closing { border-radius: 0; }.hero { padding-top: 20px; padding-bottom: 34px; }.intro { padding-top: 42px; }.hero-visual { height: 540px; min-height: 0; margin-top: 0; }.hero-photo { object-position: 70% center; }.tag-scan { left: 70%; top: 45%; }.hero-overlay { top: 47%; left: 30px; width: calc(100% - 60px); }.hero-overlay h1 { font-size: clamp(33px, 7.5vw, 46px); }.photo-wash { background: linear-gradient(90deg, rgba(8, 54, 46, .88), rgba(8, 54, 46, .57) 69%, rgba(8, 54, 46, .20)); }.hero-visual .activity-card { top: 20px; right: 18px; }.hero-visual .visit-card { right: 18px; bottom: 23px; }.name-card-heading, .reports-heading { display: block; }.name-card-heading > p, .reports-heading > p { margin-top: 20px; }.card-experience, .report-display { grid-template-columns: 1fr; }.card-product { min-height: 420px; }.experience-copy { padding: 26px; }.report-display { padding: 28px; gap: 25px; }.report-copy h3 { font-size: 22px; } footer { padding-left: 22px; padding-right: 22px; } }
@media (max-width: 480px) { .name-card { padding-top: 72px; padding-bottom: 72px; }.card-product { min-height: 360px; }.evergreen-card-device { transform: scale(.83) rotate(-4deg); }.wear-callout { left: 21px; bottom: 25px; }.experience-copy { padding: 20px; }.report-display { padding: 23px 20px; }.reports { padding: 70px 0; } }
@media (prefers-reduced-motion: reduce) { .evergreen-card-device,.evergreen-card-top i,.tag-scan i,.card-scan i,.card-scan::after { animation: none; } }