:root { color-scheme: light dark; --ink:#151923; --muted:#596170; --surface:#fff; --soft:#eef3fb; --line:#d5dce8; --accent:#0869d8; --accent-dark:#004fa8; --radius:22px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; color:var(--ink); background:#f6f7fb; line-height:1.6; } a { color:inherit; } img { display:block; max-width:100%; height:auto; } .shell { width:min(1120px,calc(100% - 40px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:30; top:10px; left:10px; padding:9px 12px; color:#fff; background:#111827; border-radius:8px; transform:translateY(-160%); } .skip-link:focus { transform:translateY(0); } :focus-visible { outline:3px solid #005fcc; outline-offset:4px; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface) 90%,transparent); backdrop-filter:blur(18px); } .nav { min-height:68px; display:flex; align-items:center; gap:20px; } .brand { display:flex; align-items:center; gap:9px; font-weight:750; text-decoration:none; white-space:nowrap; } .brand-mark { display:grid; place-items:center; width:28px; height:28px; color:#fff; background:var(--accent); border-radius:8px; } .nav-links { display:flex; gap:20px; margin-left:auto; font-size:.92rem; } .nav-links a { color:var(--muted); text-decoration:none; } .nav-links a:hover,.text-link:hover { color:var(--accent); }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:0 18px; color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:11px; font-weight:700; text-decoration:none; } .button:hover { background:var(--accent-dark); border-color:var(--accent-dark); } .button-small { min-height:37px; padding-inline:14px; font-size:.9rem; }
.hero { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; min-height:680px; padding-block:88px; } .eyebrow { margin:0 0 12px; color:var(--accent-dark); font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } h1,h2,h3 { line-height:1.08; letter-spacing:-.035em; } h1 { margin:0 0 22px; font-size:clamp(3rem,6vw,5.8rem); } h1 span { color:var(--muted); } h2 { margin:0 0 15px; font-size:clamp(2.1rem,4vw,3.6rem); } h3 { margin:0 0 12px; font-size:1.25rem; } .hero-lede { max-width:590px; margin:0 0 27px; color:var(--muted); font-size:1.18rem; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; } .text-link { color:var(--accent-dark); font-weight:700; } .release-note,.section-note,.quality-note { color:var(--muted); font-size:.92rem; } .release-note { margin:18px 0 0; }
.app-frame { width:min(395px,100%); margin:0 auto; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 25px 80px rgba(25,45,80,.18); } .app-frame figcaption { padding:9px 13px; color:var(--muted); font-size:.78rem; text-align:center; }
.section { padding-block:96px; } .section-heading { max-width:740px; margin:0 auto 38px; text-align:center; } .alt-section { background:var(--soft); } .metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; } .metric-card,.privacy-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .metric-card { min-height:215px; padding:25px; } .metric-card p,.privacy-card p,.faq-list p { color:var(--muted); } .quality-note,.section-note { max-width:760px; margin:23px auto 0; text-align:center; }
.surface-showcase { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr); gap:28px; align-items:center; } .surface-frame { display:block; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 20px 60px rgba(25,45,80,.14); } .surface-frame img { width:100%; max-height:760px; object-fit:contain; } .surface-list { display:grid; gap:12px; } .surface-list article { padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); } .surface-list p { margin:0; color:var(--muted); }
.source-table { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } table { width:100%; min-width:690px; border-collapse:collapse; } th,td { padding:19px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } thead th { background:#e3ecfa; } tbody tr:last-child th,tbody tr:last-child td { border-bottom:0; }
.privacy-card { max-width:900px; margin:auto; padding:clamp(28px,6vw,62px); background:linear-gradient(135deg,#fff,#e8f2ff); } .privacy-card ul { padding-left:1.2em; } .privacy-card li { margin-block:10px; } .install-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:900px; margin:0 auto 30px; padding-left:25px; } .install-steps li { padding:18px; border-left:3px solid var(--accent); background:var(--surface); } .centered { text-align:center; }
.faq-list { max-width:800px; margin:auto; } details { margin-bottom:11px; padding:18px 21px; border:1px solid var(--line); border-radius:14px; background:var(--surface); } summary { cursor:pointer; font-weight:750; } details p { margin:14px 0 0; } .site-footer { display:flex; justify-content:space-between; gap:20px; padding-block:28px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; } .site-footer a { color:var(--accent-dark); }
.og-card-page { display:grid; width:1200px; height:630px; place-items:center; overflow:hidden; background:#f6f7fb; } .og-card { display:grid; grid-template-columns:1fr 280px; align-items:center; gap:34px; width:1080px; height:510px; padding:58px 64px; overflow:hidden; border-radius:35px; color:#fff; background:linear-gradient(135deg,#063b83,#0875e1); box-shadow:0 28px 80px rgba(6,59,131,.28); } .og-card p { margin:0; font-size:17px; letter-spacing:.12em; font-weight:800; } .og-card h1 { margin:24px 0 30px; font-size:68px; } .og-card span { font-size:20px; } .og-app { align-self:start; overflow:hidden; border:1px solid rgba(255,255,255,.45); border-radius:18px; box-shadow:0 22px 60px rgba(0,0,0,.28); } .og-app img { width:100%; }
@media (prefers-color-scheme: dark) { :root { --ink:#eef3fb; --muted:#b6c1d2; --surface:#161b25; --soft:#10151e; --line:#30394a; --accent:#56a5ff; --accent-dark:#9bc8ff; } body { background:#0c1017; } :focus-visible { outline-color:var(--accent); } .button { color:#0c1017; } .site-header { background:color-mix(in srgb,var(--surface) 88%,transparent); } .metric-card,.privacy-card,details,.source-table { background:var(--surface); } .privacy-card { background:linear-gradient(135deg,#182335,#111c2c); } thead th { background:#23314a; } .install-steps li { background:var(--surface); } .app-frame { background:var(--surface); } }
@media (max-width: 900px) { .hero { grid-template-columns:1fr; gap:40px; min-height:0; padding-block:68px; } .app-frame { width:min(420px,92%); } .metric-grid { grid-template-columns:repeat(2,1fr); } .surface-showcase { grid-template-columns:1fr; } .surface-frame { width:min(660px,100%); margin-inline:auto; } .nav-links { gap:14px; } }
@media (max-width: 640px) { .shell { width:min(100% - 28px,1120px); } .nav { display:grid; grid-template-columns:1fr auto; gap:8px 10px; min-height:60px; padding-block:10px; } .nav-links { display:flex; grid-column:1 / -1; grid-row:2; flex-wrap:wrap; gap:7px 13px; margin:0; } .nav .button { margin-left:auto; } .hero { padding-block:52px; } .section { padding-block:66px; } .metric-grid,.install-steps { grid-template-columns:1fr; } .site-footer { display:block; } .site-footer span { display:block; margin-block:5px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }