:root { --navy:#071a36; --blue:#1769ff; --ink:#10233f; --muted:#66758a; --line:#dfe6ef; --bg:#f5f8fc; font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink); background:#fff; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; } a { color:inherit; } .site-header { max-width:1180px; margin:auto; min-height:82px; padding:0 24px; display:flex; align-items:center; gap:38px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:21px; font-weight:800; letter-spacing:-.5px; }.logo span { width:37px; height:37px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--blue),#6ba2ff); border-radius:10px; box-shadow:0 8px 22px #1769ff3d; }
.site-header nav { display:flex; gap:28px; margin-left:auto; }.site-header nav a { text-decoration:none; color:#58687e; font-size:14px; }.workspace-link,.primary { text-decoration:none; padding:12px 18px; border-radius:10px; background:var(--blue); color:#fff; font-weight:700; font-size:13px; }
.hero-public { min-height:610px; padding:92px max(24px,calc((100vw - 1180px)/2)); background:radial-gradient(circle at 75% 30%,#1d6bff55,transparent 30%),linear-gradient(125deg,#071a36,#0a2a5b); color:#fff; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:70px; }.kicker,.section-heading-public p,.cta p { color:#78a9ff; font-size:11px; font-weight:800; letter-spacing:1.6px; }.hero-public h1 { max-width:720px; margin:15px 0 20px; font-size:clamp(42px,5vw,70px); line-height:1.04; letter-spacing:-2.8px; }.lead { color:#b5c7e1; max-width:670px; font-size:18px; line-height:1.75; }.hero-actions { display:flex; gap:12px; margin:30px 0 18px; }.secondary { border:1px solid #ffffff38; color:#fff; text-decoration:none; padding:12px 18px; border-radius:10px; font-size:13px; font-weight:700; }.trust { color:#7f98bb; font-size:12px; }
.workflow-card { padding:30px; background:#ffffff0e; border:1px solid #ffffff18; border-radius:20px; backdrop-filter:blur(10px); display:grid; grid-template-columns:40px 1fr; gap:13px 15px; align-items:center; }.workflow-card .step-badge { width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:#1769ff;font-weight:800; }.workflow-card small,.workflow-card strong { display:block; }.workflow-card small { color:#7fa4d5;font-size:10px;letter-spacing:1.2px; }.workflow-card strong { margin-top:4px;font-size:15px; }.workflow-card i { width:1px;height:23px;background:#ffffff26;margin:auto;grid-column:1; }
.section { max-width:1180px; margin:auto; padding:100px 24px; }.section-heading-public { max-width:720px; margin-bottom:42px; }.section-heading-public p { color:var(--blue); }.section-heading-public h2 { margin:10px 0 0; font-size:clamp(32px,4vw,49px); line-height:1.14; letter-spacing:-1.7px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.feature-grid article { padding:28px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 15px 45px #193a6810; }.feature-grid article>span { min-width:39px;height:39px;padding:0 8px;display:inline-grid;place-items:center;border-radius:10px;background:#eaf1ff;color:var(--blue);font-weight:900;font-size:12px; }.feature-grid h3 { margin:20px 0 9px;font-size:18px; }.feature-grid p,.workflow-section p,.faq-section p { color:var(--muted);line-height:1.75;font-size:14px; }
.workflow-section { max-width:none;background:var(--bg);padding-left:max(24px,calc((100vw - 1180px)/2));padding-right:max(24px,calc((100vw - 1180px)/2)); }.workflow-section ol { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px; }.workflow-section li { padding:26px;background:#fff;border-radius:15px;border:1px solid var(--line); }.workflow-section li>b { color:var(--blue);font-size:12px;letter-spacing:1px; }.workflow-section h3 { margin:28px 0 8px; }
.faq-section { max-width:880px; }.faq-section details { border-bottom:1px solid var(--line); padding:22px 0; }.faq-section summary { cursor:pointer;font-weight:750;font-size:17px; }.faq-section details p { margin:12px 0 0; }
.cta { max-width:1180px;margin:20px auto 90px;padding:45px 50px;border-radius:20px;background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px; }.cta h2 { margin:8px 0 0;max-width:720px;font-size:29px; }.cta a { text-decoration:none;background:var(--blue);padding:14px 20px;border-radius:10px;font-weight:700;white-space:nowrap; }
footer { max-width:1180px;margin:auto;padding:30px 24px 45px;border-top:1px solid var(--line);display:flex;align-items:center;gap:30px;color:#7a8799;font-size:11px; }footer p { margin:auto; }
.footer-links { display:flex;gap:12px;flex-wrap:wrap;justify-content:center; }.footer-links a { color:#60718a;text-decoration:none;font-weight:700; }
.content-page { width:min(900px,calc(100% - 34px));margin:44px auto 80px;background:#fff;border:1px solid #e0e7f1;border-radius:24px;padding:clamp(28px,6vw,64px);box-shadow:0 24px 70px rgba(20,51,100,.08); }
.content-page .kicker { color:#2563c4;font-size:12px;letter-spacing:.13em;font-weight:850; }.content-page h1 { font-size:clamp(36px,6vw,60px);line-height:1.04;letter-spacing:-.045em;margin:10px 0 22px; }.content-page h2 { margin:42px 0 12px;font-size:26px;letter-spacing:-.02em; }.content-page h3 { margin:26px 0 8px; }.content-page p,.content-page li { color:#52647e;line-height:1.8; }.content-page .lead { font-size:19px;color:#314663; }.content-page .note { padding:18px 20px;background:#f0f6ff;border-left:4px solid #2563c4;border-radius:10px;color:#26476f; }.content-page a { color:#1b5fc5; }
@media(max-width:850px){.site-header nav{display:none}.workspace-link{margin-left:auto}.hero-public{grid-template-columns:1fr;padding-top:65px;padding-bottom:65px}.feature-grid{grid-template-columns:1fr 1fr}.workflow-section ol{grid-template-columns:1fr 1fr}.cta{margin-left:18px;margin-right:18px;flex-direction:column;align-items:flex-start}footer{flex-wrap:wrap}}
@media(max-width:560px){.site-header{padding:0 16px}.workspace-link{font-size:0;padding:11px}.workspace-link::after{content:"Workspace";font-size:12px}.hero-public{padding-left:20px;padding-right:20px}.hero-public h1{font-size:42px;letter-spacing:-1.7px}.hero-actions{flex-direction:column;align-items:stretch;text-align:center}.feature-grid,.workflow-section ol{grid-template-columns:1fr}.section{padding:75px 20px}.cta{padding:32px 25px}.cta h2{font-size:24px}footer p{order:3;width:100%}}