/* Base */
:root{
  --bg: #f8fafc; /* slate-50 */
  --text: #0f172a; /* slate-900 */
  --muted: #475569; /* slate-600 */
  --card: #ffffff;
  --border: #e2e8f0; /* slate-200 */
  --primary: #4f46e5; /* indigo-600 */
  --primary-700: #4338ca; /* indigo-700 */
  --accent: #f59e0b; /* amber-500 */
  --rose: #e11d48; /* rose-600 */
  --rose-700: #be123c;
  --gold-1: #f59e0b; /* amber-500 */
  --gold-2: #fde68a; /* amber-200 */
  --dark: #0b1020; /* 深色背景 */
  --dark-soft: #0f172a; /* slate-900 */
  --elevate: 0 2px 10px rgba(0,0,0,.04);
  --shadow-strong: 0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color:var(--text); background:var(--bg);
}
img{max-width:100%; display:block}

/* Layout */
.container{max-width:1120px; margin-inline:auto; padding:0 16px}
.hero > .container{max-width:none; width:100%; padding-left:clamp(16px, 4vw, 64px); padding-right:clamp(16px, 4vw, 64px)}
.section{padding:64px 0}
.section-alt{background:#fff; border-block:1px solid var(--border)}
.grid2{display:grid; grid-template-columns:1fr; gap:24px}
.grid3{display:grid; grid-template-columns:1fr; gap:16px}
.row{display:flex; gap:8px}
.center{text-align:center}
.row.center{justify-content:center}
.middle{align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.gap-s{gap:8px} .gap-m{gap:16px} .gap-l{gap:24px} .gap-xl{gap:40px}
.mt-s{margin-top:8px} .mt-m{margin-top:16px} .mt-l{margin-top:24px}
.mb-1{margin-bottom:4px}
.narrow{max-width:720px; margin-inline:auto}
.text-sm{font-size:14px} .text-xs{font-size:12px}
.text-muted{color:var(--muted)}

/* Top bar */
.topbar{position:sticky; top:0; z-index:20; backdrop-filter:saturate(120%) blur(6px); background:rgba(255,255,255,.8); border-bottom:1px solid var(--border)}
.topbar .container{padding:12px 16px}
.topbar-info{display:flex; align-items:center; gap:6px; font-size:14px}
.topbar-chips{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.topbar-chip{display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:999px; background:rgba(15,23,42,.08); color:#0f172a; font-weight:600}
.topbar-chip.accent{background:linear-gradient(90deg, #fde68a, #f59e0b); color:#78350f}
.sparkle{color:#f59e0b}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:600; color:white; background:var(--primary); transition:transform .2s, background .2s}
.btn:hover{background:var(--primary-700); transform:translateY(-1px)}
.btn.pill{border-radius:999px}
.btn.lg{padding:16px 24px; font-size:16px}
.btn.sm{padding:8px 14px; font-size:14px}
.btn-primary{background:var(--primary)}
.btn-danger{background:var(--rose); box-shadow:0 8px 24px rgba(225,29,72,.25)}
.btn-danger:hover{background:var(--rose-700)}
.btn.block{display:flex; width:100%}
.btn-outline{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--primary); color:var(--primary)}
.quick-links{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px}
.quick-link{display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:999px; border:1px solid rgba(148,163,184,.35); color:#e0e7ff; background:rgba(15,23,42,.35); text-decoration:none; font-weight:600; transition:background .2s, color .2s}
.quick-link:hover{background:rgba(96,165,250,.25); color:#bfdbfe}
.still-have-questions{margin-top:20px; color:#e2e8f0; font-size:14px}
.faq-link{color:#60a5fa; text-decoration:underline; font-weight:600}
.faq-link:hover{color:#3b82f6}

/* Hero */
.hero{position:relative; overflow:hidden}
.hero-dark{background:radial-gradient(1200px 500px at -10% -10%, rgba(59,130,246,.15), transparent 60%), radial-gradient(1000px 400px at 110% 10%, rgba(147,51,234,.18), transparent 60%), linear-gradient(180deg, #0b1020, #111827)}
.hero.has-bg{position:relative}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(105%); opacity:.95; z-index:0; pointer-events:none}
.gradient-bg{position:absolute; inset:0; background:linear-gradient(135deg, rgba(79,70,229,.08), rgba(124,58,237,.08), rgba(217,70,239,.08)); pointer-events:none; z-index:1}
.hero-mask{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55)); z-index:1; pointer-events:none}
/* ensure content is above overlays */
.hero > .container{position:relative; z-index:2}
.h1{font-size:36px; line-height:1.08; margin:0}
.title-strong{font-weight:900}
.h2{font-size:28px; line-height:1.2; margin:0}
.h3{font-size:22px; line-height:1.25; margin:0}
.badge-sub{display:inline-block; margin-left:8px; padding:2px 8px; font-size:12px; font-weight:700; color:#92400e; background:#fffbeb; border:1px solid #fef3c7; border-radius:999px; vertical-align:baseline}
.text-gradient{background:linear-gradient(90deg, #4f46e5, #7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent}
.text-gold{background:linear-gradient(90deg, #fde68a, #f59e0b 60%, #fcd34d); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 10px rgba(252, 211, 77, .25)}
.sub{margin-top:12px; color:#334155; font-size:18px}
.hero-dark .sub, .hero-dark .h1, .hero-dark .h2, .hero-dark p, .hero-dark .countdown, .hero-dark .price{color:#e5e7eb}
.text-plate{background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* Classic book cover block (used in the intro/What-is section) */
.classic-cover{position:relative; margin-top:12px; max-width:280px; margin-left:auto; margin-right:auto}
.classic-cover .cover-actions{position:static; display:flex; gap:8px; align-items:center; justify-content:flex-start; margin-top:8px}
.classic-cover img{width:100%; height:auto; border-radius:0; box-shadow:none; filter:none; background:transparent}
/* Give the image a slight bottom padding to accommodate overlay button without cropping */
/* Remove extra space now that the button is side-aligned */
.classic-cover img{padding-bottom:0}
/* Gentle depth only in the what-is section (no framed look) */
.what-is .classic-cover img{filter:drop-shadow(0 6px 14px rgba(0,0,0,.12))}
@media (min-width: 768px){
  .classic-cover{max-width:320px}
}
@media (min-width: 1024px){
  .classic-cover{max-width:360px}
}

.info-cards{display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px}
.info-card{display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.9); border:1px solid var(--border); padding:12px 14px; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.04)}
.info-card .label{font-weight:600; font-size:14px}
.info-card .icon{font-size:20px}

.price-cta{margin-top:16px}
.price{font-size:18px}
.price .old{text-decoration:line-through; color:#64748b; margin-right:8px}
.price .now{color:#e11d48; font-weight:800}
.price-note{margin-top:8px; font-size:14px; color:#fde68a}

.countdown{margin-top:8px; color:#475569}
.countdown .strong{font-weight:700; color:#0f172a}
/* Improve contrast for countdown numbers on dark hero sections */
.hero-dark .countdown .strong{color:#fde68a}

.seats{margin-top:10px}
.bar{height:8px; background:#e2e8f0; border-radius:999px; overflow:hidden}
.bar-fill{height:100%; background:linear-gradient(90deg, #fbbf24, #d97706)}
.bar-center{max-width:480px; margin:0 auto}

/* Improve contrast for seats text on dark hero sections */
.hero-dark .seats{color:#e5e7eb}
.hero-dark .seats .text-xs{color:#e5e7eb}
.hero-dark #seat-current,
.hero-dark #seat-total,
.hero-dark #seat2-current,
.hero-dark #seat2-total{color:var(--gold-2); font-weight:700}

.visual{background:#fff; border:1px solid var(--border); border-radius:24px; padding:24px; box-shadow:0 8px 24px rgba(0,0,0,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:4/3}
.visual img{width:100%; height:100%; object-fit:cover; border-radius:inherit}
.visual.is-photo{background:transparent; border:none; padding:0; box-shadow:none; aspect-ratio:auto}
.visual.is-photo img{display:block; width:100%; height:auto; background:transparent; border-radius:inherit; box-shadow:0 18px 48px rgba(0,0,0,.28); filter:drop-shadow(0 8px 18px rgba(253,230,138,.22)); animation:subtle-float 6s ease-in-out infinite; will-change:transform}
/* Ground glow (fake reflection) */
.visual.is-photo{position:relative}
.visual.is-photo::after{content:""; position:absolute; left:10%; right:10%; bottom:-6px; height:28px; background:radial-gradient(ellipse at center, rgba(0,0,0,.28), rgba(0,0,0,0) 65%); filter:blur(6px); pointer-events:none}
@keyframes subtle-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){
  .visual.is-photo img{animation:none}
}

@media (min-width: 1024px){
  .visual.is-photo{min-height:unset}
}
.visual-emoji{font-size:64px}
.visual-hint{margin-top:8px; color:#64748b}
.label-badge{margin-top:10px; font-size:12px; font-weight:700; color:#991b1b; background:#fee2e2; border:1px solid #fecaca; border-radius:999px; padding:4px 10px}

/* Cards */
.card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.04)}
.pain-cards{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.pain-card{display:grid; grid-template-rows:auto auto 1fr; gap:8px; min-height:150px}
.pain-card .picon{font-size:28px}
.pain-card .ptitle{font-weight:800}
.pain-card .pdesc{color:#334155; margin:0}
.card-title{font-weight:700; margin-bottom:6px}
.instructor{display:flex; flex-direction:column; align-items:center; text-align:center}
.avatar{font-size:48px; margin-bottom:8px}
.avatar-img{width:112px; height:112px; object-fit:cover; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.12); margin-bottom:10px}
.instructor .bio{width:100%; text-align:left; margin-top:8px}
.instructor .bio summary{cursor:pointer; color:#2563eb; font-weight:600; list-style:none}
.instructor .bio[open] summary{margin-bottom:6px}
.instructor .bio-list{margin:0; padding-left:18px; color:#475569}
.instructor .bio-list li{margin:6px 0}
.card-ai{background:linear-gradient(0deg, rgba(59,130,246,.08), rgba(59,130,246,.08)), #fff}
.card-mind{background:linear-gradient(0deg, rgba(245,158,11,.12), rgba(245,158,11,.12)), #fff}
.card-action{background:linear-gradient(0deg, rgba(251,146,60,.12), rgba(251,146,60,.12)), #fff}

/* Timeline */
.timeline{list-style:none; padding:0; margin:0; border-left:2px dashed #c7d2fe; margin-left:12px}
.tl-item{position:relative; margin-left:12px; padding-left:16px; margin-bottom:16px}
.tl-dot{position:absolute; left:-11px; top:6px; width:14px; height:14px; background:#6366f1; border:2px solid #eef2ff; border-radius:999px}
.tl-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px}
.tl-time{font-size:12px; color:#64748b}
.tl-title{font-weight:700}
.tl-desc{color:#334155}
/* Alternate backgrounds for modules */
.tl-item:nth-child(odd) .tl-card{background:#f8fafc}
.tl-item:nth-child(even) .tl-card{background:#ffffff}

/* Social proof */
.checklist{padding-left:18px}
.checklist li{margin:8px 0}
.media-placeholder{background:#e2e8f0; border-radius:16px; height:220px; display:flex; align-items:center; justify-content:center}
.soft-yellow{background:#fffbea}
.intro{max-width:860px; margin:0 auto; color:#334155}
.number-list{margin:0; padding-left:20px}
.number-list li{margin:8px 0}

/* What-is section layout (left image, right content) */
.what-is{display:grid; grid-template-columns:1fr; gap:20px; align-items:start}
.what-is-left{display:flex; justify-content:center}
.what-is-right{display:block}
/* Inline button next to cover */
.cover-row{display:flex; align-items:center; gap:12px}
.cover-actions{flex:0 0 auto}
@media (max-width: 767.98px){
  .cover-row{flex-direction:column}
}
/* Shrink the cover visually in this section */
.what-is .classic-cover{max-width:230px; margin-top:0}
@media (min-width: 768px){
  .what-is{grid-template-columns:.9fr 1.1fr; gap:24px}
  .what-is .classic-cover{max-width:250px}
}
@media (min-width: 1024px){
  .what-is{grid-template-columns:1fr 1.4fr; gap:28px}
  .what-is .classic-cover{max-width:280px}
}

/* What-is section theming */
.what-is-section{background:linear-gradient(180deg, #fffef7, #fff)}
.what-is-section .eyebrow{font-size:12px; font-weight:800; letter-spacing:.12em; color:#b45309; text-transform:uppercase}
.what-is-section .underline-accent::after{height:5px; width:220px}
.what-is-section .what-is-right{position:relative}
.what-is-section .what-is-right::before{content:""; position:absolute; left:-14px; top:2px; bottom:2px; width:2px; background:linear-gradient(#fde68a, #f59e0b 80%); border-radius:2px; opacity:.35; display:none}
@media (min-width: 768px){
  .what-is-section .what-is-right::before{display:block}
}
/* Custom tick style for checklist inside this section */
.what-is-section .checklist{list-style:none; padding-left:0}
.what-is-section .checklist li{position:relative; padding-left:26px}
.what-is-section .checklist li::before{content:"\2713"; position:absolute; left:0; top:0; color:#b45309; font-weight:900}

/* FAQ */
.faq details{background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:600}
.faq .answer{color:#334155; margin-top:8px}

/* Final Hero */
.hero-final .sub{max-width:720px; margin-inline:auto}
.info-chips{display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px}
.chip{display:flex; align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.9); border:1px solid var(--border); padding:10px 12px; border-radius:14px}
.icon{font-size:16px}
.note{margin-top:8px; font-size:12px; color:#64748b}
.underline-accent{position:relative}
.underline-accent::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-6px; width:200px; height:6px; background:linear-gradient(90deg, #fde68a, #f59e0b); border-radius:999px}
.location-note{color:#475569; font-size:16px; font-weight:600; margin-top:12px}
.location-note.emphasize{font-size:18px}
.location-list{margin:16px auto 0; padding-left:20px; max-width:720px; color:#475569; line-height:1.6}
.location-list.center{list-style:none; padding-left:0; text-align:center}
.location-list.center li{margin:6px 0}
.location-list li{margin:6px 0}
.map-frame{position:relative; background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(15,23,42,.18); width:min(100%, 640px); margin-inline:auto}
.map-frame img{display:block; width:100%; height:auto; image-rendering:-webkit-optimize-contrast}
.contact-map .btn{margin-top:0}
.contact-section{max-width:880px}
.contact-note{color:#475569; margin-top:12px}
.contact-wrap{display:flex; flex-direction:column; align-items:center; gap:24px}
.contact-actions{display:flex; flex-direction:column; align-items:flex-start; gap:12px; max-width:420px; width:100%}
.contact-actions .btn{align-self:flex-start}
.contact-text{margin:0; color:#475569; line-height:1.6; font-size:15px}
.contact-phone{color:#2563eb; font-weight:600; text-decoration:none}
.contact-phone:hover{text-decoration:underline}
.contact-email{color:#2563eb; font-weight:600; text-decoration:underline}
.contact-qr{margin:0; text-align:center}
.contact-qr img{width:min(220px, 60vw); border-radius:16px; box-shadow:0 12px 30px rgba(15,23,42,.2)}
.contact-qr figcaption{margin-top:8px; font-size:14px; color:#475569}
.contact-map{max-width:980px; margin:0 auto}
.contact-map .h3{margin-bottom:12px}

.floating-cta{position:fixed; right:16px; bottom:16px; z-index:30; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid rgba(15,23,42,.1); border-radius:999px; padding:10px 14px; box-shadow:0 18px 36px rgba(15,23,42,.28); transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease}
.floating-cta:not(.is-hidden){transform:translateY(0); opacity:1; pointer-events:auto}
.floating-cta .btn{font-size:15px; padding:10px 18px}
.floating-cta-close{background:transparent; border:0; color:#475569; font-size:20px; line-height:1; cursor:pointer; padding:4px 6px; border-radius:50%; transition:background .2s ease}
.floating-cta-close:hover{background:rgba(15,23,42,.08)}
@media (max-width: 767.98px){
  .floating-cta{left:16px; right:16px; border-radius:16px; justify-content:space-between}
  .floating-cta .btn{flex:1; justify-content:center}
}
.price-final{display:flex; flex-direction:column; align-items:center; gap:4px}
.price-final .old{color:#e5e7eb}
.price-final .now{color:var(--rose); font-weight:800}
.price-final .addon{color:#fde68a; font-size:14px; font-weight:600}

.promo-ai-course .container{max-width:880px}
@media (min-width: 1024px){
  .promo-ai-course .promo-lead{white-space:nowrap}
}

/* Footer */
.footer{border-top:1px solid var(--border); background:#fff; padding:20px 0; color:#475569; font-size:14px}
.footer a{color:inherit; text-decoration:underline}
.footer .footer-line{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; text-align:center; padding:0 16px}
.footer .footer-line .sep{opacity:.5}
.footer-link{color:inherit; text-decoration:underline}

/* Embedded Form */
.form-card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.15); max-width:960px; margin:24px auto 0}
.form-card iframe{width:100%; height:1100px; border:0; display:block; background:#fff; border-radius:12px}

@media (min-width: 768px){
  .form-card iframe{height:1000px}
}

/* Responsive */
@media (min-width: 768px){
  .grid2{grid-template-columns:1.1fr .9fr}
  .grid3{grid-template-columns:repeat(3, 1fr)}
  .h1{font-size:48px}
  .h2{font-size:32px}
  .sub{font-size:18px}
  .info-cards{grid-template-columns:repeat(3, 1fr)}
  .info-chips{grid-template-columns:repeat(3, 1fr)}
  .contact-wrap{flex-direction:row; justify-content:center; align-items:center}
  .value-cards{grid-template-columns:repeat(3, 1fr)}
}

/* Larger desktop type scale */
@media (min-width: 1024px){
  body{font-size:18px; line-height:1.7}
  .h1{font-size:80px}
  .title-strong{font-size:1.06em}
  .h2{font-size:40px}
  .h3{font-size:28px}
  .sub{font-size:20px}
  .btn.lg{font-size:18px}
  .info-card .label{font-size:16px}
  .chip{font-size:16px}
  .text-sm{font-size:15px}
  .text-xs{font-size:13px}
}

/* Give the hero more room for the title on desktop to avoid wrapping */
@media (min-width: 1024px){
  .hero .grid2{grid-template-columns:1.2fr .8fr}
}

@media (min-width: 1280px){
  .hero .grid2{grid-template-columns:1.3fr .7fr}
  .visual{aspect-ratio:16/10}
  .h1{font-size:88px}
  .title-strong{font-size:1.08em}
}

@media (min-width: 1536px){
  .hero .grid2{grid-template-columns:1.4fr .6fr}
  .h1{font-size:96px}
  .title-strong{font-size:1.1em}
}

/* Scale up visual on desktop while avoiding distortion */
@media (min-width: 1024px){
  .visual{min-height:clamp(340px, 36vh, 560px)}
}

/* Keep hero text readable with full-bleed layout */
.hero .text-plate{max-width:1100px}
/* Desktop: remove dark plate to let staggered title breathe */
@media (min-width: 1024px){
  .hero .text-plate{background:transparent; border:none; box-shadow:none; padding:0}
}

/* Force single-line for the specified subtitle on desktop */
@media (min-width: 1280px){
  .one-line-desktop{white-space:nowrap; max-width:none}
}

/* Keep each title line在超寬桌機上維持單行 */
@media (min-width: 1280px){
  .title-line{white-space:nowrap}
}

/* Stagger the second title line on desktop (pure horizontal shift, no extra vertical spacing) */
@media (min-width: 1024px){
  .h1 .title-line{display:inline}
  .h1 .title-strong{display:inline-block; transform:translateX(clamp(24px, 6vw, 120px))}
}
@media (min-width: 1280px){
  .h1 .title-strong{transform:translateX(clamp(32px, 7vw, 160px))}
}
@media (min-width: 1536px){
  .h1 .title-strong{transform:translateX(clamp(40px, 8vw, 200px))}
}

/* Shimmer sweep on the emphasized second line */
.title-strong.text-gold{
  /* base gold gradient + moving highlight */
  background-image:
    linear-gradient(90deg, #fde68a, #f59e0b 60%, #fcd34d),
    linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 12%, rgba(255,255,255,0) 24%);
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, -200% 0;
  animation: gold-shimmer 2.8s linear infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes gold-shimmer{to{background-position: 0 0, 200% 0}}
@media (prefers-reduced-motion: reduce){
  .title-strong.text-gold{animation:none}
}

/* Background spotlight behind the title (desktop) */
@media (min-width: 1024px){
  .hero .text-plate{position:relative}
  .hero .text-plate::before{
    content:""; position:absolute; inset:-8% -6% -10% -6%;
    background:radial-gradient(60% 70% at 20% 35%, rgba(253, 230, 138, .18), rgba(253, 230, 138, .08) 30%, rgba(0,0,0,0) 70%);
    filter:blur(4px); pointer-events:none;
  }
}

/* Pain-point highlight */
.highlight-box{border:2px dashed #f59e0b; color:#7c2d12; background:#fffbeb; padding:14px 16px; border-radius:12px}

/* Value Section (2.5) */
.value-section{background:linear-gradient(180deg, #fff7ed, #ffedd5)}
.value-section .emphasis{color:#b45309; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:3px; text-decoration-color:#fbbf24}
.value-list{margin:0; padding-left:18px; color:#7c2d12}
.value-note{color:#7c2d12}
/* Visual cards for value section */
.value-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px}
.vcard{display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:0 6px 18px rgba(0,0,0,.06)}
.vicon{font-size:36px; flex:0 0 auto}
.vcontent{display:flex; flex-direction:column}
.vtitle{font-weight:800; margin-bottom:4px}
.vdesc{color:#334155; margin:0}
.vcard-wisdom{background:linear-gradient(0deg, rgba(245,158,11,.12), rgba(245,158,11,.12)), #fff}
.vcard-result{background:linear-gradient(0deg, rgba(59,130,246,.10), rgba(59,130,246,.10)), #fff}
.vcard-ai{background:linear-gradient(0deg, rgba(16,185,129,.12), rgba(16,185,129,.12)), #fff}
.vcard-define{background:linear-gradient(0deg, rgba(99,102,241,.12), rgba(99,102,241,.12)), #fff}
.vcard-visual{background:linear-gradient(0deg, rgba(59,130,246,.10), rgba(59,130,246,.10)), #fff}
.vcard-decompose{background:linear-gradient(0deg, rgba(236,72,153,.10), rgba(236,72,153,.10)), #fff}
.vcard-activate{background:linear-gradient(0deg, rgba(16,185,129,.12), rgba(16,185,129,.12)), #fff}

/* Celebrity proof grid */
.celeb-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:start}
@media (max-width: 640px){
  .celeb-grid{gap:12px}
}
.celeb-card{margin:0; text-align:center}
.celeb-img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; box-shadow:0 6px 14px rgba(0,0,0,.12)}
.celeb-name{margin-top:8px; font-weight:700; font-size:15px}

/* ------------------ Theme Toggle & Dark Mode ------------------ */
.theme-toggle{background:transparent; border:1px solid var(--border); color:var(--text); padding:6px 12px; border-radius:999px; font-size:14px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:background .2s, color .2s, border-color .2s}
.theme-toggle:hover{background:rgba(0,0,0,.05)}
[data-theme="dark"] .theme-toggle:hover{background:rgba(255,255,255,.08)}

/* Auto dark mode (OS) + manual override attribute */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f172a;
    --text:#f1f5f9;
    --muted:#94a3b8;
    --card:#1e293b;
    --border:#334155;
    --primary:#6366f1;
    --primary-700:#4f46e5;
    --rose:#fb7185;
    --rose-700:#e11d48;
  }
}

/* Explicit dark theme (manual) */
[data-theme="dark"]{
  --bg:#0f172a;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --card:#1e293b;
  --border:#334155;
  --primary:#6366f1;
  --primary-700:#4f46e5;
  --rose:#fb7185;
  --rose-700:#e11d48;
}

/* Surface adaptations */
[data-theme="dark"] body{background:var(--bg); color:var(--text)}
[data-theme="dark"] .section-alt{background:var(--card)}
[data-theme="dark"] .card,
[data-theme="dark"] .faq details,
[data-theme="dark"] .pain-card,
[data-theme="dark"] .vcard,
[data-theme="dark"] .tl-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .chip,
[data-theme="dark"] .form-card,
[data-theme="dark"] .form-card iframe{background:var(--card); border-color:var(--border); box-shadow:none}
[data-theme="dark"] .form-card .form-note{color:#e2e8f0}
[data-theme="dark"] .footer{background:#0b1324; color:#cbd5e1}
[data-theme="dark"] .footer a{color:#f1f5f9}
[data-theme="dark"] .topbar{background:rgba(15,23,42,.85); border-color:var(--border)}
[data-theme="dark"] .topbar-chip{background:rgba(148,163,184,.2); color:#e2e8f0}
[data-theme="dark"] .topbar-chip.accent{background:linear-gradient(90deg, #facc15, #f97316); color:#111827}
[data-theme="dark"] .btn-outline{color:var(--text); border-color:var(--border)}
[data-theme="dark"] .btn-outline:hover{border-color:var(--primary); color:var(--primary)}
[data-theme="dark"] .highlight-box{background:#452a03; color:#fcd34d; border-color:#d97706}
[data-theme="dark"] .value-section{background:linear-gradient(180deg,#1e293b,#0f172a)}
[data-theme="dark"] .value-note{color:#fcd34d}
[data-theme="dark"] .soft-yellow{background:#1e293b}
[data-theme="dark"] .location-note{color:#cbd5f5}
[data-theme="dark"] .location-list{color:#dbeafe}
[data-theme="dark"] .map-frame{background:var(--card); border-color:#475569; box-shadow:0 12px 30px rgba(8,12,24,.6)}
[data-theme="dark"] .contact-note{color:#e2e8f0}
[data-theme="dark"] .contact-email{color:#60a5fa}
[data-theme="dark"] .contact-text{color:#e2e8f0}
[data-theme="dark"] .contact-phone{color:#93c5fd}
[data-theme="dark"] .contact-qr img{box-shadow:0 20px 40px rgba(7,11,21,.6)}
[data-theme="dark"] .contact-qr figcaption{color:#cbd5f5}
[data-theme="dark"] .floating-cta{background:#1e293b; border-color:#334155; box-shadow:0 18px 36px rgba(8,12,24,.6)}
[data-theme="dark"] .floating-cta-close{color:#cbd5f5}
[data-theme="dark"] .floating-cta-close:hover{background:rgba(148,163,184,.2)}
[data-theme="dark"] .faq details{color:var(--text)}
[data-theme="dark"] .faq .answer{color:var(--muted)}
[data-theme="dark"] .celeb-img{box-shadow:0 6px 14px rgba(0,0,0,.5)}
[data-theme="dark"] .countdown{color:var(--muted)}
[data-theme="dark"] .countdown .strong{color:#fbbf24}
[data-theme="dark"] .price .old{color:#64748b}
[data-theme="dark"] .price-final .old{color:#94a3b8}
[data-theme="dark"] .instructor .bio-list{color:var(--muted)}
[data-theme="dark"] .title-strong.text-gold{filter:drop-shadow(0 0 6px rgba(251,191,36,.35))}

/* Backdrop filter fallback (older browsers) */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
  .topbar{background:rgba(255,255,255,.95)}
  [data-theme="dark"] .topbar{background:#1e293b}
}