:root{
  --pink: #ff2d78;
  --pink-dark: #d81b60;
  --pink-tint: #fff0f5;
  --ink: #16121a;
  --ink-soft: #4a4453;
  --bg: #ffffff;
  --bg-alt: #faf7f9;
  --border: #eee2e7;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(22,18,26,0.08);
  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{line-height:1.35;margin:0 0 .5em;font-weight:900;}
p{margin:0 0 1em;}

.section-inner, .nav-inner, .stats-inner, .hero-inner, .footer-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.logo{font-weight:900; font-size:1.15rem; letter-spacing:.02em;}
.logo span{color:var(--pink);}
.nav-links{display:flex; gap:28px;}
.nav-links a{font-weight:500; font-size:.95rem; color:var(--ink-soft);}
.nav-links a:hover{color:var(--pink);}
.nav-cta{white-space:nowrap;}
@media (max-width:820px){ .nav-links{display:none;} }

/* BUTTONS */
.btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  border:2px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--pink); color:#fff; box-shadow:0 6px 18px rgba(255,45,120,0.35);}
.btn-primary:hover{background:var(--pink-dark); transform:translateY(-1px);}
.btn-ghost{color:var(--ink); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--pink); color:var(--pink);}
.btn-outline{border-color:var(--pink); color:var(--pink);}
.btn-outline:hover{background:var(--pink); color:#fff;}
.btn-lg{padding:16px 30px; font-size:1.05rem;}

/* HERO */
.hero{
  padding:96px 0 72px;
  background:linear-gradient(180deg, var(--pink-tint) 0%, #fff 100%);
  text-align:center;
}
.hero-inner{max-width:820px;}
.eyebrow{
  color:var(--pink-dark); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; font-size:.8rem; margin-bottom:14px;
}
.eyebrow.center{text-align:center;}
.hero h1{font-size:clamp(1.8rem, 4vw, 2.7rem);}
.hl{color:var(--pink);}
.hero-sub{
  font-size:1.05rem; color:var(--ink-soft); max-width:640px; margin:0 auto 28px;
}
.hero-cta{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:12px;
}
.hero-note{font-size:.85rem; color:var(--ink-soft);}

/* STATS STRIP */
.stats{background:var(--ink); color:#fff; padding:36px 0;}
.stats-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; text-align:center;}
.stat{flex:1; min-width:140px;}
.stat-num{display:block; font-size:2rem; font-weight:900; color:var(--pink);}
.stat-label{display:block; font-size:.85rem; color:#cfc7d1; margin-top:4px;}

/* SECTIONS GENERIC */
.section{padding:88px 0;}
.section-inner h2{font-size:clamp(1.5rem,3vw,2.1rem);}
.center{text-align:center;}
.section-sub{color:var(--ink-soft); max-width:600px; margin:0 auto 48px;}
.pain{background:var(--bg-alt);}
.pain h2, .pain .card h3{color:#2563eb;}

/* GRIDS / CARDS */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.grid-6{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
@media (max-width:900px){
  .grid-3, .grid-2{grid-template-columns:1fr;}
  .grid-6{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:520px){
  .grid-6{grid-template-columns:repeat(2,1fr);}
}

.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 24px; box-shadow:var(--shadow);
}
.card-icon{font-size:2rem; margin-bottom:12px;}
.card h3{font-size:1.1rem;}
.card p{color:var(--ink-soft); font-size:.95rem; margin:0;}

/* P.I.N.K. */
.pink-section{background:var(--pink-tint);}
.pink-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:16px;}
@media (max-width:900px){ .pink-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .pink-grid{grid-template-columns:1fr;} }
.pink-card{
  background:#fff; border-radius:var(--radius); padding:28px 22px;
  box-shadow:var(--shadow); text-align:center;
}
.pink-letter{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--pink); color:#fff; font-weight:900; font-size:1.3rem;
  margin-bottom:14px;
}
.pink-card h3{font-size:1.05rem;}
.pink-card p{font-size:.9rem; color:var(--ink-soft); margin:0;}

/* FLYWHEEL */
.flywheel-item{
  background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:24px 16px; text-align:center; font-weight:700; font-size:.95rem;
}
.fw-num{display:block; color:var(--pink); font-weight:900; font-size:1.3rem; margin-bottom:8px;}

/* PROOF */
.case-card{
  background:var(--bg-alt); border-radius:var(--radius); padding:28px 24px;
  border:1px solid var(--border);
}
.case-quote{font-size:1.05rem; margin-bottom:8px;}
.case-quote strong{color:var(--pink-dark);}
.case-detail{font-size:.85rem; color:var(--ink-soft); margin:0;}

/* COURSES */
.course-card{
  border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 28px; position:relative; background:#fff;
}
.course-featured{border:2px solid var(--pink); box-shadow:var(--shadow);}
.badge{
  position:absolute; top:-14px; left:28px;
  background:var(--pink); color:#fff; font-size:.75rem; font-weight:700;
  padding:4px 14px; border-radius:999px;
}
.course-desc{color:var(--ink-soft); font-size:.95rem;}

/* OFFER */
.offer{background:var(--ink); color:#fff; text-align:center;}
.offer-inner{max-width:680px;}
.offer h2{color:#fff;}
.offer-value{color:var(--pink); font-weight:700; margin-bottom:16px;}
.offer-desc{color:#cfc7d1; margin-bottom:32px;}

/* FOOTER */
.footer{padding:36px 0; border-top:1px solid var(--border);}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.footer-links{display:flex; gap:20px;}
.footer-links a{font-size:.9rem; color:var(--ink-soft);}
.footer-links a:hover{color:var(--pink);}