/* 基礎設定 */
:root { --sasa-purple:#8750ad; --sasa-purple-dark:#6b3395; --sasa-pink:#f180b8; --sasa-text:#85808b; --sasa-muted:#aaa3ad; --sasa-white:#fff; --sasa-soft:#fbf7ff; --sasa-blue-soft:#f2fbff; --sasa-love-soft:#fff6fb; --sasa-shadow:0 18px 42px rgba(109,70,142,.16); --sasa-hero-gradient:linear-gradient(to bottom, rgba(255,255,255,0) 78%, #fff 100%); --sasa-button-gradient:linear-gradient(135deg,#a764c7,#f08bc4); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--sasa-text); background:var(--sasa-white); font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif; line-height:1.8; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }
.section-anchor { scroll-margin-top:84px; }

/* 導覽區域 */
.site-header { position:absolute; top:0; left:0; z-index:20; width:100%; padding-top:42px; }
.sasa-navbar { padding:0; background:transparent; }
.sasa-navbar .navbar-toggler { color:#756d84; border:0; box-shadow:none; }
.sasa-navbar .nav-link { color:#756d84; font-size:13px; font-weight:700; letter-spacing:.12em; padding:.35rem .65rem; transition:color .25s ease,transform .25s ease; }
.sasa-navbar .nav-link:hover,.sasa-navbar .nav-link.active { color:var(--sasa-purple-dark); transform:translateY(-2px); }

/* 輪播區域 */
.hero-section { min-height:790px; display:grid; place-items:start center; padding-top:132px; text-align:center; color:var(--sasa-white); background-color:#c3a8ff; background-image:var(--sasa-hero-gradient),url("../hero-bg.png"); background-size:cover; background-position:center top; overflow:hidden; }
.hero-copy { width:min(720px,calc(100% - 32px)); animation:sasaFadeUp .9s ease both; }
.hero-symbol { display:block; width:210px; max-width:38vw; margin:0 auto 42px; filter:drop-shadow(0 8px 18px rgba(92,62,146,.18)); }
.hero-copy h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(34px,4.1vw,54px); line-height:1.06; font-weight:700; letter-spacing:-.035em; text-shadow:0 3px 14px rgba(119,74,154,.23); }
.hero-copy h2 { margin:14px 0 12px; font-size:clamp(20px,2.1vw,29px); line-height:1.3; letter-spacing:.16em; font-weight:800; }
.hero-copy p { margin:0 auto; font-size:16px; font-weight:800; line-height:1.7; text-shadow:0 2px 10px rgba(115,75,151,.28); }
.hero-hand { display:inline-grid; place-items:center; width:70px; height:34px; margin-top:18px; border:2px solid rgba(125,64,159,.58); border-radius:6px; background:rgba(255,255,255,.15); transition:transform .25s ease,background .25s ease; }
.hero-hand:hover { transform:translateY(-3px); background:rgba(255,255,255,.35); }
.hero-hand img { width:46px; }

/* 品牌介紹區域 */
.intro-section { min-height:auto; display:grid; place-items:start center; padding:110px 20px 72px; background:var(--sasa-white); text-align:center; }
.brand-logo { width:min(270px,70vw); margin-bottom:28px; }
.intro-text { margin:0; color:#8a858d; font-size:17px; font-weight:800; line-height:2.05; letter-spacing:.03em; }

/* 標題與通用區塊 */
.section-heading { text-align:center; color:var(--sasa-purple-dark); }
.section-heading h2 { margin:0; font-size:clamp(31px,3vw,42px); line-height:1.1; letter-spacing:.08em; font-weight:900; }
.section-heading p { margin:6px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(22px,2.2vw,32px); font-weight:700; line-height:1.1; }
.compact-heading h2 { font-size:clamp(26px,2.4vw,34px); }
.compact-heading p { font-size:clamp(18px,1.9vw,25px); }
.section-copy { max-width:650px; margin:18px auto 14px; color:#918a96; font-size:15px; font-weight:700; line-height:1.9; }
.text-link { display:inline-block; margin:4px 0 28px; color:var(--sasa-purple); font-weight:900; font-size:14px; }
.keyword-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:780px; margin:18px auto 0; }
.keyword-tags span { display:inline-flex; align-items:center; min-height:30px; padding:4px 13px; border:1px solid rgba(135,80,173,.22); border-radius:999px; color:var(--sasa-purple-dark); background:rgba(251,247,255,.86); font-size:13px; font-weight:800; letter-spacing:.04em; }

/* 服務項目區域 */
.service-section { padding:40px 34px 125px; background:var(--sasa-white); }
.service-keyword-copy { max-width:760px; margin-top:22px; }
.service-row { max-width:1120px; margin:46px auto 0; }
.service-card { display:block; border-radius:0; transition:transform .28s ease,filter .28s ease; }
.service-card:hover { transform:translateY(-8px); filter:saturate(1.08); }
.service-card img { display:block; width:100%; aspect-ratio:auto; object-fit:contain; border-radius:0; box-shadow:none; }

/* 愛情占卜區域 */
.love-section { padding:120px 20px 112px; background:var(--sasa-white); text-align:center; }
.ornament { display:block; width:min(520px,88vw); margin:0 auto 22px; opacity:.55; }
.icon-row { max-width:930px; margin:30px auto 52px; }
.icon-card { color:#8c7f91; text-align:center; }
.icon-card img { width:86px; margin-bottom:10px; }
.icon-card h3 { margin:0 0 4px; font-size:15px; color:var(--sasa-purple-dark); font-weight:900; }
.icon-card p { margin:0; font-size:12px; font-weight:700; line-height:1.5; }
.card-row { max-width:1040px; margin:0 auto; }
.two-card-row { max-width:720px; }
.product-card { display:block; width:100%; max-width:275px; margin:0 auto; border-radius:18px; filter:drop-shadow(0 18px 28px rgba(100,72,140,.14)); transition:transform .28s ease; }
.product-card:hover { transform:translateY(-8px); }

/* 財運與其他區域 */
.wealth-section { padding:20px 20px 105px; background:var(--sasa-white); }
.other-section { padding:20px 20px 115px; background:var(--sasa-white); }

/* 客服流程區域 */
.process-section { padding:110px 20px 92px; background:var(--sasa-white); }
.process-logo { width:min(300px,75vw); filter:drop-shadow(0 18px 24px rgba(100,72,140,.1)); }
.process-list { margin:18px 0 0; padding:0; list-style:none; color:#807985; font-size:15px; font-weight:700; line-height:1.9; }
.process-list li { position:relative; padding-left:26px; margin-bottom:10px; }
.process-list li::before { content:"✦"; position:absolute; left:0; top:0; color:var(--sasa-purple); }

/* 個案回饋區域 */
.feedback-section { padding:45px 20px 110px; background:var(--sasa-white); }
.feedback-row { max-width:980px; margin:36px auto 0; }
.feedback-img { display:block; width:100%; max-width:285px; margin:0 auto; border-radius:18px; box-shadow:0 16px 28px rgba(120,90,140,.12); }

/* 預約服務區域 */
.booking-section { padding:84px 20px 115px; background:var(--sasa-white); }
.line-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:168px; min-height:42px; margin:4px auto 28px; padding:8px 22px; border-radius:999px; color:var(--sasa-white); background:#5fca5b; font-weight:900; box-shadow:0 12px 24px rgba(95,202,91,.24); transition:transform .25s ease,box-shadow .25s ease; }
.line-btn:hover { color:var(--sasa-white); transform:translateY(-2px); box-shadow:0 16px 30px rgba(95,202,91,.3); }
.calendar-wrap { width:min(620px,100%); margin:22px auto 0; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 16px 36px rgba(90,70,120,.12); }
.calendar-frame { display:block; width:100%; height:520px; border:0; background:#fff; }

/* SEO GEO AGO 區域 */
.ai-optimization-section { padding:86px 20px 105px; background:linear-gradient(180deg,#fff 0%,var(--sasa-soft) 100%); }
.strategy-row { max-width:1080px; margin:38px auto 0; }
.strategy-card { height:100%; padding:26px 24px; border:1px solid rgba(135,80,173,.16); border-radius:22px; background:rgba(255,255,255,.86); box-shadow:0 14px 34px rgba(95,63,130,.1); }
.strategy-card h3 { margin:0 0 12px; color:var(--sasa-purple-dark); font-size:20px; font-weight:900; letter-spacing:.04em; }
.strategy-card p { margin:0; color:#827985; font-size:14px; font-weight:700; line-height:1.85; }
.answer-box { max-width:920px; margin:34px auto 0; padding:30px 32px; border-radius:24px; background:#fff; box-shadow:0 16px 36px rgba(95,63,130,.1); }
.answer-box h3 { margin:0 0 18px; color:var(--sasa-purple-dark); font-size:24px; font-weight:900; text-align:center; }
.answer-box dl { margin:0; }
.answer-box dt { color:#6f3395; font-size:15px; font-weight:900; }
.answer-box dd { margin:6px 0 18px; color:#827985; font-size:14px; font-weight:700; line-height:1.8; }

/* 頁尾區域 */
.site-footer { padding:100px 20px 70px; background:var(--sasa-white); color:#8a7d91; font-size:13px; }
.footer-logo { width:150px; margin-bottom:12px; }
.site-footer p { margin:0; }
.site-footer a { color:var(--sasa-purple-dark); font-weight:800; }
.floating-line { position:fixed; right:28px; bottom:28px; z-index:30; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:var(--sasa-white); background:#f078b6; border:8px solid rgba(255,255,255,.82); box-shadow:0 12px 24px rgba(80,30,90,.18); font-size:25px; }
.floating-line:hover { color:var(--sasa-white); transform:translateY(-2px); }
.back-top { position:fixed; right:34px; bottom:102px; z-index:29; display:none; width:44px; height:44px; border:0; border-radius:50%; color:#fff; background:var(--sasa-purple); box-shadow:0 10px 22px rgba(100,60,140,.22); }

/* 動畫 */
@keyframes sasaFadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.js-reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }
.js-reveal.is-visible { opacity:1; transform:translateY(0); }

/* 響應式 */
@media (max-width:991.98px) { .site-header { padding-top:18px; } .sasa-navbar .container { justify-content:flex-end!important; } .sasa-navbar .navbar-collapse { margin-top:12px; padding:14px 18px; border-radius:18px; background:rgba(255,255,255,.9); box-shadow:0 14px 34px rgba(100,70,140,.12); } .sasa-navbar .nav-link { text-align:center; } .hero-section { min-height:690px; padding-top:108px; } .intro-section { min-height:auto; padding:84px 20px 58px; } }
@media (max-width:575.98px) { .hero-section { min-height:620px; padding-top:108px; background-position:center top; } .hero-symbol { width:145px; margin-bottom:26px; } .hero-copy { width:100%; padding:0 18px; } .hero-copy h1 { font-size:25px; line-height:1.12; letter-spacing:-.035em; } .hero-copy h2 { font-size:20px; letter-spacing:.1em; } .hero-copy p { font-size:14px; } .intro-section { min-height:auto; padding:64px 20px 44px; } .intro-text { font-size:14px; line-height:1.9; } .service-section { padding:34px 18px 110px; } .service-row { --bs-gutter-x:12px; --bs-gutter-y:22px; } .service-row .col-6 { display:flex; justify-content:center; } .service-card { width:min(168px,42vw); margin:0 auto; } .service-keyword-copy { font-size:13px; text-align:left; } .keyword-tags { justify-content:flex-start; gap:7px; } .keyword-tags span { font-size:12px; min-height:28px; padding:4px 10px; } .product-card { max-width:235px; } .calendar-frame { height:430px; } .ai-optimization-section { padding:68px 18px 86px; } .strategy-card { padding:22px 20px; } .answer-box { padding:24px 20px; } .floating-line { right:16px; bottom:16px; width:58px; height:58px; } .back-top { right:22px; bottom:88px; } }