@charset "UTF-8";
:root { color-scheme: light dark; --bg:#f8f8f3; --surface:#fff; --ink:#153c3d; --muted:#53696a; --line:#dce5dd; --tint:#edf1e9; --accent:#23695f; --on-accent:#fff; --shadow:0 26px 60px #133b3720; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#102526; --surface:#183436; --ink:#f1f3e9; --muted:#aec5c0; --line:#2f4a49; --tint:#183d39; --accent:#b3dfcf; --on-accent:#12372f; --shadow:0 26px 60px #0004; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --bg:#102526; --surface:#183436; --ink:#f1f3e9; --muted:#aec5c0; --line:#2f4a49; --tint:#183d39; --accent:#b3dfcf; --on-accent:#12372f; --shadow:0 26px 60px #0004; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
button { font:inherit; cursor:pointer; }
img { max-width:100%; display:block; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.wrap { max-width:1180px; margin:auto; padding-inline:40px; }
.skip { position:absolute; left:20px; top:-100px; padding:12px 20px; background:var(--surface); z-index:10; }
.skip:focus { top:12px; }
.header { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; font-size:22px; font-weight:700; letter-spacing:-.7px; }
.brand img { width:42px; height:42px; border-radius:11px; }
.nav { display:flex; align-items:center; gap:25px; font-size:14px; font-weight:600; }
.nav a[aria-current="page"] { color:var(--accent); text-decoration:underline; text-underline-offset:7px; }
.theme-button { border:1px solid var(--line); background:transparent; color:var(--ink); width:38px; height:38px; border-radius:50%; font-size:20px; padding:0; }
.eyebrow { margin:0 0 18px; font-size:12px; letter-spacing:2px; font-weight:700; color:var(--accent); text-transform:uppercase; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:42px; padding-block:76px 88px; }
h1 { margin:0 0 26px; font-size:clamp(42px,4.7vw,62px); line-height:1.2; letter-spacing:-2px; font-weight:650; }
.hero h1 span { display:block; }
.intro { font-size:17px; color:var(--muted); max-width:475px; margin:0 0 30px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; padding:13px 24px; border:1px solid var(--line); border-radius:999px; font-size:14px; font-weight:600; }
.button.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.small-note { color:var(--muted); font-size:12px; margin-top:22px; }
.hero-visual { position:relative; min-height:610px; display:flex; align-items:center; justify-content:center; isolation:isolate; }
.hero-visual::before { content:""; position:absolute; width:450px; height:450px; max-width:100%; background:var(--tint); border-radius:50%; z-index:-1; }
.phone { min-width:0; width:225px; border:6px solid #203334; border-radius:35px; overflow:hidden; box-shadow:var(--shadow); background:#203334; }
.phone img { width:100%; height:auto; }
.phone.main { transform:rotate(-6deg) translate(16px,-22px); z-index:1; }
.phone.secondary { transform:rotate(7deg) translate(-14px,36px); }
.screen-note { position:absolute; bottom:0; left:0; right:0; text-align:center; color:var(--muted); font-size:11px; }
.strip { border-block:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-block:23px; font-size:13px; font-weight:600; }
.strip span::before { content:"·"; color:var(--accent); margin-right:12px; }
.section { padding-block:95px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:40px; }
h2 { font-size:clamp(28px,3.1vw,40px); font-weight:600; line-height:1.3; letter-spacing:-1px; margin:0; }
.section-heading p { max-width:350px; color:var(--muted); font-size:14px; margin:0; }
.routine-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.routine-item { border-top:1px solid var(--line); padding-top:22px; }
.number { font-size:12px; color:var(--accent); font-weight:700; letter-spacing:1px; }
h3 { font-size:22px; font-weight:600; letter-spacing:-.5px; margin:10px 0; }
.routine-item p { color:var(--muted); font-size:14px; margin:0 0 28px; min-height:72px; }
.screen-stage { background:var(--tint); border-radius:20px; padding:26px 36px 0; max-height:370px; overflow:hidden; }
.screen-stage img { width:100%; border:4px solid #203334; border-radius:26px 26px 0 0; box-shadow:var(--shadow); }
.quiet { display:grid; grid-template-columns:1fr 1.1fr; gap:70px; border-block:1px solid var(--line); padding-block:60px; }
.quiet h2 { max-width:350px; }
.quiet p { margin:0 0 18px; color:var(--muted); }
.text-link { font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.pro { border:1px solid var(--line); background:var(--surface); border-radius:28px; padding:44px; }
.pill { display:inline-block; padding:4px 13px; border-radius:999px; background:var(--tint); color:var(--accent); font-size:12px; font-weight:700; margin-bottom:20px; }
.pro-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:55px; align-items:center; }
.feature-list { margin:28px 0; padding:0; list-style:none; }
.feature-list li { border-top:1px solid var(--line); padding:13px 0; font-size:14px; }
.feature-list li b { display:block; font-weight:600; }
.feature-list li span { color:var(--muted); font-size:13px; }
.pro-image { max-width:240px; margin:auto; border:5px solid #203334; border-radius:34px; box-shadow:var(--shadow); }
.pro .small-note { line-height:1.7; }
.closing { padding-block:20px 85px; text-align:center; }
.closing p { color:var(--muted); }
.closing .button { margin-top:14px; }
.footer { border-top:1px solid var(--line); padding-block:32px; font-size:12px; color:var(--muted); display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.footer p { margin:0; }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.page-head { padding-block:66px 40px; max-width:790px; }
.page-head h1 { font-size:clamp(36px,4vw,52px); }
.page-head p { color:var(--muted); max-width:670px; }
.support-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:50px; padding-bottom:85px; align-items:start; }
.faq h2 { font-size:24px; margin-bottom:24px; }
details { border-bottom:1px solid var(--line); padding:20px 0; }
summary { cursor:pointer; font-weight:600; font-size:16px; }
details p { color:var(--muted); font-size:14px; margin:15px 0 0; }
.contact-panel { border:1px solid var(--line); background:var(--surface); padding:30px; border-radius:22px; overflow-wrap:anywhere; }
.contact-panel h2 { font-size:24px; }
.contact-panel p, .contact-panel li { color:var(--muted); font-size:14px; }
.email { display:block; font-size:22px; font-weight:600; margin:22px 0; color:var(--accent); text-decoration:underline; text-underline-offset:6px; }
.contact-panel ol { padding-left:22px; }
.policy { max-width:780px; padding-bottom:80px; }
.policy section { border-top:1px solid var(--line); padding-block:26px; }
.policy h2 { font-size:23px; }
.policy p { color:var(--muted); font-size:15px; }
.policy a { text-decoration:underline; text-underline-offset:4px; }
.not-found { padding-block:100px; min-height:65vh; }
@media (max-width:900px) { .wrap { padding-inline:25px; } .hero { gap:20px; padding-block:55px; } .phone { width:175px; border-radius:28px; } .hero-visual { min-height:475px; } .hero-visual::before { width:325px; height:325px; } h1 { font-size:44px; } .routine-grid { gap:18px; } .screen-stage { padding:20px 20px 0; max-height:310px; } .quiet { gap:35px; } .pro { padding:30px; } .pro-layout { gap:25px; } .support-grid { gap:28px; } }
@media (max-width:680px) { .wrap { padding-inline:22px; } .header { min-height:90px; flex-wrap:wrap; padding-block:17px; gap:13px; } .brand { font-size:20px; } .brand img { width:36px; height:36px; } .nav { gap:14px; font-size:12px; } .theme-button { width:32px; height:32px; font-size:17px; } .hero { grid-template-columns:1fr; padding-block:50px 30px; gap:24px; } h1 { font-size:44px; letter-spacing:-1.5px; } .intro { font-size:16px; } .hero-visual { min-height:500px; } .phone { width:42%; max-width:188px; } .phone.main { transform:rotate(-5deg) translate(12px,-18px); } .phone.secondary { transform:rotate(6deg) translate(-12px,30px); } .strip { gap:13px; font-size:11px; justify-content:flex-start; } .strip span::before { margin-right:7px; } .section { padding-block:60px; } .section-heading { display:block; margin-bottom:30px; } .section-heading p { margin-top:16px; } .routine-grid { grid-template-columns:1fr; gap:35px; } .routine-item p { min-height:auto; margin-bottom:20px; } .screen-stage { max-height:355px; padding:25px 65px 0; } .quiet { grid-template-columns:1fr; padding-block:40px; gap:25px; } .pro { padding:25px; border-radius:22px; } .pro-layout { grid-template-columns:1fr; } .pro-image { width:210px; margin-block:10px; } .closing { padding-bottom:55px; } .footer { display:block; } .footer-links { margin-top:18px; } .page-head { padding-block:45px 25px; } .support-grid { grid-template-columns:1fr; padding-bottom:55px; } .contact-panel { padding:25px; } }
@media (max-width:390px) { .nav { width:100%; justify-content:space-between; } .hero-visual { min-height:440px; } .phone { width:42%; max-width:157px; } h1 { font-size:38px; } .screen-stage { padding-inline:45px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }