:root { color-scheme: dark; --ink:#f7f8f3; --muted:#a7adad; --lime:#bef42e; --dark:#091017; --panel:#111a22; --line:rgba(229,238,239,.18); --paper:#f7f8f3; --paper-ink:#122028; --max:1320px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--dark); color:var(--ink); } a { color:inherit; text-decoration:none; } .site-header, footer { max-width:var(--max); margin:auto; padding:25px 42px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .site-header nav, footer span:last-child { display:flex; gap:28px; } .site-header nav a, footer a { color:#d9dfde; font-size:14px; } .site-header nav a:hover, footer a:hover, .text-link:hover { color:var(--lime); } .brand { display:inline-flex; align-items:center; gap:12px; font-size:25px; font-weight:720; letter-spacing:-.8px; } .brand-mark { width:34px; height:34px; display:inline-grid; place-items:center; color:#0d1518; background:var(--lime); border:2px solid var(--lime); clip-path:polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%); font-weight:900; font-size:16px; }
.hero { max-width:var(--max); min-height:580px; margin:18px auto 0; padding:42px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); align-items:center; gap:72px; border-top:1px solid var(--line); } .hero-copy h1 { max-width:730px; margin:0; font-size:clamp(48px,5.9vw,83px); line-height:.99; letter-spacing:-.072em; font-weight:740; } .hero-copy em { color:var(--lime); font-style:normal; } .hero-copy > p:not(.notice) { max-width:580px; color:#bac1c2; margin:30px 0 31px; font-size:19px; line-height:1.65; } .button { display:inline-flex; align-items:center; gap:38px; padding:18px 25px; border:1.5px solid var(--lime); border-radius:9px; font-size:17px; font-weight:680; } .button-disabled { opacity:.65; cursor:not-allowed; } .button span { font-size:24px; line-height:1; } .notice { margin:18px 0 0; color:var(--muted); font-size:13px; }
.authorization { padding:34px 38px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008)); } .authorization-title { display:flex; gap:16px; align-items:center; } .lock { width:37px; height:37px; display:grid; place-items:center; border:1px solid var(--lime); color:var(--lime); border-radius:50%; font-size:22px; } .authorization h2, .authorization h3 { margin:0; } .authorization h2 { font-size:20px; } .authorization-title p, .flow-list p { color:var(--muted); margin:5px 0 0; font-size:14px; line-height:1.55; } .flow-list { list-style:none; padding:28px 0 0; margin:0; display:grid; gap:26px; } .flow-list li { display:grid; grid-template-columns:42px 1fr; gap:16px; position:relative; } .flow-list li:not(:last-child)::before { content:""; position:absolute; left:20px; top:40px; width:1px; height:31px; background:var(--lime); opacity:.8; } .step { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--lime); color:var(--lime); font-weight:750; } .flow-list h3 { font-size:16px; padding-top:2px; }
.assurances { background:var(--paper); color:var(--paper-ink); display:grid; grid-template-columns:repeat(3,1fr); padding:49px max(42px,calc((100vw - var(--max))/2 + 42px)); gap:0; } .assurances article { min-height:145px; padding:0 36px; position:relative; } .assurances article:first-child { padding-left:0; } .assurances article:not(:last-child)::after { content:""; position:absolute; top:0; right:0; height:100%; border-right:1px solid #ced4d1; } .assurance-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px; border-radius:50%; color:#4d7200; background:#edf6d5; font-size:25px; font-weight:800; } .assurances h2 { font-size:19px; letter-spacing:-.04em; margin:0 0 8px; } .assurances p { max-width:310px; margin:0; color:#536168; font-size:14px; line-height:1.65; } footer { color:#899494; font-size:12px; border-top:1px solid var(--line); }
.legal-page { background:var(--paper); color:var(--paper-ink); } .legal-page .site-header { border-bottom:1px solid #dbe1dc; } .legal-page .site-header nav a, .legal-page footer a { color:#344349; } .legal { max-width:780px; min-height:calc(100vh - 184px); margin:0 auto; padding:78px 40px; } .legal h1 { font-size:50px; letter-spacing:-.065em; margin:0; } .legal h2 { margin:42px 0 10px; font-size:20px; letter-spacing:-.03em; } .legal p { color:#405058; font-size:16px; line-height:1.72; } .legal .updated { margin-top:11px; color:#718087; font-size:13px; } .legal a, .text-link { color:#426600; text-decoration:underline; text-underline-offset:3px; } .legal-page footer { border-top:1px solid #dbe1dc; color:#718087; }
.callback-page { min-height:100vh; display:grid; place-items:center; padding:28px; background:var(--dark); } .callback { width:min(540px,100%); padding:44px; border:1px solid var(--line); border-radius:18px; background:var(--panel); } .callback h1 { margin:26px 0 13px; font-size:32px; letter-spacing:-.055em; } .callback p { color:var(--muted); line-height:1.65; margin:0 0 24px; }
@media (max-width:850px) { .site-header,footer { padding:21px 24px; } .hero { padding:55px 24px; grid-template-columns:1fr; gap:46px; } .authorization { padding:27px 25px; } .assurances { padding:40px 24px; grid-template-columns:1fr; gap:34px; } .assurances article, .assurances article:first-child { padding:0; } .assurances article:not(:last-child)::after { display:none; } .legal { padding:52px 24px; } .legal h1 { font-size:39px; } }
@media (max-width:510px) { .brand { font-size:21px; } .brand-mark { width:30px; height:30px; } .site-header nav,footer span:last-child { gap:14px; } .hero-copy h1 { font-size:48px; } .hero-copy > p:not(.notice) { font-size:17px; } footer { align-items:flex-start; flex-direction:column; } }