:root{--blue:#1768ff;--deep:#061b51;--ink:#0d1930;--muted:#63728c;--pale:#edf4ff;--line:#d8e6fb;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--blue);z-index:10}
header{height:86px;position:absolute;z-index:3;width:100%;padding:0 7vw;display:flex;align-items:center;justify-content:space-between}
.logo{font:800 19px Manrope,sans-serif;letter-spacing:-1.2px;color:var(--ink);text-decoration:none}
.logo span{color:var(--blue)}
.top-cta{font-size:14px;font-weight:700;text-decoration:none;color:var(--ink)}
.top-cta b{color:var(--blue);font-size:18px}
.hero{min-height:780px;background:radial-gradient(circle at 84% 15%,#d9e9ff 0,transparent 29%),linear-gradient(115deg,#fff 0%,#f8fbff 63%,#eef6ff);display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:155px 8vw 90px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.8px;color:var(--blue);margin:0 0 18px}
.eyebrow:before{content:'';width:8px;height:8px;display:inline-block;border-radius:50%;background:var(--blue);margin-right:8px}
.hero h1,.section h2,.final h2{margin:0;font:800 clamp(42px,5vw,75px)/1 Manrope,sans-serif;letter-spacing:-3.8px}
.hero h1 em,.final h2 em{font-style:normal;color:var(--blue)}
.hero-copy>p:not(.eyebrow),.solution-copy>p:not(.eyebrow){max-width:510px;color:var(--muted);font-size:18px;line-height:1.55;margin:27px 0}
.btn{display:inline-flex;gap:17px;align-items:center;padding:17px 22px 17px 25px;border-radius:9px;color:#fff;background:var(--blue);box-shadow:0 16px 30px #1768ff3b;font-size:15px;font-weight:700;text-decoration:none;transition:.25s}
.btn:hover{transform:translateY(-3px);background:#0b55d9}
.btn span{font-size:22px}
.mini-proof{color:#52637d;margin-top:26px;font-size:13px}
.mini-proof i{font-style:normal;color:var(--blue);font-weight:800;margin-right:7px}
.flow-card{width:min(510px,100%);padding:16px;background:#fff;border:8px solid #fff;border-radius:20px;box-shadow:0 35px 70px #073e8f25;position:relative}
.flow-card:after{content:'';position:absolute;border:1px solid #9cc3ff;width:540px;height:540px;border-radius:50%;z-index:-1;right:-90px;top:-70px}
.flow-top{height:34px;background:var(--deep);border-radius:10px 10px 4px 4px;color:#d2e3ff;display:flex;align-items:center;padding:0 12px;gap:5px;font-size:10px}
.flow-top span{width:7px;height:7px;border-radius:50%;background:#87b6ff}
.flow-top b{margin-left:auto;font-size:10px}
.incoming{background:#eff5ff;border-radius:13px 13px 13px 3px;padding:12px;margin:22px 0 9px;font-size:13px;max-width:265px}
.connector{height:18px;border-left:2px dashed #76aaff;margin-left:20px}
.bot{display:flex;align-items:flex-start;gap:10px;background:#f5f9ff;border:1px solid #cbdffd;border-radius:14px;padding:13px}
.bot>i{height:28px;width:28px;border-radius:9px;background:var(--blue);color:white;font-style:normal;display:grid;place-items:center}
.bot small{font-size:9px;letter-spacing:1px;color:var(--blue);font-weight:800}
.bot b{display:block;font-size:13px;margin-top:3px}
.bot p{font-size:12px;color:var(--muted);margin:3px 0 0}
.options{display:flex;gap:8px;padding:12px 3px}
.options span{font-size:11px;padding:7px 9px;border:1px solid #bed6fc;border-radius:20px;color:var(--blue);font-weight:700}
.lead{display:flex;gap:8px;padding:12px;border-radius:10px;background:var(--deep);color:white;font-size:11px}
.lead i{font-style:normal;color:#98c1ff}
.lead b{font-weight:500;color:#bcd8ff}
.strip{padding:20px 4vw;background:var(--blue);color:#fff;display:flex;justify-content:center;gap:28px;white-space:nowrap;overflow:hidden;font:800 12px Manrope;letter-spacing:1.4px}
.strip b{color:#bcd9ff}
.section{padding:120px 8vw}
.pain h2{max-width:850px;font-size:clamp(40px,4.5vw,65px)}
.pain-grid,.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:60px}
.pain-grid article{min-height:220px;border:1px solid var(--line);border-radius:15px;padding:25px;background:#fff}
.pain-grid span{font:800 12px Manrope;color:var(--blue)}
h3{font:800 23px Manrope;margin:58px 0 10px;letter-spacing:-1px}
.pain-grid p{font-size:14px;line-height:1.5;color:var(--muted)}
.solution{background:var(--pale);display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.solution h2,.plans h2,.benefits h2{font-size:clamp(39px,4vw,62px)}
.steps{background:#fff;padding:5px 26px;border-radius:17px;box-shadow:0 20px 40px #073e8e12}
.steps>div{display:flex;gap:16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.steps>div:last-child{border:0}
.steps b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:white;font:800 13px Manrope}
.steps span{font-size:13px;color:var(--muted)}
.steps strong{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.site-cross{padding-top:0;background:var(--pale)}
.cross-card{max-width:1160px;margin:auto;border-radius:23px;background:var(--deep);color:#fff;padding:clamp(34px,5vw,64px);display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;overflow:hidden;position:relative}
.cross-card:after{content:'';position:absolute;width:700px;height:700px;border:1px solid #29569a;border-radius:50%;right:-310px;top:-240px}
.cross-copy,.cross-visual{position:relative;z-index:1}
.cross-card .eyebrow{color:#9dc3ff}
.cross-card .eyebrow:before{background:#9dc3ff}
.cross-card h2{font-size:clamp(34px,3.6vw,53px);color:white;letter-spacing:-2.7px}
.cross-card p:not(.eyebrow){font-size:16px;line-height:1.6;color:#bdd1f4;max-width:530px;margin:21px 0 27px}
.cross-card a{font-size:14px;font-weight:800;color:#a5c9ff;text-decoration:none}
.cross-card a span{font-size:20px;margin-left:7px}
.cross-visual{height:265px}
.cross-browser{position:absolute;width:330px;height:238px;right:25px;top:12px;transform:rotate(4deg);background:#fff;border-radius:14px;padding:15px;box-shadow:0 25px 40px #020d2b53;color:var(--ink)}
.cross-browser>i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#80abeb;margin-right:4px}
.cross-browser>b{font:600 9px 'DM Sans';color:#8292ac;float:right}
.cross-browser strong{display:block;font:800 27px/1.05 Manrope;margin:36px 0 10px;letter-spacing:-1.7px}
.cross-browser strong em{font-style:normal;color:var(--blue)}
.cross-browser small{display:block;color:#70809a;font-size:10px}
.cross-browser u{display:inline-block;background:var(--blue);border-radius:5px;padding:8px 10px;margin-top:17px;color:#fff;font-size:9px;font-weight:700;text-decoration:none}
.cross-tag{position:absolute;left:0;bottom:14px;padding:12px 14px;border-radius:9px;background:#fff;color:var(--blue);box-shadow:0 15px 28px #020d2b4c;font:800 12px Manrope}
.plans{text-align:center}
.plan-grid{text-align:left}
.plan{padding:27px;border:1px solid var(--line);border-radius:17px;position:relative}
.plan.featured{background:var(--deep);color:#fff;box-shadow:0 20px 40px #061b5126;transform:translateY(-13px)}
.plan>span{font:800 11px Manrope;letter-spacing:1.4px;color:var(--blue)}
.featured>span{color:#a9c9ff}
.plan h3{font-size:24px;margin:30px 0 15px}
.price{display:block;color:var(--muted);font-size:12px}
.price b{font:800 35px/1 Manrope;color:var(--ink);letter-spacing:-2px}
.featured .price{color:#b9d0f9}
.featured .price b{color:white}
.plan p{min-height:80px;font-size:14px;line-height:1.5;color:var(--muted)}
.featured p{color:#c2d6fa}
.plan ul{margin:23px 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.featured ul{border-color:#274679}
.plan li{padding:10px 0;font-size:13px;border-bottom:1px solid var(--line)}
.featured li{border-color:#274679}
.plan li:before{content:'✓';color:var(--blue);font-weight:800;margin-right:8px}
.plan a{font-size:14px;font-weight:800;color:var(--blue);text-decoration:none}
.featured a{color:#a9c9ff}
.note{color:var(--muted);font-size:13px;margin-top:30px}
.benefits{background:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center}
.benefit-list>div{display:flex;gap:17px;padding:21px 0;border-top:1px solid var(--line)}
.benefit-list>div:last-child{border-bottom:1px solid var(--line)}
.benefit-list b{color:var(--blue);font-size:18px}
.benefit-list span{font-size:14px;color:var(--muted)}
.benefit-list strong{display:block;color:var(--ink);font-size:17px;margin-bottom:3px}
.final{text-align:center;color:white;background:var(--deep);padding:125px 8vw;position:relative;overflow:hidden}
.final:after{content:'';position:absolute;width:720px;height:720px;border:1px solid #285eb4;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.final>*{position:relative;z-index:1}
.final .eyebrow{color:#9bc2ff}
.final .eyebrow:before{background:#9bc2ff}
.final h2{font-size:clamp(41px,5vw,72px)}
.final h2 em{color:#9fc5ff}
.light{background:white;color:var(--blue);box-shadow:none;margin-top:30px}
.final small{display:block;margin-top:19px;color:#b9cff4;font-size:12px}
footer{padding:34px 8vw;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}
.float{position:fixed;right:23px;bottom:23px;z-index:5;background:var(--deep);color:#fff;text-decoration:none;border-radius:30px;padding:12px 15px;display:flex;align-items:center;gap:8px;font-size:13px;box-shadow:0 16px 30px #0d193047;transition:.25s}
.float i{font-style:normal;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--blue)}
.float.is-scrolling{opacity:.4;transform:scale(.93)}
.reveal{opacity:0;transform:translateY(26px);transition:.7s ease}
.show{opacity:1;transform:none}
.delay{transition-delay:.14s}
.delay2{transition-delay:.25s}
@media(max-width:800px){header{padding:0 6vw}
.top-cta{font-size:12px}
.hero{grid-template-columns:1fr;padding:135px 7vw 75px;gap:38px}
.hero h1{letter-spacing:-2.6px}
.flow-card{width:95%;margin:auto}
.flow-card:after{width:410px;height:410px;right:-65px}
.section{padding:83px 7vw}
.pain-grid,.plan-grid{grid-template-columns:1fr;margin-top:38px}
.pain-grid article h3{margin-top:32px}
.solution,.benefits{grid-template-columns:1fr;gap:42px}
.site-cross{padding-top:0}
.cross-card{grid-template-columns:1fr;gap:22px}
.cross-visual{height:230px}
.cross-browser{right:0;width:280px;height:210px}
.cross-browser strong{font-size:23px;margin-top:31px}
.cross-tag{left:0;bottom:0}
.plan.featured{transform:none}
.plan p{min-height:auto}
.strip{justify-content:flex-start}
.strip b{display:none}
.benefits{gap:35px}
.final{padding:90px 7vw}
.float b{display:none}
.float{right:16px;bottom:17px;padding:11px}
footer{display:block;padding:30px 7vw}
footer p{margin-top:12px}
}