.home-hero {
   position: relative;
   min-height: 90vh;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: var(--green-950);
   padding: 70px 0 110px
}

.hh-bg {
   position: absolute;
   inset: 0;
   z-index: 0
}

.hh-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center right
}

.hh-bg::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(7, 27, 16, .96) 0%, rgba(7, 27, 16, .86) 40%, rgba(7, 27, 16, .45) 70%, rgba(7, 27, 16, .25) 100%)
}

.hh-glow {
   position: absolute;
   z-index: 1;
   inset: 0;
   background: radial-gradient(circle at 20% 30%, rgba(47, 155, 92, .35), transparent 45%), radial-gradient(circle at 80% 90%, rgba(216, 180, 90, .2), transparent 45%);
   pointer-events: none
}

.home-hero .wrap {
   position: relative;
   z-index: 2;
   width: 100%
}

.hh-inner {
   max-width: 660px;
   color: #fff
}

.hh-badge {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(216, 180, 90, .4);
   padding: 9px 18px;
   border-radius: 100px;
   font-size: .76rem;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--gold-300);
   margin-bottom: 28px
}

.hh-badge .dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--wa);
   animation: pulse 2.1s infinite
}

.hh-inner h1 {
   font-size: clamp(2.9rem, 6.6vw, 5.4rem);
   font-weight: 600;
   letter-spacing: -.03em;
   line-height: 1;
   margin-bottom: 26px
}

.hh-inner h1 .em {
   font-style: italic;
   font-weight: 400;
   color: var(--gold-400)
}

.hh-lead {
   font-size: 1.18rem;
   color: rgba(255, 255, 255, .84);
   max-width: 540px;
   margin-bottom: 36px
}

.hh-actions {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 44px
}

.hh-trust {
   display: flex;
   gap: 14px;
   flex-wrap: wrap
}

.hh-chip {
   display: flex;
   align-items: center;
   gap: 11px;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: 16px;
   padding: 12px 18px;
   backdrop-filter: blur(6px)
}

.hh-chip i {
   font-size: 26px;
   color: var(--gold-400);
   flex-shrink: 0;
   line-height: 1
}

.hh-chip b {
   font-family: var(--serif);
   font-size: 1.05rem;
   display: block;
   line-height: 1.05;
   color: #fff
}

.hh-chip small {
   font-size: .76rem;
   color: rgba(255, 255, 255, .66)
}

.hh-scroll {
   position: absolute;
   bottom: 34px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   color: rgba(255, 255, 255, .6);
   font-size: .72rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px
}

.hh-scroll .mouse {
   width: 24px;
   height: 38px;
   border: 2px solid rgba(255, 255, 255, .4);
   border-radius: 14px;
   position: relative
}

.hh-scroll .mouse::after {
   content: "";
   position: absolute;
   top: 7px;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
   height: 7px;
   background: var(--gold-400);
   border-radius: 3px;
   animation: scrolldot 1.8s infinite
}

@keyframes scrolldot {
   0% {
      opacity: 1;
      top: 7px
   }

   70% {
      opacity: 0;
      top: 18px
   }

   100% {
      opacity: 0
   }
}

.statsband {
   background: var(--green-900);
   position: relative;
   overflow: hidden
}

.stat-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0
}

.stat-item {
   padding: 44px 24px;
   text-align: center;
   border-right: 1px solid rgba(255, 255, 255, .09)
}

.stat-item:last-child {
   border-right: none
}

.stat-item .num {
   font-family: var(--serif);
   font-size: clamp(2.4rem, 4vw, 3.3rem);
   font-weight: 700;
   line-height: 1;
   background: var(--gold-grad);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent
}

.stat-item .lbl {
   margin-top: 10px;
   font-weight: 600;
   font-size: .9rem;
   color: rgba(255, 255, 255, .7)
}

.about-flex {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 70px;
   align-items: center
}

.about-visual {
   position: relative
}

.about-main {
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   position: relative;
   aspect-ratio: 4/4.6
}

.about-main img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1.2s cubic-bezier(.2, .8, .2, 1)
}

.about-visual:hover .about-main img {
   transform: scale(1.05)
}

.about-sub {
   position: absolute;
   bottom: -40px;
   right: -30px;
   width: 46%;
   border-radius: 20px;
   overflow: hidden;
   border: 6px solid var(--cream);
   box-shadow: var(--shadow-md);
   aspect-ratio: 1
}

.about-sub img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.about-exp {
   position: absolute;
   top: -28px;
   left: -28px;
   background: var(--gold-grad);
   color: #3a2c08;
   border-radius: 20px;
   padding: 22px 26px;
   box-shadow: var(--shadow-md);
   text-align: center;
   z-index: 3
}

.about-exp .big {
   font-family: var(--serif);
   font-size: 2.6rem;
   font-weight: 700;
   line-height: 1
}

.about-exp .sm {
   font-size: .76rem;
   font-weight: 700;
   letter-spacing: .06em;
   margin-top: 2px
}

.about-deco {
   position: absolute;
   bottom: 20px;
   left: -46px;
   width: 110px;
   height: 110px;
   border: 2px dashed rgba(169, 129, 47, .4);
   border-radius: 50%;
   z-index: -1;
   animation: spin 26s linear infinite
}

.about-copy h2 {
   font-size: clamp(2.1rem, 4vw, 3.2rem);
   margin: 18px 0 20px;
   color: var(--green-800)
}

.about-copy p {
   color: var(--muted);
   margin-bottom: 16px;
   font-size: 1.05rem
}

.about-list {
   list-style: none;
   margin: 26px 0 34px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px 24px
}

.about-list li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   font-weight: 600;
   font-size: .96rem;
   color: var(--ink)
}

.about-list .ci {
   width: 26px;
   height: 26px;
   flex-shrink: 0;
   border-radius: 8px;
   background: linear-gradient(135deg, rgba(47, 155, 92, .16), rgba(216, 180, 90, .2));
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 1px
}

.about-list i {
   font-size: 15px;
   color: var(--green-600);
   line-height: 1
}

.about-sign {
   display: flex;
   align-items: center;
   gap: 22px;
   flex-wrap: wrap
}

.about-tag {
   font-family: var(--serif);
   font-style: italic;
   font-size: 1.18rem;
   color: var(--green-700)
}

.svc-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px
}

.svc-card {
   position: relative;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   min-height: 400px;
   display: flex;
   align-items: flex-end;
   isolation: isolate;
   transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s
}

.svc-card img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -2;
   transition: transform 1s cubic-bezier(.2, .8, .2, 1)
}

.svc-card::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(to top, rgba(7, 27, 16, .94) 0%, rgba(7, 27, 16, .6) 45%, rgba(7, 27, 16, .15) 100%);
   transition: background .5s
}

.svc-card:hover {
   transform: translateY(-10px);
   box-shadow: var(--shadow-md)
}

.svc-card:hover img {
   transform: scale(1.08)
}

.svc-card:hover::after {
   background: linear-gradient(to top, rgba(7, 27, 16, .96) 0%, rgba(18, 69, 42, .78) 55%, rgba(18, 69, 42, .35) 100%)
}

.svc-body {
   padding: 30px;
   color: #fff;
   width: 100%
}

.svc-num {
   position: absolute;
   top: 22px;
   right: 26px;
   font-family: var(--serif);
   font-size: 1.1rem;
   font-weight: 700;
   color: #3a2c08;
   background: var(--gold-grad);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-sm)
}

.svc-icon {
   width: 56px;
   height: 56px;
   border-radius: 15px;
   background: rgba(255, 255, 255, .14);
   border: 1px solid rgba(255, 255, 255, .2);
   backdrop-filter: blur(6px);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px
}

.svc-icon i {
   font-size: 28px;
   color: var(--gold-300);
   line-height: 1
}

.svc-title {
   font-family: var(--serif);
   font-size: 1.42rem;
   font-weight: 600;
   margin-bottom: 10px
}

.svc-body p {
   font-size: .95rem;
   color: rgba(255, 255, 255, .8);
   margin-bottom: 0;
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height .5s ease, opacity .5s ease, margin .5s ease
}

.svc-card:hover .svc-body p {
   max-height: 120px;
   opacity: 1;
   margin-bottom: 16px
}

.svc-more {
   font-weight: 700;
   font-size: .84rem;
   color: var(--gold-300);
   letter-spacing: .04em;
   display: inline-flex;
   align-items: center;
   gap: 8px
}

.svc-more i {
   font-size: 16px;
   color: currentColor;
   transition: transform .3s;
   line-height: 1
}

.svc-card:hover .svc-more i {
   transform: translateX(6px)
}

.trust {
   background: var(--green-950);
   color: #fff;
   position: relative;
   overflow: hidden
}

.trust::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 12% 20%, rgba(47, 155, 92, .28), transparent 45%), radial-gradient(circle at 88% 85%, rgba(216, 180, 90, .2), transparent 45%);
   pointer-events: none
}

.why-flex {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
   z-index: 2
}

.trust-visual {
   position: relative;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   aspect-ratio: 5/4
}

.trust-visual img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.trust-visual .badge {
   position: absolute;
   bottom: 22px;
   left: 22px;
   background: rgba(7, 27, 16, .7);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(216, 180, 90, .4);
   border-radius: 16px;
   padding: 16px 20px;
   display: flex;
   align-items: center;
   gap: 14px
}

.stars {
   display: inline-flex;
   gap: 2px
}

.stars i {
   font-size: 16px;
   color: var(--gold-400);
   line-height: 1
}

.trust-visual .badge b {
   font-family: var(--serif);
   font-size: 1.3rem;
   display: block;
   line-height: 1
}

.trust-visual .badge small {
   font-size: .76rem;
   color: rgba(255, 255, 255, .7)
}

.trust-copy h2 {
   font-size: clamp(2.1rem, 4vw, 3.2rem);
   margin: 16px 0 20px
}

.trust-copy h2 em {
   font-style: italic;
   color: var(--gold-400)
}

.trust-copy>p {
   color: rgba(255, 255, 255, .82);
   font-size: 1.06rem;
   margin-bottom: 30px
}

.why-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-bottom: 32px
}

.why-item {
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .11);
   border-radius: 16px;
   padding: 22px;
   transition: transform .35s, background .35s, border-color .35s
}

.why-item:hover {
   transform: translateY(-6px);
   background: rgba(255, 255, 255, .09);
   border-color: rgba(216, 180, 90, .4)
}

.why-item .ic {
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: var(--gold-grad);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 14px
}

.why-item .ic i {
   font-size: 24px;
   color: #3a2c08;
   line-height: 1
}

.why-item h4 {
   font-size: 1.06rem;
   font-weight: 600;
   margin-bottom: 6px;
   color: #fff
}

.why-item p {
   font-size: .85rem;
   color: rgba(255, 255, 255, .68);
   margin: 0
}

.steps-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   position: relative
}

.steps-grid::before {
   content: "";
   position: absolute;
   top: 52px;
   left: 16%;
   right: 16%;
   height: 2px;
   background: repeating-linear-gradient(90deg, var(--gold-400) 0 12px, transparent 12px 24px);
   opacity: .5;
   z-index: 0
}

.step {
   text-align: center;
   position: relative;
   z-index: 1;
   background: var(--cream);
   padding: 0 10px
}

.step-circle {
   width: 104px;
   height: 104px;
   border-radius: 50%;
   margin: 0 auto 26px;
   background: #fff;
   border: 2px solid rgba(216, 180, 90, .5);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   box-shadow: var(--shadow-sm);
   transition: transform .4s, border-color .4s
}

.step:hover .step-circle {
   transform: translateY(-8px);
   border-color: var(--gold-500)
}

.step-circle i {
   font-size: 44px;
   color: var(--green-600);
   line-height: 1
}

.step-num {
   position: absolute;
   top: -6px;
   right: 2px;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: var(--green-grad);
   color: var(--gold-300);
   font-family: var(--serif);
   font-weight: 700;
   font-size: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-sm);
   border: 2px solid var(--cream)
}

.step h4 {
   font-family: var(--serif);
   font-size: 1.36rem;
   font-weight: 600;
   color: var(--green-800);
   margin-bottom: 10px
}

.step p {
   color: var(--muted);
   font-size: .97rem;
   max-width: 300px;
   margin: 0 auto
}

.testi-head .rating {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: #fff;
   padding: 10px 22px;
   border-radius: 100px;
   box-shadow: var(--shadow-sm);
   font-weight: 700;
   color: var(--green-800);
   margin-top: 16px
}

.testi-head .rating .stars i {
   font-size: 18px;
   color: var(--gold-500);
   line-height: 1
}

.testi-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px
}

.testi-card {
   background: #fff;
   border-radius: var(--radius);
   padding: 38px 32px;
   box-shadow: var(--shadow-sm);
   border: 1px solid rgba(18, 69, 42, .06);
   position: relative;
   transition: transform .45s, box-shadow .45s;
   overflow: hidden
}

.testi-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 5px;
   height: 100%;
   background: var(--gold-grad);
   transform: scaleY(0);
   transform-origin: top;
   transition: transform .45s
}

.testi-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-md)
}

.testi-card:hover::before {
   transform: scaleY(1)
}

.testi-card .quote {
   font-family: var(--serif);
   font-size: 4rem;
   line-height: .5;
   color: var(--gold-400);
   opacity: .5;
   margin-bottom: 14px;
   height: 26px
}

.testi-card .stars {
   margin-bottom: 16px
}

.testi-card .stars i {
   font-size: 18px;
   color: var(--gold-500);
   line-height: 1
}

.testi-card p {
   color: var(--muted);
   font-size: .98rem;
   margin-bottom: 24px
}

.testi-who {
   display: flex;
   align-items: center;
   gap: 14px;
   border-top: 1px solid rgba(18, 69, 42, .08);
   padding-top: 20px
}

.testi-av {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--green-grad);
   color: var(--gold-300);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--serif);
   font-weight: 700;
   font-size: 1.2rem
}

.testi-who b {
   display: block;
   font-size: 1rem;
   color: var(--ink)
}

.testi-who small {
   color: var(--muted);
   font-size: .82rem
}

.ctaband {
   padding: 110px 0
}

.cta-inner {
   position: relative;
   border-radius: 34px;
   padding: 70px 60px;
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   isolation: isolate
}

.cta-inner img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -2
}

.cta-inner::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(120deg, rgba(7, 27, 16, .94) 0%, rgba(18, 69, 42, .82) 55%, rgba(7, 27, 16, .6) 100%)
}

.cta-flex {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 36px;
   flex-wrap: wrap
}

.cta-flex h2 {
   color: #fff;
   font-size: clamp(1.9rem, 3.6vw, 2.9rem);
   max-width: 640px
}

.cta-flex h2 em {
   font-style: italic;
   color: var(--gold-400)
}

.cta-flex p {
   color: rgba(255, 255, 255, .8);
   margin-top: 12px;
   max-width: 540px
}

.cta-actions {
   display: flex;
   gap: 14px;
   flex-wrap: wrap
}

/* IV THERAPY & BLOOD COLLECTION — DETAILED */
.svc-detail .sd-row {
   display: grid;
   grid-template-columns: .92fr 1.08fr;
   gap: 56px;
   align-items: center;
   margin-top: 72px
}

.svc-detail .sd-row:first-of-type {
   margin-top: 8px
}

.svc-detail .sd-row.rev .sd-media {
   order: 2
}

.sd-media {
   position: relative;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   aspect-ratio: 4/3.4
}

.sd-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1.2s cubic-bezier(.2, .8, .2, 1)
}

.svc-detail .sd-row:hover .sd-media img {
   transform: scale(1.05)
}

.sd-media .sd-chip {
   position: absolute;
   left: 18px;
   bottom: 18px;
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: rgba(7, 27, 16, .66);
   backdrop-filter: blur(6px);
   border: 1px solid rgba(216, 180, 90, .4);
   border-radius: 100px;
   padding: 10px 20px;
   color: #fff;
   font-weight: 700;
   font-size: .86rem
}

.sd-media .sd-chip i {
   font-size: 17px;
   color: var(--gold-300);
   line-height: 1
}

.sd-tag {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: linear-gradient(135deg, rgba(47, 155, 92, .14), rgba(216, 180, 90, .2));
   border: 1px solid rgba(169, 129, 47, .3);
   color: var(--gold-600);
   font-weight: 800;
   font-size: .74rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   padding: 8px 16px;
   border-radius: 100px;
   margin-bottom: 18px
}

.sd-tag i {
   font-size: 15px;
   line-height: 1
}

.sd-info h3 {
   font-size: clamp(1.7rem, 3vw, 2.4rem);
   color: var(--green-800);
   margin-bottom: 16px
}

.sd-info h3 em {
   font-style: italic;
   color: var(--gold-600)
}

.sd-info>p {
   color: var(--muted);
   font-size: 1.04rem;
   margin-bottom: 26px
}

.sd-feat {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-bottom: 28px
}

.sd-feat-item {
   display: flex;
   gap: 13px;
   align-items: flex-start;
   background: #fff;
   border: 1px solid rgba(18, 69, 42, .08);
   border-radius: var(--radius-sm);
   padding: 16px 18px;
   box-shadow: var(--shadow-sm);
   transition: transform .35s
}

.sd-feat-item:hover {
   transform: translateY(-4px)
}

.sd-feat-item .fi {
   width: 40px;
   height: 40px;
   flex-shrink: 0;
   border-radius: 11px;
   background: linear-gradient(135deg, rgba(47, 155, 92, .16), rgba(216, 180, 90, .22));
   display: flex;
   align-items: center;
   justify-content: center
}

.sd-feat-item .fi i {
   font-size: 20px;
   color: var(--green-600);
   line-height: 1
}

.sd-feat-item h4 {
   font-size: .98rem;
   color: var(--green-800);
   margin-bottom: 2px
}

.sd-feat-item p {
   font-size: .84rem;
   color: var(--muted);
   margin: 0;
   line-height: 1.45
}

.sd-list-box {
   background: var(--cream);
   border: 1px solid rgba(18, 69, 42, .07);
   border-radius: var(--radius);
   padding: 24px 28px;
   margin-bottom: 30px
}

.svc-detail .sd-row.rev .sd-list-box {
   background: #fff
}

.sd-list-box h5 {
   font-size: 1.14rem;
   color: var(--green-800);
   margin-bottom: 16px
}

.sd-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 11px 24px
}

.sd-list li {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   font-weight: 600;
   font-size: .92rem;
   color: var(--green-800)
}

.sd-list li i {
   font-size: 15px;
   color: var(--green-600);
   line-height: 1;
   margin-top: 3px;
   flex-shrink: 0
}

@media (max-width:920px) {
   .svc-detail .sd-row {
      grid-template-columns: 1fr;
      gap: 34px;
      margin-top: 56px
   }

   .svc-detail .sd-row.rev .sd-media {
      order: 0
   }

   .sd-media {
      aspect-ratio: 16/10
   }
}

@media (max-width:640px) {

   .sd-feat,
   .sd-list {
      grid-template-columns: 1fr
   }
}