:root{
  --cream:#f8f1e7;
  --paper:#fbf7ef;
  --paper-2:#f3eadf;
  --ink:#4a4038;
  --muted:#857768;
  --line:#d8c7b5;
  --taupe:#a99075;
  --taupe-dark:#806a55;
  --gold:#c2a277;
  --sage:#8d988a;
  --shadow:0 18px 50px rgba(83,64,45,.12);
  --radius:34px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 12%,rgba(211,188,150,.18),transparent 26%),
    radial-gradient(circle at 88% 70%,rgba(181,154,119,.12),transparent 32%),
    linear-gradient(180deg,#fbf8f1 0%,#f3eadf 100%);
  font-family:"Noto Serif TC",serif;
  letter-spacing:.06em;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(rgba(103,84,66,.13) .7px, transparent .7px);
  background-size:18px 18px;
  opacity:.35;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.site-header{
  height:82px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(22px,4vw,64px);
  background:rgba(251,247,239,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(192,171,146,.45);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:12px;font-family:"Cormorant Garamond",serif;font-size:31px;font-weight:600;letter-spacing:.02em;color:#473d35;white-space:nowrap}
.sun-mark{font-size:34px;color:#aa967c;font-weight:400}
.nav-links{display:flex;align-items:center;gap:36px;font-size:15px;font-weight:600;color:#6b5d50}
.nav-links a{position:relative;padding:28px 0 25px}
.nav-links a:after{content:"";position:absolute;left:0;right:0;bottom:18px;margin:auto;width:0;height:1px;background:#7d6a58;transition:.25s}
.nav-links a:hover:after,.nav-links .active:after{width:100%}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:700;transition:.25s;letter-spacing:.09em}
.nav-cta{background:#a99075;color:white;border:1px solid #c9b8a6;padding:12px 26px;box-shadow:0 8px 20px rgba(100,74,45,.16)}
.nav-cta:hover,.btn-fill:hover{transform:translateY(-2px);filter:brightness(.98)}
.section-photo-hero{
  min-height:420px;
  display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(rgba(70,48,30,.14),rgba(70,48,30,.12)),url('assets/luna-background-img.jpg');
  background-size:cover;background-position:center;
  padding:58px 22px;
  position:relative;
}
.section-photo-hero:before{
  content:"";position:absolute;inset:0;background:rgba(255,250,242,.16);backdrop-filter:saturate(.9);pointer-events:none;
}

.hero-card {
position: relative;
    width: min(880px, 82%);
    min-height: 390px;
    margin: 0 auto;
    padding: 100px 150px;
    background-image: url(assets/hero-frame.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
    align-items: center;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  text-align: center;
}

.hero-content h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 500;
  letter-spacing: 2px;
  color: #4d433b;
  margin: 0 0 18px;
}

.hero-content h2 {
  font-family: "Noto Serif TC", serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  letter-spacing: 5px;
  color: #6f6258;
  margin: 0 0 18px;
}

.hero-content p {
  font-size: 16px;
  letter-spacing: 2px;
  color: #8a7a6d;
  margin-bottom: 34px;
}

@media (max-width: 768px) {
  .hero-card {
    width: 100%;
    min-height: 360px;
    padding: 60px 28px;
    background-size: 100% 100%;
    background-image: url(assets/luna-frame-mobile.png);
  }

  .hero-content h1 {
    font-size: 40px;
    letter-spacing: 1px;
  }

  .hero-content h2 {
    font-size: 20px;
    letter-spacing: 3px;
  }

  .hero-content p {
    font-size: 14px;
    letter-spacing: 1px;
  }
  
  .plan-list .plan-text span {
    display: block;  
  }
}

.contact-cta-section {
  width: 100%;
  padding: 60px 4%;
  background: #f5eee4;
}

.contact-cta-card {
  width: 100%;
  max-width: 1180px;
  min-height: 230px;
  margin: 0 auto;
  border-radius: 28px;

  background-image: url("assets/contact-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 45px 30px;
  box-shadow: 0 18px 45px rgba(98, 76, 53, 0.12);
  overflow: hidden;
}

.contact-dots {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
}

.contact-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #b79a73;
  display: inline-block;
}

.contact-dots span.half {
  background: linear-gradient(
    to right,
    #b79a73 50%,
    transparent 50%
  );
  border: 2px solid #b79a73;
}

.contact-cta-card h2 {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: 4px;
  color: #5f5148;
  margin: 0 0 28px;
  line-height: 1.4;
  font-family: "Noto Serif TC", "Songti TC", serif;
}

.contact-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 170px;
  height: 56px;
  padding: 0 38px;
  border-radius: 999px;

  background: #b09778;
  color: #ffffff;
  text-decoration: none;

  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;

  transition: all 0.3s ease;
}

.contact-cta-btn:hover {
  background: #967b5f;
  transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 768px) {
  .contact-cta-section {
    padding: 40px 18px;
  }

  .contact-cta-card {
    min-height: 260px;
    border-radius: 24px;
    padding: 40px 22px;

    background-size: cover;
    background-position: center;
  }

  .contact-dots {
    gap: 12px;
    margin-bottom: 18px;
  }

  .contact-dots span {
    width: 9px;
    height: 9px;
  }

  .contact-cta-card h2 {
    font-size: 21px;
    letter-spacing: 2px;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .contact-cta-btn {
    min-width: 145px;
    height: 48px;
    font-size: 16px;
  }
}

.client-love-section {
  position: relative;
  padding: 90px 5% 100px;
  background:
    radial-gradient(circle at top left, rgba(203, 181, 139, 0.18), transparent 35%),
    radial-gradient(circle at bottom right, rgba(203, 181, 139, 0.14), transparent 32%),
    #f2eadf;
  overflow: hidden;
}

.client-love-section::before {
  content: "✦ ✧ ✦ ✧ ✦";
  position: absolute;
  top: 42px;
  left: 8%;
  font-size: 28px;
  letter-spacing: 22px;
  color: rgba(185, 165, 116, 0.38);
  pointer-events: none;
}

.client-love-section::after {
  content: "✦ ✧ ✦";
  position: absolute;
  bottom: 42px;
  left: 120px;
  font-size: 26px;
  letter-spacing: 18px;
  color: rgba(185, 165, 116, 0.32);
  pointer-events: none;
}

.client-love-inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.client-love-title {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 500;
  letter-spacing: 4px;
  color: #51463e;
  margin: 0 0 12px;
}

.client-love-subtitle {
  font-family: "Noto Serif TC", serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: #8a7b6d;
  margin: 0 0 42px;
}

.review-scroll {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 4px 28px;
  scrollbar-width: thin;
  scrollbar-color: #b59b7d #eee2d5;
}

.review-scroll::-webkit-scrollbar {
  height: 8px;
}

.review-scroll::-webkit-scrollbar-track {
  background: #eee2d5;
  border-radius: 999px;
}

.review-scroll::-webkit-scrollbar-thumb {
  background: #b59b7d;
  border-radius: 999px;
}

.review-card {
  flex: 0 0 310px;
  scroll-snap-align: center;
  border-radius: 24px;
  overflow: hidden;
  background: #f8f2eb;
  border: 1px solid rgba(199, 178, 151, 0.75);
  box-shadow: 0 16px 36px rgba(103, 82, 60, 0.14);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.review-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 46px rgba(103, 82, 60, 0.22);
}

.review-card img {
  display: block;
  width: 100%;
  height: auto;
}

.client-love-note {
  margin: 34px 0 0;
  font-family: "Noto Serif TC", serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: 5px;
  color: #5e554e;
}

@media (max-width: 768px) {

  .client-love-title {
    font-size: 35px;
    padding-top: 30px;
  }

  .client-love-subtitle {
    padding: 0 24px;
    font-size: 18px;
    line-height: 1.8;
  }

  .review-scroll {
    gap: 18px;
    padding-left: 0px;
    padding-right: 22px;
  }

  .review-card {
    flex-basis: 78vw;
    border-radius: 20px;
  }

  .client-love-note {
    padding: 0 24px;
    font-size: 24px;
    line-height: 1.7;
    letter-spacing: 3px;
  }
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #4f463f;
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 1px;
}

.site-logo img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .site-logo {
    font-size: 22px;
    gap: 8px;
  }

  .site-logo img {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 768px) {
  .site-logo {
    font-size: 22px;
    gap: 8px;
  }

  .site-logo img {
    width: 42px;
    height: 42px;
  }
}

.floating-contact {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(82, 62, 42, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.floating-btn svg {
  width: 27px;
  height: 27px;
  fill: #ffffff;
  display: block;
}

.floating-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(82, 62, 42, 0.3);
}

.floating-btn.whatsapp {
  background: #7d9a74;
}

.floating-btn.telegram {
  background: #9f856d;
}

@media (max-width: 768px) {
  .floating-contact {
    right: 16px;
    bottom: 18px;
    gap: 10px;
  }

  .floating-btn {
    width: 48px;
    height: 48px;
  }

  .floating-btn svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 768px) {
  .floating-contact {
    right: 16px;
    bottom: 18px;
    gap: 10px;
  }

  .floating-btn {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

.intro-image video,
.intro-video {
  width: 100%!important;
  height: 286px;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
  display: block;
  box-shadow: 0 16px 34px rgba(110,87,62,.12);
}


/* =========================
   Luna Floating Music Button
========================= */

.music-toggle {
  position: fixed;
  left: 22px;
  bottom: 24px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 18px;
  border: 1px solid rgba(230, 205, 255, 0.45);
  border-radius: 999px;

  background: rgb(143 114 87);

  color: #f8ecff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;
  transition: all 0.28s ease;
}

.music-toggle:hover {
  transform: translateY(-3px);
}

.music-toggle.playing {
  border-color: rgba(255, 224, 168, 0.7);
  color: #6f4a21!important;
  box-shadow:
    0 0 22px rgba(255, 211, 128, 0.45),
    0 10px 26px rgba(20, 8, 35, 0.45);
}

.music-icon {
  font-size: 17px;
  line-height: 1;
}

.music-text {
  line-height: 1;
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px) {
  .music-toggle {
    left: 16px;
    bottom: 18px;
    padding: 10px 15px;
    font-size: 13px;
  }

  .music-icon {
    font-size: 16px;
  }
}

.music-toggle {
  position: fixed;
  left: 22px;
  bottom: 24px;
  z-index: 999999;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 224, 168, 0.55);

  background: rgb(218 176 86);
  color: #fff4d8;

  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;

  cursor: pointer;
}

.music-toggle.playing {
  background: rgb(246 221 164);
}

.music-icon {
  font-size: 17px;
}

@media (max-width: 768px) {
  .music-toggle {
    left: 16px;
    bottom: 18px;
    padding: 10px 15px;
    font-size: 13px;
  }
}


@media(max-width:560px){
  .intro-image video,
  .intro-video {
    height: 230px;
  }
}

.ornament-corners:after{right:26px;border-right:1px solid #cbb69f;border-radius:0 18px 0 0}
h1,h2,h3,p{margin:0}
h1{font-family:"Cormorant Garamond",serif;font-size:60px;letter-spacing:.035em;font-weight:600;color:#4d4238;line-height:.95}
.hero-kicker{font-size:26px;margin-top:20px;color:#66584b;letter-spacing:.18em; text-align: center;}
.hero-desc{margin:16px auto 0;max-width:660px;color:#7b6b5e;font-size:16px;line-height:1.9;text-align: center;}
.button-row{display:flex;gap:22px;justify-content:center;margin-top:31px;flex-wrap:wrap}.btn{min-width:170px;padding:14px 32px;border:1px solid #b9a58f}.btn-fill{background:#a99075;color:#fff}.btn-outline{background:rgba(255,255,255,.45);color:#6f5e4f}
.section-wrap{max-width:1120px;margin:0 auto;padding:54px 24px}.intro{display:grid;grid-template-columns:1.04fr 1fr;gap:60px;align-items:center;}
.intro-image img{border-radius:24px;box-shadow:0 16px 34px rgba(110,87,62,.12);width:100%;height:286px;object-fit:cover}.intro-copy{position:relative;min-height:286px;padding-right:70px}.spark{color:var(--gold);font-size:20px}.intro-copy h2,.section-heading h2,.plan-card h2,.reviews h2,.final-cta h2{font-family:"Cormorant Garamond","Noto Serif TC",serif;font-size:clamp(37px,4vw,52px);font-weight:500;letter-spacing:.18em;color:#50443b}.subline{margin-top:18px;font-size:19px;color:#76685c}.accent-line{margin-top:13px;font-size:18px;color:#89725b}.intro-copy>p:last-of-type{margin-top:22px;line-height:1.5;color:#76695e;font-size:16px}.line-art{position:absolute;right:0;bottom:0;width:180px;opacity:.24;filter:sepia(.4)}
.soft-band{max-width:none;padding-left:max(24px,calc((100vw - 1120px)/2));padding-right:max(24px,calc((100vw - 1120px)/2));background:rgba(238,225,207,.45);border-block:1px solid rgba(205,187,165,.35)}.section-heading{text-align:center;margin-bottom:30px}.moon-dots{font-family:"Cormorant Garamond",serif;color:#c2a277;letter-spacing:.38em;margin-bottom:8px}.ritual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.ritual-card{min-height:235px;border-radius:22px;overflow:hidden;position:relative;padding:24px;border:1px solid rgba(207,191,174,.9);background-image:linear-gradient(rgba(255,252,246,.18),rgba(255,252,246,.42)),var(--bg);background-size:cover;background-position:center;box-shadow:0 13px 28px rgba(96,69,42,.08)}.ritual-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,250,244,.72),rgba(255,250,244,.4));pointer-events:none}.ritual-icon{position:relative;z-index:1;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;border:1px solid rgba(255,250,242,.7);box-shadow:0 16px 34px rgba(89,65,42,.18), inset 0 1px 10px rgba(255,255,255,.42);overflow:hidden}.ritual-icon:before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,250,242,.45)}.ritual-icon:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.58),transparent 34%);pointer-events:none}.ritual-icon img{position:relative;z-index:1;width:43px;height:43px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(80,58,38,.18))}.ritual-icon.love{background:linear-gradient(145deg,#d0a18f 0%,#b88778 52%,#8f665c 100%)}.ritual-icon.sage{background:linear-gradient(145deg,#aab6a5 0%,#87947f 52%,#687966 100%)}.ritual-icon.wealth{background:linear-gradient(145deg,#d1b17d 0%,#b0905e 52%,#856b43 100%)}.ritual-panel{position:relative;z-index:1;background:rgba(255,252,248,.74);border:1px solid rgba(222,208,192,.8);padding:18px;border-radius:8px;width:100%;box-shadow:0 10px 20px rgba(87,66,47,.06)}.ritual-panel h3{font-size:22px;font-weight:600;color:#5d5045;margin-bottom:10px}.ritual-panel p{font-size:14px;line-height:1.8;color:#79695d}.plan-card{border-radius:38px;padding:44px min(60px,6vw);position:relative}.plan-card:before{content:"✦";position:absolute;left:24%;top:0px;color:#c2a277}.plan-card:after{content:"✦";position:absolute;right:24%;top:0px;color:#c2a277}.plan-card h2{text-align:center;margin-bottom:18px}.plan-list{max-width:880px;margin:0 auto}.plan-row{display:grid;grid-template-columns:54px 1fr 120px;gap:16px;align-items:center;border-bottom:1px solid rgba(184,163,143,.65);padding:18px 0}.plan-row:last-child{border-bottom:0}.plan-icon{font-size:30px;text-align:center}.plan-text h3{font-size:20px;font-weight:600;color:#5a4d42;letter-spacing:.12em}.plan-text p{font-size:14px;color:#8a7a6d;line-height:1.7;margin-top:4px}.plan-row strong{font-family:"Cormorant Garamond",serif;font-size:36px;font-weight:500;color:#51463d;text-align:right;letter-spacing:.03em}.reviews{text-align:center;position:relative}.reviews h2{font-size:38px;letter-spacing:.08em}.review-wrap{position:relative;margin:28px auto 22px;max-width:920px;min-height:250px;border-radius:20px;overflow:hidden;border:1px solid rgba(216,199,181,.7);background:#fbf6ee}.review-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52}.chat-card{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;padding:28px 42px;text-align:left}.bubble{border-radius:18px;padding:13px 17px;font-size:14px;line-height:1.75;box-shadow:0 8px 18px rgba(90,70,50,.06)}.bubble.grey{background:rgba(255,255,255,.76);grid-column:1}.bubble.taupe{background:rgba(220,199,174,.76);grid-column:2;color:#69584a}.review-caption{font-size:24px;letter-spacing:.16em;color:#67594e}.final-cta{padding-top:38px}.cta-card{position:relative;text-align:center;border:1px solid rgba(203,183,162,.8);border-radius:28px;padding:36px 24px 32px;overflow:hidden;background:linear-gradient(90deg,rgba(244,232,216,.78),rgba(251,247,238,.92),rgba(244,232,216,.78));box-shadow:var(--shadow)}.cta-card h2{font-size:35px;letter-spacing:.12em;margin-bottom:24px}.decor{position:absolute;top:0;height:100%;width:27%;object-fit:cover;opacity:.55}.decor-left{left:0}.decor-right{right:0}.cta-card>*:not(.decor){position:relative;z-index:1}.footer{display:grid;align-items:center;justify-content:center;gap:36px;padding:30px 10px;color:#88786b;font-size:14px}.footer img{width:80px;opacity:.45}.footer span{display:inline-block;width:1px;height:22px;background:#c9b9a9;margin:0 28px;vertical-align:middle}
@media(max-width:900px){.site-header{height:auto;padding:18px 20px;gap:16px;flex-wrap:wrap}.brand{font-size:25px}.nav-links{display: none;}.nav-links a{padding:8px 0}.nav-links a:after{bottom:0}.intro{grid-template-columns:1fr;gap:28px}.intro-copy{padding-right:0}.line-art{display:none}.ritual-grid{grid-template-columns:1fr}.plan-row{grid-template-columns:40px 1fr 85px;text-align: center;}.chat-card{grid-template-columns:1fr;padding:22px}.bubble.grey,.bubble.taupe{grid-column:1}.hero-card{padding:100px 22px}.hero-kicker{font-size:18px;text-align: center;}.section-wrap{padding:42px 18px}.footer{flex-direction:column;gap:10px;text-align:center}.footer span{display:none}}
@media(max-width:560px){h1{font-size:25px!important; text-align: center;}.section-photo-hero{min-height:460px;background-attachment: fixed;background-image:linear-gradient(rgb(248 230 221 / 78%), rgb(206 183 165 / 57%)), url(assets/luna-about-img.png);}.intro-image img{height:230px}.plan-row strong{font-size:28px}.plan-row{grid-template-columns:1fr}.plan-row strong{text-align:center}.nav-cta{display:none}.ritual-panel{width:100%}.review-caption{font-size:18px}.cta-card h2{font-size:25px}.decor{opacity:.26;width:36%}}


/* cleaner luxury ritual icon sizing */
@media(max-width:560px){.ritual-icon{width:66px;height:66px}.ritual-icon img{width:38px;height:38px}}