:root { --ink:#10203c; --blue:#1769db; --sky:#eaf4ff; --slate:#60708a; --rule:#d9e2ee; --soft:#f5f8fc; --teal:#0d9d9a; --white:#fff; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:#fff; color:var(--ink); font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; } a { color:inherit; text-decoration:none; } .wrap { width:min(1170px,calc(100% - 48px)); margin:auto; } .skip { position:absolute; left:-9999px; } .skip:focus { left:10px; top:10px; z-index:10; padding:10px; color:#fff; background:var(--blue); }
    header { position:relative; z-index:3; background:#fff; border-bottom:1px solid #ebeff5; } .nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:78px; gap:25px; } .brand { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:850; letter-spacing:-.9px; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; border:2px solid var(--blue); border-radius:50%; color:var(--blue); font-size:14px; } .brand span { color:var(--blue); } nav { display:flex; gap:27px; color:#4d5c73; font-size:13px; } nav a { padding:6px 0; border-bottom:1px solid transparent; } nav a:hover { border-color:var(--blue); color:var(--blue); } .nav-action { justify-self:end; color:var(--blue); font-size:13px; font-weight:800; }
    .hero { position:relative; overflow:hidden; padding:70px 0 0; background:#fff; } .hero:before { content:""; position:absolute; top:42px; left:calc(50% + 140px); width:600px; height:600px; border-radius:50%; background:#edf7ff; } .hero-top { position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:65px; align-items:center; padding-bottom:73px; } .kicker { display:flex; align-items:center; gap:8px; color:#4f6583; font-size:11px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; } .kicker i { display:block; width:7px; height:7px; background:var(--teal); border-radius:50%; } h1 { max-width:590px; margin:17px 0 21px; font-size:clamp(48px,5.5vw,75px); line-height:.95; letter-spacing:-.073em; } h1 em { color:var(--blue); font-style:normal; } .intro { max-width:510px; margin:0; color:var(--slate); font-size:18px; line-height:1.65; } .hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:31px; } .primary { display:inline-flex; align-items:center; gap:10px; padding:14px 18px; background:var(--blue); color:#fff; border-radius:6px; font-size:14px; font-weight:800; box-shadow:0 10px 20px rgba(23,105,219,.19); transition:.2s; } .primary:hover { transform:translateY(-2px); background:#0e59bf; } .under-link { color:#243857; border-bottom:1px solid #9cadc2; padding-bottom:3px; font-size:13px; font-weight:750; } .under-link:hover { color:var(--blue); border-color:var(--blue); } .helper { margin:20px 0 0; color:#8390a2; font-size:12px; }
    .canvas { position:relative; height:435px; } .canvas:after { content:""; position:absolute; z-index:0; width:85%; height:85%; right:0; bottom:0; border:1px solid #d7e7f9; border-radius:16px; background:rgba(255,255,255,.6); animation:soft-pulse 5s ease-in-out infinite; } .laptop { position:absolute; z-index:1; top:18px; left:0; width:89%; border:8px solid #172741; border-radius:14px 14px 4px 4px; overflow:hidden; box-shadow:0 28px 42px rgba(31,57,92,.18); background:#fff; animation:float-laptop 6.5s ease-in-out infinite; } .laptop:after { content:""; position:absolute; left:30%; bottom:-11px; width:42%; height:11px; border-radius:0 0 16px 16px; background:#172741; } .windowbar { display:flex; justify-content:space-between; align-items:center; height:34px; padding:0 13px; border-bottom:1px solid #edf0f4; color:#8794a7; font-size:8px; } .windowbar strong { color:#196ada; font-size:10px; letter-spacing:.08em; } .interface { display:grid; grid-template-columns:95px 1fr; height:274px; } .interface aside { padding:12px 8px; background:#f7f9fc; border-right:1px solid #edf0f4; } .interface aside b { display:block; padding:7px; margin-bottom:4px; border-radius:4px; color:#607088; font-size:8px; font-weight:600; } .interface aside b:first-child { color:#1769db; background:#e8f1ff; font-weight:850; box-shadow:inset 2px 0 #1769db; } .work { padding:16px; } .work-head { display:flex; justify-content:space-between; align-items:start; } .work-head h3 { margin:0; font-size:15px; letter-spacing:-.04em; } .work-head p { margin:2px 0 0; color:#8b96a5; font-size:8px; } .chip { padding:5px 7px; border-radius:12px; color:#56708f; background:#eff6ff; font-size:7px; animation:chip-glow 3s ease-in-out infinite; } .widgets { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:13px; } .widget { min-height:58px; padding:8px; border:1px solid #e7edf5; border-radius:5px; animation:widget-in .7s both; } .widget:nth-child(2) { animation-delay:.1s; } .widget:nth-child(3) { animation-delay:.2s; } .widget:nth-child(4) { animation-delay:.3s; } .widget span { display:block; color:#8793a5; font-size:7px; } .widget strong { display:block; margin-top:5px; font-size:10px; } .widget:nth-child(1) strong { color:#1769db; } .activity { display:grid; grid-template-columns:1.25fr .75fr; gap:7px; margin-top:7px; } .activity > div { min-height:112px; padding:10px; border:1px solid #e7edf5; border-radius:5px; } .activity label { color:#62718a; font-size:8px; font-weight:750; } .curve { position:relative; height:61px; margin-top:11px; overflow:hidden; border-bottom:1px solid #dae3ef; background:linear-gradient(160deg, transparent 48%,#a7cdfa 49%,#a7cdfa 51%,transparent 52%),linear-gradient(145deg,transparent 48%,#1769db 49%,#1769db 51%,transparent 52%); } .curve:after { content:""; position:absolute; top:0; bottom:0; left:-32%; width:22%; transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent); animation:scan 4.2s ease-in-out infinite; } .mini-action { margin-top:6px; padding:7px; border-radius:4px; background:#f5f8fc; color:#65758e; font-size:7px; transition:transform .2s ease,background .2s ease; } .mini-action:hover { transform:translateX(3px); background:#eaf3ff; } .mobile { position:absolute; z-index:2; right:0; bottom:-11px; width:145px; padding:5px; border:6px solid #172741; border-radius:22px; background:#fff; box-shadow:0 22px 35px rgba(31,57,92,.22); animation:float-phone 5.2s ease-in-out infinite; } .notch { width:40px; height:4px; margin:0 auto 7px; border-radius:99px; background:#172741; } .mobile-screen { min-height:217px; padding:10px; border-radius:13px; background:#f6f9fe; } .mobile-screen b { font-size:10px; } .mobile-screen small { display:block; color:#8b98aa; font-size:7px; } .mobile-card { margin-top:10px; padding:9px; border-radius:7px; background:#fff; box-shadow:0 6px 12px rgba(31,57,92,.07); color:#7a899e; font-size:7px; } .mobile-card strong { display:block; margin-top:5px; color:#1769db; font-size:11px; }
    .proof { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .proof-inner { display:grid; grid-template-columns:1.1fr repeat(3,1fr); } .proof-title,.proof-item { min-height:118px; padding:24px; border-right:1px solid var(--rule); } .proof-item:last-child { border:0; } .proof-title { display:flex; align-items:center; font-size:18px; font-weight:750; line-height:1.3; } .proof-item span { display:block; color:#8491a4; font-size:10px; font-weight:800; letter-spacing:.08em; } .proof-item b { display:block; margin-top:13px; font-size:16px; letter-spacing:-.03em; }
    .area { padding:105px 0; } .heading { display:grid; grid-template-columns:1fr .78fr; gap:60px; align-items:end; margin-bottom:45px; } .heading h2 { max-width:650px; margin:12px 0 0; font-size:clamp(36px,4vw,55px); line-height:1.01; letter-spacing:-.065em; } .heading p { margin:0; color:var(--slate); font-size:16px; } .functions { display:grid; grid-template-columns:1.35fr .65fr; gap:54px; } .feature-list { border-top:1px solid var(--rule); } .feature { display:grid; grid-template-columns:70px 1fr auto; gap:22px; align-items:center; padding:23px 0; border-bottom:1px solid var(--rule); } .feature .num { color:#7990af; font-size:12px; font-weight:800; } .feature h3 { margin:0; font-size:22px; letter-spacing:-.045em; } .feature p { margin:3px 0 0; color:var(--slate); font-size:13px; } .feature .arr { color:var(--blue); font-size:23px; } .side-note { align-self:start; padding:29px; background:var(--sky); border-radius:9px; } .side-note h3 { margin:38px 0 10px; color:#15335e; font-size:27px; line-height:1.08; letter-spacing:-.05em; } .side-note p { margin:0; color:#547095; font-size:14px; } .side-note a { display:inline-block; margin-top:32px; color:#1769db; font-size:13px; font-weight:800; }
    .benefits { padding:91px 0; background:#0c1b36; color:#fff; } .benefits .heading h2 { color:#fff; } .benefits .heading p { color:#b4c4dc; } .benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid #344763; border-left:1px solid #344763; } .benefit { min-height:210px; padding:25px; border-right:1px solid #344763; border-bottom:1px solid #344763; } .benefit i { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#1c3762; color:#82b7ff; font-style:normal; } .benefit h3 { margin:49px 0 6px; font-size:20px; letter-spacing:-.04em; } .benefit p { margin:0; color:#b5c4d7; font-size:13px; }
    .end { padding:88px 0; background:var(--soft); } .end-box { display:flex; align-items:center; justify-content:space-between; gap:38px; padding:48px; border-radius:10px; background:#fff; box-shadow:0 13px 35px rgba(23,47,82,.07); } .end-box h2 { max-width:615px; margin:10px 0 0; font-size:clamp(34px,4vw,51px); line-height:1.02; letter-spacing:-.06em; } .end-box .primary { flex:0 0 auto; } footer { padding:26px 0; border-top:1px solid var(--rule); color:#7c899b; font-size:12px; } .footer { display:flex; align-items:center; justify-content:space-between; gap:15px; } .footer strong { color:var(--ink); font-size:16px; } .footer strong span { color:var(--blue); }
    [data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); } [data-reveal].visible { opacity:1; transform:none; }
    @keyframes float-laptop { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-7px) rotate(-.25deg); } } @keyframes float-phone { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-11px) rotate(1deg); } } @keyframes soft-pulse { 0%,100% { transform:scale(1); opacity:.7; } 50% { transform:scale(1.025); opacity:1; } } @keyframes widget-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } } @keyframes chip-glow { 0%,100% { box-shadow:0 0 0 rgba(23,105,219,0); } 50% { box-shadow:0 0 0 4px rgba(23,105,219,.09); } } @keyframes scan { 0% { left:-30%; } 55%,100% { left:115%; } }
    @media(max-width:850px) { .nav { grid-template-columns:1fr auto; } nav { display:none; } .hero-top,.heading,.functions { grid-template-columns:1fr; } .hero-top { gap:35px; } .canvas { max-width:650px; width:100%; margin:auto; } .proof-inner { grid-template-columns:1fr 1fr; } .proof-title { grid-column:span 2; border-bottom:1px solid var(--rule); } .heading { gap:16px; } }
    @media(max-width:560px) { .wrap { width:calc(100% - 30px); } .nav { min-height:66px; } .nav-action { font-size:12px; } h1 { font-size:48px; } .intro { font-size:16px; } .hero { padding-top:50px; } .canvas { height:327px; } .laptop { width:91%; border-width:5px; } .interface { grid-template-columns:60px 1fr; height:205px; } .interface aside { padding:7px 3px; } .interface aside b { padding:5px 3px; font-size:6px; } .work { padding:9px; } .work-head h3 { font-size:10px; } .widgets { grid-template-columns:1fr 1fr; margin-top:8px; } .widget { min-height:38px; padding:5px; } .widget:nth-child(n+3) { display:none; } .activity { grid-template-columns:1fr; margin-top:5px; } .activity > div { min-height:68px; padding:6px; } .activity > div:last-child { display:none; } .curve { height:32px; margin-top:5px; } .mobile { width:100px; border-width:4px; border-radius:16px; } .mobile-screen { min-height:150px; padding:7px; } .mobile-card { margin-top:7px; padding:6px; } .proof-inner { grid-template-columns:1fr; } .proof-title { grid-column:auto; } .proof-title,.proof-item { min-height:94px; padding:19px; border-right:0; border-bottom:1px solid var(--rule); } .area,.benefits { padding:68px 0; } .feature { grid-template-columns:40px 1fr auto; gap:12px; } .feature h3 { font-size:19px; } .side-note { margin-top:-20px; } .benefit-grid { grid-template-columns:1fr; } .benefit { min-height:170px; } .benefit h3 { margin-top:30px; } .end { padding:60px 0; } .end-box { align-items:flex-start; flex-direction:column; padding:27px; } .footer { align-items:flex-start; flex-direction:column; } }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }