:root { --ink:#152035; --muted:#62708a; --line:#e5eaf3; --purple:#5350d8; --purple-deep:#3432a8; --lavender:#f2f2ff; --paper:#fff; --surface:#f7f9fd; --green:#11a979; --max:1180px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",Arial,sans-serif; font-size:16px; line-height:1.55; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Manrope,"DM Sans",Arial,sans-serif; letter-spacing:-.04em; } .shell { max-width:var(--max); margin:0 auto; padding-left:26px; padding-right:26px; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); border-bottom:1px solid rgba(229,234,243,.8); backdrop-filter:blur(14px); } .nav { height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand img { display:block; width:182px; height:auto; } .nav-links { display:flex; align-items:center; gap:30px; } .nav-links a { color:#45516a; text-decoration:none; font-size:14px; font-weight:600; } .nav-links a:hover { color:var(--purple); } .menu-toggle { display:none; border:0; background:transparent; color:var(--ink); font:inherit; font-weight:700; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:48px; padding:0 21px; border:1px solid transparent; border-radius:10px; text-decoration:none; font-size:14px; font-weight:700; transition:transform .2s,box-shadow .2s,background .2s; } .button:hover { transform:translateY(-2px); } .button b { font-size:19px; line-height:1; } .button-small { min-height:39px; padding:0 15px; border-radius:8px; } .button-primary { color:#fff !important; background:var(--purple); box-shadow:0 12px 25px rgba(83,80,216,.22); } .button-primary:hover { background:var(--purple-deep); box-shadow:0 16px 31px rgba(83,80,216,.28); } .button-quiet { color:var(--ink); background:#fff; border-color:#dbe2ef; } .button-outline { color:var(--purple); background:#fff; border-color:#bdbdf1; } .button-light { color:var(--purple); background:#fff; }
.hero { min-height:665px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:46px; padding-top:64px; padding-bottom:76px; overflow:hidden; } .eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:17px; color:var(--purple); font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .eyebrow span { width:23px; height:2px; background:var(--purple); } h1 { max-width:650px; margin-bottom:21px; font-size:clamp(43px,5.2vw,68px); line-height:1.07; } h1 em { color:var(--purple); font-style:normal; } .hero-text { max-width:570px; color:var(--muted); font-size:18px; } .hero-actions { display:flex; gap:13px; margin:31px 0 22px; } .trust-line { color:#61708b; font-size:13px; } .check { display:inline-grid; place-items:center; width:18px; height:18px; margin-right:7px; color:#fff; background:var(--green); border-radius:50%; font-size:12px; font-weight:800; }
.hero-visual { position:relative; min-height:500px; display:grid; place-items:center; } .glow { position:absolute; width:470px; height:470px; border-radius:50%; background:radial-gradient(circle,rgba(97,94,242,.23),rgba(118,160,255,.07) 47%,transparent 70%); } .ui-window { position:relative; width:min(100%,510px); overflow:hidden; background:#fff; border:1px solid #e2e6f3; border-radius:17px; box-shadow:0 28px 65px rgba(43,51,108,.2); transform:rotate(1.5deg); } .window-top { display:flex; align-items:center; gap:6px; height:50px; padding:0 16px; border-bottom:1px solid #e8ebf3; font-size:11px; } .window-top>span { width:8px; height:8px; border-radius:50%; background:#d6daea; } .window-top strong { margin-left:7px; color:#33405a; } .window-top i { margin-left:auto; color:#159873; font-style:normal; font-weight:700; } .ui-body { padding:20px; background:#fbfcff; } .metric-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; padding:16px; border:1px solid #edf0f7; border-radius:11px; background:#fff; } .metric-row small,.rule-card small,.lead-toast small { display:block; color:#8a96ad; font-size:10px; } .metric-row b { display:block; margin-top:1px; font:800 29px/1 Manrope,sans-serif; } .metric-row em { margin-left:6px; color:#0c9d73; font-size:10px; font-style:normal; font-weight:700; } .spark { display:flex; align-items:flex-end; gap:4px; height:35px; } .spark i { width:7px; border-radius:4px 4px 1px 1px; background:#a8a7ee; } .spark i:nth-child(1){height:14px}.spark i:nth-child(2){height:21px}.spark i:nth-child(3){height:18px}.spark i:nth-child(4){height:29px}.spark i:nth-child(5){height:24px}.spark i:nth-child(6){height:34px;background:var(--purple)}.spark i:nth-child(7){height:27px}.rule-card { padding:16px; border:1px solid #e8eaf5; border-radius:11px; background:#fff; } .rule-heading { display:flex; align-items:center; gap:9px; padding-bottom:12px; border-bottom:1px solid #eff1f6; } .rule-heading b { display:block; font-size:12px; } .icon-box { display:grid; place-items:center; width:29px; height:29px; color:var(--purple); background:#edecff; border-radius:8px; font-weight:800; } .active-dot { margin-left:auto; padding:3px 7px; color:#149c77; background:#e3f8f1; border-radius:20px; font-size:9px; font-weight:800; } .members { display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:11px; } .members>div { display:flex; align-items:center; gap:7px; }.avatar{display:inline-grid;place-items:center;width:20px;height:20px;color:#fff;border-radius:50%;font-size:7px;font-weight:800}.a1{background:#8166d2}.a2{background:#eb826a}.a3{background:#39a797}.members strong{color:#707baa;font-size:10px}.lead-toast { display:flex; align-items:center; gap:9px; margin-top:16px; padding:11px; color:#38506d; background:#eefaf6; border:1px solid #d8f1e8; border-radius:10px; font-size:10px; }.lead-toast b{display:block;font-size:10px}.toast-icon{display:grid;place-items:center;width:27px;height:27px;color:#fff;background:#13a97e;border-radius:8px;font-size:15px}.lead-toast>span:last-child{margin-left:auto;color:#129c74;font-size:10px;font-weight:800;}
.proof-strip { padding:27px 0; color:#fff; background:#192645; } .proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .proof-grid div { padding-left:20px; border-left:1px solid rgba(255,255,255,.19); } .proof-grid b,.proof-grid span { display:block; } .proof-grid b { font:700 16px Manrope,sans-serif; }.proof-grid span{color:#abb8d4;font-size:12px;}
.section { padding-top:112px; padding-bottom:112px; } .section-intro { max-width:690px; margin-bottom:48px; }.section-intro h2{margin-bottom:15px;font-size:clamp(31px,3.7vw,47px);line-height:1.13}.section-intro p:not(.eyebrow){color:var(--muted);font-size:17px}.centered { margin-right:auto;margin-left:auto;text-align:center;}.centered .eyebrow { justify-content:center; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.feature { min-height:240px; padding:29px; border:1px solid var(--line); border-radius:15px; background:#fff; transition:transform .2s,box-shadow .2s;}.feature:hover{box-shadow:0 18px 35px rgba(30,47,91,.08);transform:translateY(-4px)}.feature-wide{grid-column:span 2;min-height:250px;background:linear-gradient(125deg,#f7f7ff,#fff)}.feature-icon{display:grid;place-items:center;width:39px;height:39px;margin-bottom:20px;color:var(--purple);background:#edecff;border-radius:10px;font:800 20px Manrope,sans-serif}.feature h3{margin-bottom:8px;font-size:19px}.feature p{margin:0;color:var(--muted);font-size:14px}.mini-flow{display:flex;align-items:center;gap:11px;margin-top:30px;font-size:12px;font-weight:700}.mini-flow span,.mini-flow strong{padding:8px 10px;border-radius:7px}.mini-flow span{color:#61708a;background:#fff;border:1px solid #e4e8f1}.mini-flow strong{color:#fff;background:var(--purple)}.mini-flow b{color:#a5afc0}
.workflow-section { padding:107px 0; background:var(--surface);border-top:1px solid #eef0f7;border-bottom:1px solid #eef0f7}.workflow{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}.steps{display:grid;gap:0;margin:0;padding:0;list-style:none}.steps li{display:grid;grid-template-columns:68px 1fr;gap:18px;padding:23px 0;border-bottom:1px solid #dde3ef}.steps li:first-child{padding-top:0}.steps li:last-child{border:0}.steps span{color:var(--purple);font:800 15px Manrope,sans-serif}.steps h3{margin:0 0 6px;font-size:18px}.steps p{margin:0;color:var(--muted);font-size:14px}
.pricing-section{padding-bottom:96px}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}.plan{position:relative;display:flex;flex-direction:column;padding:34px 29px 30px;border:1px solid #dfe5f0;border-radius:16px;background:#fff}.plan-featured{border:2px solid var(--purple);box-shadow:0 19px 35px rgba(83,80,216,.13)}.popular{position:absolute;top:-13px;right:24px;margin:0;padding:5px 11px;color:#fff;background:var(--purple);border-radius:20px;font-size:11px;font-weight:700}.plan-label{margin-bottom:14px;color:var(--purple);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.plan h3{margin-bottom:10px;font-size:23px}.plan-copy{min-height:45px;margin-bottom:23px;color:var(--muted);font-size:14px}.price{display:flex;align-items:baseline;margin-bottom:2px}.price sup{align-self:flex-start;margin-top:8px;color:#52617d;font-size:14px;font-weight:700}.price b{font:800 49px/1 Manrope,sans-serif;letter-spacing:-.07em}.price span{margin-left:7px;color:#78849b;font-size:13px}.users{margin:7px 0 23px;color:#5e6d87;font-size:13px;font-weight:700}.plan .button{width:100%;margin-bottom:25px}.plan ul{display:grid;gap:11px;margin:0;padding:0;list-style:none;color:#56637c;font-size:13px}.plan li{position:relative;padding-left:21px}.plan li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}.pricing-note{margin:26px 0 0;color:#7d89a0;text-align:center;font-size:12px}
.cta{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:93px;padding:57px 60px;color:#fff;background:linear-gradient(120deg,#3a37a9,#605df0);border-radius:19px;box-shadow:0 23px 40px rgba(55,51,163,.19)}.cta .eyebrow{color:#bcbcff}.cta .eyebrow span{background:#bcbcff}.cta h2{max-width:650px;margin-bottom:11px;font-size:clamp(30px,3.5vw,44px);line-height:1.14}.cta p:not(.eyebrow){max-width:650px;margin:0;color:#d4d4ff}.cta .button{flex:0 0 auto}
footer{padding:27px 0;border-top:1px solid var(--line)}.footer-content{display:flex;align-items:center;gap:22px;color:#8490a5;font-size:12px}.footer-content img{width:160px;height:auto}.footer-content span:last-child{margin-left:auto}.footer-credit{display:block;width:100%;margin:20px 0 0;padding:18px 26px 0;border-top:1px solid var(--line);color:#8490a5;text-align:center!important;font-size:12px}.footer-credit a{color:var(--purple);font-weight:700;text-decoration:none}.footer-credit a:hover{text-decoration:underline}
@media (max-width:850px){.hero{grid-template-columns:1fr;padding-top:70px}.hero-visual{min-height:450px}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-wide{grid-column:span 2}.workflow{grid-template-columns:1fr;gap:30px}.plans{grid-template-columns:1fr}.plan{max-width:520px;margin:auto;width:100%}.cta{align-items:flex-start;flex-direction:column}.proof-grid{grid-template-columns:repeat(2,1fr);row-gap:22px}.nav-links{gap:18px}}
@media (max-width:620px){.shell{padding-left:18px;padding-right:18px}.nav{height:67px}.brand img{width:177px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:67px;right:18px;left:18px;flex-direction:column;align-items:stretch;gap:0;padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 35px rgba(24,39,76,.15)}.nav-links.is-open{display:flex}.nav-links a{padding:11px 12px}.hero{min-height:auto;padding-top:55px;padding-bottom:55px}.hero-text{font-size:16px}.hero-actions{flex-direction:column;align-items:stretch}.ui-window{transform:none}.hero-visual{min-height:410px}.proof-grid{grid-template-columns:1fr 1fr;gap:18px}.proof-grid div{padding-left:12px}.section{padding-top:74px;padding-bottom:74px}.feature-grid{grid-template-columns:1fr}.feature-wide{grid-column:auto}.feature{min-height:auto}.mini-flow{flex-wrap:wrap}.workflow-section{padding:74px 0}.cta{margin-bottom:58px;padding:37px 29px}.footer-content{flex-wrap:wrap}.footer-content span:last-child{margin-left:0}.price b{font-size:45px}}