/* ══════════════════════════════════════════════
       ROOT THEME — matches TechMySpa brand exactly
    ══════════════════════════════════════════════ */
 :root {
     --primary: #e579ad;
     --primary-dark: #d66b9f;
     --primary-light: #fff0f6;
     --primary-mid: #f5c6e0;
     --gold: #c9972a;
     --gold-light: #fdf6e8;
     --gold-border: #e0c96a;
     --rose: #8b2252;
     --rose-light: #f9edf4;
     --green: #15803d;
     --text-dark: #111;
     --text-muted: #6b7280;
     --border: #e5e7eb;
     --bg-soft: #fafafa;
     --white: #ffffff;
 }

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

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Inter', sans-serif;
     background: #fff;
     color: var(--text-dark);
     overflow-x: hidden;
 }

 img {
     display: block;
     max-width: 100%;
 }

 /* ══════════════════════════════════════════════
       GLOBAL BUTTON — btn-primary-custom (TechMySpa standard)
    ══════════════════════════════════════════════ */
 .btn-primary-custom {
     text-decoration: none;
 }

 .btn-outline-custom {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: transparent;
     color: var(--primary);
     border: 1.5px solid var(--primary);
     border-radius: 8px;
     padding: 13.5px 22px;
     font-size: 14px;
     font-weight: 600;
     font-family: 'Inter', sans-serif;
     cursor: pointer;
     transition: all .2s;
     text-decoration: none;
     white-space: nowrap;
     line-height: 1;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     -ms-border-radius: 8px;
     -o-border-radius: 8px;
 }

 .btn-outline-custom:hover {
     background: var(--primary);
     color: #fff;
 }

 /* ══════════════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════════════ */
 .spa-navbar {
     position: sticky;
     top: 0;
     z-index: 999;
     background: #fff;
     border-bottom: 1px solid var(--border);
     height: 64px;
     display: flex;
     align-items: center;
     padding: 0 32px;
     justify-content: space-between;
     box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
 }

 .nav-logo {
     display: flex;
     align-items: center;
     gap: 11px;
     text-decoration: none;
 }

 .nav-logo-icon {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 15px;
     font-weight: 800;
     box-shadow: 0 2px 10px rgba(229, 121, 173, .4);
     flex-shrink: 0;
 }

 .nav-logo-text {
     font-size: 17px;
     font-weight: 800;
     color: #111;
     letter-spacing: -.4px;
     line-height: 1.15;
 }

 .nav-logo-text span {
     display: block;
     font-size: 10.5px;
     font-weight: 500;
     color: var(--text-muted);
     letter-spacing: .02em;
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .nav-links a {
     font-size: 14px;
     font-weight: 600;
     color: var(--text-dark);
     text-decoration: none;
     padding: 6px 12px;
     border-radius: 8px;
     transition: color .2s, background .2s;
 }

 .nav-links a:hover {
     color: var(--primary);
     background: var(--primary-light);
 }

 .nav-links a.active {
     color: var(--primary);
     font-weight: 700;
 }

 .nav-actions {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .nav-signin {
     background: transparent;
     border: 1.5px solid var(--border);
     border-radius: 999px;
     padding: 7px 18px;
     font-size: 13.5px;
     font-weight: 600;
     color: var(--text-dark);
     cursor: pointer;
     font-family: 'Inter', sans-serif;
     transition: border-color .2s;
 }

 .nav-signin:hover {
     border-color: #aaa;
 }

 /* hamburger for mobile */
 .nav-hamburger {
     display: none;
     background: none;
     border: none;
     cursor: pointer;
     padding: 4px;
     font-size: 22px;
     color: var(--text-dark);
 }

 /* ══════════════════════════════════════════════
       HERO SECTION — Cinematic Full-Bleed
    ══════════════════════════════════════════════ */

 /* Keyframes */
 @keyframes floatUp {
     from {
         opacity: 0;
         transform: translateY(22px);
     }

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

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes shimmer {
     0% {
         background-position: -200% center;
     }

     100% {
         background-position: 200% center;
     }
 }

 @keyframes pulse-ring {
     0% {
         transform: scale(1);
         opacity: .6;
     }

     100% {
         transform: scale(1.55);
         opacity: 0;
     }
 }

 @keyframes float-card {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 @keyframes scroll-bounce {

     0%,
     100% {
         transform: translateX(-50%) translateY(0);
     }

     50% {
         transform: translateX(-50%) translateY(6px);
     }
 }

 .mem-hero {
     position: relative;
     min-height: 100vh;
     overflow: hidden;
     display: flex;
     align-items: stretch;
 }

 /* ── Full-bleed background image ── */
 .mem-hero-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
 }

 .mem-hero-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center 20%;
     display: block;
     transform: scale(1.04);
     animation: heroZoom 14s ease forwards;
 }

 @keyframes heroZoom {
     from {
         transform: scale(1.08);
     }

     to {
         transform: scale(1.00);
     }
 }

 /* Multi-layer gradient overlay */
 .mem-hero-overlay {
     position: absolute;
     inset: 0;
     z-index: 1;
     background:
         /* dark bottom for content readability */
         linear-gradient(to top,
             rgba(8, 4, 12, .92) 0%,
             rgba(8, 4, 12, .75) 35%,
             rgba(8, 4, 12, .28) 65%,
             transparent 100%),
         /* pink blush from left */
         linear-gradient(105deg,
             rgba(229, 121, 173, .18) 0%,
             transparent 55%),
         /* vignette edges */
         radial-gradient(ellipse at center, transparent 50%, rgba(8, 4, 12, .45) 100%);
 }

 /* Animated pink orb glow — top right */
 .mem-hero-glow {
     position: absolute;
     top: -120px;
     right: -80px;
     width: 560px;
     height: 560px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(229, 121, 173, .22) 0%, transparent 65%);
     z-index: 2;
     pointer-events: none;
     animation: fadeIn 2s ease both;
 }

 /* ── Content container ── */
 .mem-hero-content {
     position: relative;
     z-index: 10;
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     /* padding: 0 72px 80px; */
     /* max-width: 900px; */
     margin-top: 200px;
 }

 /* Eyebrow pill */
 .hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--primary);
     background: rgba(229, 121, 173, .14);
     border: 1px solid rgba(229, 121, 173, .38);
     padding: 7px 16px;
     border-radius: 999px;
     width: fit-content;
     margin-bottom: 22px;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     animation: floatUp .6s ease .1s both;
 }

 .hero-eyebrow i {
     font-size: 12px;
 }

 /* Main heading */
 .hero-title {
     font-size: clamp(44px, 6vw, 82px);
     font-weight: 800;
     line-height: 1.02;
     letter-spacing: -1.5px;
     color: #fff;
     margin-bottom: 20px;
     animation: floatUp .65s ease .2s both;
 }

 /* Shimmer accent word */
 .hero-title .shimmer-word {
     background: linear-gradient(90deg,
             #f7b8d8 0%,
             #e579ad 30%,
             #fff 50%,
             #e579ad 70%,
             #f7b8d8 100%);
     background-size: 200% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: shimmer 3.5s linear 1s infinite;
 }

 /* Description */
 .hero-desc {
     font-size: 16px;
     font-weight: 400;
     line-height: 1.75;
     color: rgba(255, 255, 255, .65);
     max-width: 520px;
     margin-bottom: 38px;
     animation: floatUp .65s ease .3s both;
 }

 /* ── Stat cards row ── */
 .hero-stats {
     display: flex;
     gap: 14px;
     margin-bottom: 40px;
     flex-wrap: wrap;
     animation: floatUp .65s ease .4s both;
 }

 .hero-stat {
     background: rgba(255, 255, 255, .08);
     border: 1px solid rgba(255, 255, 255, .14);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-radius: 16px;
     padding: 16px 22px;
     /* min-width: 110px; */
     transition: background .25s, border-color .25s, transform .25s;
     cursor: default;
 }

 .hero-stat:hover {
     background: rgba(229, 121, 173, .18);
     border-color: rgba(229, 121, 173, .4);
     transform: translateY(-3px);
 }

 .hero-stat-num {
     font-size: 28px;
     font-weight: 800;
     color: #fff;
     line-height: 1;
     margin-bottom: 4px;
     letter-spacing: -.5px;
 }

 .hero-stat-num .unit {
     color: var(--primary);
 }

 .hero-stat-label {
     font-size: 10.5px;
     font-weight: 600;
     color: rgba(255, 255, 255, .45);
     text-transform: uppercase;
     letter-spacing: .08em;
 }

 /* ── CTA row ── */
 .hero-cta-row {
     display: flex;
     align-items: center;
     gap: 14px;
     flex-wrap: wrap;
     margin-bottom: 24px;
     animation: floatUp .65s ease .5s both;
 }

 /* Override btn-primary-custom for hero dark bg */
 .hero-cta-row .btn-primary-custom {
     padding: 14px 30px;
     font-size: 15px;
     border-radius: 14px;
     box-shadow: 0 4px 24px rgba(229, 121, 173, .55);
 }

 /* Pulsing ring behind primary button */
 .hero-btn-wrap {
     position: relative;
     display: inline-flex;
 }

 .btn-adjust {
     margin-left: 115px;
 }

 .hero-btn-wrap::before,
 .hero-btn-wrap::after {
     content: '';
     position: absolute;
     inset: -4px;
     border-radius: 18px;
     border: 2px solid rgba(229, 121, 173, .5);
     animation: pulse-ring 2s ease-out infinite;
     margin-left: 115px;
 }

 .hero-btn-wrap::after {
     animation-delay: 1s;
     margin-left: 115px;
 }

 .hero-ghost-btn {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     background: rgba(255, 255, 255, .1);
     border: 1.5px solid rgba(255, 255, 255, .22);
     color: rgba(255, 255, 255, .85);
     border-radius: 14px;
     padding: 13px 24px;
     font-size: 14px;
     font-weight: 600;
     font-family: 'Inter', sans-serif;
     cursor: pointer;
     transition: all .2s;
     text-decoration: none;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     white-space: nowrap;
 }

 .hero-ghost-btn:hover {
     background: rgba(255, 255, 255, .18);
     border-color: rgba(255, 255, 255, .4);
     color: #fff;
     transform: translateY(-2px);
 }

 /* Trust note */
 .hero-trust-note {
     font-size: 15px;
     color: rgba(255, 255, 255, .35);
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     animation: floatUp .65s ease .58s both;
 }

 .hero-trust-note i {
     color: var(--primary);
     opacity: .8;
     font-size: 13px;
 }

 .trust-dot {
     color: rgba(255, 255, 255, .2);
 }

 /* ── Floating cards (right side) ── */
 .hero-float-cards {
     position: absolute;
     right: 72px;
     bottom: 80px;
     z-index: 10;
     display: flex;
     flex-direction: column;
     gap: 14px;
     animation: floatUp .7s ease .35s both;
 }

 .hfc-card {
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .18);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-radius: 18px;
     padding: 16px 20px;
     display: flex;
     align-items: center;
     gap: 14px;
     min-width: 240px;
     transition: background .25s, transform .25s;
 }

 .hfc-card:hover {
     background: rgba(255, 255, 255, .16);
     transform: translateX(-4px);
 }

 .hfc-card:nth-child(1) {
     animation: float-card 5s ease-in-out 1.2s infinite;
 }

 .hfc-card:nth-child(2) {
     animation: float-card 5s ease-in-out 2s infinite;
 }

 .hfc-card:nth-child(3) {
     animation: float-card 5s ease-in-out 2.8s infinite;
 }

 .hfc-icon {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     flex-shrink: 0;
 }

 .hfc-icon.pink {
     background: rgba(229, 121, 173, .25);
     color: #f7b8d8;
 }

 .hfc-icon.gold {
     background: rgba(201, 151, 42, .25);
     color: #f0d06a;
 }

 .hfc-icon.white {
     background: rgba(255, 255, 255, .15);
     color: #fff;
 }

 .hfc-text strong {
     display: block;
     font-size: 14px;
     font-weight: 700;
     color: #fff;
     line-height: 1.2;
     margin-bottom: 2px;
 }

 .hfc-text span {
     font-size: 11.5px;
     color: rgba(255, 255, 255, .5);
 }

 /* ── Scroll indicator ── */
 .hero-scroll-hint {
     position: absolute;
     bottom: 32px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     opacity: .5;
     animation: scroll-bounce 2.2s ease-in-out 2s infinite;
     cursor: pointer;
     transition: opacity .2s;
 }

 .hero-scroll-hint:hover {
     opacity: .9;
 }

 .hero-scroll-hint span {
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: #fff;
 }

 .scroll-line {
     width: 1.5px;
     height: 36px;
     background: linear-gradient(to bottom, rgba(229, 121, 173, .8), transparent);
     border-radius: 999px;
 }

 /* ── Responsive hero ── */
 @media (max-width: 1100px) {
     .mem-hero-content {
         padding: 0 48px 72px;
         max-width: 700px;
     }

     .hero-float-cards {
         right: 40px;
         bottom: 72px;
     }
 }

 @media (max-width: 900px) {
     .hero-float-cards {
         display: none;
     }

     .mem-hero-content {
         padding: 0 36px 72px;
         max-width: 100%;
     }
 }

 @media (max-width: 640px) {
     .mem-hero-content {
         padding: 0 22px 64px;
     }

     .hero-title {
         letter-spacing: -.8px;
     }

     .hero-stats {
         gap: 10px;
     }

     .hero-stat {
         padding: 13px 16px;
         min-width: 90px;
     }

     .hero-stat-num {
         font-size: 22px;
     }

     .hero-cta-row {
         flex-direction: column;
         align-items: flex-start;
     }

     .hero-cta-row .btn-primary-custom,
     .hero-ghost-btn {
         width: 100%;
         justify-content: center;
     }

     .hero-scroll-hint {
         display: none;
     }
 }

 .trust-dot {
     color: rgba(255, 255, 255, .2);
 }

 /* ══════════════════════════════════════════════
       PERKS BAR
    ══════════════════════════════════════════════ */
 .perks-bar {
     background: var(--text-dark);
     display: flex;
     overflow-x: auto;
     scrollbar-width: none;
 }

 .perks-bar::-webkit-scrollbar {
     display: none;
 }

 .perks-inner {
     display: flex;
     min-width: 100%;
 }

 .perk-item {
     flex: 1;
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 18px 24px;
     border-right: 1px solid rgba(255, 255, 255, .07);
     transition: background .2s;
     cursor: default;
     min-width: 200px;
 }

 .perk-item:last-child {
     border-right: none;
 }

 .perk-item:hover {
     background: rgba(229, 121, 173, .08);
 }

 .perk-icon {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: rgba(229, 121, 173, .14);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     font-size: 17px;
     flex-shrink: 0;
 }

 .perk-text strong {
     display: block;
     font-size: 16px;
     font-weight: 700;
     color: rgba(255, 255, 255, .88);
     margin-bottom: 1px;
 }

 .perk-text span {
     font-size: 13.5px;
     color: rgba(255, 255, 255, .42);
 }

 /* ══════════════════════════════════════════════
       SECTION HEADER (reusable)
    ══════════════════════════════════════════════ */
 .section-header {
     text-align: center;
     margin-bottom: 52px;
 }

 .section-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--primary);
     margin-bottom: 14px;
 }

 .section-title {
     font-size: clamp(30px, 3.5vw, 46px);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -.6px;
     color: var(--text-dark);
     margin-bottom: 12px;
 }

 .section-title span {
     color: var(--primary);
 }

 .section-sub {
     font-size: 15px;
     color: var(--text-muted);
     max-width: 500px;
     margin: 0 auto;
     line-height: 1.7;
 }

 /* ══════════════════════════════════════════════
       MEMBERSHIP CARDS SECTION
    ══════════════════════════════════════════════ */
 .mem-plans-section {
     padding: 50px 0 50px;
     background: var(--bg-soft);
 }

 .mem-cards-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px;
     align-items: start;
 }

 /* ── Single Plan Card ── */
 .mem-card {
     background: #fff;
     border-radius: 24px;
     border: 1.5px solid var(--border);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
     transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
 }

 .mem-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
 }

 .mem-card.featured {
     border-color: var(--gold-border);
     box-shadow: 0 6px 30px rgba(201, 151, 42, .18);
     transform: scale(1.03);
 }

 .mem-card.featured:hover {
     transform: scale(1.03) translateY(-10px);
     box-shadow: 0 24px 70px rgba(201, 151, 42, .22);
 }

 /* Top stripe */
 .card-stripe {
     height: 4px;
     width: 100%;
     display: block;
 }

 .stripe-pink {
     background: linear-gradient(90deg, #e579ad, #f7b8d8, #e579ad);
 }

 .stripe-gold {
     background: linear-gradient(90deg, #b8912a, #f0d06a, #b8912a);
 }

 .stripe-rose {
     background: linear-gradient(90deg, #8b2252, #e579ad, #8b2252);
 }

 /* Card image */
 .card-img-wrap {
     width: 100%;
     height: 200px;
     overflow: hidden;
     position: relative;
 }

 .card-img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s ease;
 }

 .mem-card:hover .card-img-wrap img {
     transform: scale(1.06);
 }

 /* Image overlay gradient */
 .card-img-wrap::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 60px;
     background: linear-gradient(to top, rgba(0, 0, 0, .18), transparent);
 }

 /* Badge on image */
 .card-img-badge {
     position: absolute;
     top: 13px;
     left: 13px;
     z-index: 1;
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .1em;
     text-transform: uppercase;
     padding: 5px 12px;
     border-radius: 999px;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 .ib-pink {
     background: rgba(229, 121, 173, .9);
     color: #fff;
 }

 .ib-gold {
     background: rgba(201, 151, 42, .92);
     color: #fff;
 }

 .ib-rose {
     background: rgba(139, 34, 82, .9);
     color: #fff;
 }

 /* Popular ribbon */
 .card-ribbon {
     position: absolute;
     top: 20px;
     right: -32px;
     background: var(--gold);
     color: #fff;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .1em;
     text-transform: uppercase;
     padding: 5px 42px;
     transform: rotate(45deg);
     box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
 }

 /* Card body */
 .card-body {
     padding: 26px 26px 30px;
     display: flex;
     flex-direction: column;
     flex: 1;
 }

 .card-plan-label {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--primary);
     margin-bottom: 7px;
 }

 .card-plan-label.gold {
     color: var(--gold);
 }

 .card-plan-label.rose {
     color: var(--rose);
 }

 .card-plan-name {
     font-size: 22px;
     font-weight: 800;
     color: var(--text-dark);
     line-height: 1.2;
     letter-spacing: -.3px;
     margin-bottom: 8px;
 }

 .card-tagline {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.65;
     margin-bottom: 20px;
 }

 /* Price box */
 .card-price-box {
     border-radius: 14px;
     padding: 14px 16px;
     margin-bottom: 22px;
     display: flex;
     align-items: baseline;
     gap: 12px;
 }

 .cpb-pink {
     background: var(--primary-light);
 }

 .cpb-gold {
     background: var(--gold-light);
 }

 .cpb-rose {
     background: var(--rose-light);
 }

 .card-price {
     font-size: 34px;
     font-weight: 800;
     color: var(--text-dark);
     line-height: 1;
     letter-spacing: -.5px;
 }

 .card-price sup {
     font-size: 16px;
     vertical-align: super;
 }

 .card-price-note {
     font-size: 12px;
     color: var(--text-muted);
     line-height: 1.45;
 }

 /* Perks */
 .perks-label {
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .14em;
     color: #bbb;
     margin-bottom: 12px;
 }

 .card-perks {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 9px;
     margin-bottom: 26px;
     flex: 1;
     padding: 0;
 }

 .card-perks li {
     display: flex;
     align-items: flex-start;
     gap: 9px;
     font-size: 13px;
     color: #333;
     line-height: 1.45;
 }

 .card-perks li i {
     font-size: 14px;
     flex-shrink: 0;
     margin-top: 1px;
 }

 .ci-p {
     color: var(--primary);
 }

 .ci-g {
     color: var(--gold);
 }

 .ci-r {
     color: var(--rose);
 }

 /* Highlighted perk */
 .perk-hi {
     border-radius: 8px;
     padding: 7px 10px;
     margin: 0 -2px;
     font-weight: 700 !important;
 }

 .ph-pink {
     background: var(--primary-light);
     border-left: 3px solid var(--primary);
 }

 .ph-gold {
     background: var(--gold-light);
     border-left: 3px solid var(--gold);
 }

 .ph-rose {
     background: var(--rose-light);
     border-left: 3px solid var(--rose);
 }

 /* Card CTA button */
 .card-cta {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     border: none;
     border-radius: 999px;
     padding: 13px 22px;
     font-size: 14px;
     font-weight: 700;
     font-family: 'Inter', sans-serif;
     cursor: pointer;
     text-decoration: none;
     width: 100%;
     transition: box-shadow .2s, transform .15s, filter .2s;
     box-shadow: 0 2px 10px rgba(229, 121, 173, .3);
     line-height: 1;
 }

 .card-cta:hover {
     filter: brightness(.92);
     transform: translateY(-1px);
 }

 .cta-pink {
     background: var(--primary);
     color: #fff;
 }

 .cta-gold {
     background: var(--gold);
     color: #fff;
     box-shadow: 0 2px 10px rgba(201, 151, 42, .3);
 }

 .cta-rose {
     background: var(--rose);
     color: #fff;
     box-shadow: 0 2px 10px rgba(139, 34, 82, .25);
 }

 .card-cta .btn-icon {
     width: 22px;
     height: 22px;
     background: rgba(255, 255, 255, .25);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
 }

 /* ══════════════════════════════════════════════
       GOLD MEMBERSHIP SPOTLIGHT
    ══════════════════════════════════════════════ */
 .gold-spotlight {
     padding: 50px 0;
     background: #fff;
     overflow: hidden;
 }

 .gold-card-wrap {
     background: var(--text-dark);
     border-radius: 28px;
     overflow: hidden;
     display: grid;
     grid-template-columns: 420px 1fr;
     min-height: 380px;
     position: relative;
 }

 /* Gold glow */
 .gold-card-wrap::before {
     content: '';
     position: absolute;
     top: -80px;
     right: -80px;
     width: 350px;
     height: 350px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(201, 151, 42, .22) 0%, transparent 65%);
     pointer-events: none;
 }

 .gold-card-img {
     position: relative;
     overflow: hidden;
 }

 .gold-card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(.75) saturate(1.1);
     transition: transform .6s ease;
 }

 .gold-card-wrap:hover .gold-card-img img {
     transform: scale(1.04);
 }

 .gold-card-img::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, transparent 60%, rgba(15, 15, 15, .8) 100%);
 }

 .gold-card-content {
     padding: 52px 56px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
     z-index: 1;
 }

 .gc-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--gold);
     background: rgba(201, 151, 42, .12);
     border: 1px solid rgba(201, 151, 42, .3);
     padding: 5px 14px;
     border-radius: 999px;
     width: fit-content;
     margin-bottom: 20px;
 }

 .gc-title {
     font-size: clamp(28px, 3vw, 42px);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -.5px;
     color: #fff;
     margin-bottom: 14px;
 }

 .gc-title span {
     color: var(--gold);
 }

 .gc-desc {
     font-size: 14.5px;
     color: rgba(255, 255, 255, .55);
     line-height: 1.72;
     max-width: 420px;
     margin-bottom: 28px;
 }

 .gc-savings-row {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-bottom: 32px;
     flex-wrap: wrap;
 }

 .gc-saving-pill {
     background: rgba(201, 151, 42, .15);
     border: 1px solid rgba(201, 151, 42, .3);
     border-radius: 10px;
     padding: 10px 16px;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .gc-saving-pill .val {
     font-size: 20px;
     font-weight: 800;
     color: var(--gold);
     line-height: 1;
 }

 .gc-saving-pill .lbl {
     font-size: 10px;
     font-weight: 600;
     color: rgba(255, 255, 255, .45);
     text-transform: uppercase;
     letter-spacing: .08em;
 }

 .gc-divider {
     width: 1px;
     height: 40px;
     background: rgba(255, 255, 255, .1);
 }

 .gc-price-block .old-price {
     font-size: 13px;
     color: rgba(255, 255, 255, .35);
     text-decoration: line-through;
     margin-bottom: 2px;
 }

 .gc-price-block .new-price {
     font-size: 36px;
     font-weight: 800;
     color: #fff;
     letter-spacing: -.5px;
     line-height: 1;
 }

 .gc-price-block .new-price sup {
     font-size: 17px;
     vertical-align: super;
 }

 .gc-price-block .price-note {
     font-size: 12px;
     color: rgba(255, 255, 255, .35);
     margin-top: 3px;
 }

 .gc-cta {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--gold);
     color: #fff;
     border: none;
     border-radius: 999px;
     padding: 14px 30px;
     font-size: 14px;
     font-weight: 700;
     font-family: 'Inter', sans-serif;
     cursor: pointer;
     transition: filter .2s, transform .15s;
     text-decoration: none;
     width: fit-content;
     box-shadow: 0 4px 20px rgba(201, 151, 42, .35);
 }

 .gc-cta:hover {
     filter: brightness(.9);
     transform: translateY(-2px);
     color: #fff;
 }

 .gc-cta .btn-icon {
     width: 24px;
     height: 24px;
     background: rgba(255, 255, 255, .25);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
 }

 /* ══════════════════════════════════════════════
       EVENTS SECTION
    ══════════════════════════════════════════════ */
 .events-section {
     padding: 50px 0;
     background: var(--bg-soft);
 }

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

 .events-content-col {}

 .events-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--primary);
     background: var(--primary-light);
     border: 1.5px solid var(--primary-mid);
     padding: 6px 14px;
     border-radius: 999px;
     width: fit-content;
     margin-bottom: 20px;
 }

 .events-title {
     font-size: clamp(30px, 3vw, 44px);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -.5px;
     color: var(--text-dark);
     margin-bottom: 18px;
 }

 .events-title span {
     color: var(--primary);
 }

 .events-desc {
     font-size: 15px;
     color: var(--text-muted);
     line-height: 1.75;
     margin-bottom: 32px;
 }

 .events-features {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-bottom: 36px;
 }

 .event-feat {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 14px;
     font-weight: 600;
     color: var(--text-dark);
 }

 .event-feat-icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: var(--primary-light);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     font-size: 16px;
     flex-shrink: 0;
 }

 .events-img-col {
     position: relative;
 }

 .events-img-col img {
     width: 100%;
     height: 480px;
     object-fit: cover;
     border-radius: 24px;
     display: block;
 }

 .events-img-badge {
     position: absolute;
     bottom: -20px;
     left: -20px;
     background: #fff;
     border-radius: 16px;
     padding: 16px 20px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .eib-icon {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: var(--primary-light);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     font-size: 20px;
 }

 .eib-text strong {
     display: block;
     font-size: 16px;
     font-weight: 800;
     color: #111;
 }

 .eib-text span {
     font-size: 12px;
     color: var(--text-muted);
 }

 /* ══════════════════════════════════════════════
       APPROACH SECTION
    ══════════════════════════════════════════════ */
 .approach-section {
     padding: 50px 0;
     background: #fff;
 }

 .approach-inner {
     display: grid;
     grid-template-columns: 1fr 480px;
     gap: 72px;
     align-items: center;
 }

 .approach-content-col {}

 .approach-title {
     font-size: clamp(30px, 3vw, 44px);
     font-weight: 800;
     letter-spacing: -.5px;
     line-height: 1.1;
     color: var(--text-dark);
     margin-bottom: 40px;
 }

 .approach-title span {
     color: var(--primary);
 }

 .approach-items {
     display: flex;
     flex-direction: column;
     gap: 28px;
     margin-bottom: 36px;
 }

 .approach-item {
     display: flex;
     gap: 18px;
     align-items: flex-start;
 }

 .approach-item-icon {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     background: var(--primary-light);
     border: 1.5px solid var(--primary-mid);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     font-size: 22px;
     flex-shrink: 0;
 }

 .approach-item-text h4 {
     font-size: 17px;
     font-weight: 700;
     color: var(--text-dark);
     margin-bottom: 6px;
 }

 .approach-item-text p {
     font-size: 14px;
     color: var(--text-muted);
     line-height: 1.7;
 }

 .approach-img-col {
     position: relative;
 }

 .approach-img-col img {
     width: 100%;
     height: 560px;
     object-fit: cover;
     border-radius: 24px;
     display: block;
 }

 .approach-img-col::before {
     content: '';
     position: absolute;
     top: -16px;
     right: -16px;
     bottom: 16px;
     left: 16px;
     border: 2px solid var(--primary-mid);
     border-radius: 28px;
     z-index: -1;
 }

 /* ══════════════════════════════════════════════
       TESTIMONIALS
    ══════════════════════════════════════════════ */
 .testimonials-section {
     background: var(--bg-soft);
     padding-bottom: 10px !important;
 }


 /* ══════════════════════════════════════════════
       TRUST STRIP
    ══════════════════════════════════════════════ */
 .trust-strip {
     background: var(--text-dark);
     padding: 56px 0;
 }

 .trust-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1px;
     background: rgba(255, 255, 255, .07);
     border-radius: 20px;
     overflow: hidden;
 }

 .trust-item {
     background: rgba(255, 255, 255, .03);
     padding: 28px 22px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     text-align: center;
     transition: background .2s;
 }

 .trust-item:hover {
     background: rgba(229, 121, 173, .08);
 }

 .trust-icon {
     width: 50px;
     height: 50px;
     border-radius: 14px;
     background: rgba(229, 121, 173, .15);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     font-size: 22px;
 }

 .trust-label {
     font-size: 20px;
     font-weight: 700;
     color: rgba(255, 255, 255, .85);
 }

 .trust-sub {
     font-size: 16px;
     color: rgba(255, 255, 255, .38);
     line-height: 1.55;
 }

 /* ══════════════════════════════════════════════
       CTA BANNER
    ══════════════════════════════════════════════ */
 .cta-banner {
     background: var(--primary-light);
     padding: 50px 0;
 }

 .cta-inner {
     text-align: center;
     max-width: 640px;
     margin: 0 auto;
 }

 .cta-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-size: 12.5px;
     font-weight: 700;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--primary);
     margin-bottom: 18px;
 }

 .cta-title {
     font-size: clamp(28px, 3.5vw, 46px);
     font-weight: 800;
     letter-spacing: -.5px;
     line-height: 1.1;
     color: var(--text-dark);
     margin-bottom: 14px;
 }

 .cta-sub {
     font-size: 16px;
     color: var(--text-muted);
     line-height: 1.7;
     margin-bottom: 34px;
 }

 .cta-phone {
     font-size: 28px;
     font-weight: 800;
     color: var(--primary);
     letter-spacing: -.4px;
     margin-bottom: 28px;
 }

 .cta-btn-row {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     flex-wrap: wrap;
 }

 /* ══════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════ */
 .site-footer {
     background: #f6f6f6;
     border-radius: 30px 30px 0 0;
     padding: 60px 0 28px;
     margin-top: 0;
 }

 .footer-logo-icon {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 20px;
     font-weight: 800;
     margin-bottom: 12px;
 }

 .footer-brand-name {
     font-size: 18px;
     font-weight: 800;
     color: #111;
     letter-spacing: -.3px;
     margin-bottom: 4px;
 }

 .footer-brand-sub {
     font-size: 12px;
     color: var(--text-muted);
 }

 .footer-links {
     display: flex;
     gap: 32px;
     flex-wrap: wrap;
 }

 .footer-links a {
     font-size: 15px;
     font-weight: 600;
     color: #111;
     text-decoration: none;
     transition: color .2s;
 }

 .footer-links a:hover {
     color: var(--primary);
 }

 .footer-divider {
     border: none;
     border-top: 1px solid #ddd;
     margin: 28px 0 20px;
 }

 .footer-bottom-text {
     font-size: 13px;
     color: var(--text-muted);
     margin: 0;
 }

 .social-links {
     display: flex;
     gap: 10px;
 }

 .social-link {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 15px;
     transition: background .2s, transform .15s;
     text-decoration: none;
 }

 .social-link:hover {
     background: var(--primary-dark);
     transform: translateY(-2px);
 }

 /* ══════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════ */
 @media (max-width: 1100px) {

     /* hero handled in its own block above */
     .mem-hero-content {
         padding: 0 48px 72px;
     }

     .gold-card-wrap {
         grid-template-columns: 340px 1fr;
     }

     .approach-inner {
         grid-template-columns: 1fr 400px;
         gap: 48px;
     }
 }

 @media (max-width: 991px) {
     .nav-links {
         display: none;
     }

     .nav-hamburger {
         display: block;
     }

     .mem-cards-grid {
         grid-template-columns: 1fr;
         max-width: 500px;
         margin: 0 auto;
     }

     .mem-card.featured {
         transform: none;
     }

     .mem-card.featured:hover {
         transform: translateY(-10px);
     }

     .gold-card-wrap {
         grid-template-columns: 1fr;
     }

     .gold-card-img {
         height: 280px;
     }

     .events-inner {
         grid-template-columns: 1fr;
     }

     .events-img-col img {
         height: 340px;
     }

     .events-img-badge {
         bottom: -16px;
         left: 16px;
     }

     .approach-inner {
         grid-template-columns: 1fr;
     }

     .approach-img-col {
         order: -1;
     }

     .approach-img-col img {
         height: 360px;
     }

     .approach-img-col::before {
         display: none;
     }

     .testimonials-grid {
         grid-template-columns: 1fr 1fr;
     }

     .trust-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 768px) {

     /* hero handled in its own block */
     .perks-inner {
         min-width: max-content;
     }

     .gold-card-content {
         padding: 36px 28px;
     }

     .testimonials-grid {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 576px) {

     /* hero handled in its own block */
     .cta-btn-row .btn-primary-custom,
     .cta-btn-row .btn-outline-custom {
         width: 100%;
         justify-content: center;
     }

     .cta-btn-row {
         flex-direction: column;
         align-items: center;
     }

     .trust-grid {
         grid-template-columns: 1fr;
     }

     .footer-links {
         gap: 18px;
     }

     .spa-navbar {
         padding: 0 18px;
     }
 }