:root { --canvas:#fdfdfc; --ink:#0a1020; --muted:#5d6678; --line:#dce2ea; --blue:#0969f9; --blue-dark:#0558d4; --panel:#f4f7fb; --radius:8px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--canvas); color:var(--ink); font:16px/1.55 Inter,Arial,sans-serif; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; }
.site-container { width:min(1160px,calc(100% - 64px)); margin:auto; }
.site-header { background:rgba(253,253,252,.96); position:relative; z-index:2; } .header-inner { min-height:91px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:.92rem; font-weight:800; letter-spacing:-.035em; text-transform:uppercase; white-space:nowrap; } .brand img { width:31px; height:31px; }
.primary-nav,.site-footer nav { display:flex; align-items:center; gap:35px; color:#303a4c; font-size:.88rem; } .primary-nav a:hover,.site-footer a:hover { color:var(--blue); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:17px; padding:15px 22px; border-radius:4px; color:#fff; background:var(--blue); box-shadow:0 6px 16px rgba(9,105,249,.16); font-size:.95rem; font-weight:600; transition:.18s ease; } .button:hover { background:var(--blue-dark); color:#fff; transform:translateY(-1px); } .button span { font-size:1.25rem; line-height:.8; } .button-small { padding:12px 18px; font-size:.88rem; }
.eyebrow { margin:0 0 24px; color:#596379; font: .72rem/1.4 "JetBrains Mono",monospace; letter-spacing:.145em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.055em; } h1 { max-width:720px; margin-bottom:24px; font-size:clamp(3.15rem,4.2vw,4.6rem); font-weight:800; line-height:.98; } h2 { margin-bottom:15px; font-size:clamp(2.15rem,3.25vw,3.1rem); font-weight:800; line-height:1.02; } h3 { font-size:1.15rem; line-height:1.2; }
.hero { padding:76px 0 0; overflow:hidden; } .hero-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(370px,.9fr); align-items:center; gap:48px; min-height:492px; } .hero-copy { padding-bottom:8px; } .hero-intro { max-width:570px; margin-bottom:25px; color:#4d596f; font-size:clamp(1.04rem,1.55vw,1.24rem); line-height:1.48; } .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:19px; } .hero-actions p { margin:0; color:var(--muted); font-size:.82rem; }
.hero-art { position:relative; min-height:480px; display:flex; align-items:center; justify-content:center; } .hero-art img { width:min(100%,445px); } .hero-art p { position:absolute; right:15px; bottom:30px; display:flex; align-items:flex-start; gap:14px; width:135px; margin:0; color:#566178; font:.64rem/1.5 "JetBrains Mono",monospace; letter-spacing:.15em; text-transform:uppercase; } .hero-art p span { flex:0 0 38px; height:1px; margin-top:5px; background:#8798b4; }
.trust-points { display:flex; gap:clamp(28px,6vw,82px); padding:29px 0 47px; } .trust-points p { position:relative; margin:0; padding-left:27px; color:#28354b; font-size:.9rem; } .trust-points p::before { content:""; position:absolute; left:0; top:3px; width:17px; height:17px; border:1.5px solid var(--blue); border-radius:50%; } .trust-points p::after { content:""; position:absolute; left:5px; top:8px; width:7px; height:4px; border-bottom:1.5px solid var(--blue); border-left:1.5px solid var(--blue); transform:rotate(-45deg); }
.section-rule { border-top:1px solid var(--line); } .services,.process,.closing-cta { padding:66px 0 76px; } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:42px; } .section-heading h2 { flex:1; max-width:760px; } .section-heading>p { flex:0 0 330px; margin-bottom:14px; color:var(--muted); }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:52px; border-top:1px solid var(--line); } .service-item { min-height:257px; padding:28px 30px 23px 0; border-bottom:1px solid var(--line); } .service-item:not(:nth-child(3n)) { padding-right:30px; padding-left:30px; border-right:1px solid var(--line); } .service-item:first-child,.service-item:nth-child(3n+1) { padding-left:0; } .service-number { margin-bottom:31px; color:var(--blue); font:.73rem "JetBrains Mono",monospace; letter-spacing:.12em; } .service-item h3 { margin-bottom:11px; font-size:1.25rem; } .service-item>p:not(.service-number) { min-height:74px; margin-bottom:20px; color:var(--muted); font-size:.93rem; line-height:1.48; } .service-item a { color:var(--blue); font-size:.9rem; font-weight:600; } .service-item a span { margin-left:8px; font-size:1.15rem; }
.process-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:85px; } .process-grid h2 { max-width:390px; } .process-steps { display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--line); } .process-steps article { padding:0 20px 0 26px; border-right:1px solid var(--line); } .process-steps article>p:first-child { color:var(--blue); font:.73rem "JetBrains Mono",monospace; letter-spacing:.12em; } .process-steps h3 { margin-bottom:10px; } .process-steps article>p:last-child { margin-bottom:0; color:var(--muted); font-size:.89rem; }
.reliability { padding:0 0 78px; } .reliability-panel { display:grid; grid-template-columns:1fr 1fr; gap:72px; padding:54px 56px; background:var(--panel); border-radius:var(--radius); } .reliability-panel h2 { max-width:490px; font-size:clamp(2rem,3.4vw,3.1rem); } .reliability-panel>div>p:last-child { max-width:480px; margin-bottom:0; color:var(--muted); font-size:1.04rem; } .reliability-list { display:grid; align-content:center; gap:26px; padding-left:45px; border-left:1px solid #ccd6e4; } .reliability-list article { position:relative; padding-left:28px; } .reliability-list article::before { content:""; position:absolute; top:4px; left:0; width:13px; height:13px; border:1.5px solid var(--ink); border-radius:50%; } .reliability-list h3 { margin-bottom:3px; font-size:1rem; } .reliability-list p { margin-bottom:0; color:var(--muted); font-size:.89rem; }
.closing-cta { text-align:center; } .closing-cta .eyebrow { margin-bottom:18px; } .closing-cta h2 { max-width:630px; margin:0 auto 27px; } .site-footer { border-top:1px solid var(--line); } .footer-inner { min-height:119px; display:flex; align-items:center; justify-content:space-between; gap:30px; } .site-footer nav { gap:23px; font-size:.82rem; } .site-footer p { margin:0; color:#697487; font-size:.77rem; }
@media(max-width:900px) { .primary-nav { gap:18px; } .hero-grid { grid-template-columns:1fr .8fr; gap:25px; } .hero-art { min-height:390px; } .hero-art p { display:none; } .process-grid { gap:35px; } .reliability-panel { gap:42px; padding:44px; } }
@media(max-width:700px) { .site-container { width:min(100% - 40px,560px); } .header-inner { min-height:74px; } .brand { font-size:.8rem; } .brand img { width:28px; height:28px; } .primary-nav { display:none; } .button-small { padding:10px 13px; font-size:.78rem; } .hero { padding-top:54px; } .hero-grid { grid-template-columns:1fr; gap:12px; } h1 { font-size:clamp(3.1rem,14vw,4.5rem); } .hero-art { min-height:330px; margin-top:-18px; } .hero-art img { width:335px; } .trust-points { display:grid; grid-template-columns:1fr; gap:15px; padding:26px 0 36px; } .services,.process,.closing-cta { padding:50px 0; } .section-heading { display:block; } .section-heading>p { margin-bottom:0; } .service-grid { grid-template-columns:1fr; margin-top:34px; } .service-item,.service-item:not(:nth-child(3n)),.service-item:first-child,.service-item:nth-child(3n+1) { min-height:auto; padding:25px 0; border-right:0; } .service-item>p:not(.service-number) { min-height:0; } .service-number { margin-bottom:20px; } .process-grid,.reliability-panel { grid-template-columns:1fr; gap:30px; } .process-steps { grid-template-columns:1fr; gap:25px; border-left:0; } .process-steps article { padding:0 0 0 24px; border-right:0; border-left:1px solid var(--line); } .reliability { padding-bottom:50px; } .reliability-panel { padding:36px 25px; } .reliability-list { padding-left:27px; } .footer-inner { min-height:0; flex-direction:column; align-items:flex-start; padding:32px 0; gap:22px; } .site-footer nav { flex-wrap:wrap; } }