/* Extracted homepage styles (visual parity with index.html inline styles) */
body {
  margin: 0;
  padding: 0;
  font-family: 'Source Serif Pro', serif;
  background: linear-gradient(180deg, #f7f7f7 0%, #eeeeee 20%, #e2e2e2 40%, #a7c3b8 70%, #255e50 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

.homepage-container { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(5.5rem, 16vh, 7rem) 2rem 2.5rem 2rem; position: relative; }
.homepage-title { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: #2c3e50; margin: 0 0 1rem 0; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.homepage-subtitle { font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: #6c757d; font-weight: 300; max-width: 600px; margin: 0 auto; line-height: 1.6; }

.hero-triangle { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 2.5rem; align-items: start; width: 100%; max-width: 1400px; margin: 2rem auto 0; min-height: 620px; position: relative; z-index: 1; }
.hero-left,
.hero-right { position: relative; z-index: 1; }
.hero-left { padding: 1rem 0 0 0; text-align: center; }
.hero-left .homepage-title { font-size: clamp(2.2rem, 4.2vw, 3.2rem); margin-bottom: .75rem; color: #b58a2c; }
.hero-left .homepage-subtitle { font-size: clamp(1.05rem, 2vw, 1.2rem); max-width: 560px; font-family: 'Cormorant Garamond', serif; color: #255e50; font-weight: 500; }
.membership-banner { display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:10px 16px; border-radius:12px; background: linear-gradient(135deg,#1a4a3e,#2d5a4f); color:#fff; text-decoration:none; box-shadow: 0 10px 30px rgba(26,74,62,.25); transition: transform .2s ease, box-shadow .2s ease; }
.membership-banner:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(26,74,62,.35); color:#fff; }
.membership-banner .banner-text { font-weight:700; letter-spacing:.2px; }
.hero-right { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: 'health health' 'beauty nutrition'; align-items: center; justify-items: center; gap: 1.5rem; }

.tri-card { width: 500px; height: 340px; border-radius: 50% / 50%; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.25), 0 12px 24px rgba(0,0,0,0.18); transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .5s ease; cursor: pointer; background-size: cover; background-position: center; position: relative; animation: cardFloat1 8s ease-in-out infinite; opacity: 0; transform: translateY(18px); }
.tri-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 44px 100px rgba(0,0,0,0.28), 0 16px 32px rgba(0,0,0,0.2); }
.tri-card .label { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 24px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 85%); color: #fff; font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 600; text-align: center; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.tri-card.health { grid-area: health; background-image: url('/assets/images/service-tuina.jpg'); align-self: start; animation: cardFloat1 14s ease-in-out infinite; }
.tri-card.beauty { grid-area: beauty; background-image: url('/assets/images/service-face.jpg'); align-self: end; justify-self: end; animation: cardFloat2 16s ease-in-out infinite; animation-delay: 1s; }
.tri-card.nutrition { grid-area: nutrition; background-image: url('/assets/images/fitline-nutrition.jpg'); align-self: end; justify-self: start; animation: cardFloat3 12s ease-in-out infinite; animation-delay: 2s; }
.tri-card.beauty .label { background: linear-gradient(180deg, rgba(233,30,99,0) 0%, rgba(233,30,99,.65) 90%); }
.tri-card.health .label { background: linear-gradient(180deg, rgba(37,94,80,0) 0%, rgba(37,94,80,.65) 90%); }
.tri-card.nutrition .label { background: linear-gradient(180deg, rgba(255,152,0,0) 0%, rgba(255,152,0,.65) 90%); }

@keyframes cardFloat1 { 0%,100%{transform:translate(0,0) rotate(0deg);} 25%{transform:translate(4px,-3px) rotate(1deg);} 50%{transform:translate(-2px,-6px) rotate(-0.5deg);} 75%{transform:translate(-4px,2px) rotate(0.5deg);} }
@keyframes cardFloat2 { 0%,100%{transform:translate(0,0) rotate(0deg);} 33%{transform:translate(-3px,2px) rotate(-1deg);} 66%{transform:translate(3px,-4px) rotate(0.5deg);} }
@keyframes cardFloat3 { 0%,100%{transform:translate(0,0) rotate(0deg);} 20%{transform:translate(3px,-2px) rotate(0.5deg);} 40%{transform:translate(-3px,-4px) rotate(-0.5deg);} 60%{transform:translate(-4px,1px) rotate(1deg);} 80%{transform:translate(1px,3px) rotate(-0.5deg);} }

/* entrance reveal */
body.page-loaded .hero-left, body.page-loaded .tri-card { transition: opacity .8s ease, transform .8s cubic-bezier(0.22,1,0.36,1); }
body.page-loaded .hero-left.enter, body.page-loaded .tri-card.enter { opacity: 1; transform: translateY(0); }
.hero-left { opacity: 0; transform: translateY(18px); }

@media (max-width: 1200px) { .hero-triangle { grid-template-columns: 1fr 1.2fr; min-height: 520px; } .tri-card { width: 440px; height: 280px; } }
@media (max-width: 980px) { .hero-triangle { grid-template-columns: 1fr; min-height: auto; } .hero-right { grid-template-columns: 1fr; grid-template-areas: 'health' 'beauty' 'nutrition'; } .tri-card { width: 70%; max-width: 420px; aspect-ratio: 4/3; height: auto; margin: 16px auto; border-radius: 60% / 45%; } }
@media (max-width: 600px) { .tri-card { width: 50%; max-width: 300px; aspect-ratio: 5/4; border-radius: 65% / 48%; margin: 14px auto; } }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; max-width: 1200px; width: 100%; margin-top: 2rem; }
.service-card { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 3rem 2rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all .4s cubic-bezier(0.4,0,0.2,1); cursor: pointer; position: relative; overflow: hidden; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--service-color), var(--service-color-light)); transform: scaleX(0); transition: transform .3s ease; }
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.service-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 2.5rem; color:#fff; background: linear-gradient(135deg, var(--service-color), var(--service-color-light)); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.service-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 600; color:#2c3e50; margin: 0 0 1rem 0; }
.service-description { font-size: 1rem; color:#6c757d; line-height: 1.6; margin:0 0 2rem 0; }
.service-cta { background: linear-gradient(135deg, var(--service-color), var(--service-color-light)); color:#fff; padding:12px 24px; border-radius:25px; text-decoration:none; font-weight:600; font-size:1rem; transition: all .3s ease; display:inline-block; border:0; cursor:pointer; }
.service-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); color:#fff; text-decoration:none; }

.service-card.health { --service-color:#255e50; --service-color-light:#2d6a5b; }
.service-card.beauty { --service-color:#e91e63; --service-color-light:#f06292; }
.service-card.nutrition { --service-color:#ff9800; --service-color-light:#ffb74d; }

.bg-decoration { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:0; }
.bg-circle { position:absolute; border-radius:50%; background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1)); backdrop-filter: blur(2px); animation: randomFloat 10s ease-in-out infinite; }

/* Responsive container tweaks */
@media (max-width: 768px) {
  .homepage-container { padding: calc(80px + 2rem) 1.5rem 2.5rem 1.5rem; }
  .homepage-title { font-size: 2.5rem; }
  .homepage-subtitle { font-size: 1.1rem; }
  .services-grid { grid-template-columns: 1fr; gap: 2rem; }
  .service-card { padding: 2rem 1.5rem; }
}