:root { --cream:#fff9ef; --ink:#321128; --plum:#5a153f; --coral:#f43f57; --yellow:#ffd85c; --lilac:#c9a7ef; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,"PingFang TC","Noto Sans TC",sans-serif; }
button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }

.nav { height:84px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; background:var(--cream); position:relative; z-index:30; border-bottom:1px solid rgba(50,17,40,.08); }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:24px; font-weight:900; letter-spacing:.08em; }
.brand small { color:#9a7a89; font-size:9px; letter-spacing:.16em; margin-left:3px; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50% 50% 44% 56%/44% 42% 58% 56%; color:white; background:var(--coral); transform:rotate(-8deg); }
.nav-actions { display:flex; align-items:center; gap:26px; font-weight:700; font-size:14px; }
.nav-actions a { transition:opacity .2s; } .nav-actions a:hover { opacity:.6; }
.nav-actions .nav-login,.nav-actions .nav-signup { border-radius:999px; padding:13px 22px; font-weight:800; }
.nav-login { color:var(--plum); border:1px solid rgba(90,21,63,.22); background:transparent; }
.nav-signup { color:white; border:1px solid var(--plum); background:var(--plum); }
.menu-button { display:none; width:44px; height:44px; border:0; background:none; padding:12px; }
.menu-button span { display:block; height:2px; background:var(--ink); margin:6px 0; }

.hero { min-height:calc(100vh - 84px); position:relative; overflow:hidden; display:flex; align-items:center; isolation:isolate; background:#ef6a67; }
.hero-photo { position:absolute; inset:0; background-image:var(--zhenai-hero); background-position:center; background-size:cover; background-repeat:no-repeat; z-index:-3; }
.hero-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(74,12,47,.94),rgba(74,12,47,.76) 34%,rgba(74,12,47,.14) 62%,transparent); z-index:-2; }
.hero-content { color:white; width:51%; padding:7vw 4vw 7vw 7vw; }
.eyebrow,.section-tag { margin:0 0 20px; font-size:13px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow span { color:var(--yellow); margin-right:8px; }
.hero h1 { margin:0; max-width:720px; font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(74px,8vw,138px); line-height:.84; letter-spacing:-.065em; font-weight:500; }
.hero-copy { max-width:510px; font-size:clamp(17px,1.4vw,21px); line-height:1.65; margin:32px 0; color:rgba(255,255,255,.9); }
.hero-actions { display:flex; align-items:center; gap:24px; }
.primary-button,.light-button { border:0; border-radius:999px; padding:18px 25px; font-weight:900; display:inline-flex; align-items:center; justify-content:center; gap:24px; transition:transform .2s,box-shadow .2s; }
.primary-button { background:var(--coral); color:white; box-shadow:0 10px 30px rgba(244,63,87,.28); }
.primary-button:hover,.light-button:hover { transform:translateY(-3px); box-shadow:0 14px 35px rgba(50,17,40,.22); }
.text-button { color:white; border:0; border-bottom:1px solid rgba(255,255,255,.55); padding:8px 0; background:transparent; font-weight:800; }
.trust-row { margin-top:42px; display:flex; gap:15px; align-items:center; }
.trust-row p { font-size:12px; line-height:1.5; margin:0; color:rgba(255,255,255,.75); } .trust-row strong { color:white; font-size:13px; }
.avatars { display:flex; } .avatars span { margin-left:-8px; width:35px; height:35px; border-radius:50%; display:grid; place-items:center; background:var(--lilac); color:var(--plum); border:2px solid white; font-size:11px; font-weight:900; }
.avatars span:nth-child(2) { background:var(--yellow); } .avatars span:nth-child(3) { background:#ff9d82; }
.floating-card { position:absolute; display:flex; gap:12px; align-items:center; background:rgba(255,249,239,.9); backdrop-filter:blur(20px); color:var(--ink); border:1px solid rgba(255,255,255,.5); border-radius:18px; padding:13px 17px; box-shadow:0 15px 40px rgba(50,17,40,.2); animation:float 4s ease-in-out infinite; }
.floating-card strong,.floating-card small { display:block; } .floating-card strong { font-size:13px; } .floating-card small { font-size:10px; margin-top:4px; opacity:.65; }
.card-match { right:5%; bottom:10%; } .card-safe { right:31%; top:13%; animation-delay:-2s; }
.mini-icon,.verified { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#ffe5e9; color:var(--coral); }
.verified { background:#e5f8e8; color:#218a4b; font-weight:900; }
@keyframes float { 50% { transform:translateY(-9px) rotate(1deg); } }

.manifesto { padding:120px 6vw 130px; text-align:center; }
.section-tag { color:var(--coral); }
.manifesto h2,.safety h2,.stories h2,.final-cta h2 { font-family:Georgia,"Noto Serif TC",serif; font-weight:500; letter-spacing:-.045em; }
.manifesto h2 { max-width:1000px; margin:0 auto; font-size:clamp(48px,6.2vw,92px); line-height:1.08; }
.manifesto h2 span { color:var(--coral); font-style:italic; }
.manifesto-copy { max-width:640px; margin:30px auto 72px; color:#755568; font-size:18px; line-height:1.75; }
.feature-grid { max-width:1260px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); text-align:left; border-top:1px solid #e0cfd6; scroll-margin-top:40px; }
.feature-grid article { position:relative; padding:42px 44px 10px 0; }
.feature-grid article+article { border-left:1px solid #e0cfd6; padding-left:44px; }
.feature-number { position:absolute; right:24px; top:25px; color:#b99faa; font-size:12px; font-weight:800; }
.feature-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:20px; font-size:22px; font-weight:900; margin-bottom:36px; transform:rotate(-5deg); }
.icon-coral { background:#ffd9df; color:var(--coral); } .icon-yellow { background:var(--yellow); } .icon-lilac { background:var(--lilac); }
.feature-grid h3 { font-family:Georgia,"Noto Serif TC",serif; font-size:27px; margin:0 0 14px; } .feature-grid p { color:#755568; line-height:1.7; margin:0; }

.confidence { min-height:700px; display:grid; grid-template-columns:1.05fr .95fr; background:#f0e4ff; overflow:hidden; }
.confidence-copy { padding:8vw 7vw; display:flex; flex-direction:column; justify-content:center; }
.confidence-copy h2 { margin:0 0 32px; font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(58px,6vw,94px); line-height:.96; font-weight:500; letter-spacing:-.05em; }
.confidence-copy>p:not(.section-tag) { max-width:650px; margin:0 0 22px; font-size:18px; line-height:1.75; color:#604656; }
.confidence-button { align-self:flex-start; min-width:260px; margin-top:22px; padding:17px 28px; border:2px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); display:flex; justify-content:center; gap:60px; font-weight:900; transition:.2s; }
.confidence-button:hover { background:var(--ink); color:white; transform:translateY(-2px); }
.confidence-art { position:relative; min-height:620px; background:linear-gradient(145deg,#c6a1ee,#e5cdfc); }
.confidence-ring { position:absolute; border-radius:50%; border:2px solid rgba(50,17,40,.25); }
.ring-a { width:430px; height:430px; left:8%; top:13%; }
.ring-b { width:290px; height:290px; right:-5%; bottom:2%; border-color:rgba(255,255,255,.55); }
.confidence-heart { position:absolute; left:20%; top:13%; color:var(--coral); font-size:clamp(280px,27vw,440px); line-height:1; transform:rotate(-8deg); text-shadow:18px 20px 0 var(--yellow); }
.confidence-badge { position:absolute; right:9%; bottom:12%; min-width:230px; padding:20px; border-radius:20px; background:rgba(255,249,239,.9); backdrop-filter:blur(16px); box-shadow:0 18px 50px rgba(50,17,40,.18); }
.confidence-badge span { float:left; width:42px; height:42px; margin-right:12px; display:grid; place-items:center; border-radius:50%; background:#dff5e6; color:#168747; font-weight:900; }
.confidence-badge strong,.confidence-badge small { display:block; } .confidence-badge strong { margin-top:3px; } .confidence-badge small { margin-top:5px; color:#886d79; font-size:11px; }

.safety { min-height:620px; display:grid; place-items:center; background:var(--plum); color:white; overflow:hidden; }
.safety-copy { width:min(900px,100%); display:flex; flex-direction:column; justify-content:center; padding:8vw; text-align:center; align-items:center; } .safety-copy .section-tag { color:var(--yellow); }
.safety h2 { font-size:clamp(53px,5vw,82px); line-height:1.05; margin:0 0 30px; }
.safety-copy>p:not(.section-tag) { color:rgba(255,255,255,.72); line-height:1.8; font-size:17px; max-width:540px; } .safety-copy a { margin-top:28px; font-weight:900; color:var(--yellow); }

.stories { padding:120px 6vw; }
.stories-heading { max-width:1260px; margin:0 auto 55px; display:flex; justify-content:space-between; align-items:end; }
.stories h2 { font-size:clamp(45px,5vw,72px); line-height:1.06; margin:0; }
.round-button { width:62px; height:62px; border-radius:50%; background:transparent; border:1px solid rgba(50,17,40,.25); font-size:24px; }
.story-grid { max-width:1260px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.story-card { min-height:570px; border-radius:28px; overflow:hidden; display:flex; flex-direction:column; }
.story-photo { height:245px; flex:none; background-image:var(--zhenai-stories); background-size:300% 100%; background-repeat:no-repeat; }
.story-photo-1 { background-position:0 center; } .story-photo-2 { background-position:50% center; } .story-photo-3 { background-position:100% center; }
.story-content { padding:32px 34px 35px; display:flex; flex:1; flex-direction:column; }
.story-card p { font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(22px,2vw,30px); line-height:1.42; margin:15px 0 auto; } .story-card strong { font-size:13px; letter-spacing:.08em; }
.story-person { display:flex; flex-direction:column; gap:7px; margin-top:30px; } .story-person small { font-size:11px; opacity:.66; }
.story-quote { font-size:60px; font-family:Georgia,serif; line-height:.7; }
.story-coral { background:#ff6776; color:#40122e; transform:rotate(-1deg); } .story-lilac { background:var(--lilac); } .story-yellow { background:var(--yellow); transform:rotate(1deg); }

.final-cta { min-height:640px; padding:100px 5vw; background:var(--coral); color:white; text-align:center; position:relative; overflow:hidden; }
.final-cta>p { font-weight:900; letter-spacing:.15em; font-size:13px; }
.final-cta h2 { position:relative; z-index:1; font-size:clamp(68px,9vw,135px); line-height:.9; margin:38px 0 50px; } .final-cta h2 span { color:var(--yellow); font-style:italic; }
.light-button { background:var(--cream); color:var(--plum); position:relative; z-index:2; }
.cta-orbit { position:absolute; border:2px solid rgba(255,255,255,.25); border-radius:50%; display:grid; place-items:center; }
.orbit-one { width:230px; height:230px; left:-50px; top:80px; color:var(--yellow); font-size:90px; transform:rotate(-12deg); } .orbit-two { width:150px; height:150px; right:4%; bottom:-30px; color:var(--lilac); font-size:50px; }

footer { padding:65px 6vw 35px; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.footer-brand { justify-self:start; } footer>p { text-align:right; color:#755568; } .footer-links { display:flex; gap:28px; font-size:13px; font-weight:700; } footer small { text-align:right; color:#9c8390; }

.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(50,17,40,.7); backdrop-filter:blur(10px); }
.modal { width:min(480px,100%); max-height:calc(100vh - 40px); overflow:auto; position:relative; background:rgba(255,249,239,.94); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.6); border-radius:30px; padding:46px; box-shadow:0 30px 100px rgba(0,0,0,.3); }
.modal-close { position:absolute; top:18px; right:20px; border:0; background:none; font-size:30px; color:var(--ink); }
.modal h2 { font-family:Georgia,"Noto Serif TC",serif; font-size:48px; margin:0 0 10px; } .modal>p:not(.section-tag) { color:#755568; line-height:1.6; }
.modal form { display:flex; flex-direction:column; margin-top:28px; } .modal form>label,.modal legend { font-size:12px; font-weight:900; margin:14px 0 7px; }
.modal input[type="text"],.modal input[type="password"] { border:1px solid #dac7d0; background:white; border-radius:13px; padding:15px; outline:none; }
.modal input:focus { border-color:var(--coral); box-shadow:0 0 0 3px rgba(244,63,87,.12); }
.modal fieldset { border:0; padding:8px 0 0; display:flex; gap:22px; } .modal legend { margin-bottom:10px; } .modal fieldset label { font-size:14px; }
.modal form .primary-button { margin-top:24px; } .modal>small { display:block; text-align:center; color:#9c8390; margin-top:16px; line-height:1.5; }
.success-state { text-align:center; padding:18px 0; } .success-state>span { display:grid; place-items:center; margin:auto; width:82px; height:82px; background:#ffd9df; color:var(--coral); font-size:37px; border-radius:50%; } .success-state h2 { margin-top:24px; } .success-state p { color:#755568; line-height:1.7; } .success-state .primary-button { margin:15px auto 0; }

@media (max-width:1000px) {
  .nav { height:72px; padding:0 20px; } .brand small { display:none; } .menu-button { display:block; }
  .nav-actions { display:none; position:absolute; top:72px; left:0; right:0; padding:25px; flex-direction:column; align-items:stretch; background:var(--cream); box-shadow:0 12px 20px rgba(50,17,40,.1); } .nav-actions.is-open { display:flex; } .nav-actions a { text-align:center; }
  .hero { min-height:850px; align-items:end; } .hero-photo { background-position:64% center; } .hero-wash { background:linear-gradient(0deg,rgba(74,12,47,.98),rgba(74,12,47,.8) 49%,rgba(74,12,47,.04) 78%); }
  .hero-content { width:100%; padding:330px 24px 65px; } .hero h1 { font-size:clamp(64px,18vw,100px); } .hero-copy { font-size:17px; }
  .card-safe { top:23px; right:20px; } .card-match { display:none; }
  .manifesto { padding:90px 24px; } .feature-grid,.story-grid { grid-template-columns:1fr; } .feature-grid article+article { border-left:0; border-top:1px solid #e0cfd6; padding-left:0; } .feature-grid article { padding:36px 0; }
  .confidence { grid-template-columns:1fr; } .confidence-copy { padding:85px 26px; } .confidence-art { min-height:480px; } .confidence-heart { left:12%; top:8%; font-size:330px; } .ring-a { width:340px; height:340px; }
  .safety-copy { padding:80px 26px; } .stories { padding:90px 24px; } .stories-heading { align-items:center; } .round-button { display:none; }
  .story-card { min-height:520px; } .story-coral,.story-yellow { transform:none; }
  .final-cta { min-height:570px; padding:80px 20px; } .final-cta h2 { font-size:clamp(66px,19vw,110px); }
  footer { grid-template-columns:1fr; text-align:left; } .footer-links { flex-wrap:wrap; } .footer-brand { justify-self:start; } footer>p,footer small { text-align:left; }
}
@media (max-width:560px) {
  .hero-actions { align-items:stretch; flex-direction:column; } .text-button { align-self:center; } .trust-row { margin-top:28px; }
  .manifesto h2 { font-size:47px; } .manifesto-copy { font-size:16px; margin-bottom:45px; }
  .modal { padding:40px 24px 30px; } .modal h2 { font-size:42px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .floating-card { animation:none; } * { transition:none!important; } }