:root { --blue:#168bf5; --blue-dark:#096fcf; --blue-light:#55aeff; --ink:#142033; --muted:#66758a; --line:#e5eaf1; --soft:#f5f8fc; --paper:#fff; --radius:28px; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; line-height:1.55; background:#fff; } a { color:inherit; text-decoration:none; } a:focus-visible,summary:focus-visible { outline:3px solid #78bdff; outline-offset:4px; border-radius:8px; }.container { width:min(1160px,calc(100% - 48px)); margin:0 auto; }
.site-header { padding:18px 0; border-bottom:1px solid rgba(229,234,241,.85); background:rgba(255,255,255,.88); position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); }.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; }.brand { display:flex; align-items:center; gap:10px; font-weight:720; letter-spacing:-.03em; white-space:nowrap; }.brand-mark { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; font-size:15px; background:linear-gradient(135deg,var(--blue),var(--blue-light)); box-shadow:0 7px 17px rgba(22,139,245,.24); }.nav-links,.footer-links { display:flex; align-items:center; gap:22px; color:var(--muted); font-size:14px; }.nav-links a:hover,.footer-links a:hover { color:var(--blue); }.lang { padding:8px 12px; border:1px solid var(--line); border-radius:99px; color:var(--ink); background:#fff; }
.hero { background:linear-gradient(135deg,#e8f4ff 0%,#f8fbff 57%,#fff 100%); padding:78px 0 70px; overflow:hidden; }.hero-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:58px; align-items:center; }.eyebrow,.section-kicker { color:var(--blue-dark); font-size:13px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }.hero h1 { font-size:clamp(46px,6.1vw,76px); line-height:.98; letter-spacing:-.07em; margin:16px 0 22px; max-width:650px; }.lead { max-width:555px; color:var(--muted); font-size:19px; line-height:1.55; }.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }.button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:12px 19px; border-radius:99px; background:var(--blue); color:#fff; font-weight:680; box-shadow:0 11px 24px rgba(22,139,245,.2); }.button:hover { background:var(--blue-dark); }.button.secondary { color:var(--ink); background:#fff; border:1px solid var(--line); box-shadow:none; }
.app-shot { width:min(100%,312px); margin:auto; padding:6px; border:1px solid rgba(26,43,63,.48); border-radius:33px; background:#192433; box-shadow:0 26px 58px rgba(22,59,100,.21); overflow:hidden; }.app-shot img { display:block; width:100%; height:auto; border-radius:27px; }.hero-shot { transform:rotate(2deg); }.shot-wrap { display:flex; justify-content:center; }.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:92px; align-items:center; padding:88px 0; }.feature-row.reverse .feature-copy { order:2; }.feature-row.reverse .shot-wrap { order:1; }.feature-row .app-shot { width:min(100%,292px); }.section-heading { font-size:clamp(35px,4.3vw,54px); line-height:1.04; letter-spacing:-.06em; margin:9px 0 16px; }.section-copy { max-width:560px; color:var(--muted); font-size:17px; }.feature-list { margin:23px 0 0; padding:0; list-style:none; display:grid; gap:11px; color:#44546a; }.feature-list li::before { content:"✓"; color:var(--blue); font-weight:800; margin-right:10px; }.soft-section { background:var(--soft); }.privacy-card { border-radius:var(--radius); padding:36px; background:linear-gradient(135deg,#edf7ff,#fff); border:1px solid #d6e8fa; box-shadow:0 18px 43px rgba(28,78,129,.07); }.privacy-card h2 { font-size:clamp(32px,4vw,48px); line-height:1.06; letter-spacing:-.055em; margin:9px 0 16px; }.privacy-points { display:flex; flex-wrap:wrap; gap:10px; margin:23px 0; }.pill { background:#fff; border:1px solid #dceaf7; border-radius:99px; padding:8px 13px; color:#38536f; font-size:14px; }.small-note { margin:18px 0 0; color:var(--muted); font-size:14px; }.widget-panel { border:1px solid #d7e7f7; border-radius:var(--radius); padding:32px; background:#fff; box-shadow:0 18px 42px rgba(34,74,124,.07); }.widget-label { color:#60728e; font-size:12px; font-weight:700; letter-spacing:.06em; }.widget-value { margin-top:14px; font-size:32px; font-weight:740; line-height:1.1; letter-spacing:-.05em; }.widget-value span { display:block; margin-top:8px; color:var(--muted); font-size:16px; font-weight:500; letter-spacing:0; }.backup-list { display:grid; gap:13px; padding:0; list-style:none; color:var(--muted); }.backup-list li::before { content:"→"; color:var(--blue); font-weight:800; margin-right:10px; }
.cta { text-align:center; padding:96px 0 105px; }.cta .section-copy { margin:0 auto; }.page-hero { background:linear-gradient(135deg,#edf7ff,#f9fbfe); padding:66px 0 57px; }.page-hero h1 { font-size:clamp(42px,6vw,68px); margin:14px 0; line-height:1; letter-spacing:-.06em; }.page-hero p { max-width:630px; color:var(--muted); font-size:18px; }.prose { max-width:800px; padding:70px 0 94px; }.prose h2 { margin-top:42px; font-size:26px; letter-spacing:-.035em; }.prose p,.prose li { color:#536177; }.prose ul { padding-left:22px; }.updated { color:var(--muted); font-size:14px; }.faq { border-top:1px solid var(--line); }.faq details { border-bottom:1px solid var(--line); padding:21px 0; }.faq summary { cursor:pointer; font-weight:670; font-size:18px; }.faq p { margin:14px 0 0; } footer { background:#f7f9fc; padding:34px 0; color:var(--muted); font-size:13px; }.footer-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }.disclaimer { max-width:780px; margin:24px 0 0; }
.breadcrumb { color:var(--muted); font-size:14px; margin-bottom:18px; }.breadcrumb a { color:var(--blue-dark); }.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:50px 0; }.guide-card { border:1px solid var(--line); border-radius:18px; padding:24px; background:#fff; }.guide-card h3 { margin:0 0 9px; font-size:20px; letter-spacing:-.03em; }.guide-card p { margin:0; color:var(--muted); font-size:15px; }.guide-card a { color:var(--blue-dark); font-weight:700; }.formula { margin:26px 0; padding:20px; border-left:4px solid var(--blue); background:var(--soft); font-size:20px; font-weight:700; color:#24354d; overflow-wrap:anywhere; }.guide-cta { margin-top:42px; padding:28px; border-radius:20px; background:var(--soft); }.guide-cta h2 { margin-top:0; }
@media (max-width:800px) { .container { width:min(100% - 32px,1160px); }.site-header { position:relative; }.nav-links { gap:11px; }.nav-links a:not(.lang) { display:none; }.hero { padding:58px 0 62px; }.hero-grid,.feature-row { grid-template-columns:1fr; gap:42px; }.hero h1 { font-size:clamp(43px,13vw,60px); }.hero-shot { transform:none; }.feature-row,.feature-row.reverse { padding:58px 0; }.feature-row.reverse .feature-copy,.feature-row.reverse .shot-wrap { order:initial; }.feature-row .shot-wrap { margin-top:4px; }.app-shot { width:min(76vw,312px); }.feature-row .app-shot { width:min(72vw,292px); }.privacy-card { padding:28px; }.cta { padding:75px 0 82px; }.footer-links { gap:14px; flex-wrap:wrap; } }
@media (max-width:800px) { .guide-grid { grid-template-columns:1fr; padding:34px 0; } .formula { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition-duration:.01ms !important; animation-duration:.01ms !important; } }