:root { color-scheme: light; --blue:#0a66cc; --blue-dark:#0755aa; --blue-soft:#eef6ff; --ink:#18212f; --muted:#5d6878; --line:#e2e7ee; --surface:#fff; --mist:#f7f9fc; --max:1140px; --reading:760px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--surface); font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; } a { color:var(--blue-dark); text-decoration-thickness:1px; text-underline-offset:.18em; } a:hover { color:var(--blue); } a:focus-visible { outline:3px solid #87bdf3; outline-offset:4px; border-radius:5px; } img { display:block; max-width:100%; }
.shell { width:min(calc(100% - 40px),var(--max)); margin-inline:auto; } .reading { width:min(calc(100% - 40px),var(--reading)); margin-inline:auto; } .skip { position:absolute; left:-999px; top:8px; z-index:30; padding:8px 12px; background:#fff; } .skip:focus { left:8px; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(14px); } .nav-wrap { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand { color:var(--ink); font-size:20px; font-weight:760; letter-spacing:-.03em; text-decoration:none; white-space:nowrap; } .brand .mark { color:var(--blue); } nav { display:flex; align-items:center; gap:2px; } nav a { min-height:42px; display:inline-flex; align-items:center; padding:0 11px; border-radius:9px; color:var(--muted); font-size:14px; font-weight:650; text-decoration:none; } nav a:hover,nav a[aria-current="page"] { color:var(--blue-dark); background:var(--blue-soft); } .lang { border-left:1px solid var(--line); margin-left:5px; padding-left:10px; }
.hero { padding:clamp(68px,11vw,138px) 0 56px; overflow:hidden; background:linear-gradient(180deg,#f8fbff 0%,#fff 72%); } .hero-grid { display:grid; grid-template-columns:minmax(0,.88fr) minmax(320px,.62fr); align-items:center; gap:clamp(40px,8vw,108px); } .eyebrow,.section-label { margin:0 0 14px; color:var(--blue-dark); font-size:13px; font-weight:760; letter-spacing:.09em; line-height:1.35; text-transform:uppercase; } h1,h2,h3 { margin-top:0; letter-spacing:-.045em; line-height:1.12; } h1 { max-width:680px; margin-bottom:20px; font-size:clamp(50px,7.2vw,84px); } h2 { margin-bottom:20px; font-size:clamp(34px,4.7vw,54px); } h3 { margin-bottom:8px; font-size:21px; } .lead { max-width:590px; margin:0 0 26px; color:var(--muted); font-size:clamp(19px,2.25vw,24px); line-height:1.5; } .cta { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:10px 18px; border:1px solid var(--blue); border-radius:12px; color:#fff; background:var(--blue); font-size:16px; font-weight:700; text-decoration:none; } .cta:hover { color:#fff; background:var(--blue-dark); }
.device { margin:0 auto; width:min(100%,380px); padding:9px; border:1px solid #dce4ee; border-radius:32px; background:#101828; box-shadow:0 30px 65px rgba(23,42,70,.18); } .device img { border-radius:24px; } .section { padding:clamp(72px,10vw,126px) 0; } .tinted { border-block:1px solid var(--line); background:var(--mist); } .section-intro { max-width:650px; margin:0 0 42px; color:var(--muted); font-size:19px; } .feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,5vw,70px); align-items:center; } .feature-grid.reverse .copy { order:2; } .feature-grid.reverse .shot { order:1; } .copy p { margin:0 0 18px; color:var(--muted); } .plain-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; margin:25px 0 0; padding:0; list-style:none; color:var(--ink); font-weight:640; } .plain-list li::before { content:"•"; margin-right:9px; color:var(--blue); } .shot { max-width:390px; margin-inline:auto; } .shot img { border:1px solid #dbe2eb; border-radius:24px; box-shadow:0 20px 45px rgba(23,42,70,.12); }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .card { padding:26px; border:1px solid var(--line); border-radius:18px; background:#fff; } .card p { margin:0; color:var(--muted); } .card .number { display:block; margin-bottom:16px; color:var(--blue); font-size:15px; font-weight:760; } .text-block { max-width:730px; } .text-block p { color:var(--muted); } .faq { border-top:1px solid var(--line); } .faq details { padding:21px 0; border-bottom:1px solid var(--line); } .faq summary { cursor:pointer; font-weight:740; } .faq p { max-width:700px; margin:10px 0 0; color:var(--muted); } .closing { padding:clamp(70px,10vw,120px) 0; text-align:center; background:var(--blue-soft); } .closing p { max-width:570px; margin:0 auto 24px; color:var(--muted); font-size:19px; }
.policy-hero { padding:86px 0 54px; background:var(--blue-soft); } .policy-hero h1 { font-size:clamp(42px,6vw,64px); } .updated { color:var(--blue-dark); font-size:15px; font-weight:680; } .policy { padding:34px 0 94px; } .policy section { padding:40px 0; border-bottom:1px solid var(--line); } .policy h2 { margin-bottom:16px; font-size:clamp(27px,3.4vw,34px); } .policy p { margin:0 0 15px; color:var(--muted); } .policy ul { color:var(--muted); } .support-list { margin:0; padding-left:22px; } .support-list li { margin:9px 0; } .site-footer { padding:40px 0; color:#c7d0dd; background:#131c2a; font-size:14px; } .footer-wrap { display:flex; justify-content:space-between; gap:32px; } .site-footer p { margin:0; } .site-footer strong,.site-footer a { color:#fff; }
@media (max-width:760px) { body { font-size:16px; } .shell,.reading { width:min(calc(100% - 32px),var(--max)); } .nav-wrap { align-items:flex-start; padding-block:11px; } nav { flex-wrap:wrap; justify-content:flex-end; } nav a { min-height:34px; padding-inline:7px; font-size:13px; } .lang { margin-left:0; padding-left:4px; border-left:0; } .hero-grid,.feature-grid { grid-template-columns:1fr; } .feature-grid.reverse .copy,.feature-grid.reverse .shot { order:initial; } .hero { padding-bottom:70px; } .device { width:min(88%,380px); } .cards { grid-template-columns:1fr; } .plain-list { grid-template-columns:1fr; } .footer-wrap { flex-direction:column; gap:19px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }