:root{--ink:#142447;--muted:#52617b;--blue:#0645e6;--yellow:#ffd33d;--paper:#f6f8ff;--line:#dce3f2;--white:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;font-size:18px;line-height:1.65}
a{color:var(--blue);text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--blue);outline-offset:5px;border-radius:3px}
.skip{position:absolute;left:1rem;top:-5rem;padding:.5rem 1rem;background:var(--white);z-index:10}
.skip:focus{top:1rem}
.shell{width:min(1100px,calc(100% - 48px));margin:auto}
header{background:var(--white);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:21px;font-weight:760;white-space:nowrap}
.brand img{width:44px;height:44px;border-radius:11px}
nav{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
nav a{text-decoration:none;font-size:15px;font-weight:650}
nav a[aria-current=page]{text-decoration:underline}
.language{border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.hero{padding-block:84px 70px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:60px;align-items:center}
.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:750;color:var(--blue);margin:0 0 20px}
h1{font-size:clamp(42px,6vw,70px);letter-spacing:-.055em;line-height:1.05;margin:0 0 28px;font-weight:780}
h2{font-size:clamp(27px,3.6vw,38px);line-height:1.15;letter-spacing:-.03em;margin:0 0 22px}
h3{font-size:21px;line-height:1.3;margin:0 0 10px}
p{margin:0 0 20px}
.lead{font-size:clamp(23px,3vw,31px);line-height:1.3;letter-spacing:-.02em}
.description{color:var(--muted);max-width:60ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:30px}
.button{display:inline-block;background:var(--blue);color:var(--white);padding:12px 21px;border-radius:12px;text-decoration:none;font-size:16px;font-weight:700}
.button:hover{background:#0036be}
.illustration{background:var(--blue);padding:34px;border-radius:28px;transform:rotate(-3deg);box-shadow:0 18px 36px #102a6b14}
.demo{background:var(--white);border-radius:18px;padding:30px;transform:rotate(3deg);text-align:center}
.small-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650}
.word{font-size:48px;letter-spacing:-.04em;font-weight:750;line-height:1.2;margin:9px 0 22px}
.guide{font-size:40px;font-weight:720;background:var(--yellow);display:inline-block;border-radius:10px;padding:0 18px;color:var(--ink);margin:8px 0 12px}
.demo-caption{color:var(--white);font-size:13px;text-align:center;margin:22px 0 0;transform:rotate(3deg)}
.section{padding-block:54px;border-top:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:36px}
.number{display:inline-grid;place-items:center;background:var(--yellow);width:36px;height:36px;border-radius:50%;font-weight:750;margin-bottom:18px}
.steps p{font-size:16px;color:var(--muted)}
.contact-band{display:flex;justify-content:space-between;align-items:center;gap:24px}
.contact-band p{margin:0}
.email{overflow-wrap:anywhere;font-weight:650}
.page-head{max-width:850px;padding:65px 0 35px}
.page-head h1{font-size:clamp(38px,6vw,60px)}
.article{max-width:780px;padding-bottom:64px}
.article section{padding:24px 0;border-top:1px solid var(--line)}
.article h2{font-size:25px}
.article p{color:var(--muted)}
.faq{margin-top:36px}
.faq article{padding:24px 0;border-top:1px solid var(--line)}
.faq p{color:var(--muted);margin:0}
.help-note{padding:24px;background:var(--white);border-left:4px solid var(--yellow);margin-top:34px}
.help-note p{margin:0;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:30px 0 40px;font-size:14px;color:var(--muted)}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px}
.footer-links{display:flex;gap:22px}
.date{font-size:15px;color:var(--muted)}
@media(max-width:760px){body{font-size:17px}
.shell{width:calc(100% - 32px)}
.bar{align-items:flex-start;flex-direction:column;gap:16px}
nav{width:100%;gap:12px 20px}
.hero{grid-template-columns:1fr;padding:48px 0 44px;gap:40px}
.illustration{width:min(340px,90%);margin:8px auto 10px}
.steps{grid-template-columns:1fr;gap:24px}
.contact-band{align-items:flex-start;flex-direction:column}
.page-head{padding-top:44px}
.section{padding-block:38px}
.footer-row{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}
